?

Log in

No account? Create an account
spire。
the smooth sailing fangirl
tutorial: smooth sailing topbars 
Jan 18 09
archangel
NOTE: Before you begin reading, please note that this is an advanced tutorial, and you should not attempt doing any of the below with your layout unless you are comfortable with CSS.

Also, if you simply want to grab the code and get out of here, see the Appendixes to each section. I've written out every step so the interested can fully understand what the code does. See the Smooth Sailing Customization Guide for more info.



PART A: Basic Topbar

This tutorial is for creating a basic topbar like this. I recommend starting here if you haven't tried an SS topbar before.


Step 1: Reposition the Sidebar

1.pngThe default Smooth Sailing layout looks like this. If you strip the CSS from it, notice that the sidebar remains. This is because the sidebar is "built" into the layout using HTML tables; we cannot move it to the top of the layout without "lifting" it out of its current position and repositioning it. This does have some drawbacks, which I will cover later.

Find .sidebar and add position: absolute;. If you aren't using a base stylesheet, type in the following:
.sidebar {
position: absolute;
}
The layout will look like this now:

3.png

This is the "lifting" part. Now we need to change the width and height so it's more appropriate for a topbar.

(return to top)


Step 2: Resizing and Fixing It Up

Go to .sidebar again and add these two lines:
height:150px;
width:700px;
I also added background:red; and cleared the background from .sidebox so we can see what changes we're making. My layout looks like this now:

4.png

As you can see, all of the sidebar elements are flowing out of the bottom. This, unfortunately, is a side-effect of repositioning the SS sidebar as a topbar. Go to Sidebar in the customization area and hide most of the boxes. For now, I'm opting to hide everything but a block of Free Text.

5.png

Now we need to move the other elements of the page to make room for the topbar.

(return to top)


Step 3: Reorganizing the Page

First, we need to fully split the topbar from everything else. Return to .sidebar and insert top: 10px;.

6.png

Now I'll shrink and center the layout. (This is just personal preference, you don't necessarily have to do this.) Find .bodyblock and add these lines:
width:700px;
margin: 0 auto;
7.png

Shifting everything down is the next step.
  1. Go back to .sidebar and change the top value to 130px.
  2. Find .bodyblock and add padding-top:175px;. Delete any other padding selectors.
Now I'll change the red background to something a little more eye-pleasing, and we should have this:

8.png


(return to top)


Step 4: Resolving Navstrip Issues

Wondering what I'm talking about? Here's an example. The above code is not Navstrip-compatible and when the Navstrip is turned on, it will appear like this. On the other hand, if you code the topbar to compensate for the Navstrip, and turn the Navstrip off, it will look like this. This will inevitably happen due to the position: absolute;.

If you're altering a layout for personal use, you probably won't have to worry about the Navstrip or lack thereof, depending on your preference. You can also simply disable the Navstrip for everyone using your layout; click here for a good tutorial. However, if keep in mind that this might be an inconvenience for people who do use the Navstrip (like myself). This part of the tutorial will show you how to make the topbar compatible with and without the Navstrip.

We'll start with the code built on a Navstrip-less topbar layout (you can find this code below). Add the following to your CSS:
.pageblock {
position:absolute;
width:100%;
}
Now go back to Display and turn the Navstrip on and off. The layout should move all as one piece. :)

(return to top)


Appendix: Topbar Code

This is all the code you need to make a topbar. Remember to hide the Sidebar boxes if you don't want everything flowing out the bottom.
.sidebar {
background:#D4DDEE;
height:150px;
position:absolute;
top:130px;
width:700px;
}
.bodyblock {
margin:0 auto;
padding-top:175px;
width:700px;
}




(return to top)


PART B: Multi-Column Topbar

This tutorial creates a multi-column topbar like this and is based off the code explained in Part A.

Step 1: Setting it Up

In this tutorial, I will be making a three-column topbar. That said, I first need to go to Sidebar and pick two other items for my topbar -- I chose to show the Links List and Latest Month modules along with my Freetext from Part A.

12.png 13.png

(return to top)


Step 2: Making the Columns

Add the following code (or append it to your existing .sidebox rule, if applicable):
.sidebox {
background:#F8F8F8;
float:left;
margin-right:5px;
width:220px;
height:140px;
}
14.png

This lines up the modules in 220px-wide boxes. The height keeps the boxes at an even height, otherwise they'd look more like this.

(return to top)


Appendix: Multi-Column Topbar Code

.sidebar {
background:#D4DDEE;
height:150px;
position:absolute;
top:130px;
width:700px;
}
.bodyblock {
margin:0 auto;
padding-top:175px;
width:700px;
}
.sidebox {
background:#F8F8F8;
float:left;
margin-right:5px;
width:220px;
height:140px;
}



(return to top)


Comments 
Jan 24 09 (UTC)
Really amazing and helpful! Thanks for building up such a tutorial =)
Mar 27 09 (UTC)
There is a vast amount of incredibly well explained information here. Not only was I inspired to play with Smooth Sailing after have only a quick browse through your SS guide, but I then proceeded to complete my very first LJ layout using the base stylesheet and your guides to create a community I'm about to launch with some friends! (Here's the layout in a testjournal if you're interested in seeing what your guides helped me create djtestcomm). I'm especially excited about how flexible all those free-text sidebar boxes turned out to be! (As used for the sub-banner and Post!, Join!, Rss! buttons.) Had to add some new positioning rules and z-index back the sidebar blocks though, as they were ghosting over teh top of the journal nav.

Anyway anyway anyway, long story short: I've had an absolute blast building the layout the past few days, and it's all thanks to you. Cheers! ♥
This page was loaded Oct 16th 2019, 9:29 am GMT.