Lowercase Letters in Archive

[bemused_writer]

Hello! I was wondering if anyone would have any advice on how to get the names of the months in my archive to start with a capital letter? I'd like it to say "January" instead of "january" for example. I managed to get my journal entries fixed, but I'm not sure about the archive itself. Thanks! 

Comments

[fueschgast]

Oh wow, I just learned something new! I thought every word in an addressed element would be capitalized, if that's what you tell it to do - turns out every word except for the first one gets capitalized. I guess the W3 assumed the first word would be a capitalized already. But luckily there's the first-letter selector!

So to finally get to the point: just add this to your CSS:
.month h3:first-letter {
text-transform: capitalize;

[bemused_writer]

Thank you so much! This fixed the problem right up. ^^

[bemused_writer]

A related question if you have time: how would I do this for the tag page? I thought I had everything adjusted, but I missed that one. :0

[fueschgast]

Just the headline or the tags themselves too?

[bemused_writer]

I was thinking just the headline. I'm reading your explanation below and you are right; I'm trying to alter a preexisting style, Memory of Flowers.

Your explanation makes sense to me and that would definitely be the best way of adjusting things, but I'm unsure of how to access the preexisting CSS (unfortunately I don't have a lot of experience with it). Thank you for taking the time to look into all of this! I really appreciate it. ^^

[fueschgast]

Okay, then add this:
.tags-container h2 {
text-transform: capitalize!important;
}

D'oh, I just noticed the closing curly bracket is missing in the code I gave you for the archive page. You need to add one after the semicolon or any code after it won't work.

[bemused_writer]

Thank you so much! I really do appreciate the time you've taken to help me with this. ^^ All of this has got me interested in CSS; I will have to learn more about it! Anyway, that did the trick. ^^

[fueschgast]

Okay, in the the HTML the headline is actually capitalized, which means there's code somewhere in there which makes it lowercase. The proper way to deal with this
would be to take out that bit of the code instead of overriding it.
My Web Developer add-on shows me that your layout's CSS and your CSS edits are separate, so I'm guessing you linked to the layout CSS. If you put it into the "Custom stylesheet" field instead (in this case you can remove the archive-page code I gave you), you could just take out the bits of code that bother you. If you do that, go to

#archive-year .header h3, .tags-container .header h2, .icons-container .header h2 {
font-family: Franklin Gothic Medium, Arial, sans-serif; font-size: 2.1em;
color: #000000;
;
text-transform: lowercase;
padding: .5em;
}

and remove

;
text-transform: lowercase;

If you can't or don't want to do that, let me know and I'll give you something to override instead.

[momijizukamori]

While it's possible to modify the base layout CSS and then recompile the layout, it's not easy, unfortunately, and overrides are a lot simpler.

(also, while capitalize works just fine, you can also use 'text-transform:none' to override the lowercase transform and set it back to the unstyled default!

[bemused_writer]

Ah, good to know! Thank you! ^^