How to create CSS rules for specific page in WordPress, Joomla and Drupal

Sometimes it is very important to add class unique for only page but it is impossible without adding unique identifier.
In this tutorial you will learn the way to create and use specific CSS class/id to alter specific page for WordPress, Drupal and Joomla.

• The first CMS we will inspect is Drupal

  1. Open Drupal admin panel and go to “Structure” menu on the top and the select “Pages”
  2. Locate the page you need to edit and press “edit” button on the right:

     

  3. Update it by clicking the option you need and then “Edit” button on the right – you can see it on previous screenshot.
  4. Click “General” tab under “Variants” menu on the left:

     

  5. Type your new class in “Add body CSS classes” field, then press “Update” and “Save” buttons at the bottom to apply:

     

  6. Now you can check your website with Firebug and make sure you have new unique identifier applied specifically for that page:

     

• The next we will use Joomla and explain the way to add unique page ID.

  1. Open Joomla admin panel and go to menu menager, then go to menu you use to open the page – regularly it is “Main menu” and click the button, for example if you need to edit “Contact us” page, then you need to open “Contact us” button.
  2. When you are in a specific menu button, press “Page Display Options” tab on the right panel:

     

  3. You need to add page class value, same as for Drupal you’ve just seen

     

  4. Press “Save” button and it will be applied to your page. Now when you visit it new ID will be added.

• The last CMS we inspect is WordPress

  1. In WordPress CMS you do not need to add any unique identifier as it is added automatically by engine
  2. You can use Firebug to locate it – check your body class:

     

     Your page class will look like “page-page-id-” and a number singifying unique page ID assigned by system.

• Now you know how to assign unique identifier so you can use it to set unqie style, gor example:

  			.your_ID h2 {display:none;}
  		

  It will hide all H2 instances for page with ID “your_ID”

Thank you for watching our video tutorials. Please contact us if you have any issues in editing your template. Good Luck!!!

Feel free to check the detailed video tutorial below:

How to create CSS rules for specific page in WordPress, Joomla and Drupal