Tessisamess

Sidebar vs Topbar

So, what's a topbar and how do we make one? It's really just a sidebar but... y'know. On top instead of to the side. Today we're going to learn the basics of converting your vertical sidebar into a horizontal topbar in S2 Complete Style. It's actually pretty easy! I'll be using my cleaned layout CSS for reference during this tutorial.

Resetting the sidebar

When you first start making a layout with a fresh stylesheet, when using my cleaned up version, you'll see the following in the area of page configuration styles:

.layout-two-column-left #alpha{margin:0 0 0 290px;}
.layout-two-column-left #beta{float:left;width:250px;}
First thing's first: Let's reset this so that the sidebar is in its default postion: Just a regular old div before the entries. We'll be resetting the margin on #alpha (the div that holds the entries) and then overriding the float and width on #beta (the container holding all sidebar content.)

.layout-two-column-left #alpha{margin:0;}
.layout-two-column-left #beta{float:none;width:auto;}
Optional: You can also add a margin to the topbar to space it away from the header above and the entries below:

.layout-two-column-left #alpha{margin:0;}
.layout-two-column-left #beta{float:none;width:auto;margin:20px 0;}
I'd also like to note that I almost always give .module-layoutcredit a bottom corner fixed positioning on the page; that way it won't interrupt any of the sidebar styling or positioning, so all examples below will be working under that assumption and will keep the module enabled.

Now we've got our sidebar modules stacked and full width above the entries, but by default that's not very cute. This is where the fun comes in!

Option #1: Inline sidebar modules

Something I don't do often is actually one of the very first things I wanted to learn back when I started coding on Livejournal: Inline sidebar modules set as a topbar. The instructions back then were a lot different (and more complicated) than the ones I'm about to give, because flex exists now, and it makes everything better. You can see an example here, but I wouldn't use that coding as a blueprint; it's older and I don't need to check the CSS to know it's not how I would do it now lmao, though it does use flex.

After resetting your sidebar, you're going to want to set #beta-inner to flex. I'd also recommend adding justify-content:space-between; as well so that as you get further in, you won't have to worry about margins or trying to get things to sit flush.

#beta{}
#beta-inner{display:flex;justify-content:space-between;font-size:small;color:#000;}
Next, you'll want to set .module to display:none; (don't worry, we'll override that on the specific modules you want to use.) Additionally, I recommend resetting the margin for the .module class and putting a margin into #beta instead you need it. These types of topbars work best with 2-4 modules, since not everyone has a large screen to view on. If that's not something you're worried about, feel free to use five or six instead.

For this example, I'm going to use the custom text, links list, calendar, and page summary, but you can use any you like! Note that for your links list (.module-typelist) if you have your links sectioned by headers, they will each render as their own modules. This means you can use more than one links list in your module setup if desired without any extra coding.

This next part is going to sound scary, but I'll color code it so you can see how it works! We're going to use some math to make the width and margin calculations easier. In .module you'll add width:calc((100% / 4) - 10px); which is telling it that we want room for four modules with 10px of space between them. Now you don't need to do more complicated math to size your modules! These will adjust to any width you set to the layout's outer divs.

Your complete sidebar CSS section will look something like this:

#beta{}
#beta-inner{display:flex;justify-content:space-between;font-size:small;color:#000;}

