Posted by DanM on Fri, Sep 29, 2023 - 2:37pm --- Updated: Sep 29 '23 - 3:07pm

I have a site with different sections (content types) and want to customize the css for the content pages within those specific sections.

Each content type's pages already have a different layout assigned to them, but I can't find a class (or a way to assign one) to the overall pages for each of those types. How might I do that?

I have CSS Injector installed, but would that be the best way to tweak a large number of pages? Seems like it would be more efficient (less overhead?) to simply to just have the class on the pages.

Accepted answer

Hi Dan, with each content type's page having a different layout, you may also check if your theme adds a content type related CSS class to the body element. This is the case for the current default core theme Basis, which provides classes like node-type-page or node-type-post.

Comments

Fri, Sep 29, 2023 - 5:14pm by argiepiano

Let me see if I understand: you have different layouts for different content types, and you want to add different CSS classes to each layout? 

This can possibly be done implementing hook_preprocess_layout() or hook_preprocess_node() (depending where you want to add the css class) in your template.php file, or in a custom module, or possibly by extending/overriding a core layout template (or a combination of both).

The typical output of layout templates provided by core are as follows:

Where exactly do you want to add this class?

Sat, Sep 30, 2023 - 7:28am by DanM

I must have been add it too long yesterday. 

Since each content type has it's own layout - I just added a class in the header block, which is where I wanted to change some of the spacing -  Guess I was trying to find a more difficult way to do something simple.

Thanks for posting the template structure I hadn't edited one since the first days of D7 and had forgotten that they can easily be changed.

For some reason, I had thought that various layouts had their own set of templates. (I will go back over the docs on layouts, now that I've been tooling around with them for a while.)

Thanks again.

 

Olafski's picture

Sun, Oct 01, 2023 - 9:29am by Olafski

Hi Dan, with each content type's page having a different layout, you may also check if your theme adds a content type related CSS class to the body element. This is the case for the current default core theme Basis, which provides classes like node-type-page or node-type-post.

Sun, Oct 01, 2023 - 7:26pm by DanM

Thanks for that @Olafski. I am using basis, but missed the individual content type classes. That will be a huge help!