Styling of Recent Posts

antoine_generau · November 2, 2017, 10:41am

Hello,

I am trying the style the [recent_posts] but I have difficulties doing it. I managed to style it the way I wanted on the blog page, having a different color for each category of the post. Is it something i can also do on the [recent_posts]?

Here are my questions:

How can I change the image size? There is a space below the image that I do not want. All my images with have the same size.
Can I use the color of the categories, as on the blog page, for the hover effect on images and texts?
Can I also change the icon of the hover effect according to the category of the posts (like on the blog page)?
Can I change the color of the “Lire la suite” (currently in orange) according to the category of the posts?

You will find this section of the bottom of the home page of my website : https://e-marketingmix.fr/

Thanks,
Antoine

ruenel · November 4, 2017, 5:33am

Hello There,

Thanks for writing in!

1.) You will need to update your css code and use this instead:

.x-recent-posts .has-post-thumbnail .x-recent-posts-img {
    padding-bottom: 0;
    height: 130px;
    overflow: hidden;
}

2.) To have the same color for the categories, you also need to update your code and use this:

.category-referencement-et-contenu-web .entry-thumb,
.category-referencement-et-contenu-web .x-recent-posts-img:after {
    background-color: #ffca77 !important;
}

.category-creation-webdesign-medias .entry-thumb,
.category-creation-webdesign-medias .x-recent-posts-img:after {
    background-color: #98ced3 !important;
}

.category-accompagnement-et-strategie-digitale .entry-thumb,
.category-accompagnement-et-strategie-digitale .x-recent-posts-img:after {
    background-color: #76c976 !important;
}

3.) To have the same icon, you will need to update your css and use this:

.category-referencement-et-contenu-web .entry-thumb:before,
.category-referencement-et-contenu-web .x-recent-posts-img:before {
    content: "\f140" !important;
}

.category-creation-webdesign-medias .entry-thumb:before,
.category-creation-webdesign-medias .x-recent-posts-img:before {
    content: "\f03e" !important;
}

.category-accompagnement-et-strategie-digitale .entry-thumb:before,
.category-accompagnement-et-strategie-digitale .x-recent-posts-img:before {
    content: "\f135" !important;
}

4.) And lastly, you will need to update your css code and use this:

.blog .category-referencement-et-contenu-web .p-meta a, 
.category-referencement-et-contenu-web .more-link,
.category-referencement-et-contenu-web .x-recent-posts-excerpt span {
    color: #ffb43d !important;
}

.blog .category-creation-webdesign-medias .p-meta a, 
.category-creation-webdesign-medias .more-link,
.category-creation-webdesign-medias .x-recent-posts-excerpt span {
    color: #6dbec5 !important;
}

.blog .category-accompagnement-et-strategie-digitale .p-meta a, 
.category-accompagnement-et-strategie-digitale .more-link,
.category-accompagnement-et-strategie-digitale .x-recent-posts-excerpt span {
    color: #44aa44 !important;
}

Please let us know how it goes.

antoine_generau · November 8, 2017, 3:36am

Hello,

Thanks for the code you provided and sorry for my late answer. I didn’t notice your response sooner.

Is working fine. I just changed the height to “auto”

2,3,4. Are not working for each category. What happens is that it apply to the first post excerpt and not with the last two. Moreover, it takes the colors and Icon of the last pieace of code in my CSS (ie. my last category) and does not apply it to the category of the post.

Can it be that the info about the category of the post is not taking into consideration here? Or is there a way to fix thoses problems?

And last two questions:
5. How can I change the hover color of the title and the excerpt of the posts?
6. How can I replace the meta date of the post by the meta category of the post?

Thank you so much for your help!
Antoine

rad · November 10, 2017, 1:14am

Hi there,

It’s only applicable to a specific category and those are just samples. You have to repeat it over and over for other categories. Example,

category-referencement-et-contenu-web

Then referencement-et-contenu-web is the category, and that CSS is only applicable for that. So if you plan on targetting other categories then you’ll have to duplicate those CSS and change the category selector accordingly. Example

.category-hello-world .entry-thumb,
.category-hello-world .x-recent-posts-img:after {
    background-color: #ffca77 !important;
}

There is no permanent and simpler workaround since you’re applying unique colors for each category.

Hence, what you’re trying to achieve is a bit complex and not fully possible with CSS alone, I recommend contacting a developer for more effective implementation. How about just uniform color regardless of category?

As for 5 and 6, please add this CSS as well


    .blog article:hover .entry-title a, .blog article:hover .entry-title a:hover {
     color: pink !important;   
    }
        .blog article:hover .excerpt {
     color: pink  !important;   
    }

and this code in your global custom javascript

jQuery( 'body:not(.blog) .p-meta span:nth-child(2)' ).each( function() {

jQuery(this).insertAfter( jQuery(this).next() );

} );

Hope this helps.

antoine_generau · November 14, 2017, 5:52am

Hello,

Thanks for the detailled answer.

Yes, I knew the code you provided was only an example to apply to each category, which I did. The problem is only that it then only works for the last category used in my code, and not for the previous one. This is why I was wondering how to make it works for every category. As far as I understand from your response, it needs some additionnal code to the CSS to make it works for every category?

If you cannot explain how to make it works for every category, I will then use one single color for every category on the homepage. I would however really prefer to have one color for each category as this is what I have on the blog. It would then be much more logical to follow for the visitors.

Regarding 5 and 6, I added the code you provide but it unfortunately did not change anything. Any idea what need to be done instead or above this?

Thanks for your amazing support,
Antoine

friech · November 15, 2017, 5:04am

Hi Antoine,

This is just a matter of having a specific selector and the correct class for each of your categories. I’m going to arrange Runel’s provided CSS above, but I am not going to shorthand it and put a comments so you’ll understand what each block and line does.

Lire la suite link colors

/*Lire la suite link colors*/
/*referencement-et-contenu-web*/
article.category-referencement-et-contenu-web .x-recent-posts-content .x-recent-posts-excerpt span {
	color: #ffca77;
}

/*creation-webdesign-medias*/
article.category-creation-webdesign-medias .x-recent-posts-content .x-recent-posts-excerpt span {
	color: blue;
}

/*accompagnement-et-strategie-digitale*/
article.category-accompagnement-et-strategie-digitale .x-recent-posts-content .x-recent-posts-excerpt span {
	color: green;
}

hover background-colors on the recent post featured image

/*hover background-colors on the recent post featured image*/
/*referencement-et-contenu-web*/
article.category-referencement-et-contenu-web .x-recent-posts-img:after {
    background-color: #ffca77;
}

/*creation-webdesign-medias*/
article.category-creation-webdesign-medias .x-recent-posts-img:after {
    background-color: blue;
}

/*accompagnement-et-strategie-digitale*/
article.category-accompagnement-et-strategie-digitale .x-recent-posts-img:after {
    background-color: green;
}

recent posts title and text content hover color

/*recent posts title and text content hover color*/
/*referencement-et-contenu-web*/
.x-recent-posts a:hover article.category-referencement-et-contenu-web .x-recent-posts-content,
.x-recent-posts a:hover article.category-referencement-et-contenu-web .x-recent-posts-content h3.h-recent-posts {
	color: #ffca77;
}

/*creation-webdesign-medias*/
.x-recent-posts a:hover article.category-creation-webdesign-medias .x-recent-posts-content,
.x-recent-posts a:hover article.category-creation-webdesign-medias .x-recent-posts-content h3.h-recent-posts {
	color: blue;
}

/*accompagnement-et-strategie-digitale*/
.x-recent-posts a:hover article.category-accompagnement-et-strategie-digitale .x-recent-posts-content,
.x-recent-posts a:hover article.category-accompagnement-et-strategie-digitale .x-recent-posts-content h3.h-recent-posts {
	color: green;
}

Feel free to change those color values, and the article.class for your other categories.

How can I replace the meta date of the post by the meta category of the post?

Sorry, that needs a custom code and outside of the support that we can offer.

Thanks,

antoine_generau · November 15, 2017, 6:11am

Thanks, I managed to get the result I wanted, except for the last point (change the metadata with the category instead of the date) as you said it requires a custom code.

I will then look further on the web if I can find the solution somewhere else. In the meantime, could you please tell me how to hide the meta with the date?

Thanks so much for your help,
Antoine

friech · November 15, 2017, 8:01am

Hi Antoine,

Please add this on your Theme Options > CSS

/*hide recent posts date*/
.x-recent-posts .x-recent-posts-date {
	display: none;
}

Thanks,

antoine_generau · November 16, 2017, 10:32am

Thank you for your help.

jade · November 16, 2017, 4:12pm

You’re welcome, Antoine.

antoine_generau · November 21, 2017, 10:39am

Hello,

I realised that the titles of the rencent posts section are not displayed entirely, but only the first 28 caracters. Would it be possible to display the title entirely? The title could be displayed on two lines and it would be perfectly fine.

Thanks,
Antoine

jade · November 21, 2017, 2:07pm

Hi Antoine,

This might make the receent post misaligned but you may update this code:

.x-recent-posts-content .h-recent-posts {
    font-size: 28px !important;
}

to

.x-recent-posts-content .h-recent-posts {
    font-size: 28px !important;
    overflow: visible;
    white-space: normal;
}

Hope this helps.

antoine_generau · December 1, 2017, 6:09am

Thank you for your help.

friech · December 1, 2017, 6:40am

We are delighted to assist you with this.

Cheers,

fraichenutrition · December 7, 2017, 12:47am

Is it possible to restrict the length of the title to two lines maximum? I.e. so it is truncated if the title is longer than two lines?

friech · December 7, 2017, 5:43am

Hi There,

Thank you for writing in! We’ll be happy to assist you, but we kindly ask you to create your own thread as this ticket is getting too long and being hard to support.

How To Get Support

Thank you for understanding,
Cheers!

system · December 17, 2017, 5:43am

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