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 6 – Part 1 – Customize the Category View

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

Good evening everybody and welcome to this 6th live session on creating an online store using Thesis and Shopp. Tonight, we are going to try to complete the discussion about customizing the appearance of Shopp. I know we only scheduled this for 6 weeks but it seems to me like we are going to have another week next week.

We’ll have a 7th session and in that session, we’ll go through the process of testing and debugging all of the procedures in Shopp. We’ll do a dry run test and then we’ll do a live test and actual purchases to make sure everything works correctly and see how that whole process works. At any rate, tonight we are going to continue our conversation from last week about customizing Shopp.

Mental Management Store Customization

Over here at Mental Management Store, I did a bunch of basic customization just for the site itself prior to this. All of this customization was done using my plugins and it’s fairly simple and straightforward. What we’re going to do is go back to talking about the customization here.

We’ll begin here in the category view in Shopp and in fact, just about any of these views are considered category views. Right now what we’re doing is showing products and featured products that are on sale but we took the featured products out. So right now, the main shop only shows products on sale and this is, all by its lonesome, the category view. If we go to a category that actually has a bunch of products in it like archery, this is also in category view in Shopp.

The Difference between Grid View and List View

As you may recall from last week, category view has 2 different views. The first view is the grid view which is what we’re seeing right here and the 2nd view is the list view. The difference between the grid view and the list view comes out of javascript. That is when you switch this back and forth; the page itself is not refreshing. What’s happening is a javascript event is being triggered and the views are being displayed differently.

What we’re going to look at here is I’m going to show you what specifically happens because this is going to be critical to understanding how to write the CSS for these changes here. If we come over here to archery and right now, we’re in the grid view. If we inspect our elements here, you can see that inside of the standard Thesis format text; this template creates the div id shopp and div id shopp gets a class that is assigned dynamically from the javascript.

Now you can see that the class is category and grid. When we switch back over to this as we go to our list view, you can see it change from category grid to category list. Switch back and forth like this, you can see that it is changing. When we go to write the CSS, what we’ll be doing is prefacing our list view with grid. So we’re just going to dive right into it.

Applying a Button Style

What we’re going to do is start off by styling our buttons and the button style is going to be consistent throughout the entire site. We will be applying this button styling to our Add to Cart in Shopp and to the other buttons that exist here so that we maintain this constant appearance. We’re also going to be applying that button style to this detail.

We’re going to start with that first and I’m going to open up the custom CSS file here. Here’s the Shopp CSS file we’ll be customizing. I opened up a little bit of space here because this is where I’m going to put my custom code. We’re going to use a gradient CSS 3 gradient on the button. I’m going to get help with that by going to csstricks.com and I am going to use some of it. Let’s see, where is that little button generator? Okay and the button maker.

Button Maker Tool

They’ve got this cool little tool that gives you the chance of monkeying around with colors here. We’re going to use a top gradient color and a bottom gradient color. We’re also going to use a top border color but we’ll use a solid color for our hover background. Then we’re just going to actually get rid of most of the other extra stuff. If we open this as it is and look at the CSS that comes with this, what I’m going to do is just copy this CSS and paste it into my custom CSS file.

Then I’m going to muck about with it a bit because I don’t actually want the button to specify its font size and its context. We don’t need to specify the font family here. I also don’t really like the way this box shadow thing works, the text shadow and that kind of stuff. All I’m really doing is borrowing their code for the border radius and for the gradient.

Changing the Gradient Definition and Border Radius

If we come back over here and just take a look at what I actually did, I’m just going to copy this little block of code here. What I’ve done is I’ve separated some of the code out. This is the code that relates to both of the different catalog views. What this is reviews this gradient definition that I borrowed from them. I’ve changed the padding around a little bit and I changed the border radius to give us 12 pixels of border radius.

I just let the color of the text be white and then I gave us a different kind of a box shadow. I specified a width for the button so all the buttons are the same width. I made sure that the buttons kind of float to the left because we’re going to end up setting some of these things side by side. I gave them a little bit of left margin so it doesn’t butt up against anything else. Actually, I’m just going to delete the rest of this stuff for the moment so you can see how this turns out all by itself.

Standard CSS for an Input Button

There’s nothing specific about Shopp that I’m doing here. What I’m really doing is standard CSS for an input button. We’re taking this input type = submit that is the button itself. Let’s just go ahead and go to Catalog php. Last week, we created this div details link and we wrapped our detail area with that. Then we have our Add to Cart button and this Add to Cart button generates input type = submit button. I’m sorry, this is totally spacing this out. This is that little details button that we created last week.

We’ve got the details link. We’ve got the Add to Cart button there wrapped up inside of this class called details link. We are using that class here to preface the input type = submit and we’re also using it to preface the link tag. In fact, at the moment, I think I’m just going to go ahead and delete this Add to Cart button because that’s for later. We want both of these things to have the same general appearance so I’ve just put them together.

