Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 7 – Part 2 – How to Use Custom Classes to Selectively Apply CSS Rules

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

In the second part of this lesson we’re going to add custom classes to our pages. Then we can assign those custom CSS styles to specific pages and therefore have different definitions for different pages.

Add a Custom Class to a Thesis Page

Start by opening up the Dashboard. What we’re going to go is to go to Edit, Pages and then Publications. Scroll down here to SEO Details and Additional Style and here under CSS Class I’m going to add an additional style called category-display. I’m going to update that. We have now assigned the custom class category-display to this page.

Use the Custom Class in the custom.css Definitions

We have assigned it so now let’s refresh it. Nothing happens. Why is that? We have to take that that custom CSS and apply it to those custom classes. So come over here to custom.css and we will scroll down here to our custom thumbnail image and our custom .eStore-product. What we are going to do here is to say .custom and then right after that we’re going to say .category, hyphen display. Look – it pops right back over there because it knows this is the category display page. Here we are going to type .category, display and again that pops back over here.

Come back over here and take a look at Books. Come over to our custom.css and add that category display – dot, category, display, you can see that it no longer applies this 47% width to this product.

Update and Organize custom.css File

What we’re going to do is make those changes to our CSS file. Since we’re ending up with a variety of different styles here I’m going to start organizing this. I’m going to start organizing that with comments. I like to make these things stand out –go in a little bit and we’re going to call this one the category-display styles and then widen that out a bit. Now we’ve got category-display styles and I’m going to add dot, category-display. Add category-display to that. Go ahead and save this document.

Upload Site Changes

Let’s upload it and see what it looks like in the browser. The new formatting for the image did not stay with this however it looks fine over here because we applied this image classification to the classification of category-display.

Add Another Custom Class

If we want to create another one of these we could go over to Pages and then Books and select Edit. Add another custom class to this and that could be say simple-product-display. Go ahead and upload.

We’re going to add it to the other page as well. Start with the E Books page. Scroll down here, add our custom.css class, update that. Then what we can do is in those things we can fix this by coming over to custom.css and grab that plus the comment, and paste it again. Instead of category-display we’re going to call that simple-product-display and instead of category-display again we’ll call it simple-product and that should work.

We have now applied that custom class to the simple-product-display styles. Let’s just go ahead and copy that. Come back over here and paste and now we have simple-product-display styles and category-display styles. Of course we have our standard display styles which is what this is. Go ahead and save this. Let’s Upload it and let’s check it out.

Upload and Test Additional Site Changes

It works fine there; works fine in E Books; works fine in Publications; works fine in Tropical Fruit; works fine in Washington Fruit. We have assigned custom classes to these pages that allow our different thumbnails and our different formats to look differently.

Let’s take a look at how it appears in Internet Explorer. It looks fine.  Let’s also take a look at it in Chrome. Here’s where it was looking wrong, it now looks fine. So everything looks the way it’s supposed to look in all those browsers.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment