Styling Blog Page With Css
Mike Coomber
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?
Atick Eashrak Shuvo
Accepted AnswerThank 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
Accepted AnswerThank 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
Accepted AnswerPlease follow this documentation www.joomshaper.com/documentation/helix-framework/blog#blog-details