Welcome back, worldsmiths! Oh it was hard this month to pick just a few tricks and tips for you all. In the end, I opted to pick a serious one that I’ve seen pop up in the #guild-css-help channel and a frivolous one to balance it out.

What we’ll cover:

Clarification on What Not to Tinker With (aka What the Heck is .col-md-12?)
Tips for Organizing Your Code
Fancy Headers–Journeyman +
Using Bootstrap Columns for Tables with Custom Sized Columns–Grandmaster +

Clarification on What Not to Tinker With (aka What the Heck is .col-md-12?)

Beginners exploring with inspect see something and they want to play with it! We’re all this way. But in the #guild-css-help channel I’ve seen people changing and hiding classes like .col-md-12 to achieve particular effects. This isn’t advised. Why?

WA is built on a framework called Bootstrap. (If you want to know more about it than my tip of the iceberg intro, please see W3schools information on bootstrap.)

.col-md-12 is a column class. These column classes make up the responsive grid structure of our WA articles and pages. What this means in plain English is if we view our pages on a wide monitor, the columns are side by side. But on a small mobile device, the columns can stack so the page is easy to view on the small screen.

- Looking at the W3Schools page for basic bootstrap grids, it says Bootstrap divides the pages up into 12 possible columns slots across a page.
- md means ‘medium’ for the size of device the column class is intended to be used on. On smaller devices the columns, will be stacked for an easier to read page.
- The number at the end of the name is how many column widths the class takes up on the page.

So .col-md-12 is a column that takes up 12 of the 12 spaces allotted width (the whole page).

Now, are you starting to see why hiding or changing the column classes could be a problem? If you change the .user-css .col-md-12 class for example in your world’s CSS, it will be changed everywhere in your world.

Boom – the container that holds everything on our page is gone and the page structure is likely obliterated. Even if it looks ok off hand, it can’t be guaranteed to work right elsewhere in your world.

What can we do instead?

Look for a more specific class to change. Lets look at an example where we’ll change the column on the right side below the blue box to be the color teal. (In other words, the box with the black creature holding up it’s arms is the one we’ll change.)

First we’ll open inspect. (In your browser, right click on the page and select Inspect or your browser’s flavor of it.) Then we’ll click on the little box with the arrow in it to have inspect tell us what element we’re looking at in the code.

Click on the element you want inspect to identify

The highlighted line in the HTML code is the one we want–panel-body. (Note it’s not any of the col-md classes or the m-b (spacer classes).)

So, we click on the palette button to open the CSS editor for our world and add our CSS code, remembering to put .user-css in front of the .panel-body class.

.user-css .panel-body means that .panel-body is a descendant of .user-css. In plain English, this means the .panel-body element is inside of .user-css.

I hope that helps clarify what the .col-*-* classes are and why you probably don’t want to mess with them.

But the cool thing, is that Grandmasters and above can use the bootstrap classes as containers. More on that in the last tutorial of the day.

Tips for Organizing Your Code

Do you ever wonder what in the world that [block:xxxxxx] code is when you’re editing a page and have to view the page to see what it is?

Have you had a big section of code and just wished you could quickly tell what it was for, instead of having to dig through it to figure it out?

Or if you have several nested containers or BBCode tags, is it hard to tell if you closed them?

Compare the two sections of the same code.


[container:HLBoxTeal]
[h1]Meet the Main Characters[/h1]
[row]
[col][center]
@[Character 1](person:xxxxxxx)[br][img:yyyyyy|nolink]
[/center][/col]
[col][center]
@[Character 2](person:xxxxxxx)[br][img:yyyyyy|nolink]
[/center][/col]
[/row]
[/container]

versus


/*------------------ Main chars box ---------------- */
[container:HLBoxTeal]
    [h1]Meet the Main Characters[/h1]
    [row]
        [col][center]
            @[Character 1](person:xxxxxxx)[br][img:yyyyyy|nolink]/* Character 1 headshot */
        [/center][/col]
        [col][center]
            @[Character 2](person:xxxxxxx)[br][img:yyyyyy|nolink]/* Character 2 headshot */
        [/center][/col]
    [/row]
[/container] /*HLBoxTeal */

I hope you see how a few well placed comments and tabs can make your code much more readable. The more I use containers, the more I find comments and tabs important to being able to read my article code.

Tab characters are treated like space in HTML. So it doesn’t affect the layout of our page to have them there.

Unfortunately, we can’t use TAB in the WA editor, it makes the editor (or any form based HTML page) go to the next text input. Here’s a couple of options I know to use tab characters.

Copy your code into another editor like Notepad++ or Visual Code Studio. Organize your code there. Paste it back into the WA editor.
In a text editor (like Notepad++), type a Tab character. Copy and paste it as needed into the WA editor.

Fancy Headers–Journeyman +

What you’ll need:

An image (a scalable SVG works great)
A header you want to decorate
A bit of BBCode

Our example:

Decorative headers - Top has no decoration. Middle has decorative images on the sides. Bottom has decorative images on the sides of a very long title that wrapped to next line

Header Number Notes

WA header tags are off by 1 from what they are in CSS/HTML. What this means is [h1] in WA BBCode is actually h2 in CSS/HTML. Watch for that in your tags and CSS! (H1 in CSS is actually reserved for the page title on WA.)

CSS

.user-css h3 {
    display: flex; /* ---------- allows the container size to affect how the 
                 items are displayed. (flexibility) ---------- */ 
    align-items: center; /* ---------- centers them vertically ---------- */ 
    text-align: center; /* ---------- centers them in the container ---------- */
    width: 100%; /* ---------- use up all space allotted ---------- */ 
}
 
.user-css h3::before, .user-css h3::after { /* ---------- ::before and ::after allow 
                  us to put something before and after an element ---------- */ 
    content: url(https://www.worldanvil.com/uploads/images/ca6ee269bdc9ed8267c83fa96a153d70.svg); 
       /* ---------- the image we are putting before 
                                   and after our header ---------- */ 
    display:inline-flexbox; /* ---------- how to display the items. Inline allows 
                            for them to be put side by side. ---------- */ 
    margin-left: 20px; /* ---------- space on the left ---------- */ 
    margin-right: 20px; /* ---------- space on the right ---------- */ 
    margin-top: 8px; /* ---------- I needed a little space at the top to 
                     make mine look centered ---------- */ 
    flex: 1 0 150px; /* ---------- Tells the "flexible" items how to behave. 
                     how it should grow compared to other elements, shrink in 
                     comparison, and the minimum size of the element. Our images 
                     on the side will only shrink to 150px before the header text 
                     wraps to the next line. (For more on the flex property read 
                     here.) ---------- */ 
 }

BBCode

[h2]Cool Header[/h2]
 
[h2]Cool Header With Really Really Really Really Really Really Really Long Title[/h2]

Using Bootstrap Columns for Tables with Custom Sized Columns–Grandmaster +

In #guild-css-help I often see questions on how to change the width of a table column. It can be done with nth child CSS classes. But there are multiple ways to do most everything.

What if we look at an option that doesn’t require any CSS?

What you’ll need:

Data that needs a table
Containers + BBCode
(Optional) An image
NOTE: NO CSS IS NEEDED

BBCode

[row]
    [container:col-md-3]
        [h2]Header 1[/h2][hr]
Vital Cat Info
    [/container]
    [container:col-md-6]
        [h2]Header 2[/h2][hr]
Cat ipsum dolor sit amet, stinky cat. Sit on owner's face love blinks and purr purr 
purr purr yawn stand in front of the computer screen, or sniff other cat and hang 
jaw half open thereafter yet step on your keyboard while you're gaming and then turn 
in a circle . Meow claw your carpet in places everyone can see - why hide my amazing 
artistic clawing skills? and purr like an angel. Sit in box eat owner's food rub face 
on owner and get scared by sudden appearance of cucumber floof. 
    [/container]
    [container:col-md-3]
        [h2]Header 3[/h2][hr]
        [img:565490] 
    [/container]
[/row]

BBCode Notes:

row – Bootstrap columns must be contained in a row. (In this example we have 2 rows. One for the headers and one for the data.)

col-md-3 – a column 3 spots wide, for medium sized devices (on smaller devices, it will display stacked)

col-md-6 – a column 6 spots wide, for medium sized devices (on smaller devices, it will display stacked)

Remember – you’ll want the total of your columns spots to equal 12. In our example we have two that are 3 wide, and one that is 6 wide for a total of 12.

Quick Tips

My quick tip: Export your world and put the date in the file name. When I was cleaning up old files, I must have accidentally deleted the tutorial for the decorative headers. So, I had to remake it from scratch. I’d been really diligent about exporting the world for my story, but forgot to export my world with all my tips and tricks. OOPS. I deserve to be laughed at for that one! After I remade the tutorial, I backed that puppy up! If you don’t know where the export option is, Here’s how to do it.