This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to part three of Lesson 10 of the Build Your Own E-Commerce Website tutorial series. In this lesson we are going to style the text that is inside the navigation menu with custom styling. We’re going to start by using Firefox to identify what we’re looking at.
I’m going to inspect the element. You can see here that this has ul and then individually there are li classes and then inside of this li, which is Customer Support, there an a which is the title. So if you look down here you can see all of this styling associated with .menu a, and that is what we’re going to be affecting.
Review the CSS Styles
Now let’s take a look for just a moment over at the thesiscss site again, and we come over here to this General Styling page you can see all of the different CSS styles that are applied to menu a. So you can see it’s got a text-transform of uppercase, it’s got a letter-spacing of 2 pixels, we’ve got a display of block, we’ve got border-styles, font-size, line-height, padding, border-width, color, and background. This is all default for the default installation. Obviously our color would look different than 111, and our background-color would be different than the efef but these are the styles that are applied to .menu a and these are the things that we’re going to be affecting throughout the course of this lesson.
Come back over here to the page and again look at this menu a. You can see that the font-family is Georgia as we set it before. The font-size is 1.2em, which is the extrapolation of 12 points, and it’s got a line-height and padding.
Adjust Text to Bold with CSS
As you can see, this is kind of hard to read and so what I want to do is I want to make this bold. Making it bold is actually going to expand the size of the tab. We are doing this first because we need to be able to see how big the tab needs to be before we can set its size and spacing.
Open up web developer and go over to custom.css. We’ll come down here to below the Header and since we want to get to menu a we are going to say .custom .menu a and then opening and closing parenthesis and go up and let’s just say font-weight bold. Now that is easier to read isn’t it? I’ve got our font weight bold and that’s what we wanted to accomplish.
We’ve started adding styling to the menu with the custom.css because we’ve gone as far as we can in Thesis Design Options. Let’s go ahead and copy this and open up our custom.css file in our text editor and in this case I’m using Net Beans. We are going to come down here below the header, give ourselves a little space, paste that, give ourselves a little space and then I’m just going to copy this comment and place it right above that. Then instead of being called content it’s going to be called menu. Okay so now we have an area to place our menu css. Come back up to our custom.css file and save the document.
Upload the file and Test Changes
Open FileZilla. Let’s go to the right spot which is eStore10, themes, thesis_18, custom and custom.css and hit Upload and we come back over and look at it in Firefox and you can see that it has happened. Let’s just go ahead and take a look at this in Chrome and so we’re going to go to www.estore10.byobtutorial.com. The bold looks fine there. Then let’s open up in Internet Explorer as well – okay it looks fine. So we have our text bolded and all the rest of the colors set and now all we’ll have to do is set the spacing.
That brings the third part of this lesson, Add Custom Styling to the Navigation Menu Text, to an end.