Advertisement
watsoons

Signature #1 | Watson

Mar 18th, 2023
64
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.98 KB | None | 0 0
  1. La signature est trop longue pour la majorité des forums, il vous faudra donc l'enregistrer dans une page HTML sur un forum test ou un hébergeur de codes. Les couleurs de la signature sont facilement modifiables et sont toutes au même endroit, au début de la fiche dans la partie "root". Les icons sont aussi modifiables. La seule chose que je demande c'est que vous ne retiriez pas les crédits.
  2.  
  3. ------------------------------------------------------------------------- Code à coller dans une page HTML:
  4. <style type="text/css">:root {
  5. --blanc: #ffffff;
  6. --color1: #c69362;
  7. --colordark: #b28457;
  8. --colorb: #85a587;
  9. --colorc: #769479;
  10.  
  11. }
  12.  
  13. .container {
  14. width: 400px;
  15. height: 305px;
  16. display: flex;
  17. flex-wrap: wrap;
  18. flex-direction: rows;
  19. justify-content: center;
  20. align-items: flex-start;
  21. align-content: flex-start;
  22. gap: 5px;
  23. }
  24. .icon {
  25. color: var(--blanc);
  26. text-align: center;
  27. font-size: 25px;
  28. margin-top: 10px;
  29. text-shadow: 1px 2px var(--colordark);
  30. }
  31. .square {
  32. width: 50px;
  33. height: 50px;
  34. background-color: var(--color1);
  35. border: solid 2px var(--colordark);
  36. }
  37. .bloc:hover {
  38. background-color: var(--colorb);
  39. border: solid 2px var(--colorc);
  40. color: var(--blanc) !important;
  41. }
  42.  
  43. .banner {
  44. height: 25px;
  45. width: 378px;
  46. background-color: var(--colorb);
  47. border: solid 2px var(--colorc);
  48. }
  49. .banner:hover {
  50. background-color: var(--color1);
  51. border: solid 2px var(--colordark);
  52. }
  53. .intro {
  54. color: var(--blanc);
  55. text-align: center;
  56. font-size: 16px;
  57. font-weight: 700;
  58. margin-top: 3px;
  59. text-shadow: 1px 2px var(--colorc);
  60. }
  61. a:link, a:visited, a:active {
  62. text-decoration: none;
  63. color: var(--color1);
  64. }
  65. a:hover {
  66. text-decoration: none;
  67. color: var(--blanc);
  68. }
  69. .lien {
  70. text-align: center;
  71. font-size: 20px;
  72. margin-top: 13px;
  73. font-weight: 700;
  74. }
  75. .bloc {
  76. height: 50px;
  77. width: 125px;
  78. background-color: var(--blanc);
  79. border: solid 2px var(--color1);
  80. color: var(--color1);
  81. }</style><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><script src="//pull.cappuccicons.com/cpf.js"></script><div class="container"><img src="IMG" style="width: 378px; margin-top: 10px; border: 2px solid var(--color1);"><div class="banner"><div class="intro">
  82. <a href="LIEN" style="color: var(--blanc); font-size: 14px;">CITATION</a></div></div>
  83. <div class="square"><div class="icon"><i class="cp cp-brush"></i></div></div>
  84. <a href="LIEN1"><div class="bloc"><div class="lien">Galerie</div></div></a><div class="square"><div class="icon"><i class="cp cp-shopping-cart"></i></div></div>
  85. <a href="LIEN2"><div class="bloc"><div class="lien">Boutique</div></div></a><div class="square"><div class="icon"><i class="cp cp-computer"></i></div></div>
  86. <a href="LIEN3"><div class="bloc"><div class="lien">Codes</div></div></a><div class="square"><div class="icon"><i class="cp cp-question"></i></div></div>
  87. <a href="LIEN4"><div class="bloc"><div class="lien">Forumspring</div></div></a><div class="banner"><div class="intro"><a href="https://www.pub-rpg-design.com/t139483-signature-1-watson#2382483" style="color: var(--blanc); font-size: 14px;">(c) WATSON</a></div></div>
  88.  
  89. ------------------------------------------------------------------------- Code à coller dans votre signature:
  90.  
  91. <center>
  92. <iframe style="width: 400px; height: 305px;" frameborder="no" scrolling="no" src="LIEN DE LA PAGE HTML"> </iframe>
  93. </center>
  94.  
  95. ------------------------------------------------------------------------- Modifier les icons:
  96. Les icons se trouvent dans ces parties du code:
  97.  
  98. <i class="cp cp-question"></i>
  99.  
  100. Vous pouvez trouver la liste complète des icons utilisables ici: https://cappuccicons.com
  101.  
  102. Pour modifier l'icon, il suffit de remplacer le nom (ici "question") par le nom de l'icon qui vous intéresse:
  103. "cp cp-question"
  104. Remplacer une des icons par une icon de noisette sera donc:
  105. <i class="cp cp-acorn"></i>
  106.  
  107. N'hésitez pas à me contacter si vous avez des questions!
  108.  
  109.  
  110.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement