changing color, fonts, and background

Community Forums Forums Design Tips and Tricks changing color, fonts, and background

This topic is: resolved

This topic contains 11 replies, has 4 voices, and was last updated by  WISR 1 year ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #36142

    WISR
    Participant
    Post count: 4

    can someone show me where I change the following on my site. http://www.WiSR.ca

    1. font size and font style of primary navigation menu

    2.change ‘Featured Communities” widget background color (white to black) and font color(black to white)

    http://www.wisr.ca
    #36161

    wmwebdes
    Participant
    Post count: 102

    Hi
    This is the CSS for your primary nav

    #nav {
    color: #fff;
    font-size: 13px;
    }

    Looks as though it picks up font-family from the CSS below.

    body, h1, h2, h2 a, h2 a:visited, h3, h4, h5, h6, p, input, select, textarea {
    font-family: ‘Droid Serif’, arial, serif;
    font-weight: normal;
    line-height: 22px;
    }

    Change the font size under #nav and add the font you want under #nav.

    Let me know if you are OK with that.

    #36162

    wmwebdes
    Participant
    Post count: 102

    For the Featured Communities add the background colour to .communities as shown below:

    .communities {
    border-bottom: 3px double #000;
    clear: both;
    margin: 0 auto 25px;
    overflow: hidden;
    padding: 0 0 15px;
    width: 930px;
    background-color: #000000;
    }

    • This reply was modified 1 year ago by  wmwebdes.
    • This reply was modified 1 year ago by  wmwebdes.
    #36212

    WISR
    Participant
    Post count: 4

    Got it to work but now can’t figure out how to change the font color in the “Featured Properties” widget.

    Would like the background to be black but it washed out the font so I’ll leave it for now.

    Thanks for your help :)

    #36220

    wmwebdes
    Participant
    Post count: 102

    Font colour in “Featured Properties” widget is black (slightly off black) so you can’t see it with a dark background.

    Add
    color: #333;
    to .communities and change the colour to whatever you like.

    #333 is almost black.

    Free colour picker here… http://www.iconico.com/colorpic/

    #36234

    WISR
    Participant
    Post count: 4

    Tried adding a color to the .communities (Featured Communities) but it wouldn’t take.

    Below is how it looks and I tried adding, color: #fff, (not shown below), directly below .communities { , but it didn’t change the color of any fonts.
    .communities {
    border-bottom: 3px double #000;
    clear: both;
    margin: 0 auto 25px;
    overflow: hidden;
    padding: 0 0 15px;
    width: 930px;
    background-color: #000;
    }

    .communities p {
    font-size: 13px;
    line-height: 20px;
    padding: 0;

     

    I’m thinking it must be changed elsewhere, maybe under my “red theme” in .css?

     

    #36268

    anitac
    Participant
    Post count: 6407

    Each home is a Featured Post, so the settings are there – but because a lot of elements are now combined, if you change 1 element, they change something else. You need to break it down so here’s what to do:

    For the black background, do this. Look for this code and change the background color to #000000 for black.

    .communities {
        background-color: #DDDDDD;
        border-bottom: 3px double #000000;
        clear: both;
        margin: 0 auto 25px;
        overflow: hidden;
        padding: 0 0 15px;
        width: 930px;
    }

    Then, copy and paste this at the bottom of your style.css sheet. I added the color in there – change the color to what you want.

    .communities h2, .communities h2 a, .communities h2 a:visited {
        font-family: 'Droid Serif',arial,serif;
        font-size: 14px;
        color: #cc9900;
        line-height: 22px;
        margin: 0;
        text-align: center;
        text-transform: uppercase;
    }

    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #36269

    ramseyp
    Participant
    Post count: 97

    If you want the whole widget background to be black, this should work (in your style.css):

    `.widget.featured-listings { background: #000; }`

    To turn the widget’s font to white, this should work (also placed in style.css):

    `.featured-listings .listing { color: #fff; }`


    #36270

    anitac
    Participant
    Post count: 6407

    Open up your style… you added the at the beginning and end of the style sheet. Remove that code.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #36284

    WISR
    Participant
    Post count: 4

    I was able to make the color change for the font below the images in “Featured Communities”, and make the background black too.

    The problem I’m having is when I change the color of the word ” Featured Communities” to white, (so its visible with the black background), it also changes the headlines in my “From the Blog” section and the lower part of my slider text to white as well and they become invisible unless I hover over them with my mouse.

    How can I change the color of  the word “Featured Communities” to white and have the other 2 sections (stay black) not be affected?

    Thanks for all your suggestions! This is quite a learning experience :-)

     

    #36289

    anitac
    Participant
    Post count: 6407

    Add this to the bottom of your style sheet:

    .communities h4 {
    color: #ffffff;
    }

    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #36294

    WISR
    Participant
    Post count: 4

    WOOHOOO!!!   Thank you :-)

     

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

You must be logged in to reply to this topic.