border-left color of posts listed according to category in masonry grid of blog and archive page

[syedsameerali0011]

Dear 7th-Queen,

In your demo i have noticed the posts listed in the blog page in the masonry grid have a different left border highlight color for certain posts. Is this according to the category of the post? or is this functionality custom css for the demo and not included in theme.

If it is possible i could not find a way in the theme options or the theme knowledge base.

would very much appreciate any help, since all my posts show up with the same purple color on the left border regardless of the category they are in.

As ever, I really appreciate your help and time, and wanted to thank you for the amazing theme and all your efforts and assistance here at the support forum.

Best of Regards.

Sameer Ali

[Radu]

Hi,

That color it’s generated by the post format template :

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?

[syedsameerali0011]

Thank-you for the help 🙂 As a feature request would be great if one could set the color according to the category, as well as set a default featured image for each category. Thank-you again, and i’m very much obliged for the help.

[Radu]

Hi,

There are selectors for every post template change the color code with your desired color code

COPY CODE

.masonry-listing .format-video .post-title {
	border-left: 3px solid #07baf4;
}
.masonry-listing .format-standard .post-title {
	border-left: 3px solid #8a52ad;
}

.masonry-listing .format-image .post-title {
	border-left: 3px solid #fc604a;
}

.masonry-listing .format-gallery .post-title {
	border-left: 3px solid #43ae9e;
}

.masonry-listing .format-audio .post-title {
	border-left: 3px solid #367bb7;
}

.masonry-listing .format-link .inner-content {
	margin-top: 10px;
	border-left: 3px solid #00c5c4;
}

.masonry-listing .format-aside .post-title {
	border-left: 3px solid #ee2534;
}

This CSS will be added to wp-admin -> theme options -> general settings -> quick css

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?

[syedsameerali0011]

I understand the masonry listing css was targeting the post-format selector and was hoping i could instead make it target the category of the post title, with your help on finding the selector i was able to figure out the solution, by changing the selector from ” .masonry-listing .format-“type” .post-title ” to instead target “masonry-listing .category-“name” .post-title ”

eg. for category “news”

.masonry-listing .category-news .post-title {
border-left: 6px solid #c90c33;
}

Thanking you sincerely, for your time and all your help,
Sameer Ali

[Radu]

Hi,

We have the category name into a class attached to the body element to can style any element in any page.

In your case you will have

COPY CODE

.category-news .masonry-listing .category-news .post-title {
border-left: 6px solid #c90c33;
}

cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[syedsameerali0011]

hello, apologies for the late reply, been overworked and did not have the time, I appreciate the help and thankyou for elaborating further on the topic, I now understand the way the category class is working and have resolved the issue.
Thankyou again! 🙂

[Radu]

You’re welcome

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Cafonauta]

It would be nice having this as an option in a future update.

BTW How I add a new feature request? I could not find any option to post there.

Thanks

[Radu]

Open a topic in KLEO section with FEATURE REQUEST prefix then i will move the topic there if you are not possible to open there a ticket

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts