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 12 – Part 6 – Configure the Appearance of your Gallery With CSS

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.

Welcome back to Part 6 of Lesson 12 of the Build Your Own E-Commerce Website tutorial series. In this sixth and final part of the lesson we are going to style our new content gallery so that it looks right in our context.

So you can see what it looks like right now – it doesn’t look great because the images are different than the size of the gallery. But fortunately there is this Gallery CSS tab which allows us to adjust sizes; actually we can adjust everything about our gallery here.

Gallery Size and CSS Options

So we’re going to start off with the gallery proper and it’s set at 460 by 250. We know those images are 600 so we’ll just go ahead and fix that. So it’s 600 by 250 and this is really almost the biggest setting of all. Hit Save Changes and come back over and take a look at this. You can see that we’re almost there with the image size, the Featured Products drops down enough. We’ve got some interesting little space on either side and we’ll be dealing with that in just a moment.

So we come back to Gallery CSS. Let’s give ourselves a border width of 5 pixels and hit save so you can see what happens. There is a border now around our products and if we come back over to the CSS we could choose the border color as well. I happen to like it borderless so I’m going to leave it at 0.

Slide Pane Height

Now we come to our Slide Pane Height. That is the height of this right here. If you were going to put a lot of text in you might choose to make it more than 50 pixels tall. In this case the Slide Pane Height is 50 pixels. The Background color is black. It could be any color you want, just change it here.

The Heading font size is 12 pixels and that is, of course, the Orange Passion E-Book, that’s the post title. So we could go up from 12 to 14 or whatever and we could have normal or bold font. We can also change the font color. For our headings we have padding at the top and the bottom that we could change.  If we chose to we could add more space above the heading here and the top of the slide panel. So if we wanted to add 5 pixels, this actually adds it to the top and the bottom, and hit Save Changes. Then come back over here and refresh, you can see now we’ve got a little bit more space there and this has been shoved down.

Now if we have more than one line of text then that’s not going to show properly and so we have to keep in mind the influence of this padding on the size of our slide panel and adjust the slide panel height accordingly. So slide panel height might not be 50 pixels anymore.

Heading Margin

Anyway we’ve got our Heading Margin at the top and the bottom and Heading Margin left and right. Then we come down to our Description font size, Description font color, and the line height for our descriptions, plus Padding top and bottom and Margin top and bottom, left and right.

More Link

Then finally we have our More link. Now you can see that this is only applicable if we picked the Auto descriptions and since we didn’t pick Auto descriptions we don’t actually have a More link. You don’t really need a More link because if you just click on this it’s going to take you to the post that relates to the image in the gallery.

Javascript Settings

Now that we’ve got this we can take a look at those Javascript settings. If we come back over here to Javascript Options and let’s just say that we don’t want to show Featured Products. If we hit Save Changes, come over here and refresh this, Featured Products no longer shows up so you can use these arrows to navigate but you don’t have the carousel at the top to navigate.

Eliminate the Slide Pane

Okay we can also eliminate the slide pane, hit Save Changes and now what’s going to happen is this section’s not going to show up either. It’s just going to be a straight slide show and then if we get rid of those arrows and Save Changes, refresh, now the arrows aren’t there and now it’s just going to take its time rotating through each of these images.

CSS Edits

There’s a little bit more CSS that we have to do as well. We need to give ourselves a little space on top of the featured content gallery and we need to set the background color of this to white so that we don’t have to see it showing through. We’re going to do that in our custom.css file.

In order for us to do that we should open up our site in Firefox. So here we are in Firefox. I have Firebug open. If I inspect that element in Firebug it brings us to our feature_box. In the feature_box, if I hover over that you can see that there is padding that shows up on the left and the right. And then if you look over here on the right hand side you can see that the default has padding-left of 2.3em and padding-right of 2.3em and that it has a background color of this light gray. It’s got a border and a border-style – so if we were to turn off this background color for a moment you can see that we get rid of that funny additional color.

If we want the feature box to line up over here on the left instead of lining up with the text down here we could get rid of our left most padding. Obviously we don’t need any right most padding so we could get rid of both of those. But we could use some margin or padding up at the top so we can experiment with this for just a moment. Let’s add a new property and that is going to be margin-top and let’s give it 20 pixels, 20px, 20 pixels.

That’s probably pretty much what we want it to look like. So what we’re going to have to do in the custom feature_box is add a margin-top, get rid of the padding and get rid of the background color. Let’s come back over to our NetBeans, open up our custom.css file, scroll down here to our custom #header, custom search, our menu – let’s start right here and copy, paste and this is going to be Feature Box. So it’s custom, pound sign, feature_box and we are going to have padding, colon, 0 and margin-top, colon 20px and then background-color to ffffff and say border:none, semi-colon.

Okay so we have all of this stuff. Let’s just double check and make sure that’s what we wanted to accomplish. So that is margin-top, no padding, eliminate the color and then eliminate the border and we’ve got it. So let’s go back over here, save our document, upload our custom.css file and refresh and there you have it.

We’ve got our Dynamic Content Gallery that shows our Featured Products and rotates through each of the images inside of our carousel with a link off to that product once you click on it. It’s all properly styled and ready for us to go.

That wraps up Lesson 12 of the Build Your Own E-Commerce Website tutorial series.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
2 Comments… add one
2 comments… add one
  • Chung Tang April 13, 2011, 4:13 pm

    Hey Rick,
    I’m trying to add the Dynamic Content Gallery under the thesis_hook_feature_box usingThesis Openhook with the following code:

    nothing seems to be appearing on my site.
    Is that the correct code for adding into Thesis Openhook?


    PS. Awesome you got an affiliate program now..I’ll be promoting with my other IM site.

  • Chung Tang April 13, 2011, 4:32 pm

    I worked it out:

    function content_slider() {
    if (is_home())
    { ?>

    <?php }

Leave a Comment