Welcome back, worldsmiths! We have a new batch of tricks for you to use at the forge. Are you ready?

What we’ll cover:

Respecting Other People’s Work

As you learn how CSS and Inspect work, you’ll come across some spectacular effects and be able to peek at the code. Here’s the issue, that code took someone hard work and time to write. The more amazing the effect, the more time and effort involved. While I like to give away tips and tricks, not everyone is happy to do so.

“But that effect is so cool!!!!’ — I get it. Really. If you admire the work, reach out to that person. Find their WA profile and see how to contact them. Many people have links for twitter and discord. Some people leave notes in their code. Case in point, as I peeked at Ademal’s CSS code, I found a note about letting them know. They also included links to their Ko-fi and Patreon account. So, I did just that. The best part? I got to know Ademal a little better, and they learned what part of the code I was most interested in.

All of this to say, please ask. The World Anvil community is amazing. Many people I’ve chatted with have been flattered and are happy to share. But it’s best to be sure! Checking with the creators you admire is part of what will help keep World Anvil awesome.

CSS Variables: For Journeyman +

Before we get into the tricks, lets talk a bit about a handy aspect of CSS. If you’ve done any programming before, you’re likely familiar with the concept.

Why use variables?

Let’s say we’re working on our color scheme. We have a single color for our headers, borders on boxes, and links. But we’re not sure about it. Using a variable would allow us to change it in one place. Yet, on the page it would change in all those classes at one time. Easy!

Also, variables can make your code more readable. If you have 20 lines of code, it’s not hard to keep things straight. But as you tinker more with your CSS, you’ll build up a nice set of tricks. Soon you’ll have hundreds or thousands of lines of code. Navigate that puppy without variables, I dare you.

How to define a variable

--varName: some_attribute_info;

Don’t use spaces in names. Use camel caps (camelCapsUsesCapsOnFirstLetter) or dashes between the words.

Example: Let’s make a variable for our main accent color.

--main-color: #89012F; /* a red that tends more toward purple */

Where to Put Variables

Put your variables in the CSS before the section you’ll use it. If you have variables that will be used everywhere you can put them in * or :root.

:root {
Your vars go here
}

How To Use Variables

We’ll use the var() function to get the value stored in the variable. Like this:

var(--varName)

Example: Let’s set our H1 and H2 header text and links color with a variable.

.user-css h1, .user-css h2, .user-css a {
color: var(--main-color);
}

If we decide we want blue instead, we just change it at the variable level.

* Please note: CSS doesn’t bring in information. You need another language like JavaScript to do things such as retrieving the window size. Though, you can use the calc() function. It’s limited but handy.

Let’s get to the code!

Floating ‘To Top’ Link: For Journeyman +

If you have long articles, it might help your readers to be able to hop back to the top of the page for easy navigation of your world.

Put this BBCode line at the top of your article to create an anchor. Edit as needed. (See the Codex for more info on anchors.)

[h1|top]Name of Top Content[/h1] /* the ‘top’ anchor is where we’ll jump to */

Next, edit this line if you wish and put it in your page’s section->’Sidebar: Over panel content’.

Note: Putting the BBCode that you’ll float in ‘Sidebar: Over panel content’ will allow you to have control where the floating link goes. The link won’t get stuck inside another HTML div element on a lower section of the page. Also, it won’t change locations if you add more information to the article.

[h4|float][url=#top]TO TOP[/url][h4] /* ‘float’ is the anchor that we give to modify the CSS for this header/link. ‘#top’ tells the link where to go */

Finally, put this in your css and edit as you see fit.

/* -- a floating item positioned in the upper left corner -- */
.user-css #float{
   position: fixed; /* it will stay in the same place when you scroll */
   top: 150px; /* placed this many pixels from the top */
   right: 50px; /* placed this many pixels from the right */
   z-index: 10; /* place it on top of everything else. The higher the number the 
     closer to the top. 10 usually does the trick */
}

Here’s what it looks like in action.

Floating Box with Link: For Grandmaster +

