Backgroud behind Background

Support Area Forums Elite Backgroud behind Background

Viewing 9 posts - 1 through 9 (of 9 total)
URL to the page in question: http://http://www.wholefoodsmarket.com/
  • Author
    Posts
  • #26045
    Jiří Bernát
    Participant

    Hi Bill,
    I bought plenty of background pictures. But it doesn´t look weel on my pages http://www.olivace.cz. Because there is the problem with width of my pictures.
    Is it possible to change settings and use another picture at left/right side? Just like on the picture of http://www.wholefoodsmarket.com/.
    So the basic background will be narrower and both sides of the page will be used for another picture?
    Is it possible to set the shadow effect also? As is on the picture.

    Many thanks for reply.

    Best regards.

    Jiri

    #26049
    Bill Robbins
    Moderator

    Good Morning Jiří,

    Great question there. I took a look at your site. The hero image for the home page looks like it is 800 pixels by 800 pixels. Since it is set to always fill the screen, that will result in some cropping. Most browser windows are somewhat rectangular, so you’ll get more cropping on the top and bottom.

    I typically suggest using a 2000 pixel wide image by about 1200 pixels tall. That tends to work well across many browser sizes with a minimum of cropping.

    If you do want to add a “wrapper” to the theme so to speak, so that it doesn’t fill the entire width of the browser window, that can be done. Let me know if you decide to go that route and I’ll show you how to make that happen.

    Thanks,
    Bill

    #26059
    Jiří Bernát
    Participant

    Hi Bill, thanks for reply.
    So it means that the wrapper doesn’t help with entire width? Lonely solution is to have 2000/1200pixels pictures?

    I thing it could be nice part of the design.
    So can we try it?

    Many thanks.

    Jiri

    #26063
    Bill Robbins
    Moderator

    Jiri,

    What we can do is set a width for the content areas of the site. That will give it a “wrapper” like the Whole Foods site has. You’ll be able to see the site background on either side of the site’s content.

    It’ll take me just a bit to cook that up for you. I’ll post it this evening.

    Thanks,
    Bill

    #26070
    Bill Robbins
    Moderator

    I think I have this ready to go for you. There is one edit to a theme file that’s required. I’m going to include this change in the next update in case anyone else needs to change the width of these in the future. Here’s what to do first:

    1. Go to the Appearance section in your WordPress dashboard and choose Edit.
    2. From the list of files on your right, choose custom-js.php
    3. Find this section:
      
      // Masonry for footer widgets
      	var $container = jQuery('#footer-sidebar');
      		$container.imagesLoaded(function(){
      		$container.masonry({
      			itemSelector : '.widget',
      			gutterWidth  : 60,
      			isAnimated   : true,
      			columnWidth	 : 340
      		});
      	});
      

      and replace it with this:


      (Be sure to copy that code from the support site and not the notification email).

    4. Save your changes.
    5. Next go to the theme options page and select the Advanced tab. Scroll down to the Custom CSS box and add this:
      
      #footer-content {
      	padding-left: 30px;
      	padding-right: 30px;
      }
      
      #footer-sidebar {
      	width: 100%;
      }
      
      .page-template-page-home-template-php .wrap  {
      	padding-left: 30px;
      	padding-right: 30px;
      }
      
      @media only screen and (min-width: 1201px)  {
      	
      	#footer,
      	#page-wrap,
      	#home-one,
      	#home-two,
      	#home-three,
      	#home-four,
      	#home-five,
      	#home-six,
      	#home-seven,
      	#home-eight,
      	#home-nine,
      	#home-ten,
      	#hero-section {
      		width: 1140px;
      		margin-right: auto;
      		margin-left: auto;
      	}
      	
      	#footer-sidebar .widget {
      		width: 320px;
      	}
      	
      }
      
      @media only screen and (min-width: 1024px) and (max-width: 1200px) {
      	
      	#footer,
      	#page-wrap,
      	#home-one,
      	#home-two,
      	#home-three,
      	#home-four,
      	#home-five,
      	#home-six,
      	#home-seven,
      	#home-eight,
      	#home-nine,
      	#home-ten,
      	#hero-section {
      		width: 960px;
      		margin-right: auto;
      		margin-left: auto;
      	}
      	
      	#footer-sidebar .widget {
      		width: 255px;
      	}
      	
      	#header ul#primary-menu li {
      		font-size: 24px;
      	}
      	
      }
      
      @media only screen and (min-width: 768px) and (max-width: 1023px) {
      	
      	#footer,
      	#page-wrap,
      	#home-one,
      	#home-two,
      	#home-three,
      	#home-four,
      	#home-five,
      	#home-six,
      	#home-seven,
      	#home-eight,
      	#home-nine,
      	#home-ten,
      	#hero-section {
      		width: 750px;
      		margin-right: auto;
      		margin-left: auto;
      	}
      	
      	#footer-sidebar .widget {
      		width: 300px;
      	}
      	
      	#header ul#primary-menu li {
      		font-size: 20px;
      	}
      	
      }
      

      and update your settings.

    See if that won’t set a width for your content and wrap everything up in it. I also added in some code to make your navigation menu items a bit smaller when the screen is smaller so that they will fit better.

    Let me know how that goes,
    Bill

    #26073
    Jiří Bernát
    Participant

    Hi Bill, it works. Thank you very much. Now I have to create better pictures then I have, with bigger width.

    I know that I have lot of questions, is it possible to make the shadow effect on the rigt and left side of the central bacground, but only in the case that is simple for you.

    Thanks for reply.

    Best regards.

    Jiri

    #26082
    Bill Robbins
    Moderator

    I’m glad that worked for you. We can probably add in a small shadow. The tricky thing is since we’re working with lots of individual boxes and not one continual box from top to bottom, you may seem some of the shadow at the bottom of the home sections. If you’d like to try, add this to the Custom CSS too:

    
    #footer,
    #page-wrap,
    #home-one,
    #home-two,
    #home-three,
    #home-four,
    #home-five,
    #home-six,
    #home-seven,
    #home-eight,
    #home-nine,
    #home-ten,
    #hero-section {
    	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    }
    

    Have a great weekend,
    Bill

    #26110
    Jiří Bernát
    Participant

    Hi Bill, thank you very much 🙂

    Have a nice day.

    J.

    #26111
    Bill Robbins
    Moderator

    Glad that helped out…have a great week 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Backgroud behind Background’ is closed to new replies.