Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Enterprise - Custom Colors

  1. rainydaygirluk
    Member

    I’ve set up a new blog using the Enterprise theme which is exactly what I was looking for but I want to tweak the CSS a little in order to make a few minor adjustments; mostly cosmetic ones so that it’s a little bit more ‘me’. As you can see I’ve already managed to achieve most of the changes myself, however I would really appreciate a little help with a couple of other things that I either can’t figure out for myself or that I’m having trouble with.

    1) I’ve changed the link color to turquoise instead of blue, however if you look at the comment on the test post and hover over the ‘reply’ link on the test comment you will see that the word reply has also changed to turquoise, when originally the word itself remained white. Although this really isn’t that big a deal in the grand scheme of things, now that I’ve noticed it It’s really beginning to annoy me and I’d really like the word itself to remain white when hovering over it, i.e. the way it was before I changed the link color elsewhere.

    2) How would I go about changing the navigation menu bar to a different color, as well as changing the hover color too? I did at one point figure out the first part (and then promptly forgot how I did it), but I couldn’t for the life of me figure out the second part. Help on both parts would be really appreciated.

    Thank you!

    The blog I need help with is rainydaygirl.net.

  2. timethief
    Member

    I can't help with CSS but you may find your answers by doing a tag search > http://en.forums.wordpress.com/tags/enterprise

  3. thesacredpath
    Staff

    1. This will do it.

    .reply a:hover {
color: #FFFFFF;
}

    2. The background color for the nav is done via an image. You can either make your own image to match the size of the existing, upload it to your media library and then put the URL of that image into the following replacing "images/nav.png" (between the quote marks or make the image "none" and then declare a different color in that background declaration.

    #nav {
background: url("images/nav.png") repeat-x scroll 0 0 #333333;
}

    Or (color shown just a placeholder)

    #nav {
background: none no-repeat-x scroll 0 0 #CC0000;
}

    Hover color for text on menu:

    .nav ul li a:hover, .nav ul li a.selected {
color:#CC0000;
}

    If you want to change the hover color of the background (that goes a lighter grey, again it is an image and you can do the same thing as with the main part of the menu bar and create a new image, or do the image as "none" and declare a color in the background declaration.

    .nav ul li a:hover, .nav ul li a.selected {
background: url("images/navhov.png") repeat scroll center top #333333;
}

  4. thesacredpath
    Staff

    I might also suggest rounding the bottom corners of the nav by adding the following to #nav.

    border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

  5. rainydaygirluk
    Member

    @thesacredpath - thank you so much and so speedy too!

    1. It worked perfectly and fixed the problem.

    2. Exactly what I wanted, although I did have to tweak it a little as it wouldn't work to start with, but after removing the 'no-' part it worked like a charm. One other quick question, if that's okay, is it possible to remove or change the color of the black lines either side of the page titles as it looks a little odd...although the more I look at it the more it's growing on me. Hhmm, not sure about it though.

    3. Brilliant, although I take it you meant the top border corners rather than the bottom. But either way it looks fab!

    Thank you so much!

  6. thesacredpath
    Staff

    Oh yeah, I added the "no-repeat" thinking of going with a color rather than an image.

    This will get rid of the black lines (it is another image so I just did a "none".

    .nav ul li a {
background: none repeat scroll 0 0 transparent;
}

  7. rainydaygirluk
    Member

    Ah okay, although I did use a color rather than an image but it wouldn't work with the 'no-repeat' in, however did when I removed it. Never mind, either way it worked, so thank you again.

    Excellent. Thank you!

  8. thesacredpath
    Staff

    You are welcome.

    Strange though, the no-repeat only applies to images, not to color. I'll have to play around with that.

  9. rainydaygirluk
    Member

    How would I go about removing the post and comment feed links and images from the navigation bar?

  10. thesacredpath
    Staff

    This will do it.

    .navright {
display: none;
}

  11. rainydaygirluk
    Member

    Fantastic! Thank you so much for taking the time to help me. I really, really appreciate it! You are a star!

  12. thesacredpath
    Staff

    Thank you and you are welcome.

  13. rainydaygirluk
    Member

    @thesacredpath - would you be able to help me with the navigation bar again, please?

    I'm wanting to add drop-down menus to the navigation bar, but when I do so the drop-down menus are the default theme colors/images (as seen on the About drop-down menu) how would I go about making them the custom colours, so the default ones do not show at all? Thanks!

    Oh, and if I wanted to change the text on the drop-down to uppercase, how would I go about doing this? Thanks!

  14. thesacredpath
    Staff

    The following are the places you will have to change the color. The last one now has a red color in it as a placeholder since it originally used an image with and then no color declaration.

    .nav ul li a:hover, .nav ul li a.selected {
background: url("images/navhov.png") repeat scroll center top #333333;
color: #EEEEEE;
}
.nav ul li ul li a {
background: none repeat scroll 0 0 #434343;
color: #FFFFFF;
}
.nav ul li ul li a:hover {
background: none repeat scroll 0 0 #323232;
color: #FFFFFF;

.nav li:hover > a {
background: none repeat scroll center top #CC0000;
}

  15. rainydaygirluk
    Member

    Perfect. Thank you!

  16. thesacredpath
    Staff

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags