Making a Sampler to Create and Test WA Themes

Let's make a sampler page or two, so that creating your own themes will be easier. Depending on your preferences and coding skills you may use a little or all of these tips.  

Examples

   

Basic Setup

WA Containers, Headers, and Codes

The Codex will have the most recent lists. Here are pages for the most common aspects you will need. If you are doing an official theme to submit to WA, you'll need to go through all the things in the WA codex and keep up with the #dev-changelog on the WA server.    

Why Use a Statblock?

Pros

  • Drop a statblock into your test page and you don't have to worry about updating each world's theme page when something new from WA drops. Just update it in one place.
  • An organized set of examples can help you organize your code. This will help tremendously when you hit several thousand lines of code.
  • Cons

  • Statblocks are more picky about spaces and returns.
  • A few things don't quite work the same in statblocks. Make a list of those. The main one is the article block.
  • Some items need '.user-css .statblock' {class, index or element} or the appropriate area ('.user-css-extended' or the like) added to the styling for that aspect.
  • Advanced Setup

    Jump Menu

    If your sample page is huge like mine, a navigatable menu is a life saver.
  • articletoc (see the menu at the top right)
  • jump menus
  • + Floating Vocab Jump Menu (BBCode + CSS Container)
    Generic article | Dec 16, 2019
    Media sizes + Modifying the Vocab Jump Menu for Smaller Screens
    HH: CSS Tips and Tricks | Feb 2, 2020
     

    Bootstrap

    Bootstrap Containers
    Generic article | Dec 16, 2019
     

    Your Containers and Fun Stuff

  • invisible character - non space [ ‏‏‎ ] (copy what's between the brackets)
  • examples of the containers you use
  • subgroups - so you don't have to hunt them down
  • color palettes
  • CSS + BOOTSTRAP: Color Palette for Themes
    HH: CSS Tips and Tricks | Oct 30, 2020
  • code snippets for easy copypasta *Note that comments and close parenthesis followed by ; don't show up.* You'll want to either skip comments or use / * and * /, and remember to take the spaces out when you paste the code.
  • [code] some non WA code like CSS [/code]
    If you have WA Code put [code] [noparse]some WA code[/noparse][/code]
  • a list of Font Awesome icons you like to use for easy copypasta
  •    
    [section: far fa-heart] [/section] 
    
  • For help with CSS Selectors (aka - what does that '.' or '#' mean in the CSS code?) check out W3 Schools Selectors reference.
  • The Basics of this tutorial are available to Journeymen +

    For Guild Members

    Journeyman 30x30.png


    CSS modification is for guild members (Journeyman and above). If you're not subscribed at that level and wish to do so, you can on the membership page.


    (Journeyman icon property of World Anvil.)

    Containers and Sections are for Grandmaster +

    For Grandmasters +

    Grandmaster Icon


    Containers and Sections are for guild members Grandmaster and above. If you're not subscribed at that level, you can upgrade your membership on your account page.


    (Grandmaster icon property of World Anvil.)

    CSS Reference


    If you'd like to learn more about CSS, check out FreeCodeCamp and w3schools' CSS Reference.
     
    The WA Codex is a good place to start learning about how to play in WA.
     
    WA's discord #guild-css-help channel is also great. I hang out there just to learn from what people ask about.

    Bootstrap Grid Reference


    W3 Schools Grid Reference


    Cover image: Hacks and Help Cover by krzysztof-m

    Comments

    Please Login in order to comment!
    Powered by World Anvil