This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
This lesson relies very heavily on the Firebug and Web Developer Add Ons for Firefox. If you are unfamiliar with how to use these please watch Lesson 1 of the Customize Thesis Like a Pro, Tools of the Trade Series.
In order to begin customizing the Category Listings, let’s open up that site in Firefox and then come on over here to our Publications. What we want to do is the same thing that I’ve done in the Thesis eStore demonstration site, open up a new page and go to www.thesisestore and then look at Catalog 1. This is what we want to accomplish. We want to put them side by side and we want to get rid of those boxes and that sort of thing. We also want the thumbnails to display correctly.
Edit Layout and Thumbnail Settings in WordPress Dashboard
The first thing that we’re going to do is to make some edits at our Dashboard. We are going to undo that smart thumbnail feature that we did earlier and we are also going to make this page a no-sidebars page. Let’s go ahead and log into our Dashboard and first we will open up our Settings in the WP eStore and scroll back down here to Enable Smart Thumbnail Option. We’re going to turn that off. The reason why we have to turn it off is because the way it affects the thumbnails when they’re of different sizes. So we’re just going to turn it off entirely and then update those options.
Then go over to Pages and we’ll open up that Publications page and we’ll take the Default Template. Make it the No Sidebars template and update. Now we’ll go ahead and do the page. Okay and this is a good starting point for customizing the Category Listings for us now.
Customized CSS File
The next thing we want to do is open up our custom.css file. This is the custom.css that we put in during an earlier lesson. This is what gives definition to the Submit button or the Buy Now button and this code was written in the lesson of Customizing Thesis Like a Pro, Tools of the Trade, Lesson 1. If you haven’t seen that it’s definitely well worth your while to go back and look at that section on how to customize the buttons.
Finally, we need to open up FileZilla and make sure that we connect up to our website. Once we’re there we’re going to open up themes, Thesis 1.7 and custom and it’s this custom.css file that we will be editing here.
Adjust the Display to Fit the Thumbnail Sizes
Now we’re all ready to go to customize the Category Listings. First, we want to fix these vertical thumbnails. Let’s open up Firebug and edit the CSS in Web Developer and let’s open up our custom.css file. Right click on this icon and hit Inspect Element and we can see that we are looking at the image with a class of thumbnail that is inside the class of eStore_thumbnail, that is inside the class of eStore_product. Hover over this image class and look over here to see what is affecting its size. Scroll down here and you can see that thumb-image gives it a height of 125 and a width of 125 and that’s why our image is being distorted.
What we’re going to do is to change this description. Copy it, come back over here, type dot, custom, space, paste and then give ourselves a closing curly brace. Come back over here – indent a little bit and then we are going to say height, colon, 193px and width colon 100px. I know the actual size of the image that’s why I can use those references. If you didn’t know the actual size of the image, you just hover over it with your mouse you can see down there at the bottom of the screen that it shows a picture of it and it tells you the size of that image. That’s where that comes from and you can see now that the images have taken the right shape and size here.
Next we’re just going to go ahead and take this piece of code, copy it, come back over to our custom.css, give ourselves a little space and paste it. We’ve got our custom thumb-image. Go ahead and save the document, upload it and view it. It looks fine with our new custom.css.
Let’s now go ahead and eliminate the box around this. The first box I want to get rid of is this overall big box. Go ahead and inspect the element and that is a div class-‘eStore-product’, and you can see the eStore-product has this border here. Essentially what we want it to do is look like that. So what we’re going to do is to take this piece, copy, over here – dot, custom, paste, Enter, Enter, Enter, closing curly brace, back up one and indent. We’re going to say border: none. And the border goes away.
Next we want to get rid of the border for this element here. Again we’re going to inspect the element and see where that border comes from. It doesn’t come from custom .thumb-image, it comes from eStore thumbnail image. Come back down to this, copy that, and paste it. Then we’re just going to go ahead and copy eStore-thumbnail image and instead of eStore-product we will replace that with eStore-thumbnail image and now that has gone away.
Test CSS Changes
Go ahead and copy that to our CSS file. Copy, come over to our CSS, enter, past, we’ll save it, we’ll upload it and we’ll test it. There it is with our new information and it looks like it’s working.
Place Catalog Entries Side by Side
Finally, to finish off customizing the Category Listings we want to make these things sit side by side similar to this. The way we’re going to do that is to make this thing a little less than half the width and then we’re going to tell this one to float up to beside it. The way we do that again is to figure out which of the elements controls this. By hovering over this it looks like the div class-eStore-product controls this. If we look down here we can see that there is no width description but there is a height which leads us to believe that this is still probably to the right one. Come back over here to custom.css and I think. We have eStore-product identified so we will just add a line to this and we are going to say width, colon, 47%.
Now that the width has been shrunk down we want to tell the lower one to pop up to the right. The way we do that is by saying float: left. That’s what’s happened here, this left element has floated to the left now and then based on its width there was enough room for the right element to pop up.
I like a little bit more margin here between these two so I am going to add one more element. I am going to add a margin-left of 10 pixels. Any bigger and it would exceed the width of the page and the second item could no longer float to the top. So we have to make this margin left or this width of 47% small enough so that the two can sit side by side in the page width.
Update the Changes to the Site
Copy that custom .eStore-product and move it back over to our real CSS file and paste over the top of it. We will save it, upload it and test it.
Test Site Changes in Various Browsers
You might think you’re done but we’re not actually because while we’ve tested it in Firefox we also need to test it in Internet Explorer and in Chrome. Go ahead and copy that URL, open up Internet Explorer, paste the URL into that. It looks fine in Internet Explorer. Let’s take a look at it in Chrome. Open up a new page, paste that there, hit Enter – Okay it looks fine.
Now we have a deceptive problem. It looks great here but as it turns out it doesn’t look so great here. What happens is those things that we identified for the width of that element, that actually controls more than just this category view. It turns out it also controls this product view and so in the next lesson we are going to look at adding a custom class so that our definition for the category view does not affect our product view.