In this session I help a member troubleshoot a variety of CSS issues on the site they are developing. I demonstrate the use of Firebug and Web Developer for problem solving the site and then I propose solutions to the variety of issues that he is addressing. This member also teaches me that there is more than one way to skin the cat and suggests a solution that I didn’t consider.
Select the link below to watch a high definition version of this video
[S3VIDEO file=’public/liveanswers/LA12-06-10b-css-case-study.mp4′ bgimage=’http://www.byobwebsite.com/wp-content/uploads/2012/09/LA12-06-10b-css-case-study.jpg’ displaymode=’overlay’]
Let’s go ahead now and take a look the problem that you expressed. Okay, so let’s talk about the website that you’re working on.
I’ve got it up here in Firefox so this is where you are right now and this is what you’re trying to imitate. This is what you’re trying to result, the result you’re trying to get is…
Plus a few additions, but yes, basically.
Right. And so here what you’ve got is this dark brown background with a little darker section at the top in here and over here what we’ve got is this very light background. And so what we’re going to do here is we’re going to log in to the backside of your site real quick and just a moment here…
Should I be logged out when you do this or it doesn’t matter?
It doesn’t matter. I’m trying to find the email that you sent me. Here we go. And so… I don’t want you to tell me what the login information is out loud, I just want to find the login information you sent me. Hang on a second here.
There you go.
Okay. I’ll see what happens. What do I do with the question window now? Okay. Look at that, I did not know that you could have spaces in your username.
That was a new one on me too.
You learn something everyday. Okay so the first thing we want to do is under Thesis design options is get rid of this space right here. And so we are going to do that under other page padding and we’re just going to say 0. Okay so that got rid of that space. Now what we have is we want to get rid of this edge and this edge and so we’re going to use Firebug and web developer to figure out where those spaces are. So I’m inspecting the element. This is the div id header and you can see that blue bar that we’re showing there, that is padding. And if we look over here on the right hand side for padding, we’ve got padding left and padding right. If we turn the both of those off, that space will go away. I think actually if you turn off padding bottom, we’re getting closer. So what we really want to do is, our custom header wants to have no padding whatsoever. And so if we open up this in web developer for a moment and you’ve got a custom header thing here. What we’re really going to do is just padding 0. Okay, so that got rid of all of those spaces and we’ve got a little kinda line here, you want to get rid of right? Right there?
Yes, that’s correct.
So that is the object width 100%, height 74, border, south padding, south spacing… oh that’s that little Flash. And so what it might be to do…it’s too bad we don’t have a name. We might be able to address it this way so let’s see…. .custom # header. Oh object and then if we say margin-top: -… looks like about 3 pixels. Doesn’t look like it did anything. Minus 5 pixels. That is not changing it. Let’s see… it is that object. Margin top…and it’s inside of header. You know, that one inside of header. Object top… height 74… 200, what happens when that happens? Nothing. Height 0. Oh, I see, okay. Header… it’s actually, interestingly that’s part of header there. Okay that one I’m not going to be able to answer over the phone, I’m going to have to figure that one out but let’s keep going with the other stuff here.
You wanted to get rid of this line here is that right?
Yes. Of course you can’t see it in the way that you have the side padding now but that line of course continues up to left side there. Right there by the home button.
Yeah, but we will come back over here to this and we’ll go to nav menu. No, yeah, nav border I’m going to say 0. We hit save and we come back over here and refresh that. Okay, what is that thing there? Inspect element… that is the bottom of the border color… border medium… border width 0. It’s definitely… oh okay. So that’s custom menu border 0 or border none. So we’ll come back over here to custom.css, place that old stuff back. You can come back over to this actually and menu, we can say…border none. None, semi-colon. Okay, and then we we want to get rid of this. I think once we get rid of that, that’s going to pop up. So collect this again, come back over here to site options, scroll down to free link, don’t show the free link, save it. Come back, custom.css, paste that stuff. Watch what happens with the… oh I didn’t refresh it… okay. Okay and then so we still need to figure out how to get rid of that line and you want this dark color to go all the way to the edge right? Or am I wrong about that?
No, you’re right. Basically the only thing I’ve been able to do to make that happen is to try to change the lettering in my words in such a way that…
No, no. There’s another thing we can do here and that is to give it a background color… give that menu a background color. So, that background color is this color I think.
Before you do that, I wanted to kinda add… you and I discussed when we spoke earlier today about just going ahead and removing the RSS feed just like you did.
I don’t know about that you’re more experienced in this than I am but I am not liking the way that that… the color of the sidebar sort of melts into the color of that… of the home button. So what I’m thinking is, either I’d like to go ahead and leave the RSS and just figure out how to make it where it doesn’t do the wrong color like that or it’ll do the color independently, a contrasting color independently in the nav bar or I guess, we need to look at changing the color of… it’s really more of a design question but changing the color of that homepage or I guess the active button is what we need to change the color of…
You know, that’s probably what I’d do and you could use this color for the active button color.
For example and then would it continue to be in contrast with this. Because it’s just not a big enough difference right? Between this orange and this orange?
Yeah, well it’s the same color. I did that on purpose but I didn’t know that this was going to happen.
Is it the same color, really?
That was my intent, yeah.
I’m having an optical illusion there but okay.
You might be right but my intent was to make those the same color not knowing that ultimately they would merge like this.
Okay, so in order to get that brown color in there, you’d add a background color and now you can see that background color stretches all the way across.
Yes, it does.
And you don’t actually have…
Will that make that happen?
I added a background color to menu so you’ve got this custom… actually let’s just make it easier to read. So that’s what I’ve done to menu. Well, interestingly you’ve got some padding. Why do we have some padding in the menu? It’s not doing anything currently.
Yeah, I’m not married to that so you can get rid of it if you want to.
Well, it’s not even doing anything, I’m not sure… I just misspelled it to make it… oh no that’s right. It is doing something because I’ve got that repeated up here. Now what happens? Okay so if I come back and correctly spell that, I see. So oh this is top and bottom, this is left and right. I got… yeah, no that’s fine. Just like that. You could, if you wanted to, make the things a little bit bigger, you could do that. Alright, that is not good. I take that back. But then what we want to do is we want to add a little bit of space here, right. Give ourselves that much space…
I’m sorry, I don’t see what you’re pointing to.
Well just a second here, I just want to measure what space I’ve got. This looks like we’ve got 22 pixels width there… okay so we want 22 pixels of width here.
And what we’ve gotten now there is about 8 so what we want to do then is we want to figure out that is… let’s see, let’s not use that. Let’s use format text. And format text….it’s not giving us a width anywhere. Div class front line text headline area post box… okay so we’ll look at the post box. The post box in this case is oh, it’s got a right margin of 1 em. Is that what it is? It’s a right margin of 1 em? So if we did 2 em, yeah that’s it. So we just need to do a custom post box so we just come back in here again and say… . custom space . post box post _ box bracket closing bracket back up 1 2 3 and then say that is margin colon 0 2 em 0 2.2 em. I guess we should probably just do it 2.2 em because that’s what’s on the other side. So now they’re exactly the same and so if we copy that…so anyway, now you’ve got that stuff… that you’re closer to what this is supposed to look like right? We definitely need to get rid of those 2 lines and that’s going to take a little experimentation because it’s got something to do with Flash that’s preventing, I think, the object that’s preventing that space. And I need to figure out, maybe what I need to do is make the header give it a relative position and make this object have an absolute position which can, you know, I can control and make sure it’s this many pixels down from the top or something and do the same…
What about just matching… I’m sorry. What about just matching the background of the header to the… to the header…
Oh now that’s freaking brilliant. Absolutely. Because that’s what it is… you’re right. That would do that one…that’s exactly the same thing. That’s a much better idea.
Just thought I would say and save you a little time there.
Oh no, it’s… you know, there’s more than one way to do it and that’s the good way so just trying to figure out if the header actually even has that background color. And so if we come back over here… where did my background color go? Let me see… background color right there. Copy that and then go to custom header and okay, down here. That was it. I mean I didn’t know you have to screw around with it. As long as you’re happy with it not touching… which I actually think is fine.
I think it’s fine. The other thing is… of course, the only thing that makes it obvious is you can see that little line above the home that I’m really thinking that even if I change it to the color of the content area, well I’m going to have the same problem with it kinda merging into it in the… whenever I’m… one of the buttons… like for example, if you were to click on the page in resources. If I change the color of the active button to the content area, then I’m going to have the same problem in the content area… those buttons above the content area that I do right now with the home about and procedures. So if you look at his old site, you can see that there is no activity when you hover over something, which one is active, that kind of thing. I thought I was making an improvement by doing… using the Thesis…
No, you are. That definitely is doing an improvement and I would continue to do that. Yeah.
I guess I just need a different color to somehow contrast against all of that.
Well, I mean if you… I’m not saying that my site’s the best site as an example but if you look at my site you know, the active button is white, it’s the same color as the page. I mean it’s definitely something that happens a lot. It usually happens without that little gray line at the bottom but usually looks like it’s a tab right? And I just never bothered trying to change the button.
I see. Well I’ll play with it, I’m sure it’s just a matter of preference. That’s not something I need to take your time with.
And so, I’m gonna… I’ll just make a little text file with the revised css.
So this is all your old css plus the stuff I changed. So you can stick this in your file.
You’re welcome to go and do it there if you want to.
Oh I totally forgot about that. Now I strongly advise against doing it this way but I will do it that way. I strongly advise against doing it this way because it gives you too much opportunity for error. You know, error that you can’t recover from. Now it’s not going to happen nearly so much in css as it will in php but really…unless you never make a typo and unless you always do it exactly right, I just wouldn’t use a custom file editor. The only time I do it… I never use a custom file editor on my own site. The only time I do it is when a situation like this when I’m helping somebody and you know, certain enough that I’m not making a mistake. Okay, so now you can jump around and it retains that formatting. You may not have watched yet the videos about how to use web developer but you know, when I make a change here, it doesn’t stick. It just affects the view. And as soon as I refresh this, that change goes away which is why…
Actually I was just going to ask you about that. That web developer’s awesome.
Well that’s how a lot of professionals do it. You know, you make the change here to see what the influence is going to be and once you made that change, you copy it and you paste it into the file that you were working on. So…
Rick, you are the man. You did a good job.
Great. I appreciate the opportunity to help on that. I think it’s useful for people to be able to come back and take a look at this later and see how this kind of stuff happens in real time so…