EASIER CLAN PAGES
This is a quick list of some coding practices that will make your clan layouts easy for everyone to edit, hopefully!
This is a quick list of some coding practices that will make your clan layouts easy for everyone to edit, hopefully!
- Put your CSS in a second zone/widget.
- When you make a clan page, add two zones. The top zone can have the HTML with all of the characters listed in it; the second zone should just have the CSS styles and any JS/jQuery you're using. When you're editing the top zone, it's less cluttered and easier to find where you want to add cats - there isn't CSS at the top or bottom to scroll through!
- While you're making the layout, it may be more convenient to keep the CSS in the same zone or use Codepen. After the layout is complete you can move it to a second zone.
- To add another widget, scroll to the top of the zone and click 'Add Widget' then find the 'HTML Box' and all that. If you want to add a new zone, that can be done in the HTML tab.
- Use custom tags to format cats easily.
- You can make your own tags to help with formatting. Instead of a messy code like this:
<b><span style="font-size:12pt;color:red;text-decoration:underline;">charcter name here</span></b> You can write<catname>character name here</catname>. Your CSS will look like this:<style> catname { font-weight: bold; font-size: 12pt; color: red; text-decoration: underline; } </style> - Use classes for easy styling!
- If you're going to be repeating a section of code, use classes to save yourself some trouble! For example, if your boxes for warriors, apprentices, and kits have similar formatting, you can just use one class for all of them.
- This is really useful for setting what your character biographies will look like, and using the above tip on custom tags for the names!
- Example: Check out the SwiftClan archive page here. This page also uses tip one (a separate HTML Box for CSS and JS).