Magazine pro child theme. Change back ground image and site container

Community Forums Forums Design Tips and Tricks Magazine pro child theme. Change back ground image and site container

This topic is: not resolved

This topic contains 16 replies, has 2 voices, and was last updated by  bheisler 3 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #111804

    bheisler
    Member
    Post count: 8

    I am able to change the background image in magazine pro, but it takes over the entire background. I would like the site container to be white while the rest of the background is the image. Please help. I am pretty new to this stuff, but learn quickly. i have seen this on other themes so I am guessing that it is possible.

    thank you in advance!

    http://livingportlandmagazine.com
    #111857

    Davinder Singh Kainth
    Participant
    Post count: 1295

    1. After you add background image, make following change.

    2. Change the following code in style.css

    
    /* Site Containers
    --------------------------------------------- */
    
    .site-inner,
    .wrap {
    	margin: 0 auto;
    	max-width: 1140px;
    }

    to

    
    /* Site Containers
    --------------------------------------------- */
    
    .site-inner,
    .wrap {
    	background:#fff !important;
            margin: 0 auto;
    	max-width: 1140px;
    }

    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #111896

    bheisler
    Member
    Post count: 8

    I inserted the new code as instructed, but all I see is the entire background image. It doesn’t change the content container. Could this be because I am adding the background image via a plugin? I appreciate your help on this.

    #111938

    Davinder Singh Kainth
    Participant
    Post count: 1295

    As of now your background is cream / light yellow color (my color visualization is bad!) and inner container is white color. Add background image and let me see how it behaves.


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #112023

    bheisler
    Member
    Post count: 8

    You are right. It wasn’t showing when I last checked. However, The white goes too far up into the black menu bar above and covers my menu options. I need to be able to bring it down some. Also, I think the pixel dimension is too narrow because now all content is distorted. Please help. Thank you in advance.

    #112024

    bheisler
    Member
    Post count: 8

    So, after looking at it with a background image, I need to widen the container, and keep the top menu bar black, and the footer space where search and archives are need to stay black as well.

    #112059

    Davinder Singh Kainth
    Participant
    Post count: 1295

    For top navigation bar with dark background. Look for following code in style.css

    .nav-primary {
    	background-color: #222;
    	left: 0;
    	position: fixed;
    	top: 0;
    	width: 100%;
    	z-index: 999;
    }

    Add following code below the above code

    .nav-primary .wrap {
    	background-color: #222;
    }

    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #112060

    Davinder Singh Kainth
    Participant
    Post count: 1295

    For dark background color in footer area. Look for following code in style.css

    /*
    Footer Widgets
    ---------------------------------------------------------------------------------------------------- */
    
    .footer-widgets {
    	background-color: #222;
    	color: #aaa;
    	clear: both;
    	font-size: 14px;
    	padding: 60px 0 20px;
    }
    
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3 {
    	width: 360px;
    }

    and change it to

    /*
    Footer Widgets
    ---------------------------------------------------------------------------------------------------- */
    
    .footer-widgets {
    	background-color: #222;
    	color: #aaa;
    	clear: both;
    	font-size: 14px;
    	padding: 60px 0 20px;
    }
    
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3 {
            background: #222 !important;
    	width: 360px;
    }

    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #112061

    Davinder Singh Kainth
    Participant
    Post count: 1295

    Lastly, to prevent content from touching edges – add padding to the following section. Look for following code:

    
    /* Site Containers
    --------------------------------------------- */
    
    .site-inner,
    .wrap {
    	background:#fff !important;
            margin: 0 auto;
    	max-width: 1140px;
    }

    change it to

    
    /* Site Containers
    --------------------------------------------- */
    
    .site-inner,
    .wrap {
    	background:#fff !important;
            padding:40px;
            margin: 0 auto;
    	max-width: 1140px;
    }

    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #112070

    bheisler
    Member
    Post count: 8

    Thank you very much for all of your help. I have added the code as you have instructed, and it has not changed. I am editing it through the dashboard > appearance > editor. I don’t know if that makes a difference or not?

    #112071

    bheisler
    Member
    Post count: 8

    So, I cleared cache and some changes showed up. the header doesn’t show my logo anymore, and is still white. The padding was added , but it threw everything out of order. Then the footer, only a small part turned the color it was supposed to. Please help. These are the final touches to my site. I really appreciate all of your help! Thank you very much.

    http://livingportlandmagazine.com

    #112072

    Davinder Singh Kainth
    Participant
    Post count: 1295

    Revert to old style.css file and make changes step wise

    First make the padding change as explained here – http://www.studiopress.com/forums/topic/magazine-pro-child-theme-change-back-ground-image-and-site-container/#post-112061


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #112073

    Davinder Singh Kainth
    Participant
    Post count: 1295

    Then to make footer widget background dark – add following code in footer widgets section

    
    .footer-widgets .wrap {
          background: #222 !important;
    }

    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #112076

    bheisler
    Member
    Post count: 8

    I went back to the original style.css the did them in individual steps. The footer is the only one that worked, but left a big space white. The padding code still mess with the sidebar widgets, and the header code doesn’t seem to work for me at all.

    #112079

    Davinder Singh Kainth
    Participant
    Post count: 1295

    To fix the white area at bottom, look for following code

    .site-footer .wrap {
    	border-top: 1px solid #444;
    	padding: 60px 0;
    }

    change this to

    .site-footer .wrap {
            background: #222 !important;
    	border-top: 1px solid #444;
    	padding: 60px 0;
    }

    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

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

You must be logged in to reply to this topic.