[Resolved] Charge theme front page problem

[Yue]

Hi GP team,

I recently installed the Charge theme to my existing site. I’m using the home page as a front page and the blog page as blog posts page. The only issue I have is that there is this white empty block shown on my front page under the front page hero. Is there any way to get rid of that?

Please see this for reference: https://rationalmotoring.com

Thank you!

Yue

[Ying]

Hi Yue,

The white space is the area for the content.

Are there going to be any content on the front page?

Let me know 🙂

[Yue]

Hi Ying,

Thank you for your response. I would like to put 4 latest posts on the front page the same style as the blog card on my blog page (https://rationalmotoring.com/blog/) . I’m familiar with WP Posts, but don’t know how to style them.

Speaking of the blog card style, I’m using “layout with the featured image overlay” content template. Is there a way to make sure that all blog cards come out the same size? Right now they are of different heights.

Thanks so much!

Yue

[Elvin]

Hi Yue,

Speaking of the blog card style, I’m using “layout with the featured image overlay” content template. Is there a way to make sure that all blog cards come out the same size? Right now they are of different heights.

You can set a min-height value to the main container block on the Content template you’re using.

You then change the margin-top of the read more button from 200px to a smaller value.

Also, since you plan to make them all in same height, it may be best to disable masonry as it won’t have any visual effect.

[Yue]

Thank you Elvin! I did what you suggested and it did help. However, the issue is that my titles are of different lengths…

[Elvin]

Thank you Elvin! I did what you suggested and it did help. However, the issue is that my titles are of different lengths…

Yes the suggestion had that in consideration.

Since the title element may occupy 2 or 3 lines, we’ll have to use min-height and replace the margin-top for the read more button.

You’ll likely need this CSS:

article.post > .gb-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

article.post > .gb-container > .gb-inside-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

article.post > .gb-container > .gb-inside-container > *:last-child {
    margin-top: auto;
}

Effect – https://share.getcloudapp.com/4guZe84G

[Yue]

Thanks Elvin! That worked very well!

Just one more issue needs to be addressed:

I would like to put 4 latest posts on the front page (https://rationalmotoring.com/) the same style as the blog cards on my blog page (https://rationalmotoring.com/blog/) . I’m familiar with WP Posts, but don’t know how to style them.

Thank you so much for your help!

[Ying]

Hi Yue,

Give this CSS a try:

.home header.wp-show-posts-entry-header {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
}

.home .wp-show-posts-inner {
    position: relative;
}

.home header.wp-show-posts-entry-header a {
    color: var(--base-3);
}
.home header.wp-show-posts-entry-header a:hover {
    color: var(--global-color-8);
}
.home .wp-show-posts-entry-title {
    line-height: 1.2em;
}
.home .wp-show-posts-image.wpsp-image-center:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
    z-index: 0;
}

[Yue]

Thank you Ying!

It worked really well for the title and the image part!

Is there a way to style the category and the READ MORE button the same way as the blog cards on my blog page? Basically to make the latest posts on the front page exactly like the blog cards on the blog page.

Thank you so much!

[Elvin]

Hi there,

You can try this CSS for the readmore button:

a.wp-show-posts-read-more {
    background-color: #ffffff;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #ffffff;
    text-transform: uppercase;
}

a.wp-show-posts-read-more:hover {
    background-color: var(--global-color-8);
    color: #000000;
    border-color: var(--global-color-8);
}

As for the category, the main styling would be this:

span.wp-show-posts-terms.wp-show-posts-meta a {
    color: var(--base-3);
    text-transform: uppercase;
}

but the icon can be filtered in through PHP using wpsp_terms_output hook.

[Yue]

Cool, thank you!!

[Elvin]

No problem. Let us know if you need further help. 😀

[Author]

Posts