Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Coraline: CSS to change blog title color, center nav menu

  1. paulandrew
    Member

    For http://paulkonasewich.com (yes, hosted on good old wordpress.com) I'm trying out the CSS mods (yes, which I'm happy to pay for if I can get them working) but no joy so far. Would appreciate input on how to do it.

    1. I'd like to change the color of the title of "Paul Konasewich, MBA" and also the subtitle "innovating social enterprise."

    2. I'd like to center the nav bar / menu bar on the screen.

    I tried the below CSS, but I'm doing something wrong. Ideas?

    thanks,

    Paul.

    #site-title {
    color: #a800000;
    }
    #site-title a {
    color: #a800000;
    }
    #access {
    float: center;
    }

    The blog I need help with is paulkonasewich.com.

  2. thesacredpath
    Staff

    The site title is a link, so you need to change the color here

    #site-title a {
color:#000000;
}

    The tag line is here

    #site-description {
color:#000000;
}

    On centering the nav bar, I can't figure out how to do that. Perhaps Luke Hall will drop by later and get that for you. Actually I did get it to center, but it sort of blew things up so obviously I was not doing it correctly.

    Do note that the color code you have has one too many zeros's. They are hex (6) alpha-numeric characters such as this: A80000 . That is why it did not appear to change.

  3. thesacredpath
    Staff

    One other thing, the float attribute is left or right, there is no center value.

  4. paulandrew
    Member

    Thanks for your help.

    I tried fixing the hex value, but still no result. I used this code along with "add this to the coraline theme's css page" option:

    #site-title a {
    color:#B30024;
    }

    #site-description {
    color:#B30024;
    }

    and see no change in the preview.

    Perhaps on a related note, when I copy in the contents of the full CSS file and choose "start from scratch and just use this" then the preview shows a page that looks like it has no CSS at all. Thus it's as if the extra CSS code isn't getting added at all--has anyone heard of this happening?

  5. thesacredpath
    Staff

    The preview is basically busted right now, has been for at least a couple weeks. Save the changes and then visit the blog pages and those changes will work for you.

  6. paulandrew
    Member

    aha! ok I went ahead and bought the CSS upgrade, so now I can see the changes in action. thanks for the heads up on that.

    so hope to hear from Luke on the possibility of centering the nav bar.

  7. thesacredpath
    Staff

    You're welcome. I hope staff gets the CSS preview fixed soon. It is, as you have discovered, useless right now.

  8. hallluke
    Member
     

    #access .menu ul {float:left; position:relative; left:50%;}
#access .menu ul li {position:relative; right:50%;}
#access .menu ul ul {position:absolute; left:0;}
#access .menu ul ul li {left:0;}

    If you resize your text too large and the menu takes up more than one line it will stop being centred but other than that it should work just fine. I'm going to bookmark this method myself as centre-aligning variable width elements is a pain and this works well!

  9. jkcollier
    Member

    @thesacredpath: I've been beating my head against the preview for the last few days, and just ran across your post ("The preview is basically busted right now...").

    I find that when I manually refresh the preview in my browser (once it comes up), I see more or less what I expect to. But I'm not very skilled in CSS.

    Do you find that manually refreshing makes any difference?

  10. hallluke
    Member

    With respect to the preview mode of the CSS editor, refreshing your browser can help as can clearing the cached files, but not in every situation that I've seen. If you have already paid for the CSS upgrade the best thing to do is create a page or post that is password protected or hidden from the main navigation and use that to test out your CSS styles. You can target it specifically with its "page" or "post" ID and then use this in front of every style declaration you make. The ID will be visible if you view the source of the page or use Firebug. That way, when you save your CSS changes, the rest of your blog will be unaffected and you can preview the modifications in private.

  11. paulandrew
    Member

    @hallluke: thank you! worked like a charm.

    just a reminder to anyone thinking about the CSS upgrade but wanting to see what it'll look like--it's refundable within 30 days. give it a try and if you don't like it, just return it.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags