Inserting space between featured image and main page content

Support Area Forums Bottega Inserting space between featured image and main page content

This topic contains 7 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question: http://nilisart.com
  • Author
    Posts
  • #35664

    Atit Patel
    Participant

    Hello,

    I am playing around with bottega and having fun :-). I really like the template.

    I would like to insert some space between featured image on my page and the main content of the page so that the background image can be seen through the gap. Not sure how can I do that.

    My website is http://www.nilisart.com. I have made a sample site using wix. That shows how I want the site to look. (http://patelnili.wix.com/nilisart).

    Also, same question for the gap between main content of the page and footer. Attaching pictures also for more detail.

    I really appreciate your help.

    Thanks,

    #35668

    Bill Robbins
    Keymaster

    Good Morning Atit,

    Glad you’re enjoying the theme. Looks like you’re off to a great start too.

    It is possible to insert spaces there. What we’ll need to do is make the “wrapper” on the home page transparent. That way its background won’t get in the way as we create space. Then we can add a background to the individual elements. Here’s how to make that happen:

    1. Go to the Appearance section in your WordPress dashboard and click on Theme Options.
    2. Choose the Advanced tab and scroll down to the Custom CSS box at the bottom and add this:
      
      .home #wrap {
      	background: transparent !important;
      }
      
      #home-content {
      	background-color: #fff;
      }
      
      .home #footer {
      	margin-top: 20px;
      }
      
    3. Save your changes.

    See if that won’t space those elements out on your home page. If you run into any questions or trouble, let me know.

    Thanks,
    Bill

    #35675

    Atit Patel
    Participant

    Hi Bill,

    Thanks. I much appreciate the quick help. That worked for home page. I do see thought that other pages, (About, Locations, Shop) that have default or full-page templates don’t have the similar spacing in the footer. I am thinking we need to do that to have a consistent feel across the site.

    Thanks,

    #35677

    Bill Robbins
    Keymaster

    My apologies, I didn’t realize you were looking to do that throughout. We can do that with a bit of editing. Here’s what to do:

    1. In your WordPress dashboard, click on the Appearance section and choose header.php from the files listed on your right.
    2. Scroll down to the bottom of the file and add this:
      
      <div id="custom-wrap">
      

      (make sure to copy that directly from the support site instead of the notification email.)

    3. Save your changes and open up the footer.php file.
    4. At the very top of the file, create a new line and add this there:
      
      </div>
      

      and save your changes.

    5. Next go back to the Custom CSS in the theme options and change what we added earlier to be like this:
      
      #wrap,
      .home #custom-wrap {
      	background: transparent !important;
      }
      
      #home-content,
      #custom-wrap {
      	background-color: #fff;
      }
      
      #footer {
      	clear: both;
      	margin-top: 20px;
      }
      

      and update your settings.

    Hopefully that will get you to where you’re wanting to go. It’s untested though, so if it doesn’t get there perfectly, let me know and I’ll help you adjust it. We’ll need that code there to create the space between the footer and the main content areas on the home page.

    Let me know how it goes,
    Bill

    #35678

    Atit Patel
    Participant

    Hi Bill,

    Many Thanks for quick help.

    The home page looks good. “Default Template” (nilisart.com/about) pages look funny. I have left that page as-is for now. So you can take a look.

    Pages with “FullPage” template looks better though (nilisart.com/locations).

    #35679

    Bill Robbins
    Keymaster

    I believe I see what we need there. Add this snippet to your Custom CSS also:

    
    #custom-wrap {
    	overflow: hidden;
    }
    

    Save your changes and see if that doesn’t do the trick for you.

    Bill

    #35680

    Atit Patel
    Participant

    Nice!!! Many Thanks!!!

    #35681

    Bill Robbins
    Keymaster

    Happy to help out. Have a fantastic weekend 🙂

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

The topic ‘Inserting space between featured image and main page content’ is closed to new replies.