Cover Photo – Full Width Not Working

Hi there,

The way the “panels” on the homepage of the Shoreditch theme works is that each panel is a separate page, and then in the theme settings, each of those sub-pages can be set as a “panel” on the homepage.

For example if you look at the demo site You will see there are 4 panels:

• Welcome
• Partners
• Services
• Testimonials

In this case the “Welcome” page is set as the homepage, and each panel below it is a page that is created on the site, and set to be a “child page” of the homepage. When you do that, the theme will pull each of those “child pages” content into the design of the Welcome page.

Here is how the pages look when you view them in the dashboard. Screenshot at this link: https://d.pr/i/qVfUUK

When you set a featured image for one of the child pages, that becomes the background image for that entire “panel” and all the text you see in that panel is text that is added to the child page when it was created.

More info on how to set up Shoreditch here: https://wordpress.com/theme/shoreditch

Thank you, this is working! They didn’t explain it as clearly on the theme page.

One more question; how do I ensure white font on the H1 tag on the pages with the featured image (Like “Welcome” and “Services” on the theme demo) and H1 tag on the pages without the featured image to be a different colour (like “Partners” on the theme demo)?

I’m not sure I understand. By default the theme will set any panel without a featured image to use dark text (#2c313f) and if a featured image is set the text will automatically display as white text. There should be no other need for you to make changes on your end.

Are you finding it to be the case that you need to set font colors manually? if so please point it out on your site and we’re happy to take a closer look.

Hi Jerry,

Well I worked it out in the end. It was when I was playing with the code beforehand to try and sort the width issue that I accidentally interrupted the code that changed the font colour.

On another note, is there a quicker way I can change the padding between the pages that show on the homepage?

https://phoenixcounselling.mariawaugh.co.uk/

The gap between PROFESSIONAL SERVICES YOU CAN CONFIDENTLY ENGAGE WITH and the Featured image with the list of services is way too big. I don’t really want to put the title into the featured image, unless there was a way I could put it into the same page but it would sit above the featured image?

Thank you for your help, as you can tell, I’m still learning.

This should help tighten it up a bit:

h2 {
margin-bottom: 0px;
}

I’ve used this in the Additional CSS (I don’t want the gap tightened all across board) but it hasn’t worked. When I check the code on the browser, it seems to be the padding, but again I don’t want to change it on the whole site, only on this one bit.

Try this instead:

article#post-222.page.type-page.status-publish.hentry {
  padding-bottom: 30px;
}

Worked beautifully, thank you ??

Glad I could help ??