Removing Title & subtitle from Post page

[fpierik]

Hi there!

I’ve been a longtime fan of the X theme template but I have a small problem and I can’t figure out how to fix it.

For a new site I installed the Auto by Themeco template, but once I got to the point of working on the post page I discovered that the page title and subtile are showing. See picture:

It’s a bit covered but it looks really bad. I’ve tried a few things that didnt work out, does anybody know how to fix this?

Thanks in advance!

[ruenel]

Hello @fpierik,

Thanks for writing in!

The post meta can be turn OFF. You can do it by going to X > Theme Options > Blog > Content > Post Meta.

For the title, we do not have any option settings to disable the post title. You can only use CSS code into X > Theme Options > CSS . You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

The post titles were using .x-iso-container-posts.cols-3 .entry-title and you can use this class to formulate your custom css.

There are two options you can have:
1.) Hide the post titles completely by using the display: none; in the custom css. With this example code using the class above:

.x-iso-container-posts.cols-3 .entry-title {
  display: none;
}

To learn more about the CSS display property and how it works, please check this out:

• https://www.w3schools.com/cssref/pr_class_display.asp

2.) Instead of hiding the post title, you can just truncate it so that you will have a truncated one liner post titles. You can use this tutorial here: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Having to combine the code using the class of the post title from above, your custom css could be like this:

.x-iso-container-posts.cols-3 .entry-title {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

We would love to know if this has worked for you. Thank you.

[fpierik]

Thanks @ruenel! But I think I wasn’t totally clear, altough I like your tips and explantion, thanks!

But the problem im having is with the page title see picture below:

Hope you have a great fix for that aswell

Thanks in advance!

[jade]

Hello @fpierik,

Thanks for clarifying.

That usually happens when you add a CSS code that makes the position of the header area absolute.

Please add this code in X > Theme Options > CSS:

.blog .x-header-landmark {
    margin-top: 100px;
}

Please adjust the value of the top margin in the code above to fit the space on your blog page correctly.

Hope this helps.