Background in Agency theme

Community Forums Forums General Discussion Background in Agency theme

This topic is: not resolved

This topic contains 18 replies, has 2 voices, and was last updated by  rfmeier 10 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #44090

    shumie
    Participant
    Post count: 9

    When I change the background color in the Agency theme, the black remains at the top of the page. How can I make the entire background the same color?

    http://www.faithpeptalks.com
    #44093

    rfmeier
    Participant
    Post count: 517

    Hello,

    Within your style.css file, the following css needs to be changed;

    body {
    	background: #f1f1f1 url(images/bg.png) repeat-x;
    }
    

    to

    body {
    	/* background: #f1f1f1 url(images/bg.png) repeat-x; */
    }
    

    This should remove the default background image.

    Let me know how it turns out.


    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

    #44099

    shumie
    Participant
    Post count: 9

    Thanks! I removed that phrase from the style.css file and it worked.

    Can you tell me how I change the color of the hover boxes on the menu?

    Appreciate your help.

     

    #44100

    rfmeier
    Participant
    Post count: 517

    I am glad that worked. For the menu hover colors, there are a few different css combinations you can try. For starters, just replace the default background-color;

    Around line ~302

    .menu-primary li a:active,
    .menu-primary li a:hover,
    .menu-primary .current_page_item a,
    .menu-primary .current-cat a,
    .menu-primary .current-menu-item a,
    .menu-secondary li a:active,
    .menu-secondary li a:hover,
    .menu-secondary .current_page_item a,
    .menu-secondary .current-cat a,
    .menu-secondary .current-menu-item a,
    #header .menu li a:active,
    #header .menu li a:hover,
    #header .menu .current_page_item a,
    #header .menu .current-cat a,
    #header .menu .current-menu-item a {
    	-moz-border-radius: 5px;
    	-moz-box-shadow: 0 1px 0 #333;
    	-webkit-border-radius: 5px;
    	-webkit-box-shadow: 0 1px 0 #333;
    	background-color: #000; /* background color */
    	border-radius: 5px;
    	box-shadow: 0 1px 0 #333;
    	color: #fff; /* font color */
    }

    However, if you just want the hover color to change, add the following after line 326

    .menu-primary li a:hover,
    .menu-secondary li a:hover,
    #header .menu li a:hover {
    	background-color: #000; /* background color */
    	color: #fff; /* font color */
    }

    Try either of those and let me know how it turns out.


    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

    #44805

    shumie
    Participant
    Post count: 9

    For some reason I cannot get my hover color to change. I tried replacing the hover background color as you instructed in your first example, but it doesn’t change. Any advice?

    #44808

    rfmeier
    Participant
    Post count: 517

    Was this the code you added for the new hover styling?

    /* line ~288 */
    .menu-primary li a,
    .menu-secondary li a,
    #header .menu li a {
    	color: #777;
    	display: block;
    	font-size: 14px;
    	padding: 6px 15px 4px;
    	position: relative;
    	text-decoration: none;
    }

    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

    #44809

    shumie
    Participant
    Post count: 9

    No, I didn’t add anything because I don’t know what I’m doing. Is there a simple way where I can just change a hex color? Also, how do I locate the line numbers? Sorry you have to deal with such a novice:=)

    #44811

    rfmeier
    Participant
    Post count: 517

    Okay. Just past the code below at the bottom of your style.css file.

    .menu-primary li a:hover,
    .menu-secondary li a:hover,
    #header .menu li a:hover {
        background-color: #000; /* background hex color */
        color: #fff; /* font hex color */
    }

    You can change the colors as needed.

    Hope this helps.


    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

    #44815

    shumie
    Participant
    Post count: 9

    Still didn’t work. This is what I added at the very bottom of my style sheet after the last bracket.

    .menu-primary li a:hover,
    .menu-secondary li a:hover,
    #header .menu li a:hover {
    background-color: #000; /* #5ec6cc */
    color: #fff; /* font hex color */
    }

    What am I doing wrong?

    #44816

    rfmeier
    Participant
    Post count: 517

    You didn’t do it entirely wrong :) It is there. However, it is still using the same colors. You need to change the hex color. What hex colors did you want the text and background to be on hover?


    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

    #44817

    rfmeier
    Participant
    Post count: 517

    Never mind, You posted them. I read it too fast.

    Let me give you new code to paste.


    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

    #44818

    rfmeier
    Participant
    Post count: 517

    Okay. Re-paste this code;

    .menu-primary li a:hover,
    .menu-secondary li a:hover,
    #header .menu li a:hover {
        background-color: #5ec6cc;
        color: #fff; /* font hex color */
    }

    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

    #44819

    shumie
    Participant
    Post count: 9

    The font color can stay the same.

    #44820

    shumie
    Participant
    Post count: 9

    Ryan, I’m so frustrated. I copied what you sent me, inserted it at the bottom of my style sheet, hit update, refreshed my site, but it still has black boxes. I know it’s something simple that I’m missing. Do I have it in the wrong spot?

    .menu-primary li a:hover,
    .menu-secondary li a:hover,
    #header .menu li a:hover {
    background-color: #5ec6cc;
    color: #fff; /* font hex color */
    }

    #44822

    rfmeier
    Participant
    Post count: 517

    Okay. I think this may have been my fault. I was over thinking it.

    Once more, re-paste this;

    .menu-primary li a:active,
    .menu-primary li a:hover,
    .menu-primary .current_page_item a,
    .menu-primary .current-cat a,
    .menu-primary .current-menu-item a,
    .menu-secondary li a:active,
    .menu-secondary li a:hover,
    .menu-secondary .current_page_item a,
    .menu-secondary .current-cat a,
    .menu-secondary .current-menu-item a,
    #header .menu li a:active,
    #header .menu li a:hover,
    #header .menu .current_page_item a,
    #header .menu .current-cat a,
    #header .menu .current-menu-item a {
    	background-color: #5ec6cc;
    }

    This will change the color to active and hover menu items.


    Ryan Meier – Web Developer @ Solid Interactive
    Twitter

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.