Another way of doing this actually in way that maybe is a little bit more straightforward is to put these in a vertical list. This part here with a comma and this one here are defined by this block of CSS code. We’ll go ahead save that, upload it, come back over to the site and take a look at it. We should have a couple of buttons. We do and you can see that right off the bat, these couple of buttons look a little bit different than each other even though they each have the same set of definitions.

If we go over to the grid view, you can see it’s also the case. The same definition results in a slightly different button configuration so what we’re going to end up doing is modifying the link button a bit so that it looks more like this Add to Cart button.

Creating a Hover Style

Before we do that, I actually want to go ahead and create a hover style for this. Right now, the buttons actually work but you can’t really tell because there’s no specific hover style and the standard hover style is taking precedence here in this case. What we’re going to do is to change that up and add our hover condition which is what this is.

Shopp CSS; we add the style to our hover condition and again, this is the info type = submit hover and the standard link hover. I’m going to go ahead and delete this. Border top, I actually don’t need this piece. There’s no reason to repeat a code that’s the same.

What we’re doing is we’re eliminating the linear gradient. We are changing the text color. We’re making sure that the cursor is always a pointer and we’re reducing the box shadow. You can see we had 2 px and 2 px and 2 px for the main one. I want it to look like you’re pressing the button so the drop shadow drops away a bit. We’ll go ahead, save this, upload it and refresh it.

Now we have a hover condition and we hover over the button. The gradient goes away. We get the yellowish peach kind of text color and then the shadow gets smaller so it looks like we’re pressing the button. It looks the same in both cases except that this is not centered in this case. I’m actually not sure why it’s not centered in this case but it is in the other. We’re going to fix that in both places in any case.

Changing the Padding of a Standard Link

What we need to do is take this button and make the padding smaller so that it’s the same size as this. Then we’re going to give it a text alignment of center, we can come back over and look at our code. That’s exactly what we’ve done here. We said in the case of the standard link, we’re going to change the width from 120 down to 110. We’re going to change the padding from 6 to 4. We’re going to give ourselves a little bit of margin so it centers it a little bit and we’re going to make the text align center.

If we refresh this, you can’t really tell about the thing about the center thing just yet. There are some other kinds of formatting that’s going to happen here before that really takes effect. Nevertheless, our buttons now look the same and they are both centered, about the same width. We’re good to go on that.

Actually, I’m missing one piece and that is the definition of that details link, a wrapping div. I wanted to make it 30 pixels tall. I wanted to make sure it was 100% wide so it was the full width of the container of the frame that it’s inside of and we’re just going to go ahead and put that in here.

The real benefit of this is not going to be seen yet. We could take a look at it but I think we’re going to see that until we work on the frame. The next thing we have to do is we’re going to work on the frame because what we want now is all these things to line up right. We want the buttons always to be across each other. We don’t want the jogging of the size of these based on the link of the heading.

If we come over to skeet shooting for example, I guess it’s not skeet shooting. It’s shooting sports here that sometimes we’ve got a couple of lines. Here’s a 3 line one so it just throws everything off if we don’t have a specified size for each of these pieces. That’s what we’re going to do next.

Creating a Frame in the Grid View

Well, this is now the definition for the views where it applies to both views. Now we’re going to work on the grid view only and we’re going to start off by creating a frame. Actually, we had started that last week. We had created this frame. We gave it margin around the frame, some padding inside the frame, gave it a solid border, gave it some drop shadow and gave it a specific height and a border radius.

Something that we hadn’t done last week was we didn’t include this position relative all. You’re going to see why that’s important in a few minutes but the reason is because we want to make sure those buttons always stay down at the bottom. We’re going to position those buttons relative to the bottom which means that they have to be inside of a container who has a position of relative.

Just in case you’ve forgotten, the way this works here is we have a row for each of these things and then we’ve got a product. Inside that product is this frame. This is the part that we are now styling, it’s the frame. I’m not sure I saved that. I didn’t. Save it, upload it and take a look at it.

Specifying a Height to the Titles

Now we’ve got all these things of the same height, right? But the buttons all jump around depending upon how long the titles are. We need to do a couple of things. One of them is we want to specify a height of these titles that exist everywhere so that all of the titles are always the same height which means that in the case where the title is an abbreviation like this, it’s going to have more white space but at least the prices will be lined up.

Then the other thing we’re going to do is take these buttons and we make their position relative to the bottom of the containing frame rather than just following the normal flow. That’s what we’re going to do next is take a look at what those things are. Remember that we prefaced this. This is our div id that contains all of our Shopp information.

That is Shopp and we are talking about the grid view so we preface this with .grid and then we’re talking about the div that is in the frame which is inside of a LI called products. It doesn’t really matter what the element is. It’s just frame, products, and Shopp grid.

