Blank space above blog post title

Support
#1

Please take a look at this blog post

Why is there a big blank space above the blog post title and a line I want to delete that on the blog posts. It looks strange.

Also in the meta data, I want to:

  1. make the author name italics
  2. delete the second forward slash after the author name
  3. delete the Leave Comment
  4. add a bit more space between the metadata and the body copy below it.

Any help is much appreciated.

#2

Hey @pearlmultimedia,

The area is the header landmark and for single posts, it’s supposed to show like this http://demo.theme.co/renew-1/5-reasons-you-need-the-x-theme/. But, it looks like you’ve done some modification. Please add this CSS to X > Theme Options > CSS

.single-post .x-header-landmark {
    display: none;
}

For your other requests:

/* space between the metadata and the body copy */
.p-meta {
    margin-bottom: 50px
}

/* author name italics for Renew stack */
.p-meta span:first-child {
    font-style: italic;
}

/* don't italicize the slash after the author name */
.p-meta span:first-child:after {
    font-style: normal;
}

/* remove the forward slash after the author name */ 
.p-meta span:nth-child(2),
/* remove Leave Comment */ 
.p-meta span:nth-child(4),
/* remove the forward slash after the category name */
.p-meta span:nth-child(3):after  {
    display: none;
}

If you’ve implemented the codes above correctly and there is no syntax errors in your other CSS, it should look like this:

If the code above does not work in your site, please contact a third party developer to troubleshoot.

Hope that helps.

#3

Christian, The code you gave me for the metadata is working when I check it on on a laptop. Thanks! But as many times as I clear the website cache, X style settings, and the browser cache it won’t show up correctly on my desktop. Hmmm…

Other issues:

  1. I didn’t delete The Blog title as far as I know, and “disable page title” isn’t checked off for that page. I would rather have the title show up on this page, but I don’t know how to make it appear now…

  2. Also, I want to have the featured photo for posts show up in the blog roll list on The Blog page (dachshund joy.com/blog), but not in the individual posts.

  3. I can’t seem to increase the spacing between the page and post title letters. I’ve tried everything. But I don’t want to create a custom title every time. Check out this page to see the title. No matter which font I put, the letters are space too close together. I adjusted the spacing in the Theme Options and it works for all the other H1, H2 etc. But it doesn’t work for the page and post titles that are automatically generated by the theme.

  4. How can I change the H1, H2 etc and paragraph font sizes for the Classic Text boxes? I started off using the Cornerstone elements for text, but SEO Yoast couldn’t read them and when I ran the site through an SEO test the headlines weren’t showing up. So now I use Classic text boxes…

Thanks again for helping.

Here’s the custom Global CSS in my theme options section:

/*
// Alternate row widths.
*/

.x-container.row-condensed {
max-width: 800px;
}

.x-container.row-cta {
max-width: 600px;
}

/*
// Swirls.
*/

.swirl {
width: 100%;
max-width: 250px;
}

/*
// CTA (page bottom).
*/

.section-cta {
color: #fff;
}

.section-cta .swirl {
display: block;
}

.section-cta .swirl.top {
margin: 0 auto 40px;
}

.section-cta .h-custom-headline {
margin: 0;
color: currentColor;
}

.section-cta .x-text {
margin: 0.5em 0 1.25em;
}

.section-cta .swirl.bottom {
margin: 40px auto 0;
}

.x-btn.x-btn-global {
text-transform: capitalize; font-size: 25px; text-shadow: none; box-shadow: none; border-color: transparent;
}
.x-anchor-button span {
text-transform: uppercase; font-size: 25px;
}

.x-anchor-button {
box-shadow: none; text-shadow: none; border: 1px solid #ddd;
}
.entry-date {display: none;
}
/hides the date on the recent post element/
span.x-recent-posts-date {display: none !important;
}

.entry-featured {display: none;
border: 0;
padding: 0;
}
@media (max-width: 1199px) {
.x-sidebar {
width: 100% !important;
}

.archive .x-main .hentry {
position: relative;
}

.archive .x-main .hentry>.entry-featured {
float: none;
max-width: 599px;
margin: 108px auto 0;
width: 100%;
}

.archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
float: none;
width: 100%;
padding-left: 0;
}

.archive .x-main .hentry.has-post-thumbnail>.entry-wrap .entry-header {
position: absolute;
top: 0;
width: 100%;
margin: 30px 0 0 ;
}
.x-sidebar .widget.widget_nav_menu {
margin-top: 20px;
}
/* space between the metadata and the body copy */
.p-meta {
margin-bottom: 50px
}

/* author name italics for Renew stack */
.p-meta span:first-child {
font-style: italic;
}

/* don’t italicize the slash after the author name */
.p-meta span:first-child:after {
font-style: normal;
}

/* remove the forward slash after the author name /
.p-meta span:nth-child(2),
/ remove Leave Comment /
.p-meta span:nth-child(4),
/ remove the forward slash after the category name */
.p-meta span:nth-child(3):after {
display: none;
}

#4

Hello @pearlmultimedia,

Thanks for asking. :slight_smile:

  1. Can you please confirm that under X > Theme Options > Icon > Blog Options > Blog Title you have added the text you want to show?
  2. Please add following CSS under X > Theme Options > CSS to remove featured image on post page:
.single-post .entry-featured {
    display: none;
}
  1. Please add following CSS under X > Theme Options > CSS to adjust word and letter spacing:
.h-landmark span, .entry-title.h-landmark span {
    word-spacing: 8px;
    letter-spacing: 1px;
}
  1. You can add following CSS under X > Theme Options > CSS to adjust the font sizes:
.x-text p {
    font-size: 15px;
}

.x-text h1, h2, .h1, .h2 {
    font-size: 20px;
}

Let us know how it goes.

Thanks.

#5

Thanks @Prasant!! All three of those did the job perfectly!!

  1. In terms of your question #1 I switched the theme to Renew and based on your reply found where to put the Blog Title, and it’s showing up. So thanks!

  2. Also, is there a way to make it so the category archives don’t say “category archives” but rather the name of the category?

#6

Hello @pearlmultimedia,

Thanks for updating the thread. :slight_smile:

You can change the category archive title from Posts > Categories > Edit Category > Archive Title. To help you get started, I have recorded a screencast that you can take a look. https://cl.ly/1U2j0j3t0p01

Thanks.

#7

Thank you @Prasant. That did it!! Also, can you please tell me what part of The Grid is controlling how the archived posts look? I’d like to change that.

#8

Hi There,

You may require some custom development to change archived posts. Please refer to The Grid documentation (https://theme-one.com/docs/the-grid/#grid_as_template).

Thanks!

#9

@Prasant Hi! Do you have any idea why your custom code for the post metadata and headers (shown above) looks perfect in the Cornerstone layout window, but when I switch to Preview it doesn’t show up correctly – it looks like I didn’t even insert the code in the Global CSS? I’ve tried clearing the cache (with W3 Total Cache) and clearing the browser cache. I’ve also tried looking at it in Chrome and Safari. Is there something else I should do to make it show up in Preview mode?

#10

Hi,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#11

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