Build Your Own Business Website header image

How to Reduce the Space Between the Page Title and the Amazon aStore in Genesis

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

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.

In this session we show how to reduce the space between the page title and the Amazon aStore in Genesis. We identify what causes the space using the tool FireBug and discuss how to customize the settings for the header defined inside the aStore to get rid of the space.

Video Transcript

Member: This is… you just recently helped me install the aStore on a blog that I’ve created for somebody, the first blog I did and it’s on Genesis. So I was able to install that this morning for the instructions that you gave. My question for you now and I sent you a link to it as well is when I had it installed, there’s a gap between… I guess the top of where the actual aStore, the actual items begin and the navigation bar and I was wondering if there’s a way to close that gap.

Rick: Yeah and you’re talking about this space right here?

Member: Let me get back to your… yes, correct.

Rick: Right. Okay so the… yeah, there is a way to deal with it. It’s pretty easy but the first part of this is just identifying what that thing is right? And so actually, I’m going to do this in Firefox just so that you can see it there. What you’ll do is… this is using the tool called Firebug. I got a bunch of videos on the site about how to use Firebug. But what I did was when you have Firebug installed on Firebox so just go to that section, right click on it and say “Inspect element with Firebug”. And then you essentially go down this Firebug window to try and find the thing that is that shape and size. You can see how I’m hovering here with my mouse over div id equals header and that it shows you the blue content of that section and then the purple padding. And so if we just kind of… you see start off if we come up high on this you know, there’s the whole page. And then there’s the iframe that’s created with the aStore. And then as you kind of work your way down you know, you just find different things in here. To get down to this piece, which is really the piece that’s holding there in place, is this div id equals header. And this is the header that you define inside of your aStore itself and ordinarily, the header would have a background color and some text in it.

So for example, that example aStore that I created, if we just take a look at that one for a second, let’s see… continue. This section here, this is the header. It’s this dark blue background with the white text, BYOB Favorite Books. And my guess is what you did was you made the… I don’t know if you made the text color white but you made the background color white. And then you didn’t put any text in but you still left show store header. And if you uncheck show store header, the header goes away. It’s no longer there anymore.

Member: Nice.

Rick: And now all you have is the shopping cart and the name of that specific page. And if you preview the store then… come on, let’s preview the store. It’s blocking… okay now let’s preview the store. So now you can see that header has gone away from this preview. So the similar items thing still shows up there but now all you have is this part where it’s essentially the name of the page.

Member: Nice. Perfect.

Rick: And so you uncheck that and in your case, what will happen here is water filtration will come up here at the top and this whole section will just go away.

Member: Nice. Perfect. Alright, thank you. Like I said, this is my first blog and I’m a beginner and I absolutely love your service.

Rick: Well, great. I’m glad. Now that we’re done answering this question, what I plan on doing is just kind of walking through the process of doing this here in Genesis because there’s a couple of things that are different in Genesis that exist in Thesis. Not the least… I mean, you asked a question on the forum about how to make this thing you know, full width. But there’s also the ability to say add individual smart links and that system is a little bit different in Genesis than it is in Thesis. So I’m just going to go demonstrate that right now.

Member: Nice.

Rick: Okay, anything else?

Member: No, that’s it. I appreciate it.

Rick: Okay, have you upgraded to the latest version of WordPress and Genesis yet?

Member: No. The thing is I have to figure out how to backup my pages first so I don’t lose them.

Rick: So hang with me for the rest of the hour because I’m also going to demonstrate that.

Member: Perfect.

Rick: Okay?

Member: Great. Thank you.

Rick: You’re welcome. Well, talk to you later. Bye bye.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one