Hi Joe V,

I must give credit to two people (Isaac Hall and Elijah Fowler) on my team for for this one. They've actually rewritten a lot of that menu recently, to make it might bit smaller. We'll be adding those changes to Swift Blue and Mocha soon.

Thanks,
Joe D.

Hi Joe V,

Find .loggedin .mainhead in your CSS and replace with .loggedin .art-main.

HTH,
Joe D.

Joe V,

I can answer that one.

In CSS our selectors can be made more specific by a string of classes ending with the element you wish to style. For example, say we have DIV with the class "big-box" that we want to add a border on, we would do this:

.big-box {
    border: 1px solid black;
}

Now let's say that we have another element with the class "big-box" inside the first one, but we want it to have a different color border. We can't just use ".bigbox" or the first one will change, so we have to make it more specific. The way we do that is by placing a class before the class of the item we wish to be styled in the selector. so in this case we would do this:

.big-box .big-box {
    border: 1px solid blue;
}

So what that does is says: "Any 'big-box' inside of a "big-box" will have a blue border instead of a black one."

In the case of the admin bar, we didn't want 40px of padding on top of the "mainhead" element all of the time, that would look bad having a big white space on top of the page, so we set up the JavaScript to add the class "loggedin" when logged in so we could make the selector more specific and only show up when logged in.

The reason it wasn't working for you is because the CSS was looking for a element with the class "mainhead" inside of the element with the class "loggedin" (which is the body element). But since that was for a custom skin (Mocha) your skin doesn't have that class so it wasn't applying to anything. Now, you have a similar element with the class of "art-header", so if you changed the selector to ".loggedin .art-header" it would have worked.

Now here's why it worked after you placed the comma in. When you want to style two element the same way you place both of the element's selectors in the style separated with a comma. Like such:

.big-box,
.small-box {
    border: 1px solid black;
}

What this says is: "Both 'big-box' and 'small-box' will get a black border."  So when you changed the selector to ".loggedin, .mainhead" you told it to style both "loggedin" and "mainhead" with 40px of padding on the top. Since "mainhead" doesn't exist it doesn't get any style, but "loggedin" is the class placed on the body by the JavaScript, and it is getting the styling so the admin bar worked.

This isn't a bug, it's just specific to the skin. The reason we placed it on the "mainhead" element was because we are using a sticky footer and placing the padding on the body would have messed that up.  Each skin is different, one solution that works for a skin may not work for another, so changing the way things are done so it works is going to be needed from time to time.

I hope that this helps you understand CSS better and clears up any questions you had.  I'm glad you are enjoying the fruit of my labor.

If you have any more questions just ask,
-Elijah