Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Capital Letters In Header

  1. imagespike
    Member

    Hi Guys,

    I'm, very, very new to CSS so go easy on me! I'm currently using the ChaoticSoul template, which without CSS editing will only display my blog title in lowercase - imagespike.

    I would like to have my heading read - ImageSpike, after trying the following CSS code:

    <head>
    <title><title>
    <style type="text/css">
    h1:first-letter { text-transform: capitalize; }
    </style>
    </head>
    <body>

    I can get the title to Imagespike but i'm unsure what code i shoud be using to get capital S.

    Any help would be greatly appreciated!

  2. devblog
    Member

    Where are you putting such code?? you cannot edit your pages source code here.

    Besides, to be able to edit any CSS, you need to have the CSS upgraded.

  3. imagespike
    Member

    I have installed the CSS upgrade and i amd trying to edit my header under the presentation option. The above code will provide me with a capital letter on the first word of my title but i don't know what to di to get a capital letter in the second word?

  4. judyb12
    Member

    but the code you show above isn't CSS

  5. starry1
    Member

    If you use the CSS tag text-transform:capitalize; it will only use capitals on the first letter of every word so only Image will have a capital letter.

    Can you not change your blog title in your options pane?

    Check the style sheet which came with your theme for any styling already placed on the header.

    Hope that helps!

  6. starry1
    Member

    Oops I forgot a bit haha. Went to look up the code and forgot to add it.

    If you put a space in between Image and Spike and then use the tag word-spacing: 0px; it should display how you want.

  7. judyb12
    Member

    i think starry1 is on the right track with the text-transform tag. I looked at your blog and found the following in the Chaotic Soul stylesheet:
    h1 { text-transform: lowercase; color: #fff; font-size: 2em; margin: 0 0 8px; }

    This added to the existing CSS will do it for you:
    h1 { text-transform: none; }

    I tried it on my test blog, and it worked perfectly. HTH

  8. devblog
    Member

    Great, Judy! However, let me suggest something different.

    imagespike,

    The point that I was trying to make is that, here at wp.com, you cannot edit the source code of pages, nor do stuff like writing your own markup like you're currently doing:

    <head>
<title><title>
<style type="text/css">
h1:first-letter { text-transform: capitalize; }
</style>

    Now, having said that, try modify the selector Judy's mentioning above to:

    h1 { text-transform: capitalize; color: #fff; font-size: 2em; margin: 0 0 8px; }

    That way, you don't need to add another rule for h1 and the text should display now the way you want (It Should Look Like This).

    Starry1, this is just a suggestion: when using a value of 0 (zero) don't add 'px', 'em', etc. to it. You don't need it.

  9. judyb12
    Member

    @devblog:

    Thanks for letting me know i was on the right track ;-) I think the OP wants a header that capitalizes in the middle of a word, though (no space between "Image" and "Spike"). Would your solution work for that?

    Maybe the OP should come back and clarify for us...

    [OT: i'm so excited i might have given an almost correct answer to a CSS question that i don't really care if it's not quite applicable here :-D]

  10. devblog
    Member

    Judy,

    Yes, it definitely would work. However, if the OP wants: 'ImageSpike' Then, your solution would be the right one.

    Now, let's say the OP wants his title to read "ImageSpike", then, just to achive the same effect but with less code, I'd recommend that instead of creating another rule (text-transform: none;) for the h1 selector, what the OP could do is take the text-transform property out of the h1 definition. So, the definition would read like this:

    h1 { color: #fff; font-size: 2em; margin: 0 0 8px; }

    Doing that would also work if he wants his title read "Image Spike". Adding the rule text-transform: capitalize; would make the first letter of every word inside that element to be in upper case even if he writes everything in lower case.

    HTH

    Edit: Damn! my reading comprehension skills are failing me again (kinda). I didn't read this part well: (no space between "Image" and "Spike")

    If that's the case, like I said above, your solution would be the right one ;)

  11. thistimethisspace
    Member

    Cool :)

  12. judyb12
    Member

    Ohhhh. I get it. I thought since there was already a text-transform tag in the Chaotic Soul CSS he would have to negate it with the reversal. You're saying he can just redo the h1 formatting without the text-transform at all.

    Thanks!

    Now, let's hope the OP comes back and this discussion hasn't been for naught :-D

  13. devblog
    Member

    Judy, you made an excellent point.

    If the OT is using the "Start From Scratch" option, then he could just modify the selector, but if he's using "Add to Existing(?) CSS" then, adding a new rule, like you suggested, would be the way to go.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags