Video Transcript

If we click on the details view, it jumps us over to here which is something that we are going to edit next. And if we add that to the cart, if we select an audio CD and we add it to the cart then we come on over to here and this is going to need some special treatment. And then if we proceed to checkout. Here we are and this is also going to need some special treatment.

And the reason why I showed you all of this before I move on to the reconfiguring of the product styling is that those of you who have been working with Thesis for a while are familiar with what Thesis does to input fields. And unfortunately, it’s probably the one piece of poor code in Thesis that Thesis only imagines you’re going to use input fields for one thing and that’s your comments. And so it styles every input field the same way. And what we’re going to do is we’re going to fix that because there is a fairly easy blanket fix for all of this. But you’re going to see that fix here in the main product display which is where we are going next. That’s what we’re going to do next.

The problem with the… well, I think there are a variety of problems with the way this template is shaking out at the moment. First off, this is the title of the product, right? The name of the product but it doesn’t stand out really strongly. And when we go look at the catalog template, you’ll see why. This is that summary and actually, the summary stands out as strong as the title does. The add to cart has the standard problem with all Thesis stuff and so we’re going to work on fixing that.

The first thing we’re going to do actually to fix that is we’re going to fix the Thesis flaw. Now the Thesis flaw, I may as well just demonstrate where the Thesis flaw comes from. The Thesis flaw comes from this section of the code here. If you look at this input class add to cart type = submit, if you come over and look at the definition here, here are standard Thesis text, format text input which is what this is missing any other further definition. Width is 45% and this is the thing that really messes up PayPal buttons and shopping cart buttons and input types is this very blanket statement that any input, regardless of its type, if it’s inside of format text, it gets a width of 45%. And if it didn’t have that, you can see it would drop off to you know, on to its automatic size. And what we’re going to do though is we’re going to make it… we’re going to solve that by being a little more specific.

We can do that by coming over here to our stuff and I have this little category of things called Thesis Universal Fixes. This is… well and so what we’re going to do with Thesis Universal Fixes of the moment is… we’re going to do 2 things. The first, we’re going to make sure that the width is specified as auto so we’ll let format text be weird if it needs to be. But if it’s inside of the Shopp div, if it’s an input inside of Shopp then we are going to give it a width of auto.

And then the other thing is that select boxes by definition in Thesis, don’t have any padding which means they look funny. So we’re going to give select boxes 4 pixels of padding. So we’ll come back over Shopp CSS and again, we’re going to make our Thesis Universal Fixes, save and upload. We’re already going to see a little bit of resolution here because our button’s down the right size. Our select box has a little bit of space around it and so we’re already partway there.

But in order to fix this stuff, we actually have to dive into the product template itself. So going back to our product template for a second, we scroll back up here and look up at the top. It starts off with a product gallery which is obviously the image gallery that shows up there. And then it has the product name. Well you know, it’s given product name a tag of h3. And if we look at the page, the page doesn’t actually have anything bigger than h3. Let’s see, if we view the page source for a second… that’s not what I want to do. View the page source for a second and just kind of work our way down the page. Let’s see, where are we? Okay, down in the content.

So now that we’re down inside of content, we would expect to see some kind of h1 tag which is essentially the page title. And there isn’t one. We get through all of our sort of miscellaneous stuff and we come all the way down to an h3 tag. And the h3 tag, that’s what they decided to do with the price was give it an h3 as well. And you know, as much as I like Shopp, that’s actually pretty crummy for SEO. And so what we’re going to do here is we’re going to change this around to an h1. So we’re going to say h1 instead of h… no, no pardon me. Actually, what we’re really going to do is for price, we’re going to say p. There’s no reason to give price a heading. That’s not good semantic markup. And in fact, same thing is true with these. It’s not good semantic markup to make these things… not hp but p… to make these headings because they aren’t headings. Headings are supposed to indicate that it’s a piece of… it’s a heading for content that’s going beyond. And what they did was they used h3 tag here just to make the text bigger which is not good strategy.

And so however, what we are going to do is make this h1. So we’ll make the product name h1 and then this is archaic. We’re not going to use big but we are going to style this class so then we can make it look the way we want it to look. So we’ve got h1, we’ve got a p tag. Let’s see, looks like somebody’s got some questions. I’ll get back to that in a bit, Lanny.