.module{display:none;width:calc((100% / 4) - 10px);padding:20px;background:#fff;margin:0;border:none;}
.module-inner{}
.module-content{}

.module-header{background:transparent;border:none;}
.module-header-inner{}
.module-header h3{margin:0;padding:0;}
.module-header a, .module-header a:visited{color:#566030;}

.module-customtext{display:block;}
.module-customtext .module-content{padding:0;}

.module-typelist{display:block;}
.module-typelist ul{list-style:none;margin-left:0;padding-left:0;}
.module-typelist li{}
.module-typelist li a{}

.module-pagesummary{display:block;}
.module-pagesummary ul{list-style:none;margin-left:0;padding-left:0;}
.module-pagesummary li{}
.module-pagesummary li a{}

.module-calendar{display:block;}
.module-calendar .module-content{text-align:center;}
.module-calendar table{border:solid 1px #eee;border-collapse:collapse;font-size:x-small;margin-right:auto;margin-left:auto;margin-top:10px;}
.module-calendar td{border:solid 1px #eee;}
.module-calendar th{color:#eee;font-weight:bold;}

.all-link{}
.all-link p{}
.all-link a{}

.module-layoutcredit{display:block;}
.module-layoutcredit p{padding:0;margin:0;}
That being said, if you'd rather have different widths for each module, you can do that too! You would add it to that specific module's class instead. I recommend doing it with width:calc(100% - 10px); as your base. For example, if you wanted three modules, and wanted the middle module larger than the outer two, you could set the percentages to 25% / 50% / 25% respectively. As long as the percentages equal 100% when added together, you're fine!

Now you can move on to the fun styling!

Option #2: Header links list

In a number of my layouts I set the links list flush with the header so that they look like they're a part of it, as seen here. You can do this with any module, but this is probably the most desired one, so we'll stick to that one.

Once you've reset your sidebar, you'll want to set .module to display:none; (you may also want to repeat this for .module-header as well) and then set .module-typelist to display:block;

Additionally, I recommend resetting the padding and margin for the .module class so you can work from scratch and add padding/margin back in if you decide you need it.

Once this is done, you can delete all other modules from the CSS since they're all hidden and you won't need their styling. Now your complete sidebar CSS section will look something like this:

#beta{}
#beta-inner{font-size:small;color:#000;}

.module{display:none;padding:0;background:#fff;margin:0;border:none;}
.module-inner{}
.module-content{}

.module-header{background:transparent;border:none;}
.module-header-inner{}
.module-header h3{margin:0;padding:0;}
.module-header a, .module-header a:visited{color:#566030;}

.module-typelist{display:block;}
.module-typelist ul{list-style:none;margin-left:0;padding-left:0;}
.module-typelist li{}
.module-typelist li a{}

.module-layoutcredit{display:block;}
.module-layoutcredit p{padding:0;margin:0;}
You can do pretty much whatever you want at this point! If you've chosen to hide .module-header you can delete the extra styling classes for that section.

What I typically do is set .module-typelist ul to display:flex; and then style the links.

Option #3: Mix it up!

You can use methods from both previous options to create a topbar with multiple types of elements! You can also use CSS grid, like I've done in this layout to arrange sidebar modules, but explaining grid is a tutorial for another day.

This time when you set #beta-inner to flex you'll want to add flex-wrap:wrap; to the mix too. Now you can have various widths and rows of modules to play with! Since this is just using methods show in the previous two options I won't get too wordy on this one. Here's an example:

#beta{}
#beta-inner{display:flex;flex-wrap:wrap;justify-content:space-between;font-size:small;color:#000;}

.module{display:none;padding:20px;background:#fff;margin:0;border:none;}
.module-inner{}
.module-content{}

.module-header{background:transparent;border:none;}
.module-header-inner{}
.module-header h3{margin:0;padding:0;}
.module-header a, .module-header a:visited{color:#566030;}

.module-customtext{display:block;width:100%;}
.module-customtext .module-content{padding:0;}

.module-customtext2{display:block;width:calc((100% / 3) - 10px);}

.module-typelist{display:block;width:100%;}
.module-typelist ul{list-style:none;margin-left:0;padding-left:0;}
.module-typelist li{}
.module-typelist li a{}

.module-pagesummary{display:block;width:calc((100% / 3) - 10px);}
.module-pagesummary ul{list-style:none;margin-left:0;padding-left:0;}
.module-pagesummary li{}
.module-pagesummary li a{}

.module-calendar{display:block;width:calc((100% / 3) - 10px);}
.module-calendar .module-content{text-align:center;}
.module-calendar table{border:solid 1px #eee;border-collapse:collapse;font-size:x-small;margin-right:auto;margin-left:auto;margin-top:10px;}
.module-calendar td{border:solid 1px #eee;}
.module-calendar th{color:#eee;font-weight:bold;}

.all-link{}
.all-link p{}
.all-link a{}
.module-layoutcredit{display:block;position:fixed;bottom:10px;left:10px;}
.module-layoutcredit p{padding:0;margin:0;}
In these types of sidebars, you want to make sure your sidebar ordering is done in the dropdowns. Example: in my image mockup above, I have the links list displayed first so that it sits under the header, then a customtext, then my other three modules.

As you can see, The widths change depending on whether or not I want a module to be its own row or not, using 100% for full width rows and the basic formula shown in Option #1 to divide up the rest of the modules.

Option #4: Custom coding

Exactly what it sounds like! Like with the links list example, once you've reset your sidebar, you'll want to set .module to display:none; (you may also want to repeat this for .module-header as well) and then set .module-customtext to display:block;

Once this is done, you can delete all other modules from the CSS since they're all hidden and you won't need their styling. Now your complete sidebar CSS section will look something like this:

#beta{}
#beta-inner{font-size:small;color:#000;}

.module{display:none;padding:0;background:#fff;margin:0;border:none;}
.module-inner{}
.module-content{}

.module-header{background:transparent;border:none;}
.module-header-inner{}
.module-header h3{margin:0;padding:0;}
.module-header a, .module-header a:visited{color:#566030;}

.module-customtext{}
.module-customtext .module-content{padding:0;}

.module-layoutcredit{display:block;}
.module-layoutcredit p{padding:0;margin:0;}
You can do pretty much whatever you want at this point! If you've chosen to hide .module-header you can delete the extra styling classes for that section.

When styling inside of the customtext, never use custom IDs—classes only! The layout will ignore custom IDs and the styling attached to them, but a class will do the same thing without the restriction. Another thing to note is that the custom text does not ignore line breaks and lj-raw is not a valid tag in this box. If you experience unwanted whitespace you'll want to remove breaks.

For example: <div class="mycontent">

<img src="URL">
<h1>Title Here</h1>
<div class="sub">Subtitle Line Here</div>

Blurb text

</div>
Would become: <div class="mycontent"><img src="URL"><h1>Title Here</h1><div class="sub">Subtitle Line Here</div>Blurb text</div>
You can add as much coding as you want in this area as long as you keep the above stipulations in mind!

In conclusion

There are a lot of different ways to style these kinds of topbars, so have fun with it! The basic arrangements explained in this tutorial should give you a lot of mileage, but if you have any topbar-related questions more specific than this tutorial covers, just let me know! 💖

♡ You're Done! ♡