Jump to content
Sign in to follow this  
johnlatham

Blog post formatting on page

Recommended Posts

johnlatham

Hello, I'm looking for some guidance with formatting my blog posts on the posts page. Let me show you the link. http://www.dev.mrjohnlatham.com/journal I'd like the image that you see there to be aligned right and so the top of the image is inline with the top of the post title. The text will then be in a slimmer paragraph aligned left on the page. Then under each blog post I would like there to be a dividing line if possible - The same line on the nav bar. Any help would be great thanks!

Share this post


Link to post
Share on other sites
catrina
There is a way to format your blog post in the post editor so that the image is aligned right and the text is directly to its left. For example, under HTML Editor, you can add this code and the image will be aligned right: [code]YOUR TEXT HERE[/code] The text will be automatically positioned on the left side of the content area. To add the dividing line below the blog post, please add this CSS to Custom Code > Custom CSS in the PlatformPro settings: [code]div#theloop div.copy-pad {border-bottom: 1px solid #000; padding-bottom: 15px;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
johnlatham
Oh wow, I'll try this out and let you know how I get on later... Thanks.

Share this post


Link to post
Share on other sites
johnlatham
Is there a way to control the margin between the text and the image? So the text is essentially in its own chosen width collumn? Thanks.

Share this post


Link to post
Share on other sites
johnlatham
Hey just wondering if there is an alternate and more automatic way to do this by styling the blog post entries for every one? I am not keen on inputting code each time to align the images. Thanks.

Share this post


Link to post
Share on other sites
johnlatham
Sorry to bombard you but the code for the line below each post didn't work so I altered it to... [code]div#theloop div.entry_content {border-bottom: 1px solid #CCCCCC; padding-bottom: 15px;}[/code] Is that correct to use .entry_content? Also, how can I make sure that the post at the bottom of the page (Last to show if say I have 5) Doesn't have the bottom border? As you will see on my link there is now an unnecessary line. Thanks. Regarding the image align, I have tested your code for the time being before getting a better solution, but I would like the image to be aligned with the top of the post title as well. Thanks.

Share this post


Link to post
Share on other sites
catrina
[quote]Is there a way to control the margin between the text and the image? So the text is essentially in its own chosen width collumn?[/quote] If you want the text to have its own custom width, you can put it inside a DIV layer and use CSS to adjust its width. For example: The HTML (don't include the tag for the image you're including in the post):
YOUR TEXT HERE
The CSS: [code]div.textblock {width: YOURWIDTHpx;}[/code] [quote]Hey just wondering if there is an alternate and more automatic way to do this by styling the blog post entries for every one?[/quote] I'm not aware of any other easier way. This may involve some template customizations, which can be done if you were to hire a PageLines Pro. [quote]Is that correct to use .entry_content?[/quote] Does this code work when you view the site? [quote]Also, how can I make sure that the post at the bottom of the page (Last to show if say I have 5) Doesn't have the bottom border?[/quote] I don't think it's possible to get rid of the border for a post that appears last on a page. Since the posts are consistently changing position each time, you'd have to edit the CSS each time you create a post.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
johnlatham
Does the [code]div.textblock {width: YOURWIDTHpx;}[/code] go in the custom CSS bit? Is it also possible to have the image aligned with the top of the post title?

Share this post


Link to post
Share on other sites
Rob
Yes and change the YOURWIDTH to a numeric value you wish it to be.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
No problem!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
johnlatham
Any help on aligning the image with the top of the post title?

Share this post


Link to post
Share on other sites
catrina
Please add the following to your CSS code: [code]div.entry_content img {margin-top: -35px;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Jenny
If you consider this issue resolved, please accept an answer. Thanks!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
johnlatham
Hey, looks fine in Firefox, but image isn't high enough in Safari... Is there a solution to this? Thanks, John.

Share this post


Link to post
Share on other sites
johnlatham
While we are on the subject, do you know a code to cancel the post title from being a link? Thanks

Share this post


Link to post
Share on other sites
catrina
Your site link (http://www.dev.mrjohnlatham.com/journal) is leading to a 404 error. Are you using a child theme with PlatformPro or PageLines Framework?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
johnlatham
Sorry, I have recently moved the site to www.mrjohn... The dev was just a sub domain whilst building it. Your code actually made all=l my images on the other pages have a -top margin also... I only need it to happen on blog post images. Thanks, John.

Share this post


Link to post
Share on other sites
catrina
Please use this code instead: [code]body.blog div.entry_content img {margin-top: -35px;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
johnlatham
Thanks, but still got the problem with it being lower in Safari and fine in Firefox...

Share this post


Link to post
Share on other sites
Rob
Fine tune the -35 cited above.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×