Trying to modify single posts page.

Resolved bekanator
(@bekanator)

10 years, 11 months ago

I recently modified my blog posts to have the full-width layout in Sela, but now I’m having issues trying to modify the single pages.

Most of my issues were resolved in this thread: https://ww.wp.xz.cn/support/topic/changing-blog-posts-format-to-full-width-format-1?replies=15

I was able to put a “featured image” header on my blog page using a specific class function, but now I can’t do the same for my single posts because I can’t seem to figure out what the class would be to remove the div padding on the single post template specifically.

I’d also like to change the archives page and other pages to have the same layout but I’m afraid I don’t know the classes for those either, or how to find them.

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

Moderator Kathryn Presner
(@zoonini)

10 years, 11 months ago

Hi there, I’m a bit confused whether you need help with single page or single post layout, as you mention both above.

Trying to modify single posts page.

now I’m having issues trying to modify the single pages.

If you could provide a link to an example of a post or page where you need help and explain what the issue is, I’d be glad to have a look.

I’d also like to change the archives page and other pages to have the same layout but I’m afraid I don’t know the classes for those either, or how to find them.

These tutorials are very useful in helping you locate classes and IDs in a theme. I highly recommend getting comfortable with using your browser inspector – it’s an invaluable tool for making theme customizations.

https://dailypost.wordpress.com/2013/07/25/css-selectors/

http://dailypost.wordpress.com/2013/06/21/css-intro/

http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://thewc.co/articles/view/web-inspector-tutorial

Thread Starter bekanator
(@bekanator)

10 years, 9 months ago

I’m trying to fix the padding on the single page:

http://rebeccajoneshowe.com/vile-men-release-date/

I want it to look like the blog page:

http://rebeccajoneshowe.com/news/

For the blog, I managed to align the featured image by fixing the padding with a CSS overwrite. Just not sure how to do the same for a single post. :S
Moderator Kathryn Presner
(@zoonini)

10 years, 9 months ago
Ah, that’s a single post.

Each single post has the body class .single, so looking at the other thread, I think what you’re looking for is probably:
```
.single .site-content {
     padding: 0;
}
```
Let me know if that does it!
Thread Starter bekanator
(@bekanator)

10 years, 9 months ago

Works perfect!

Thanks for the help!

Thread Starter bekanator
(@bekanator)

10 years, 9 months ago

Oh shoot, I’ve just noticed that at the bottom of the page, the white content floods over onto the footer.

I managed to fix the issue with a <br clear=”all”> on the main blog index, but the single page doesn’t seem to work the same way.
Moderator Kathryn Presner
(@zoonini)

10 years, 9 months ago
Instead of what I gave you above, try this:
```
.single .site-content {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  overflow: hidden;
}
```
Thread Starter bekanator
(@bekanator)

10 years, 9 months ago

That did it.

Thanks again for all the help, Kathryn! Probably would have torn my hair out otherwise!

Moderator Kathryn Presner
(@zoonini)

10 years, 9 months ago

Glad that did the trick! You’re very welcome and glad there was no hair loss involved. 🙂

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

The topic ‘Trying to modify single posts page.’ is closed to new replies.