Blog Category Page Category Attribute Add

It can be a challenge to get CSS going to customize a blog category page. The following cited code adds the category as an attribute to the body tag.

Please see Blog Category Page Category Attribute Add.

Hope admin can stick this post @Jo_SQSP

hi creedon,

I've installed your code and now I'm trying to change the background color of blog posts with a certain category. How would I go about that?

Thanks

2 hours ago, FrankSy said:

I'm trying to change the background color of blog posts with a certain category. How would I go about that?

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

On 4/6/2022 at 12:56 PM, FrankSy said:

I've installed your code

I'm not seeing my Blog Category Page Category Attribute Add code installed on the blog page. I do see another code that I wrote on the page. Is that the one you need help with?

Hi Creedon,

I was testing the other code, but not the priority for now. 

So Blog Category Page Category Attribute Add code should now be installed.

Thanks

Frank

43 minutes ago, FrankSy said:

I was testing the other code, but not the priority for now. 

Hello Frank,

Got it.

Quote

So Blog Category Page Category Attribute Add code should now be installed.

It is installed!

I noticed a problem which is totally my bad. There was an issue with the character encoding for the twcsl code and so the code you downloaded is slightly corrupted causing code not to work as expected. We need to get you a good copy. I have corrected the issue for the encoding but the file is on a CDN ( content delivery network ) so it may take awhile before the CDN refreshes the file.

In the meantime I'd like to direct message you a good version of the code that you can reinstall. It that OK with you?

Once we get this sorted then I can move onto getting you some CSS to control the background colors of categories.

Thank you creedon,

Yes feel free to direct message me.

Kind regards

Frank

Post pinned. 

@FrankSy

Here is the basic effect.

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page. Please see per-page code injection.

<style>

  body[data-blog-category="Books"] #page .page-section {
  
    background-color : red;
    
    }
    
  body[data-blog-category="Books"] #page .page-section .section-background {
  
    background-color : transparent;
    
    }
    
  </style>

This is for v7.1 and specific to the poster's need.

I think this will almost certainly need some adjustment depending on what other effects you apply to the blog page.

Let us know how it goes.

hi creedon,

I've added the CSS to the blog pages. Not much change for now and I don't think I'm applying any effects to the page. I experimented adding the css in the custom css or the overall blog header. Still no luck 

I think we're nearly there, than you for your help

Frank

@creedon

Hello Tom,

I hope that you’re well.

I was wondering if you could help me.
I’m trying to use your work.
I’m also trying to customise blog post having certain tags.

I’ve installed twcsl and the Blog Tag Page Tag Attribute:
https://github.com/tomsWebConsulting/twcsl/tree/main/Blog Tag Page Tag Attribute Add

I’ve tried to target posts that have “Fair” as a tag with the following code (among other attempts).

body[data-blog-tag="Fair"] #page .page-section {
  background-color: red !important;
}
body[data-blog-tag="Fair"]  #page .page-section .section-background {
  background-color: red !important;
}

I can’t make it work.

This is an exemple of a blog post on the website:
https://sebastienbertrand.com/all-exhibitions/artmonte-carlo-2017
Password: NeverModern 

Could you please have a look at it?

6 hours ago, jonas.nicollin said:

I’m also trying to customise blog post having certain tags.

My code is designed to work on Blog tag pages. Those pages that list posts for a particular tag. Like the following.

It appears you want to color a blog post page that has a particular tag. Is that correct?

Oh, then it makes sense.

I thought it was intended for both: blog page as well as blog posts (sub-pages).

12 hours ago, creedon said:

It appears you want to color a blog post page that has a particular tag. Is that correct?

Yes, that is correct.
I would like to customise all blog posts tagged as “Fair”.
Actually, both on blog page and blog posts.

I would like to change blog post title font’s styles and to hide blog post categories on these specific pages.
(Not especially background colour… it was just a test.)
I’ve inspected the code to find something high in the body (like json data).
In vain.

Would you have something to do this?

Thank you @creedon

10 hours ago, jonas.nicollin said:

Would you have something to do this?

Not at present but here are my thoughts. I think it would be possible to create code that would gather up the tags and categories. Process them into classes like SS does add in some locations, and add them higher up the chain so effects like you want can be done.

I'm willing to give it a go but it may take several days. Bump this thread after awhile if I don't post back.

12 hours ago, jonas.nicollin said:

Would you have something to do this?

I do now! 🙂 Please see the following.