425.830.8350

clients@briansniff.com

Web Design

Custom designed websites for business, personal, or eCommerce.

Website Hosting

Custom hosting solutions optimized for WordPress based sites on our Litespeed Server platform.

ECommerce

WooCommerce provides a powerful and scalable platform to sell both virtual and tangible goods. Contact us!

SEO

SEO practices include revamping of your site’s content, meta tags, and page structure to perform better in Google searches.

VIEW ALL SERVICES

Discussion – 

0

Discussion – 

0

Making Page Specific CSS Changes In Divi

When making changes to any theme in WordPress you want to be sure that the element you’re modifying isn’t global if you’re only looking to make the change appear on a single page. Luckily there’s a simple solution for this that involves the page ID that you wish to pinpoint.

The first trick is to get the page’s ID. WordPress, by default, does not display the page ID’s when you’re looking at your Pages / All Pages. There’s two ways to get this valuable ID number:

  1. Go to Pages / All Pages and find the page you’re looking for. Then, mouse over the title of that page while still on the list of pages. Then look down in your browser’s status bar (lower left) and it will display the page ID. This is an old rustic way of doing it. Or….
  2. Go to WordPress.org and get the Catch ID’s plugin (https://wordpress.org/plugins/catch-ids/) and after installing and activating it go to Pages / All Pages and you’ll see a new column in the display that has the page ID.

After you’ve acquired the ID then you’d write your CSS code like this:

.page-id-1 #id-of-the-item-to-alter .or-class-of-the-item {
/* your code here */
background: url('https://yoursite.com/images/name-of-image.jpg') repeat-y;

}

The page-id-1 should be changed to your actual page’s ID number. This will isolate your CSS changes to just that specific page. Give it a try!

Tags:

Site Manager

0 Comments

You May Also Like

Pin It on Pinterest

Share This