1. b2evolution CMS User Manual
  2. Developer Reference
  3. Website Skins/Themes
  4. Targeted CSS Selectors

Targeted CSS Selectors

Many things can be customized very precisely by the use of smart CSS selectors.

To that extent you can leverage the CSS classes that b2evolution adds to the <body> element.

For example the homepage may have:


<body class="unknown_device page_cached coll_1 disp_front detail_front item_none anonymous usergroup_none">

But if you go to a specific article page, you may have:

<body class="unknown_device page_cached coll_1 disp_single detail_single item_49 anonymous usergroup_none">

Note that disp_front changed to disp_single : you can use that to have specific CSS styles for article pages.

Also not that item_none changed to item_49 : you can use that if you need specific CSS styles for the article with ID 49.

Now if the same page is viewed by a logged in user you may have:


<body class="desktop_device page_notcached coll_1 disp_single detail_single item_49 loggedin usergroup_1">

Note that anonymous changed to loggedin. We also know the User Group of the logged in User: usergroup_1

Considerations about Page Caching

When Page Caching is on, you will get a page_cached class. Otherwise you will get page_notcached.

Note that when a User is logged in, the page will never be cached to prevent leaks of personal information.

Also note that when a page is cached (on the server), it is not safe to consider it will always be viewed by the same browser / device. Therefore in that case you will always have unknown_device. If you need to customize CSS based on the device type for anonymous users, we recommend you use CSS Media Queries.

Created by • Last edit by on 2020-06-09 00:24 • •

No feedback yet