Need help? Check out our Support site, then


Enterprise - Custom Colors

  1. 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. 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. 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. 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. @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. 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. 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. You are welcome.

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

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

  10. This will do it.

    .navright {
    display: none;
    }
  11. Fantastic! Thank you so much for taking the time to help me. I really, really appreciate it! You are a star!

  12. Thank you and you are welcome.

  13. @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. 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. Perfect. Thank you!

  16. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic