tweak appearance of single column blog post
-
Hi,
I’m in Boardwalk theme because I love the front page — it’s beautiful and professional at the same time. However, the blog pages have a spindly appearance that is odd and hard to read. I’ve messed around with the CSS, but so far only made things worse.I’d like to have my blog pages appear as they do in Revelar theme. This single column theme has (1) a shaded background (2) a wider column and (3) larger font. I think it also has a bigger line height and maybe some other technical design stuff that I don’t fully understand. Is there a chunk of CSS I can import to give my posts the Revelar look?
thank you!
The blog I need help with is: (visible only to logged in users)
-
Hi there, first, I notice you have used some inline styling to set font sizes within at least one of your posts, and I would like to suggest that we do that within CSS instead. If later you end up switching to another theme, this could cause you a lot of post/page editing to remove that.
Here is something to get you started. I’ve specifically targeted single post pages, with this, so it won’t affect static pages. If you want it to be everywhere, remove the .single and trailing space in the code below.
.single .entry-author, .single .entry-content, .single .entry-footer { max-width: 900px; width: 100%; } .single .entry-content { background: #fff; } .single .hentry { background: #eee; } -
I took out the inline styling for this blog page: https://lemonglassed.com/2016/03/15/fiction-manuscripts/
And then plugged in the code above.
How do we make the shaded border only half as wide as it currently is, but still keep a 900 px text area?
(Resulting in a white center column that is wider than the current one.)
Also, the featured image at the top has shifted. How to keep it at 100%?
thanks again!
-
-
About the only way we could do this would be to set the max-width to perhaps 1100px and then add left and right padding to compensate for that, but that will mean extra white on each side of the content. You can replace what I gave above with this and see what I mean. The original left/right padding was 72px.
.single .entry-author,.single .entry-content,.single .entry-footer { max-width:1100px; width:100%; padding-left: 172px; padding-right: 172px; } -
Is it possible this effect is sometimes set up a different way? By percentages or something?
I ask because the border on the Revelar pages behaves differently than my new border does. The Revelar shaded border is quite thin, and when the screen is sized, it maintains a relative size.
I see the following code there, but don’t know how it pertains or how to use it properly. Plugging it into my CSS created a strange mess.
.entry-header, .entry-content, .entry-summary, .entry-footer, .comments-area {
margin-right: 16.66666667%;
margin-left: 16.66666667%;
} -
Yeah, they are sometimes done in percentages. Padding adds to the inside of an element whereas margin adds to the outside of the element, so even though it may appear that they both accomplish the same thing, that is not always the case.
To compound things, with responsive designed themes that adjust for all screen/window widths, it might be 16.6667% down to 600px width and then 5% below that. That sort of thing is accomplished using a Media Query.
The problem is that with Boardwalk, the HTML isn’t really structured to where we could do this. We would need a parent div around the content that did not include the featured image. We could go with this sort of approach, but there would also end up being a gap on left and right for the header area, featured image and footer.
Let me know your thoughts.
-
Thanks very much for your quick replies:)
The percentage method sure looks nice, but I think it sounds too complicated to fit into Boardwalk. I’ll mess around with the code you’ve given me already and might need to check back once I see how it sorts out.
thanks! happy weekend!
-
- The topic ‘tweak appearance of single column blog post’ is closed to new replies.
WordPress.com Forums 