We’re at the point in this How to Convert a Flash Site to Thesis 2.1 case study that we need to make some stylistic changes to match the look of the existing site.
Make Stylistic Changes on Page Content
So now what we want to do is take these items on the menu page and make these into links. Let’s take a look at the existing site to see what is and isn’t centered. So this stuff is all centered on the Menu page but it’s not like that on the other pages is so we’re just going to center the text here.
Our headlines are always centered though on each of these pages so let’s go ahead and set our headlines here. Really just .post_box .headline should be sufficient for this. Let’s go over to Custom CSS in Thesis. And we’ll add this above the footer, .post_box .headline text-align:center. Save the CSS. And now let’s edit this Menu page.
Add Links to PDF Docs
The first thing we want to do in editing this page is turn these items into links to their corresponding PDF docs. But before we do anything, let’s just Add Media, Upload Files, select the file and now we’re going to pick our PDF’s. “TASTING” that’s the one I’m doing so I’ve selected that word, I’ve hit Add Media, selected files, going to the Pdf documents and grabbing the Tasting-menu.
Then I’m going to insert that into the page. And I’m going to take this one and Add Media, upload a file, select the file and we should use that menu. Let’s insert it into the page then I’m going to take “A LA CARTE” and Add Media, upload files, select files and A La Carte, insert into page. Tastingmenu webOmakase web A La Carte web. Actually, I should change to just “Tasting A La Carte & Bar”, I’m missing the “Bar” one so “Tasting”, “A La Carte” and “Bar”.
Notice what its done, it has replaced the word that I had selected with the title. I’m just going to do that so now it says “Bar” in there and then I’m going to add a class to each of these links so class=”bar” which suggests here a “bar” separated list of links. I’m going to copy that and place it in each one of these a tags. Then I’m going to come over here select all that text, hit center, update and view the page.
Styles the Links
Now what I need to do is come up with a style for that link. And the style for that link is going to be a.bar and I’m going to say display:inline-block. A link tag is not a block level element so we’re going to have to make it an inline block level. To that end we’ll say display:inline-block and then for padding we don’t want the top or the bottom but we want some on the left or the right. Padding 0 and let’s just say 10px left and right for the moment and see how that looks.
Then we’re going to do a border on the left, so border-left and then it’s 1px solid white. That’s not exactly what we want it to look like, is it? No, it’s not. We want those to be bold, those are all uppercase.
This border takes into account line height and stuff like that. I can’t really mess the line height up here so instead what I need to do is put a symbol in there for that and we’re going to use the pseudo class “after” to do that. So a.bar:after and then we’re going to say content= and then I’m going to put that vertical bar in content= that.
Actually, I guess that’s all I really need for that, let’s see how that works. I might need to use the HTML entity for the bar, let’s see “html entity for vertical bar”. Well I don’t want a unicode, okay so this is it | let’s try that instead of this. It’s definitely not happening so maybe I need to do it this way. I believe my content= code is the probably the problem.
So let’s go to w3schools and find out what’s wrong. Reference and then content. It says that it can take a string, that looks like that should have worked so a.bar:after. No, of course not, the syntax is all wrong. It’s not going to parse the HTML entity but it will place the character in there for me. However, it doesn’t look like it’s going to put padding in there so I could always, 1, 2, 3, 4, 5.
That’s not quite right. I don’t think that’s the right way to solve this problem. It’s an interesting way to do it but it’s not the right way. If it really matters that much then what we would do is use the border image instead, solid #fff. So it’s only got here, here and here; it’s got the dividers, it doesn’t have dividers, only if I can declare an inline block here. Let’s see, line-height:15px; what happens if I do that?
Okay, that’s what we’ll do, we’re going to set the line height to that 15px. That pulls that in there a bit and then we’re going to do this one more time, a.bar and we could try the first child. Let’s see border:none, let’s say that :first-child in this case and see if that gets rid of that one. It does not. Let’s see if we look at nth child for a second, okay look at first-child. Actually that should work a.bar:first-child border:none.
Based on our structure here, this is its child, it’s not a first-child because it’s got other stuff in here. So what I want to do then is make it a first-child by giving myself another space here. There, now it’s the first-child. View page and there we go, we have those in there like that.
Janet asks, will first work without the child? Actually, I think it will and the difference between first and first-child is, first is the first instance of that and first-child is the first child rather than the first instance. So since that was the very first instance of that, I could have used first instead of first-child because it’s wrapped in its own paragraph tag, it is the first child but it could be applied to all childs.
There’s also a first child of type or maybe it’s just an nth child of type, nth of type. Yeah, there’s nth of type selector which also could’ve worked but because it is actually the very first instance of this class, that would actually work just fine with this, the first instead of the first-child.