At times different classes need to be applied to the body tags of different pages, for CSS styling or some different purpose. Page Specific Class module enables this by adding HTML attribute classes for CSS styling to the <body> tag based on path conditions. Body classes for pages are specified by using their paths.
Learn more about the Page Specific Class here - https://www.drupal.org/project/page_specific_class
This module enables a user to add different classes to the body tag of any desired page. It supports all pages which can be created via Node, Views, or a Custom Route.
| Benefits of Page Specific Class module
- Easily add different classes in the body tag of different pages.
- Add single as well as multiple classes in the body tag of the page.
- Easy to configure.
- Instead of writing custom coding to insert classes in body tag this module provide you simple configuration UI.
| How does it work?
Installation is as simple as copying the module into your 'modules' contrib directory and then enabling the module.
To add the classes in the body tag of the page follow the below steps:
- Visit the page specific class setting form (/admin/config/page-class/settings) or Configuration >> User Interface >> Page Specific Class.
- Enter the URLs ("|" separated) along with the class in the text area and save the form.
| Implementing the Page Specific Class module
For example: Enter below value in the text area:
Here:
- When you visit "/node/1" page, ‘abc’ class is added to the body tag because of the (/node/1|abc) settings.
- When you visit "/page-example" page, ‘page1 page2 page3’ class is added in body tag Because of (/page-example|page1 page2 page3) settings.
- If you wish to add multiple classes then enter multiple classes by comma-separated
- When you visit "/hello-world" page, ‘xyz’ class gets added to the body tag. Because of (/hello-world|xyz) settings.
- When you visit the home page, ‘home-page-class’ class gets added to the body tag Because of (/<front>|home-page-class) settings.
- When you visit any page, ‘all-page’ class gets added in the body tag. Because of (/*|all-page) settings.
You can add class to the body tag of any page like:
- Node Page
- Views Page
- Custom Route
https://youtu.be/bicPJaxA2Ak
| Developer support
Click here to submit bug reports and feature suggestions, or to track changes: https://www.drupal.org/project/issues/search/page_specific_class
| Page Specific Class module
You may download this module from Drupal.org - https://www.drupal.org/project/page_specific_class
In case of any queries please feel free to reach out to us by commenting below or send us an email at code@qed42.com and we'll get back to you! QED42 has always encouraged contributions to the Drupal ecosystem via code and community. This blog post talks about my recent contribution to Drupal 8 - the Page Specific Class module.