Blog Post Page Medium Like Design

Asked on July 13, 2016 in Customization.

In full-width the post body text is very wide and I want to add some padding to the left and right side.
Also, wordpress’ default is

post title
post image

how can I change it to

post image
post title

and maybe also center the title.

Thanks!

hungryforolives4 Layers User

You can try to use layers customizer CSS panel to add your custom css to change styles.

on July 17, 2016.

Yeah, I need the details since I don’t have any clue about CSS. I can only copy+paste codes! ūüėÄ

on July 22, 2016.
Reply
1 Answer(s)
Answered on July 22, 2016.

Hi there,

To preface this, to get a post to look like Medium, you need a child theme and a ton of custom hooking.  There is a Layers child theme coming out next month that has a similar look. Until then I recommend this tutorial: http://docs.layerswp.com/content-widget-examples/

Changing text width can be done in the editor when you are creating a post a few different ways.

1. with tools like Aesop Story Engine, Visual Composer or SiteOrigins which has “text”elements you can add¬†to posts and customize widths. Aesop is probably the best tool I have worked with to get Medium style blog looks (other than just using Layers pages)
2. By adding a custom wrapper to your content using the text tab in the editor. Example:

 <div class="post-content">
 all your post content here
 </div>
 

Then set that class to a specific width in the Custom CSS panel ie:

 .post-content{max-width: 720px;}
 

3. You can set the existing CSS class to a specific width too, but this will apply to all places this is used:

 .single .content-main{max-width: 720px;}
 

Padding should only ever be added to the post container if you are applying a background color that is different from the page background.

To change the order elements are layed out in without hacks, you need a child theme. From there you have two ways of  reordering the post layout:

1. Use hooks. This method requires you to use CSS to hide the original title and image, then you would use a hook like layers_after_header to add custom code that supports a custom title banner. Getting that title to take a featured image as a background is even more tricky and not something I can get into here.

2. The second method requires you to copy all the templates you want to modify into a child theme where they are edited directly. You can find info on child theming in the main menu at the top of this page.

Reply