Remove specific page content area for neater slider display

[jonathonfowler]

Hi,

Would anyone be able to advise how to remove the white page background/content area that would normally be filled with text?

I have a few pages currently displaying sliders, but I don't like the white page background areas protruding from the top and bottom of the slider.

See an example here:

Either how to reduce the size of the white content area so tha it disappears behind the slider, or alternatively how to completely remove the content area, I can then use Simple Hooks plugin to add code for the slider just below the menu area - and how to only apply this to the slider pages, not all pages?

Thank you!

---

Award-winning wedding photographer in Scotland

http://www.jonathon.co/pre-wedding-photo-shoot-engagement-photos/

[emasai]

To find a specific page id, you need to use a web inspector and view the html output. The page id will be at the top and look something like this:
<body class="page page-id-86951 page-template-default custom-background header-full-width full-width-content" itemscope="itemscope" itemtype="http://schema.org/WebPage" cz-shortcut-listen="true">

Next with your web inspector you need to find which tag is outputting the white background, in your case
.content .entry{
background-color: #fff;
}

Next in your css file add each page id and tag and remove the background:
.page-id-86951 .content .entry{
background-color: transparent;
}

For several pages, you need to state the full tag and separate with a comma except for the last one:
.page-id-86951 .content .entry,
.page-id-87314 .content .entry,
.page-id-87268 .content .entry{
background-color: transparent;
}

A simpler way would be to give each of this type of page a body class e.g. photography, and use that instead.
.photography .content .entry{
background-color: transparent;
}

The body class can be added to each page below the text editor, under Layout Settings > Custom Body Class. If this is not visible on your posts/pages go to the top of the page and click on Screen Options (top right corner) and check Layout Settings.

Scots Wha Hae!

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[jonathonfowler]

Hi Lynne,

Thank you very much for this information, I appreciate it and I'll put it to use in a wee while!

How would I then reduce the padding above and below the slider, how would I reduce the size of the content area so the top of the slider sits up against the bottom of the menu area, and the bottom of the slider sits level with the footer area?

Thanks again for your reply!

Regards,

Jonathon.

---

Award-winning wedding photographer in Scotland

[jonathonfowler]

I tried your suggestion above but it's not had the desired effect - nothing has happened 🙁

---

Award-winning wedding photographer in Scotland

[jonathonfowler]

Fixed! I changed a setting on the slider and now the white content area has been made transparent. thank you!

Now if I can reduce the height of the content area on the slider pages only, as noted above, the slider pages will look much neater and more compact.

I appreciate your assistance, thank you again!

---

Award-winning wedding photographer in Scotland

[jonathonfowler]

What I want is the slider to work the same way as supersized: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html is it possible?

---

Award-winning wedding photographer in Scotland

[emasai]

Sorry for the delay, caught up in work.

To just show the full width slide show, you need a specific page template to show your full width slider show without the background. For the moment I can replicate what you want in the browser, but it means that you are loading both the content with the background image and the slider on top. This will use up a lot bandwidth, not a good fix.

BTW, I can still see the white band above and below the slider.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[jonathonfowler]

Thanks Lynne, I appreciate your help. I can easily remove the background image, leaving just the slider in place. That's strange about the white bars, I can;t see them when logged in as admin, but I can see them logged out.

---

Award-winning wedding photographer in Scotland

[emasai]

My suggestion of giving each slider page a custom body class would help you organize all this. So you are only targeting the pages that have a class of say "superslider" then you can remove all the extraneous elements that you do not require on those pages.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[jonathonfowler]

OK, thanks Lynne. Which extraneous elements would need to be removed, and how do i remove elements using CSS?

---

Award-winning wedding photographer in Scotland

[emasai]

You will need to install a web inspector on your browser, then you can view your site and see which elements need changing in the css and view the effect it will have directly in your browser. It will also give you the line numbers. Best to make a back up copy of your css file first and then modify the original, in case you mess up and need to go back. Hopefully you are familiar with FTP as this is the best way to modify your files. If you use the WordPress editor, you will not see the line numbers and in the case of a functions file, can crash your site.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Author]

Posts