This is Part 5 of the series How to Add a Call to Action to the Thesis Header and in this session we show how to use the Dynamic Content Gallery widget to rotate images through the header.
We’ve added the… what did we do? We added a default Thesis header image and we added a call to action. Now what we’re going to do is instead of this default Thesis header image, we’re going to use the Dynamic Content Gallery to rotate images to the header. And so what we’ll do is come back over here to the settings, the BYOB Thesis header widgets settings and now, instead of retaining any default Thesis functionality, we’re going to remove that. And so now, there’s no Thesis default Thesis functionality. And in fact, if we then go ahead and just save this, you’ll see that we actually… now I have 2 widget areas here, the one widget area with the widget already in it and then this new widget area. Actually, what it did was it put that text widget in the new widget area. Let’s see, we also have to however, remove this Thesis header image which is right there and we’re going to remove this.
And then if we come over and take a look at our widgets, it has created 2 left hand widget area and for whatever reason, it put that text widget inside the left instead of the right. So we’re just going to move that back over to the left and I mean, back over to the right. And now, our left header widget area should have this big blue box in it, left widget area widgets and we’ve got our thing back here.
So now we need to add some additional stuff and before we even do any modifications then, I’m just going to drag my Dynamic Content Gallery widget over here. Obviously, this does require you to you know, install Dynamic Content Gallery and configure it first. We’ve got plenty of videos on the site about doing that so I’m not going to go into that. But we have a gallery that’s already created and so all we’re just going to do is hit save and then refresh this. Okay and so you can see it’s actually is in here working.
Now what we’re going to do is get it all set up. So we come back over to our header widgets box and our overall header height is 215. We keep our bottom margin of 20 there. But now, our left header area width needs to be 600. That height needs to be 250 because that’s the height of the gallery. And then we don’t need any padding for the gallery. We want the gallery just to fill that space. So since the gallery is 600 by 250, that’s all we need to put in here.
And then remember, we have 956 pixels to fill and we’re at 600 so we have 356 pixels for our width and our height was 250. And now we don’t’ really want any margin there so we can go ahead and delete the margin because we don’t want that white strip on the top. Actually, I’m just going to leave that margin here just so you can see what it does. But we’re going to take 15 pixels off of this so 35 so you can see what this looks like… actually plus this 20 so 15 so you can see what this looks like. Okay we refresh this.
So actually, I think, maybe I need to reduce it a little bit but what happens is this margin, that 14 pixels of margin just shoves this colored section down. And so that’s why we don’t want it and I’m going to go ahead and get rid of that. And I don’t… and so this should be 230 so let’s go ahead and save changes on that and see how that works. Okay that works just fine. I still want to push this down and so, overall header bottom margin. You know, let’s just try adding some bottom margin to this. We could also add bottom padding.
If we added bottom padding, let’s try that, 20 pixels of padding to the bottom. Oh that’s right, because I’ve got the size set wrong here. This size needs to be 250 pixels and we can delete this. We can take that back to 0 and hit save changes. And this should look right now… okay, it looks great.
So here’s the Dynamic Content gallery and you can put any kind of banners in here at all. It doesn’t have to be featured articles you know, in the same way you could put this as a slideshow in here and accomplish the same thing. Now we could also increase our font sizes for this stuff here.
And so if we wanted to do that, we could come back over to our… actually, I think this is it here. And if we said…maybe make our font size 24 pixels, font-size: 24 px; so that made that larger. And then if we take our J button and instead of being medium, we can take it say to extra large, that’s going to automatically increase the size of that button. We could easily get rid of this br tag so that it’s a single line. Hit save to that and refresh it. And maybe we just give ourselves a little bit more space at the top of this so in our right header area, maybe we give ourselves 40 pixels and instead of the height, we make it 210 and save changes.