Header custom menu, User Name size and position

[extempore]

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.)

Comments

[jana]

1) I think it's only possible with a theme layer, but I'm no expert on theme layers, so hopefully someone else can help you here.

2) .navigation{text-align: right; font-size: 10pt;} should do the trick.

3) Try .poster{font-size: 10pt;} for the user name. Not so sure about positioning the user name below the user icon though. This might also be something where you need a theme layer.

[extempore]

Both lines worked, thank you! =D

[marahmarie]

Take "set layout_type = "one-column";" out of your CSS. It's breaking your page. Code like that goes in the theme layer only. What you're using is not your theme layer. It's the Custom CSS box. :)

Also (after checking through your CSS some more) I see you're mixing s2 (a take-off on Perl, basically) into your CSS. When you put it within curly brackets like it is now I don't think it'll do much harm, but since you're feeding it through a style sheet, not the compiler, I don't think it's going to do much of anything useful, either. Just a thought...

[extempore]

I took it out again, thanks. It looked all right in my browser, which is why I had kept it.
Why I tried it: I want to have only one column, and not centered either, but freely positioned (a bit more to the right). So far I only found properties to have it either centered or entirely on the right/left side. I fiddled with margins etc. from sidebars and primary area, but that didn't work.

About the various styles/codes: unfortunately I'm not a programmer and entirely unfamiliar with the differences. I just copy/paste stuff and watch how that turns out. ;)

[marahmarie]

About the various styles/codes: unfortunately I'm not a programmer and entirely unfamiliar with the differences. I just copy/paste stuff and watch how that turns out. ;)

Right, exactly what I figured. Here's a quick way to tell what you're looking at: CSS will always look like this: element{property:value;}

In real life CSS, the element is the part of the page you want to change, like "body", "tertiary", "a:link", "ul li", etc.

The property is the thing you want to set on the element, like the "margin", "padding", "color", "background-color", "border", etc. You'll notice in my examples there's no programming-like codes or anything else odd-looking mixed in, it's all written in natural-looking, human-readable language.

The value is what you want to set the properties to.

Again, no programming-like dollar signs or anything else are to be found here, either (when you get into hacking CSS, especially for IE, this is not strictly true anymore, but for purposes of writing basic CSS, it is).

Your value can be set in numbers and pixels (px), ems (em), percentages {%} or it could be a word like "transparent" (for backgrounds), "solid" (for borders that inherit the color of a parent element), hex codes (for colors, which always look something like this: "#000" or "#000000") or color names ("blue", "red", etc). And there's more, this is just a short list.

So to complete the thought (and 'just for example', since it seems you already have your page set slightly off-center and to the right like you want it) say you want to offset the body element of your journal by setting a margin-left property with a 40px value. So you'd write:

body {margin-left: 40px;}

What you see in the s2 code you're looking through and copying? That's not CSS. It's more like how Dreamwidth uses the s2 programming language to set the basic style of the page (like this line found in your CSS: #footer a, #footer a:link, #footer a:active { color: this is s2, it won't do anything, but it will break your page as far as the browser checking for valid CSS goes-->$*color_footer_link; } by telling the s2 compiler how to make your page look.

The compiler takes the s2 commands, checks them against the basic page structure (which has also been set with s2 - in fact, this command: $*color_footer_link tells the compiler to "look for" and "use" the color that's already been set in the base s2) then prints out (displays) the result.

Web browsers can't read s2, Perl, or any other compiled language that you put in the style sheet (or the Custom CSS box, for purposes of our walk-through) because CSS is not a compiled language. It's also not a programming language. It's just a rigidly defined set of commands that the browser knows how to read to figure out how to make your web page look.

Compiled languages? The browser has no control over them at all. That's all done on server-side (not client-side, which is on *your* end, strictly through the browser).

Hope that helps a little...also, just noticed you have this in your CSS:

#canvas {
margin: 0, 0, 0, 0;
padding: 2% 0;
text-align: justify;
width: 80%;
}

To set the margin correctly, just leave out the commas (but always leave in the spaces when you use CSS shorthand).

#canvas {
margin: 0 0 0 0;}

If you have any questions, let me know. (Also, when you take out those commas? Your page will center. At which point, if you'll go ahead and take out all the s2 commands, too, I'll see what I can do to help you. :)

[extempore]

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.

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

[marahmarie]

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.

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

[extempore]

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

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

For the userpic...

[marahmarie]

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).

Re: For the userpic...

[extempore]

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.

Re: For the userpic...

[marahmarie]

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

[marahmarie]

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.

[ex_awakened208]

I don't know if you still need help with #1, but there is a way to get custom navigation by customizing this code and putting it in your theme layer.

[extempore]

Thanks, I'll have a look at it (especially the part where one can enter custom links)! Currently I'm using a partial fix that looks like this:

.module-navlinks {
left: 10%;
margin-left: 1.8%;
margin-right: 1.8%;
position: absolute;
right: 1%;
text-align: center;
word-spacing:9px;
letter-spacing:3px;
top: 50px;
background-color: transparent;
}

.module-navlinks ul {
display: inline;
width: 100%;
}

.module-navlinks li {
font-size: 11pt;
display: inline;
}


I haven't been able to insert special characters or small gifs between the links though, but for now it's functional and that's already a lot better than before. ;)

[ex_awakened208]

Dreamwidth won't let you put special characters in the CSS, but there is a way you can put gifs in between the links!

You'd need to do something like this:


.module-navlinks li:before {
content: url('URL OF GIF'); }

.module-navlinks li:first-child:before {
content: none; }


The first part would add the gif in front of each link and the second part would remove it from only the first link, so there were only images in between the links.

[extempore]

That's fantastic! =D Thanks a lot!

[ex_awakened208]

Glad to help! :D

I was in the middle of editing the comment when you replied, so I'll just leave this here. I think the code that would work on your journal is actually this, instead of what I listed before:

ul.module-list li:before {
content: url('URL OF GIF'); }

ul.module-list li:first-child:before {
content: none; }

Also, you may want to add some padding so there'd be some space between the gif and the link, which could be done by adding a line like this one in red:

ul.module-list li:before {
content: url('URL OF GIF');
padding-right: 10px; }
You might have to play with the number to get it to look the way you want.