style_system | Header custom menu, User Name size and position

Hello fellow style addicts!

I recently moved in from LJ and I'm in the process of recreating my journal layout at DW. I'm using the Brittle layout and trial/error my way through the design. ;) Most things I managed to work out by myself, but there are a few points I can't seem to find a solution for. Hopefully someone will be able to point me in the right direction. Additionally, I'm not sure what tags would be appropriate for this post. I'd be relieved, if the mods could handle that. ^^;

1.
My header looks like this. What I'd like to have is instead of the journal name/page title to show a simple link menu I can freely configure, such as:

profile | circles | calendar | link a | link b

I found in this lovely community already how to get rid of the page title etc. What I don't know is how I could put links there instead, and perhaps my profile icon in a smaller size. --- Partially solved!

2.
I'd like to move "Previous 50" to the right and to change the font size. So far I only managed to find out how to change the color. I'd like to do the same on the bottom of the page. (Currently the profile module sits there as well. I disabled it for now, because my first plan had been to put it in the header, which didn't work and the entire thing would have been too big for the top of my page anyway.) --- SOLVED!

3.
Is there a way to (a) change the font size of user names independently from the font size for date/time? Also, is there a way to (b) place the user names below their icons in such a way that they behave "intelligently", i.e. have line breaks, if the name length exceeds a certain amount of letters? This is mainly interesting for communities when you have "userblabla posted in communityblabla". I found out how to change the positioning in general, but I assume the user name would have to be withing the icon layer to be confined to it and for the entry text to not overlap it, and I couldn't figure out how to do that or how to add another box below the icon in which I could put the user name. --- Part (a) solved!

Thank you in advance for any help you can offer me! (Also: please ignore the white page background, I'll be adding a background image once everything sits on its right place.)

Flat | Top-Level Comments Only

Thank you so much for taking the time to explain this noob what to look out for! I (hopefully) cleaned out all the non-CSS things aside from

.entry .userpic img {border: 1px solid $*color_navigation_module_background;}

(At least I assume the $ part is not CSS, but if I remove it, it affects the border around the icons.) The column now is in the center. However, when I change the margin in some way, the page will always move to the right edge of the canvas, no matter what.

#canvas {margin: 10 0 0 0;}

has the same result as

#canvas {margin: 0 0 20 0;}

for example. So I guess I have to change the position of the column somewhere else.

Yeah, with CSS shorthand, you still have to add your unit of measurement to the numbers - such as px, em, etc. The reason you write "0 0 0 0" is that the web browser knows "0" doesn't need a measurement because it's just a zero. Does that make sense? That's how it works, anyway. Try this in your CSS instead:

#canvas {
    margin: 0 0 0 70px;}

I really hate using CSS shorthand, for what it's worth, on margins and padding. I write it out longhand most of the time because it's easier for me to override existing margins and padding with commands like {margin-left: 70px;} then to try to remember that from left to right the four numbers control the top | right | bottom | left of the element I'm adjusting.

Edited (correct page offset is perhaps achieved/left off a curly bracket, whoops) 2012-03-17 04:36 (UTC)

you still have to add your unit of measurement to the numbers

Ah of course. *headdesks* It works now like a charm, thanks!

Change this: .entry .userpic img {border: 1px solid $*color_navigation_module_background;}

to...

.entry .userpic img {
    border: 5px solid #fff;
    }

In plain English, that sets a white border 5 pixels wide around you userpic, just like you have now with the s2 in there. Funny how the s2 throws all these errors that have worked out in your favor, but no, it's not supposed to do that (and even if it normally could do that, you want to learn to code valid CSS that doesn't break things, not mix programming languages into your CSS style sheet like that).

Changed it, thank you! I did look at the w3schools page you linked and it looks accessible even to me. Will give it a shot.

You're welcome! If you have any other questions let me know, and good luck! :)

Lastly, there are tons of great resources on the Web for learning how to make CSS do exactly what you want. Most people who write and edit CSS teach themselves (and you never stop learning more about it, believe me, since CSS is always coming out in new, more flexible versions, like the currently still-in-prototype CSS3), and I'm sure you can, too (the fact that you were willing to mix languages together to get stuff looking right shows you're very willing to try, which is a wonderful thing). Most of us learn by doing exactly what you're doing...just fiddling around and asking questions and for help when you need it. All three activities are great ways to learn. You can also try the quick little exercises you'll find here: http://www.w3schools.com/css/

W3Schools is a really great reference. Look up any CSS code or fact that you want to know about CSS in Google, and most of the time, W3Schools will come up in the first few results, because their explanations are really simple and clear, and they almost always give you a way to try the CSS out first on their site before you try it on your own.

Header custom menu, User Name size and position

no subject

And use the edit code, not the code in my 1st reply...

Re: And use the edit code, not the code in my 1st reply...

For the userpic...

Re: For the userpic...

Re: For the userpic...

no subject