So we’ve got an h1, we’ve got p tags, and we’re just going to go ahead and save this. And upload it. And then take a look at it. No, I must have… I didn’t… that’s right. I didn’t apply the right thing. Upload the product. Okay, there we go. Now we’ve got an h1 tag there. We’ll go ahead and style this h1 tag somewhat yet. But now I’ve got an h1 tag there and so now we’re going to jump on the CSS.

And what we’re going to do here, I believe, is we’re going to give this a little bit of… we’re going to give it some bottom margin. We are going to give ourselves some… a better definition of line height and then we’re going to move on to buttons and these kinds of things.

So we start off with our title. We come over to custom CSS or Shopp CSS, I mean actually, and we come down here to product view, product pages. Okay and so our product pages are going to have… let’s see, Shopp and then h1 and we’ll say font size and just give it 24 pixels for a moment. And then line height, I don’t know why I keep trying to type that in capitals. And let’s make that about 36 pixels and bottom margin and let’s give it 24 pixels. Okay so Shopp h1 and then we may as well… let’s just look at this. And we say class = headline, let’s go ahead and give that some special stuff too. And so actually, I want to give this a different color too. I know it’s not brown but I’m going to say brown here for just a moment. And then here we’re going to say p.headline and we’ll say font size: 18 px font color:… let’s give it a dark gray and let’s say… that’s not font color. I know that. It’s color and that little thing telling me I was making a mistake. I’m still making a mistake. It’s not 5 8 it’s 6. And then finally, we’re going to… let’s see, font style italic, I think.

Okay so we’ve got our Shopp h1. We’ve got our headline. We can hit save to that. And actually, the other thing I want to do now is add that Add to Cart button to this too. We scroll down here and look at that button. It’s an Add to Cart button which is essentially add to cart input type = submit. That’s its class. So we come back over to Shopp now and we’re going to add that in up here. Back up in this definition. So add to cart input type = submit and then this is a hover condition.

Okay so now we’ve applied the styles, this button style to that as well. So let’s go ahead and upload it, see what it looks like. Okay maybe that’s a little bit too much, don’t need quite that much space there. So 24 pixels is too much, maybe a little bit darker gray. Let’s see, 464646. Okay too much space there. Line height’s too big, a little bit darker gray. So we’ll start with that, 464646. Wrong 888. Okay, here we go, 464646. Let’s make it 30 points and let’s make this 18 pixels. Let’s save it and try it. Oh you know what? I didn’t notice this but I don’t think the button worked either, did it? It didn’t. Okay, I missed something with the button but that looks better there. Okay, a little darker gray, a little bit more space there. I must have missed something here. Let’s see, add to cart input type = submit, add to cart. Well, let’s go back and take a look at that code for a second.

Add to cart input type = submit. Yeah, add to cart input type = submit. That should be working so let’s take a look at it here. Let’s see why it isn’t.

Okay so I’m looking at div id Shopp and then class product. It’s class add to cart input… oh, of course. It’s class add to cart. I was behaving as if it wasn’t. It’s actually this way. It’s input add to cart like that, input.add to cart and… that’s not right either. Not the best cut and paste job I ever did. Okay add to cart is the class of this input so it needs to be attached to it. So that should work and then let’s go ahead and upload it. Okay, there we go.

So it’s getting in the right direction. Okay now we’re going to go ahead and I have those little unrehearsed moments actually work because plenty of time, rehearsed moments don’t work for me.

Okay so the next thing we want to do is move on with the styling of this and so we have now… you know, I think what I want to do on the product is the same thing I did with the list view which is not let this thing drop down below the book if there’s a lot of stuff here. And in order for that to work, we should come over and take a look at… actually, let’s look at it in its rendered view. Let’s see, okay so what I’ve got going on here is I have UL previews gallery. Okay so I have gallery and inside of gallery, I have that and then I have headline and then I have price and then I have form. And what I should do is specify a margin for price. Let’s just look at that.

Edit CSS. Let’s find one where it does actually drop off back over in…there was one here just a moment ago where… well in fact, it’s the… was it this one here? That’s what we were just looking at. Let’s go back to universally applicable. Let’s see if we can find one that will do this. And yeah, it’s going to be freedom flight.

Okay see, I don’t want this to happen here. And actually, this all by its lonesome is not really objectionable but what would really be objectionable is if you know, the price was over here or the price in the options were over here but the button was over there. So what I really want to happen is all of this stuff just end up beside that. And I think the way I’m going to affect that though is I’m going to come down here and… okay, that’s the headline and now what I’m going to do is I’m going to create a div. Div class = product details. Oh no, let’s see. Not details but really sort of product price.

So we’ve got… we’re going to create an html thing around that and that’s going to go all the way down to… you know, it’s going to go all the way down to this actually. /div. Okay so we may as well just indent this one. Okay so product price, wrap it up in a div, save it. Let’s upload that and then let’s go ahead and style it. And I think what we can do here… now that should be wrapped in our div. Yes, it is. It’s wrapped in div product price and we’re going to give product price a margin of say, 150 pixels.

So if we look over this for a second and we just… let’s see, .product price. Okay, 1, 2, 3. Margin left… call it 200 px. Yeah, I don’t know. Maybe we should take this little piece out of the form. Let the form be up there. Let this piece be below the form and then knock it off at that. So that’s what we’re going to do.

We’re going to take this little bit of… let’s see. Yeah, I guess we’re just going to copy this again and take it outside the form. I can’t stay outside and not all of it can be outside the form because in fact, now we can go ahead and just get rid of that class. And we’ll go ahead and remove everything to there. So now we get the inscription inside the form and then outside of the form, we are going to get rid of the form element. So it’s actually… we’re going to test this question twice. We’re going to test it once outside the form and once outside of the form. Inside the form, it’s going to produce a form element. Outside the form, it’s going to give the description. Just list the name of the person you would like Lanny to sign the box in the box above. Okay, there we go. Save that. So… well, it’ll be evident what we just did here. Just decided to shuffle around a little bit.

Okay, if we come over and look at this one, refresh this. Right, okay. So then if we said .div .product price and give me a left margin, margin left: 200 px. Okay, I must still… yeah, I still have to move that closing div for that product price. But nevertheless, now I get this stuff over here. What will happen is this will spill back over in this direction. Yeah.

So go ahead and copy that and put that in our CSS file. Shopp CSS and we’re down here in our product view. Where did our product view go? Okay and then come back to our product for just a second and make sure I’ve got my closing div for that here actually, outside the form. Okay, there we go. So product price is right there. Now it should behave the way we wish it to. Upload this, let’s see, let’s refresh it. Looks fine there as it would in this situation. There we go. It’s because I didn’t upload my CSS file. It’s the beauty of Web Developer. It can always tell when you made mistakes.

Okay so you know, I guess this really bears thinking about… I’m not really sure what the right answer here is when you have a lot of stuff there whether or not it makes sense to move this over so it’s like that. I guess I just know that for sure, if the price itself you know, was sitting there but all the rest of it jumped over, it would look wrong. But nevertheless, we’ll come back to… we’ll revisit that a little bit here.

One thing I do want to do is I actually want this, the quantity, to be over here. The only reason why the quantity isn’t over there is because this add to cart button floated to the left. And I want the Add to Cart button to be larger too. So what we’re going to do is we’re going to create the product price version of this Add to Cart button is going to be longer and it’s going to… it’s not going to float to the left.

And so we’ll come back over here to custom CSS… not custom CSS, Shopp CSS… and let’s see. Let’s just go ahead and steal a little comment and this is the product view. And then we are going to take our… we’re going to take this and come down here, paste it. Now, we don’t want to change any of this. We are going to get rid of float left so actually, it’s going to be float none, what it really is. Margin left is 10, width is… let’s call it 180 pixels. And we’re going to get rid of that. It is input type = submit, add to cart and then what this is is the product price version of it. So div product price input type = submit .add to cart. Yeah, okay. We made it wider. We made it not float at all and we’ve given a little margin to the left. So let’s save that and let’s see what it looks like. Okay, there we go. Although, it doesn’t really look like it got any larger, does it? Let’s make this element… something… oh, the width is going to auto for that. So I need to make this a little bit more specific.

