Dusty Foot customization.

[nimueth]

Greetings again~

I followed the suggestion and customized Dusty Foot, which goes pretty close to my ideal layout. I looked around this community to see if some of my questions have already been answered and while I found some of the CSS codes I needed, I still need some help.

• First of all, I noticed that the width of this layout is dynamic and changes if I shrink the browser. I found this code:

#content {
width: 540px;
}

But of course, it only affects the content, not the header. Is there a way to make it ALL static? SOLVED

• I would like to remove "manage tags" and "manage links" from the sidebar. I know only I see them, but I don't want them, I find them distracting. SOLVED
• I would like to make the entry links and tags in entries, lower case. SOLVED
• I would like there to be a 20 px margin at the top and bottom. I tried:

#header {
margin-top: 20px;
};

which worked, but there is a white border at the top of the header. :c SOLVED

• I would like to add a 1 px border around the whole body, including the header and footer, not just the content. SOLVED

And the most important of all: THE DREADED NAVBAR! I would like to:

• make it centered and move it below the header (sans margin);
• make the navbar fonts case sensitive, bold and bigger; Nevermind, I figured these out!
• change the navbar background colour to #e6e6e6 and add a 1px border on the top and bottom. Would that be possible?SOLVED
• remove the "tags" link. I suppose the code I need here is different from the one I was given in my previous entry, since I'm not editing a layer (again, leaving the tag text blank is not a solution, because it creates a wider gap between the "reading" and "memories" links).SOLVED

I actually don't like the way the navbar is behaving at all. Would it be possible to force the text to stay on the same line all the time? The way it's behaving right now just doesn't work with the header. Somehow this fixed itself when I hid the journal title.

That's about it, I think. It's...actually a lot more than I thought it would be, I'm so sorry! I hope I'm not asking too much. Any help is greatly appreciated!

Comments

I'll tackle a few things

[carene_waterman]

1. To make the whole page static set the width on #canvas not #content.

2. Check out this recent post in this comm for some ideas on the manage links/manage tags issue.

3. To get rid of the white bar above the header image, you need :
#header {
padding: 0;
}

4. If you mean by border on the whole body, the area that has the white background, that's #canvas again. Note: take your margin-top: 20px off of #header and put it on #canvas or the border will not behave correctly.

Re: I'll tackle a few things

[nimueth]

All of these worked, thank you! :)

[momijizukamori]

#header .module-navlinks { background: #e6e6e6;
border-style: solid;
border-width: 1px 0;
border-color: COLOR; }

should get you the background and border. The header is trickier because the extra padding comes with the wrapper around the text, which is a general class. So you have to remove it from the general 'navigation list' items and change it to everything but the tags item.


#header li {
padding: 0 !important;
}
.recent, .archive, .read, .memories, .userinfo, .network {
padding: 10px;
}
#header .tags {
display: none;
}

[nimueth]

Thank sou so much! :D

One thing: I increased the height of the navbar by adding "height: 40px;" below "background: #e6e6e6;". It worked, but I'm not quite sure what to do about the links; I thought they would stay centered, but they remained close to the top border. Could something be done about that?

[momijizukamori]

Unfortunately CSS is terrible at vertical alignment, but you can fake it in this case because it's a fixed height:

#header .module-navlinks ul {padding-top: 10px;}

You may end up wanting to play with the value, but trying it in Firebug, 10px looks about right for your layout.

[nimueth]

Yay, it looks just right now! Once again, thank you very much for the help! c:

[momijizukamori]

You're welcome!

[foxfirefey]

Fantastic--is everything taken care of by now? Congrats on migrating to a DW native style!

[nimueth]

For the most part, yes, and thank you for the suggestion! I didn't know dusty foot was this flexible. I'm really happy with the outcome! :D

The only tweak I would still like, is for "current mood: [mood]" "tags: [tags]", Location and music to be all lowercase (or at least case sensitive/capitalized). I'm not a big fan of uppercase lines, though this is really a minor thing.

[foxfirefey]

Glad to here it! We tried to make our base style system here to be easily modified.

Fortunately it is a very easy thing to fix, to enforce lowercase:

.metadata {
    text-transform: lowercase;
}

Or to just make it normal case:

.metadata {
    text-transform: none;
}

[nimueth]

Worked for mood, music and location but not the tags. Oh! I would also like to do the same with the date display in entries (it's all uppsercase too). Gah, my bad, I meant to ask this in the entry, but forgot it completely until just now. *slaps forehead*

[foxfirefey]

No worries, still easy:

.entry .footer {
    text-transform: lowercase;
}

.datetime {
    text-transform: none;
}

[nimueth]

YES! Now it's perfect!

Thank you sooooo much for putting up with me! :)