Here’s a fancier version. Put this BBCode line at the top of your article and edit as needed. (It’s the same as in the example for the floating link above.)

[h1|top]Name of Top Content[/h1] /* the ‘top’ anchor is where we’ll jump to */

Next, edit this line if you wish and put it in your page’s section->’Sidebar: Over panel content’.

[container:side-box][url=#top]To Top[/url][/container]

Finally, put this in your css and edit as you see fit.

:root { /* setup variables - this needs to be above the rest of your code */
--box-pad: 20px; /* the padding (space around contents) for our box */
--sideBox-bg: #333; /* the color for the box */
} 

.side-box{
border-radius: 10px; /* round the corners */
top: 200px; /* placed this many pixels from the top */
right: 50px; /* placed this many pixels from the right */
padding: var(--box-pad) ;
background: var(--sideBox-bg) ;
position: fixed; /* position: fixed; Keep it at the top,
even if we scroll */
text-align: center; /* center our text */
width: 100px; /* make it a skinny little box so it’s not
obtrusive on our page */
}

Here’s what it looks like in action.

Dictionary Jump Box: For Grandmaster +

Now that we’ve demonstrated capability, let’s flex our skills with a bigger challenge. Pretend you’re developing a language (with roman letters). The dictionary for the language is LONG. You want readers to quickly find words.

In your article, you’ll need to set up the anchors like [url=#LinkName]. I’ll leave that part for you to do. (See the Codex for more info on anchors.) After setting those up, paste this BBCode in section->’Sidebar: Over panel content’. Then edit as needed.

[h1|top]Name of Top Content[/h1] /* the ‘top’ anchor is where we’ll jump to */

Next, edit this line if you wish and put it in your page’s section->’Sidebar: Over panel content’.

[container:side-box-vocab]
[center][h3]Navigate[/h3][/center]
[table][td]
[url=#a]A[/url][br]
[url=#e]E[/url][br]
[url=#i]I[/url][br]
[url=#m]M[/url][br]
[url=#r]R[/url][br]
[url=#v]V[/url][br]
[/td]
[td]
[url=#b]B[/url][br]
[url=#f]F[/url][br]
[url=#j]J[/url][br]
[url=#n]N[/url][br]
[url=#s]S[/url][br]
[url=#w]W[/url][br]
[/td]
[td]
[url=#c]C[/url][br]
[url=#g]G[/url][br]
[url=#k]K[/url][br]
[url=#o]O[/url][br]
[url=#t]T[/url][br]
[url=#y]Y[/url][br]
[/td]
[td]
[url=#d]D[/url][br]
[url=#h]H[/url][br]
[url=#l]L[/url][br]
[url=#p]P[/url][br]
[url=#u]U[/url][br]
[url=#z]Z[/url][br]
[/td]
[/table]
[hr]
[small][small][small][small]
[url=#top]return to top[/url]
[/small][/small][/small][/small]
[/container]

Copy, paste this CSS, and edit as needed. Only new elements are commented.

.side-box-vocab{
opacity: 0.5; /* makes the whole menu transparent, so you can read what’s under it */
border-radius: 10px;
top: 100px;
right: 20px;
padding: 10px;
border: 3px RGBA(30, 30, 30, 0.3)solid; /* put a border around the box 3 px wide, in a dark grey that’s mostly transparent */
background: #ddd;
position: fixed;
z-index:10;
}

Here’s a screen capture of the dictionary jump menu in use.

Friendly Reminders

Make backups of your CSS! I accidentally had the editor open in two tabs for the same page and made changes in both tabs. Obviously, not everything saved. But I’d made a recent backup in Notepad++. It was easy to remake the change and paste it back into the CSS editor. Name your backups logically. My files are named after my world + the date.
Test in more than one browser, if you can. I use both Chrome and Firefox, so I’ve started looking at my pages in both.

Coming Soon

MappingDragon agreed to be my guinea pig for a series of interviews of container creators. She’ll share an awesome, advanced twist on what we learned today.