DMS 2 Adding custom CSS to single page template

4 posts in this topic

I'm building a careers page using a 3rd party plugin. I'd like to add a separate external style sheet to this page template because the styles are fairly voluminous and they don't apply to other pages.


Is that possible? Any other suggestions?

Share this post

Link to post
Share on other sites

You can add page specific CSS by prefixing your CSS by using


Replace xxx with the ID of your page found in the Visual Editor > page setup. 

Share this post

Link to post
Share on other sites
Martin Davies thanks for the pointer, but I'm not entirely sure what you're suggesting? Are you saying I should add this in the custom CSS panel? Can you show me an example? Will this prevent that CSS from loading on other pages?


Share this post

Link to post
Share on other sites

WordPress includes special classes that are assigned to the body tag. These special classes are dynamic as they're different on what page you're viewing on your WordPress site. For example,


if you view a category, the body class will have a category class for that category

if you view a post, it will have a unique class for that post, the same applies to pages etc...


You can use these classes to add individual styling for posts, pages, blog, category, archive and so forth. As Martin mentioned above, if you inspect your page using Google Chrome's dev tools, you will see a number of a classes in the body tag of your page/post.

It will look something like this page-id-41 (your id will be different most likely, so instead of 41 you will see a different value).


Now what you can do with this, is prefix your custom CSS with that class and this will allow you to add individual styling for that page or post.


For example, let's imagine you want to have a pink h1 on your about page. What you will need to do is go to your About page, then inspect the page using Chrome's dev tools and get the ID for that page.


Then use that in your code like so.


.page-id-666 h1 { color: pink; }


You can use the same principle for sections or sidebars. For example, lets say you want to give the Masthead sections title a unique color for your Contact us page. Again you inspect the page using dev tools, find the page id and use that class as a prefix in your CSS.


.page-id-123 .section-masthead h1 { color: #428BCA; }


This will give the Masthead sections title a bluish color for that page and that page alone.


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

      By oseehys+
      Hey Guys, i have been having some fun with PL5, on my test site, still learning and trying to master 3 sections a day, am happy the launch has been postponed its for the best lets master it as much as possible.
      But we still gat to eat with DMS for now, so my issue has been on how to reduce my pin pad size in pinspro, right now it display 3 in a row, like the default theme, but i want it to display 4 in a row, if i reduce my screen resolution to 90% it becomes 4 in a row, that is the perfect size, i cant see any css on the forum be able to reduce the size,  so guys please, please this is very important, i need the css to adjust the size, of all the css @Danny has provided on the forum i cant see anyone that focus on the size reduction except on hiding the bottom meta area, mine is just to reduce the size, checkout the images below, the image with 4 rows is the perfect size i crave to have, while the pinpad with 3 rows is what i currently need to change.
      Thanks Guys for your support all this while.
    • CSS Hero question
      By janpeeters+
      Hi all,
      I was totally excited to find out about 'CSS Hero' ( I read about it in the compatible plugins section of the PL5 docs ( For me it's a great way to more easily customize my sites because I'm not a CSS pro.
      I'm wondering about one thing though… Does anyone know if using this will result in a heavy penalty on page loading speeds? Would love to start using it but only if it doesn't cost too much in terms of speed.
      Thanks, Jan
    • WooCommerce Checkout page broken under DMS
      By nizami+
      Seem to have fallen foul of a DMS2/WooCommerce issue. 
      All pages display correctly save the WooCommerce Checkout page, which looks like this:
      Help massively appreciated as this is the last blocker before client site launch
    • Modal Popup Background
      By abuzzelli+
      I need the modal popup background to be solid and I can't get the css to work. Not sure what to do. Here's the page:
    • Background overlay z-index
      By dawsonbarber+
      I added a background image to a container that has a textbox in it, then added a background overlay.
      The overlay "overlaid" the textbox content as well as the container background image.
      Fixing it was simple enough: I reduced the z-index on .pl-bg-overlay to 0.