Build Your Own Business Website header image

Part 24 – Setup The Clinic Page Styles

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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.

The last thing we have to work on for this converting an HTML website to Thesis 2.2 is to work on the Clinic Locations. We have a lot of work to do there. These are all three boxes plus we’ve got our telephone and this area here. The telephone box is going to happen automatically.

Let’s begin by editing this page. We are going to use classes that already exists because of our sub columns. So the first thing we’re going to do is to give ourselves a wrapping div, div class equals “columns_3”.

Then down at the bottom we’re going to close that div with div class equals ”columns_3”. And now we’re going to wrap each box, div. Actually, I’m going to also say locations, div class equals ”columns_3 locations”.

Because I want to change the fonts in here I’m giving it a class of locations and then we’ll create a locations. We’re going to create a locations class for these containers but not this one. So div class equals one-third. And delete that. Come down here, give it a closing div and then div class equals ”columns_3”, div class equals ”one-third locations”.

This is the beginning of it and this is the end of it. Let’s update it. It’s automatically going to look weird because the text is still going to be too big but we do actually get it in three boxes.

Now I want to get rid of all the padding on those. That means its columns 3 with a frameless. Eventually I’m going to add some documentation that people can use so they can know which styles are available to them here.

Columns 3 frameless should actually give a little bit more width. So frameless one-third, padding is 0. Okay so no padding.

Now we’re going to create a text area and a container for locations. Come back over to our style manager and under container configurations, let’s add a fourth one. Two are text style configurations. Let’s also add a fourth one.

In our fourth container, this is going to be our locations container for clinic locations on a clinic page. And then our text style configuration will be locations, again text in locations boxes. So we can save that.

Then we come back over to additional styles and in our container styles, our locations container is going to be dot locations and we are going to give ourselves a tiny bit of padding 5, 5, 5 and 5. We’re going to give ourselves a tiny bit of margin, that is 2 and 2. And we’re going to add a border width of 1 pixel. Border color is our dark purple, solid. Save our locations container.

Then we go to our text styles and our locations text style. This is going to be dot emphasis dot locations because I’m inside the emphasis box and want to override emphasis. I’m going to take font style down to 15 pixels.

Font style options is going to go down to… oh, it’s not centered, is it? Okay, this is centered. Text align is centered. Line height will make that 20 and there’s not going to be any bottom margin so it’s going to be 0px.

Let’s save our text options and see how close we’ve got them now. Why didn’t that one work? Div one-third locations, oh we didn’t get a paragraph in there, that’s why. And actually we want to get rid of that padding. And what is it that’s giving it that? It’s the postbox so emphasis dot post_box. I’m going to say padding 0, emphasis dot post_box, padding 0.

I’m going to use some custom CSS for that dot emphasis dot post_box padding 0px because it’s just easier. And so my one-third location is suffering from that margin. Let’s see…maybe I wrap it one more time and then leave some padding inside of that.

Well, let’s get these all working properly first so let’s edit this page. Visual, okay, ctrl+C. None of them are working now. Why not? Because none of them are paragraphs. So if I get rid of the paragraph reference does that make it all happy? Happier. We have to mess with that just a little bit.

And I think the other thing I need to do is put a box inside of the boxes. So instead of one-third locations we’re going to do one more but it’s not going to have the one… whoops, it’s not going to have the class one-third here and this one won’t have a class locations. That way I can give myself some padding in one-third. I don’t have to use margin or I could margin locations and I still get my border around there.

So one-third and locations and then one-third and locations. Now we can update this. View the page. Obviously I messed that up. It’s div class equals “columns_3 frameless”, div class equals “one-third” and div class equals “locations”.

Then I come down here and I need a closing div for one-third. That one’s for locations and I’ve got a one-third and locations, two closing divs or one-third and locations and three closing divs which is the way it ought to be. So update, view the page and it’s getting a whole lot closer.

Also the telephone consultation wants to be exactly the same as in the other page. So let’s go to that other page. Edit and let’s get the div class equals center-box telephone. Come over to here, we’re do I have my telephone? In there, okay. Okay. So quite a bit closer here.

Those are both Harley Street London W1 so it ends with the numbers. Oh, that needs to go down there. So edit page and bold that, bold that, bold that. Update, view our page and we’re very, very close! Wandsworth Common is too long, that’s the problem.

Let’s use the abbreviation for commons, CMNS, let’s try that. Oh, yeah that’s another way to do it Marcy, you’re absolutely right. That’s a much better idea. Commons and then just delete that non-breaking space like that or force the non-breaking space there. Yeah, that’s a very good suggestion, thank you. There you go.

I want to get rid of this edit thing here too. I’m going to click to edit and come over to our featured area and column 2, and headline area. No it’s Byline, isn’t it? I’m just going to drag that into the tray. Drag Byline it into the post box then I’ll drag into the tray. Save that.

We want to put that other sidebar in there too. Click to edit the page and then in our featured area, Column 1, we will add that sidebar which was Left Widget Area. Shift+drag that into there and save it. Now we are very close to the style we intended.

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

Leave a Comment