The same thing is true with here as Shopp grid h4 .name. That is what this element is. You can see, we are up at the top Shopp grid. We could, if we wanted to, say Shopp .category .grid and that would be just as accurate as just saying Shopp .grid. We’re just going to say Shopp .grid because that’s all the part that we really have to go with it and where LI, the list item is product.

The div class inside the list item is frame and then we’ve got an h4 inside of that with a class of name. That’s the element that we’re working on, Shopp grid h4 .name.

Absolute and Relative Positions of the Details Link

While we’re talking about that, we may as well just look at the details link. That was that bottom piece. We’re giving it a position of absolute and we’re giving  it a bottom position of 20 pixels which means that because the frame that contains the details link has a position of relative, this div class details link, if it’s given an absolute position will position itself absolutely relative to this container or relative to the frame.

What we’re saying with this code is put this div details link 20 pixels up from the bottom of the frame. Regardless of how tall the frame is, regardless of anything else, put it 20 pixels above the bottom of the frame, okay?

My apologies to folks for whom this is just a standard CSS instruction because that’s actually really what this is. It’s mostly, at this point, just the way the CSS works. The concepts here are not unique to Thesis or to Shopp for that matter.

We go ahead and save that, upload it, come over here and test it. So now what we have is our images across each other. The images aren’t exactly the same height obviously, so the prices don’t line up perfectly necessarily. If we come down here and look at the difference between when the images are the same height, you can see if a single sentence name, a 3 sentence or a 3-line name, the images still line up across from each other and the details button still line up.

Making a Frame Definition Specific to a Certain View

We have a fairly pleasing arrangement now with that and it won’t be surprising to you but it doesn’t look perfect over here. Last week when we were looking at this, I had this funny thing going on where I had the frame going around the entire element whether it was an either condition. That actually wasn’t what I wanted. I wanted the grid view to look different than the list view. By making this frame definition specific to the grid view, I was able to apply it only to the grid view.

The next thing we’re going to do is to look at the list view. The list view is going to be a little different. What I want is to have a uniform location for the text, for the title, for the price and for the buttons so that it doesn’t jump around here like this, depending upon the width of the image. What’s really happening here is that this image is wider than this image and so this stuff bops in. What we’re going to do is to specify a width for the image section and to make sure that these things essentially indent away or stand off from that width.

Now when the image is smaller, there will be more white space than when the image is larger but all of our buttons are going to line up and all of our titles are going to be beside the image rather than hidden potentially here. That’s what we’re going to do next and that is the stuff that’s specific to the list view.

Using a Position Property for the Details Link

I want this details link always to show up in the same place regardless of how much stuff is above it. I still want to be able to use a position property for the details link. I still need to keep position relative for the frame even though we’re looking at the list view although I don’t need the margin, the padding, the box shadow or a specific height for that matter. This can be whatever size it turns out to be so it’s much less stuff involved.

I suppose what I could have done actually is, I could have just deleted that and deleted it up here, deleted it right there and then had this. If I had done it just like this, this position relative would apply to everything and in fact, that’s what I’m going to do because that’s a much more efficient way to do it rather than redefining it.

We’re going to come back up here to both views and I’m going to paste that there. Position is relative regardless of view; we’ll come down to the view and get rid of the position relative in the grid view. We won’t need to do a position relative in the list view so we can go ahead and just delete that.

Specify an Image Class

Then I want to show you something that I did here quickly. In category, what I did was I gave a class to the image. By default, this little class = thumbnail thing didn’t exist. Here’s what the code look like out of the box. It’s just a link tag with an image as the clickable part of the link. What I want to do is to define a width for this link that’s independent of the image itself.

The way for me to do that is to specify a class so I put a class = thumbnail in the category template. Then what I’m going to do in Shopp CSS is to reference that. It’s list products a .thumbnail because that’s the class for that link now. I’m just going to give it a width of 120 pixels, make it float to the left, and then in order to prevent this element from collapsing, I’m going to give it overflow of hidden.

Those of you who are familiar with collapsing divs with floats will understand what’s going on here. In any case, width 120 pixels, float left, overflow hidden. I gave this a width of 120 pixels. What I’ve done with the h4 then is just give it a margin left of 120 pixels so it stands off to the left or stands off to the right of the image. Then changing this details link, in this case, I made the position relative and the bottom 0.

Essentially, what this means is that it is relative to where its normal position would be and it’s 0 pixels from the bottom of its normal location. That’s what’s going on there. Go ahead copy this stuff and paste it. Now I’ve got a block of code for the list view, a block of code for the grid view and a block of code for both views. Go ahead and save that, upload it, come back over and refresh it.

Now we have this larger space over here. All of our buttons now line up and our prices line up. We have a nice clean edge along here regardless of how large the image is. We have a nice, clean look with this. That’s what my intention was and all of this stuff seem to work fine.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment