Inserting space between featured image and main page content

[Atit Patel]

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,

Attachments:

1. 

   Screen-Shot-2016-02-26-at-9.33.02-AM.png
   

2. 

   Screen-Shot-2016-02-26-at-9.42.06-AM.png
   

[Bill Robbins]

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

[Atit Patel]

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,

[Bill Robbins]

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

[Atit Patel]

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).

[Bill Robbins]

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

[Atit Patel]

Nice!!! Many Thanks!!!

[Bill Robbins]

Happy to help out. Have a fantastic weekend 🙂

[Author]

Posts