URGENT: Need CSS help please

Community Forums Forums Design Tips and Tricks URGENT: Need CSS help please

This topic is: resolved

This topic contains 5 replies, has 3 voices, and was last updated by  leannemorrison 2 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #5357

    leannemorrison
    Participant
    Post count: 21

    Hi, I am using Genesis + Production theme, and have my test site set up here http://clientsites.jonmorrison.com.au.

    The bit I need help with please, is the secondary menu (Home, About Bendalls Group, etc).  The original menu bar was grey, but my client wants it to be black.  This has made the text for the page headings very difficult to see.  I cannot find where to change the colour for these :).  Looking at the stylesheet, it appears that there could be some sort of text shadow too.

    Also too, I would like to change the font colour in the footer to a lighter colour.  I can’t work that one out either :)

    I have managed to work my way around most of the other changes, but these ones have me stumped.  I would really appreciate it if someone could point out what I  need to do please.  Please be gentle, as I do not know much about CSS.

    Many thanks in advance

    Leanne Morrison

     

    #5429

    Aaron Hartland
    Participant
    Post count: 37

    The color of the menu items is being set in this block of css (#555 being the current color):

    div .menu-primary a,
    div .menu-primary a:visited,
    div .menu-secondary a,
    div .menu-secondary a:visited,
    #header .menu a,
    #header .menu a:visited {
    color: #555;
    display: block;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
    padding: 6px 10px;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px #F6F6F6;
    }

    There is also text-shadow in this css, but it’s not the only spot. Also see:
    div .menu-primary,
    div .menu-secondary {
    color: #555;
    font-size: 14px;
    text-shadow: 1px 1px #F3F3F3;
    text-transform: uppercase;
    }

    For the color of the paragraph text in your footer widgets, find this:
    #footer-widgets p {
    font-size: inherit;
    margin: 0 0 10px;
    }

    and add a color line like so:
    #footer-widgets p {
    color: inherit;
    font-size: inherit;
    margin: 0 0 10px;
    }

    This will pull in the color that is being set in for the #footer-widgets

    I hope that helps!


    Aaron Hartland | http://www.aaronhartland.com
    Twitter  |  Facebook  |  LinkedIn  |  Google+

    #5479

    leannemorrison
    Participant
    Post count: 21

    THANK YOU so much Aaron, that did the trick.  Just one other thing please?

    Naturally when I started changing colours, it had a flow on effect, and you fix something here, and some other issue pops up there ….

    In the menu (Home, About Bendalls, Projects & Case Studies etc), I have CHANGED the background to black and the text now to white.  I have also changed the dropdowns from a white background to black, with light grey text.

    Due to the fact I changed the main menu text to white, it does not show up against the white background when these pages are hovered over.

    I would like to change the hover menu items to dark grey with black text.  Where would I change these please?

    Many thanks in advance

    Leanne

    #5482

    leannemorrison
    Participant
    Post count: 21

    Don’t worry – I fixed it!

     

    For anyone else looking for the answer, I went to

    #header .menu .current-menu-item a {  background: none repeat scroll 0 0 #666666;  text-shadow: none;

    and changed the colour there.

    Thanks once again for your assistance Aaron.  You are a lifesaver!

     

    #5808

    CharlieL
    Participant
    Post count: 24

    Please, do yourself a favor and use the tools available in your browser to find out where to change certain CSS.

    For Firefox you can use FireBug. Install the plugin and play with it a little and you will discover its power.

    In Chrome there is a tool built-in. Right-click and choose the option at the bottom of the list, something like “check component” in a free translation. I do not use the English version.

    Opera also have built-in developer-tools that works very much like FireBug.

    You will save yourself a lot of frustration if you use these tools. They can take some time to get used to but that is well worth the time.

    Enjoy!

    #5876

    leannemorrison
    Participant
    Post count: 21

    Oh Charlie, you are surely my Christmas present!  A big thank you.  I had no idea about Firefox and Firebug.  It makes life so much simpler!  I was a Google only girl, but have now downloaded Firefox and Firebug and can see what you are talking about.

    Once again my sincere thanks to you and all those who have given me assistance with this.  I really really appreciate it.

    Merry Christmas and Cheers to you all

    Leanne

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘URGENT: Need CSS help please’ is closed to new replies.