Styling blog page with css - Forum | JoomShaper
Staff replied Helix Framework

Styling blog page with css

Asked by Mike Coomber 1 year ago Last activity 1 year ago

I am using Helix Ultimate Framework in a Joomla 5 website and have created a category blog page. All is working OK as it should be, but the page styling needs to be modified in my custom css file eg. adding a page background color etc). Ideally I want to give the page a css class, but I can't see where or how to add this element. In the inspector the page shows as follows:
<section id="sp-main-body">
Clearly I can't target this in my css file as it would modify all pages containing that tag. Is there a way to give just the blog page a class identifier?

3 replies

Atick Eashrak Shuvo Staff

Thank you for reaching out.

To apply custom styling specifically to your category blog page, inspect the <body> tag using your browser's developer tools. Joomla dynamically assigns unique classes to the body based on the page type. For a category blog page, you should find a class such as .view-category. Similarly, for a single article page, you will see .view-article.

You can target these classes in your custom CSS file to apply styles exclusively to the category blog page.

This ensures that the styles apply only to the category blog page without affecting other sections of your site.

Mike Coomber Asked this

Thank you, that was very helpful - I now have a subsidiary question. At present the display has wide margins to left and right. Is there a way to make the page fluid so that the content spans the full width of the page?

Atick Eashrak Shuvo Staff

Please follow this documentation https://www.joomshaper.com/documentation/helix-framework/blog#blog-details

Log in to reply.