API tools faq
paste
Zeppasaurus

Call of the Wild Edit Guide

Zeppasaurus
Mar 14th, 2022 (edited)
34
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.24 KB | None | 0 0
raw download clone embed print report
  1. Call of the Wild Editing Guide
  2.  
  3.  
  4. If you’re unfamiliar with CSS or HTML, layouts can be intimidating. Hopefully this guide helps you modify CotW to your liking!
  5.  
  6.  
  7. Table of Contents:
  8. 1. Recommended Links
  9. 2. Variables & CSS
  10. 3. HTML Checklist
  11.  
  12.  
  13. 1. Recommended Links
  14.  
  15. https://www.furry-paws.com/forum/topic/239135 — CotW’s forum post on Furry-Paws. There are three (minimally) different versions!
  16.  
  17. nickpic.host — This is my preferred free image hosting service.
  18.  
  19. unsplash.com — I source the majority of my background and banner images from here. Photos from Unsplash can be downloaded and used for commercial and non-commercial purposes for free, no permission or attribution required (though the latter is always appreciated).
  20.  
  21. flaticon.com — Flaticon has thousands of free icons for commercial or personal use with attribution. It might come in handy if you want to get some creative Spotlights going!
  22.  
  23. google.com/search?q=color+picker — Helpful for finding HEX colors and their RGB equivalent.
  24.  
  25.  
  26. 2. Variables & CSS
  27.  
  28. All of Call of the Wild’s variables can be found at the top of the CSS (Your Guild > Manage > Settings > CSS Styles).
  29.  
  30. If something is CAPS, it can be found in your guild’s Colors setting (Your Guild > Manage > Colors).
  31.  
  32. If something is aLtErNaTE, it can be found in your guild’s HTML (Your Guild > Manage > Settings> Description).
  33.  
  34. --bgcolor: Changes the background color for the text boxes. If you leave this variable blank, it will inherit the CONTENT BACKGROUND color.
  35.  
  36. --bordercolor: Changes the color of the border around the text boxes. If you leave this variable blank, it will inherit the CONTENT TEXT color.
  37.  
  38. --borderbr: Changes the border radius of the border around the text boxes. Set this to 0px if you want the borders to be square.
  39.  
  40. --bannertxt: Changes the style of the text for the banner area. 900 is the font's weight, 25px is the font's size, and Times New Roman is the default font.
  41.  
  42. --bannertxtcolor: Changes the color of the text for the banner area. If you leave this variable blank, it will inherit the CONTENT TEXT color.
  43.  
  44. --bannertop: Changes the top margin of the banner text. You may have to play around with this depending on the length of your guild's name.
  45.  
  46. --bannerleft: Changes the left margin of the banner text. You may have to play around with this depending on the length of your guild's name.
  47.  
  48. --bannerimg: Changes the banner image. Your banner image will automatically resize to cover the banner area.
  49.  
  50. --h1txt: Changes the style of your H1 text. You can delete the bold and italic part to make the text appear normally. 16px is the font's size and Times New Roman is the default font.
  51.  
  52. --h1color: Changes the color of your H1 text. If you leave this variable blank, it will inherit the CONTENT TEXT color.
  53.  
  54. --h2txt: Changes the style of your H2 text. You can delete the italic part to make the text appear normally. 16px is the font's size and Times New Roman is the default font.
  55.  
  56. --h2color: Changes the color of your H2 text. If you leave this variable blank, it will inherit the CONTENT TEXT color.
  57.  
  58. --scrollbgcolor: Changes the track (background) color of the scroll bars in the text boxes. If you leave this variable blank, it will inherit the CONTENT BACKGROUND color.
  59.  
  60. --scrollcolor: Changes the color of the top part of the scroll bars in the text boxes. If you leave this variable blank, it will inherit the CONTENT BACKGROUND color.
  61.  
  62. --scrollbr: Changes the border radius of the scroll bar track and scroll bar. Set this to 0px if you want them to be square.
  63.  
  64.  
  65. The below items are not variables, meaning they are in various spots in the CSS. I recommend using Control or Command + F to more easily locate them. It’s not necessary to change these things to give the layout a fresh look, but here’s a little help if it’s something you want to do!
  66.  
  67. width: 8px This will change the width of your scrollbar. In my opinion, small looks best with this layout. However, your tastes may be different!
  68.  
  69. border: solid If you don’t want a solid border, you can do a “dotted”, “dashed”, or “double” border! You can also put “none” if you do not want borders, but you may have to adjust the various margins and sizes throughout the layout.
  70.  
  71. text-align: justify This changes the alignment of your text. You can change it to “center”, “left”, or “right” if you do not want it to be justified. You can also delete these lines entirely and your text will assume the default “left” alignment.
  72.  
  73. text-transform: uppercase There are a few places that this shows up, like the banner text and H2 tag. You can put “uppercase” or “lowercase” to automatically transform your text, or you can put “none”/delete it entirely if you do not wish for your text to transform.
  74.  
  75. animation: If you want to change the speed of your marquee, you will have to search for this and change the <b>40s</b> to another number. I wouldn’t recommend changing other marquee-related settings unless you know what you’re doing.
  76.  
  77.  
  78. HTML Checklist
  79.  
  80. The following list goes top-down in order of the HTML. If you’re having trouble locating something, you can Command or Control + F and search for any of the below items in the HTML (Your Guild > Manage > Settings > Description).
  81.  
  82. If something is aLtErNaTe it can be found in your guild’s CSS (Your Guild > Manage > Settings > CSS Styles).
  83.  
  84. If something is CAPS, it can be found in your guild’s Colors setting (Your Guild > Manage > Colors).
  85.  
  86. div class="bannertext" — Change the text within this DIV to your guild's name. You will likely have to edit two variables depending on length (--BANNERTOP and --BANNERLEFT). Alternatively, you can leave this blank if you don't want any text to appear.
  87.  
  88. Spotlight # (eg, Spotlight 1, Spotlight 2, etc)</span> — Change the link itself, the spotlight title, and the spotlight image. Any image you use should automatically resize. I would recommend using square or circular images. Alternatively, you can remove all of the links and use this box like any other text box.
  89.  
  90. div class="credits" — Per my rules, you are free to remove my personal credits. However, if you do not own the rights to your selected images, this is where you can put the appropriate credits. Images from Unsplash do not require attribution.
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!