Stylize my blog post

Support
#1

Hi there community,

Im trying to stylize my blog post and Im having a lot of difficulty with it tried multiple things from creating a page and having it link up with my php etc etc just didn’t work so I resorted to using elementor plug-in, however I prefer X a lot more and maybe you can help…

If you notice on the blog post page (http://stg.westsidecg.com/westside-acquires-lakeshore-club/), the text gets cut off and i have tried various codes:

.x-main.full {
margin-top: 100px;
}

but they dont work on my blog posts and if anything affect my header and move my revolution slider main image down which I dont want to happen…

So I guess what i would like to achieve on my blog post page without using elementor is:

  1. not have the text cut off
  2. set a margin on the page in the x theme it’s just full width and i dont want that want it be they way i have it set up now so its 70% of page
  3. not have the featured image show up on my blog posts only on my archived posts page : http://stg.westsidecg.com/media/ . and homepage http://stg.westsidecg.com/

I looked into some codes and thought it might of been something along the lines of this for the margin part:
@media (min-width:979px){
.single-post .entry-featured {
width: 30%;
float: left;
margin: 2%;
}
}

#2

Hello Carolina,

Thank you for the very detailed post information.

1.) Element totally remove the .x-main.full container which is why the css code do not work. Please rebuild the page and use the Pro Editor instead so that the text will not be cut off. If you prefer to use Elementor, please use the built in Pro theme’s page templates and not the element page templates so that x-main container will not be removed from the page.

2.)When you rebuild your page, you can set a maximum width in the row settings’ “Customize” tab by inserting max-width: 70%;. This only applies to the pages built with the Pro editor because at the moment your page was built with Elementor.

3.) To get rid of the featured image, you will have to use this code:

.blog .x-main .hentry>.entry-featured, 
.search .x-main .hentry>.entry-featured, 
.archive .x-main .hentry>.entry-featured {
    display: none;
}

.blog .x-main .hentry.has-post-thumbnail>.entry-wrap, 
.search .x-main .hentry.has-post-thumbnail>.entry-wrap, 
.archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
    float: none;
    width: 100%;
}

Hope this helps. Please let us know how it goes.

#3

Thanks for the quick reply…I have a couple questions.

For point #1 i got rid of elementor and am in pro now, which is great. For point number 2 where on the blog post page do I rebuild this page in the blog post: When you rebuild your page, you can set a maximum width in the row settings’ “Customize” tab by inserting max-width: 70%;."

i dont see the customize here

and for point 3, I put the code in the theme CSS but it did the opposite, it got rid of the feature image on my archived pages/recent post pages: http://stg.westsidecg.com/media/
and kept the featured image on my blog post page: http://stg.westsidecg.com/westside-acquires-lakeshore-club/ . I would like the opposite keep the featured image on my archived pages/recent post pages: http://stg.westsidecg.com/media/ and get rid of it my post pages

#4

Hello Carolina,

Thanks for updating the thread.

You can add the CSS under Customize > Setup > Inline CSS. Here’s a screencast that you can take a look.

Please add following CSS under Pro > Theme Options > CSS to remove featured image from post page:

.single-post .entry-featured {
    display: none;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#5

The removing featured image worked thank you! However the max width is not working, I understand how to put this into a page cause the interface allows me too, but the post interface does not have this UI, above is the screenshot of the post interface where do I find this? What I am asking for is 70% max width on POST pages not the PAGE PAGE

#6

Hi Carolina,

Since, you are not using Cornerstone for your posts, you can use CSS to set the width of your posts page.

You can add this in Theme Options > CSS

.single-post ..x-container.width {
   width:70%;
}

Hope that helps

#7

Should I be using cornerstone for my posts? Will it affect the theme or slow down the website? Also, unfortunately the code did not work.

But if you suggest using cornerstoneI will use that instead since I prefer the interface anyways!
and i know it comes free with the purchase of X but when i add it, i get this message:

#8

Hi Carolina,

You’re free to use default WordPress editor, Gutenberg or Cornerstone editor to create your posts. But for certain changes, you may have to use custom CSS rules when needed.

The above provided CSS rule has typo, please correct it as follows.

.single-post .x-container.width {
   width:70%;
}

Upon checking your screenshot, I see that you’re using Pro theme. So Cornerstone functionality will be integrated into Pro theme and you will not require to install Cornerstone plugin separately. You can use the Pro builder to create blog posts and it is identical to Cornerstone interface. If you want to create posts using the Pro builder, make sure to enable it first by head over to Pro -> Settings -> Permissions -> General area.

Hope that helps.

#9

this makes soooo much more sense thank you!!!

#10

You are most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.