And so the way I would do that would be to say #shopp… there we go… #shopp add to cart. That makes that description more specific. If you don’t know what I mean by that, I encourage you to watch my Lesson 6 on Inheritance and Specificity in CSS under Customize Thesis Like a Pro.

And then we just need this box to be bigger. And so let’s see, inspect this element and okay, let’s just… we are going to say #shopp here. No, not… yeah, opp. And then Shopp div product price input type = text and we’re going to say it’s… let’s give its width of 380. No float, margin left of 10. Let’s see what happens when we do that. I think that will do exactly what we want, essentially make it the input wider and give us 10 pixels next to inscription. Oh, that’s a little bit too wide. Let’s see, how wide do I want it to be? I guess I want it to be about 320 pixels wide or so. Okay, 320. Actually, I should just double check that to see if it works. That’s the beauty of Web Developer. 320, let’s see what happens. Yeah okay, that’s perfect. That’s perfect.

You know, while we’re at it, we may as well just play with this for just a second. This is our div class product price inscription explanation. Okay so inscription explanation and let’s say 1, 2, 3… let’s see, color… yeah, okay. It’s a horrible thing to do though. We won’t do color red. We’ll do color… this… yeah, let’s do it this color here. Grab that color, okay. And then we’ll say font size: 16 px and then we’ll say font style italic. Okay, there we go.

So we’re just going to copy both of those 2 pieces, go on over here to our site and this is the one we’re replacing. Yup, okay refresh. Okay so now we have fairly nicely styled, nice big Add to Cart button. Select a drop down option. Those things all work pretty nicely. We styled this stuff.

Video Transcript

I think what I might do is break here, we’ll come back to styling this next Thursday. You know, the most important thing that we haven’t done yet is we haven’t tested the sale process. We haven’t look at all the emails that are generated and you know, seen what all that looks like. And that’s a critical and important part of setting up a store like and one you know, those down drill tutorials of people do frequently skip over. And so we’re going to spend a bunch of time next week doing that. But I think I’m also going to do the rest of the styling next week as well.

Now I’m going to make the code available to you that I’ve done here. It’s going to show up in the… oh you know, I’m probably just going to make it a downloadable file as one of the resources here. I was going to put it in the forum but many people that have access to this class don’t have access to the forum. And so I want you to be able to look that code over. So I’m going to make that code in a new file and make that downloadable for you. And then we’ll just finish up the styling here when we’re finished. Or I’ll finish up the sign next week.

So next week absolutely will be the last week of this class but next Thursday night, we will do 2 run throughs. The first one, we’re going to do a dry run and try to knock all the kinks out and it’s going to be a dry run like you would do yourself. And then I’m going to actually buy something from Lanny and we’ll see how the entire process goes. And I don’t think we’ll test that before we do that. I’m pretty confident that we’ve got it set up properly so I think we’ll just run the risk of having done it wrong and you’ll get to see that.

And so first off, Lanny, I’m unmuting your microphone again here. Do you have any questions or comments at this point?

No, I think’s great. I mean, it’s clear that the… it’s simple enough and I think that’s clearly what we’re looking for in the store is to make it… you made it nice but you certainly made it simple for people to access.

Actually, there are 2 other things I wanted to style too. I wanted to style this search widget and I wanted to style this widget. This is the product category widget and in keeping with their flaw of using h tags for font size, they made the prices in these books or the prices in the product, the name and the price of the products, they made them into h3 tags. And so you know, my handy dandy little widget styles plugin that I use to create this style of widget with a background image and colors and all the rest of that stuff, that’s based on the Thesis method of using h3 tag as the heading for a widget. And so it works just fine here but it doesn’t work here of course because this is not really intending to be… this shouldn’t be a heading. This should simply be a p tag because it’s not a content heading. And of course, then… but because it’s an h3 tag, it pulls up the h3 style of the heading here except that since it’s a link, it’s not white. But anyway, I’m going to work on… we’re going to do that next week too so…

I have a question. One question I had was the process of redoing all the way product images to get them 250 by 250…

Yeah?

And the question I had was if I use a png and have a transparent background which would really help out if you happen to drop it on that brown side widget area, it’s an awful lot more… a whole lot bigger image than if I just set that white, black, the jpg.

You’re absolutely right. It is a whole lot bigger and I don’t think the books look good against the brown even if there is a transparent background. I don’t think the brown is a good background for product images. So when we style this widget, we’re going to you know, frame it in white so that the products don’t read against the brown. It’s just not… I mean, I think the brown is a nice accent on the side and it gives me an opportunity to demonstrate at some point how to use my plugins to essentially appear to give a background color to the sidebar which this is actually isn’t. I mean, this is a background image that… a very small background image but a background image that sits inside of the… actually sits inside of the content area .page element. But I wanted to you know, often these sidebar background color things, the background color ends when the sidebar ends rather than continuing all the way down beside the content. So the plugin allows you to be able to configure this so that the color will end up all the way at the bottom of the page.

Anyway, I don’t know why I said any of that other than to say that I’m going to show you… I am going to essentially wrap the books in a white background so that the prices and the links and everything for the books will be in a white background, framed by the brown but nevertheless be white because it doesn’t look right this way. It’s not going to look right, I mean just this contrast here is not good enough. It wants a white background.

So you don’t need to do them as pngs. You can definitely get away as doing them as jpgs.

Okay so we’ll change it eventually. We’ll have them all 250 by 250 jpg.

Yeah now… and so if you decide not to do them 500 by 500?

Oh, I can do 5. I’m sorry. It is 500 by 500. I’m sorry, I’m sorry.

Yeah, I would definitely do them 500 by 500.

It is 500 by 500. I’d rather just…

Yeah, okay.

I had it in my head, it was 250 by 250 but what I mean was 500 by 500 so we started making them all 500 by 500.

Okay. So are we going to be ready for a live test next week?

I sure hope so.

Yeah you know, when I started figuring this class out, I mean, my first outline for the course had me sort of (08.39) out on Week 4. You know, I mean, Week 5, I had a little bit of stuff laid out and then I said, “We’ll do Week 6 if necessary.” And here we are, trying to get us finished so that we don’t have to do Week 8. So anyway…okay well, that’s going to be the plan. We’ll come back next week and do Week 7 with the big test and a little bit of minor styling.

Okay let’s see, there are a couple of other questions. Tracy said, “I didn’t get the very end of the last code you put in for if an array selected product inscription products.” Okay, well I was kind of hurrying through that, wasn’t I?

Now like I said, I will make this file available on the site here tomorrow. But nevertheless, okay what we have is you know, it’s an html file with php embedded in it. So we start off with the if statement in the php and then close the php tag out. So you’ve got your little opening bracket of the if statement. So the opening bracket of this if statement is inside this php tag and the closing bracket is down here under the html in this pair of php tags. So you know, if you’re more familiar with php files where this stuff is… where the html is hidden you know, it would look a little bit different than that. But I’m not saying you should do it this way but you could easily… this is semantically correct, right? The way that this code is written here is semantically correct. That is the… you can see the html of the… the html is evident. It’s not hidden inside of php. But we could do echo and then this, right? And it might actually even look a little cleaner when you’re looking at it because now what you have is this if statement. In fact, if I were writing it, I would write it like this. I’d get my php tags outside of the flow. And so now it’s if an array selected product inscription products echo this. That’s what it would look like in php.

Did that answer your question, Tracy? Did that make sense? I think from a php standpoint, it’s easier to read like this. But from an html standpoint, from a markup standpoint, it’s more semantically correct to do it the other way, not to embed the html in with text in an echo statement like this.

Okay so then let’s see, somebody else asked about updates on Shopp 1.2 and the RC2 version of Shopp is out of 1.2 is out. It does look like they’re getting really close to issuing 1.2 as the new version. And I am tentatively planning on taking some time in February to do an update when Shopp 1.2 is actually officially released. So in the event that it happens, well, it might even happen this week but I think we’ll probably not upgrade immediately. We’ll probably give it a little while for the desk to settle since it’s a really big change. But then early… I mean, sometime in February or perhaps early March, we’ll do an update session where we go through and convert to Shopp 1.2 and address all the issues associated with that.

For example, we’ll be able to put a product, a featured product slider in once we get to 1.2. This doesn’t have a featured product slider yet. It has the facility for us to create one but it would be so much easier to use a real plugin to do that. I think we’ll postpone doing anything like that until 1.2 comes out because the system will be completely different then.