Build Your Own Business Website header image

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 18 – Question and Answer

Difficulty Level -

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.

Obviously, I went a lot longer than I expected us to go, it took me about twice as long to present this materials I planned so I want to take questions now. Dr. Jeff, I’m going to turn your microphone on first. Good afternoon, Dr. Jeff, are you with me. He fell asleep probably. Okay, so the way you asked what I cover where spaces are involved and when they should and should not be in tags. Spaces inside of tags should be used, let’s see, let’s just view the page source here. You would spaces in tags between each attribute. There he is, Jeff?

Placing Spaces in Between Element Names and Attributes

Jeff: Hey, buddy!

Rick: How are you doing?

Jeff: How are you today?

Rick: I’m doing great.

Jeff: Good. Well, I was just a little confused about, I’m no coder so sometimes I see spaces and sometimes I don’t, sometimes I break stuff playing around with them so that’s why.

Rick: Okay, well so you need a space between the element name and any attribute. You could have a space between the id and the equals and the equals and the main menu but that’s not typical. You do need a space between each attribute but you never need a space between the opening bracket and the closing bracket although if there’s a space there it doesn’t matter.

Now, the one place that I know of that spaces really do matter is inside of an attribute that has multiple values like class. There needs to be a space separating each value in a list of values in a given attribute, that’s essentially the delimiter, is the space but the attribute value has to be contained inside of quotation marks so anytime there’s a space inside the quotation mark, that means there’s a new attribute value. So that’s the most significant of the space questions or when a space needs to exist and or not is there.

Using Greater Than and Less Than Signs

Jeff: What about between the greater than and less than?

Rick: Doesn’t matter.

Jeff: When they’re together like so when you do the one, showed the one about linking the image to a URL and putting the alternate text in. In between those greater than and less than signs, it’s not an issue?

Rick: It’s not an issue although by in large, you’re not writing that anyway right, the system is doing that for you.

Jeff: Well, there are times when I’ve linked images to a URL so when someone click on it, it went somewhere else like that type of thing. What about on either side of that, the greater than and less than signs, it doesn’t matter if there’s a space in there or it should always be without a space?

Rick: You’re talking about over here and over here?

Jeff: Well, no. If you look at line 132 though well with the less than and then it says form, what if there’s a space in there, does that break anything?

Rick: No, it should not break anything.

Jeff: Okay. Do you have like cheat sheet for that part of the webinar you did today that one reviews?

Rick: I do not but I’ll create one and add it when we post the videos, I’ll add an HTML cheat sheet with it.

Jeff: Okay, that would be great Rick.

Rick: Yep. I planned on it then I forgot about it so.

Jeff: Playing it on the dark.

Rick: Exactly. Okay, will do.

Jeff: So that’s it for me, thanks again.

How to Minify CSS Files?

Rick: Okay, you bet. Have a good day. Bye. Okay, next up is Andrea. Hi, Andrea I’ve just unmuted your microphone.

Andrea: Hi, Rick.

Rick: Hello. So what can I do for you?

Andrea: I just have 2 questions but the one I posted is I’m always trying to learn from other people’s code so the trend now is for people to minify particularly their CSS files. Is there a good resource for being able to view that code and check?

Rick: Well, not view it but convert it.

Andrea: Okay so you have to convert it someplace?

Rick: Yeah. Although let’s see, well you should be able to, the code that you see here, this code here is not going to be minified.

Andrea: Okay. You know I have to tell you Rick that no matter how basic your classes are, I never fail to learn something. Because I’ve been using Firefox for years and I had no idea that Firefox has its own gear here and all of these developer tools so definitely going to be easy to use. So thank you.

Rick: Well, it’s relatively new.

Andrea: Oh, it is? Okay.

Rick: Yeah, it is. I don’t remember when it came out but it came out after I started using Chrome all the time.

Andrea: Okay.

Rick: But the style editor is definitely going to show to you in its minified version not in a readable version.

Andrea: But the inspector will show it.

Rick: The inspector will show it to you not minified, yeah.

Andrea: Okay. Well that helps. I’ve learned a lot you know, I see a side I really like and I try to pick it apart and figure out how to do it.

Rick: Well, if you just look for prettify CSS.

Andrea: Okay, I figure what’s your resources.

Rick: There are a lot of resources so you can even just enter the URL for it and it’ll spit out a style sheet that has been prettified which essentially means each property will be on its own line and everything will be indented properly and all the rest of that stuff.

Andrea: Okay, that’s great. And my other question is actually HTML5 and maybe it’s just beyond what you want to talk about in today’s class.

Rick: That’s okay.

Andrea: I guess my question is why have they gone to not using ids why is that?

Rick: Well, because it’s generally more efficient just to use a class and an id. The id can only occur on a page once.

Andrea: Right.

Rick: So for things that absolutely or always only going to apply once on a page, you can do it that way but Thesis has removed most of those things and now really only has container, footer, header, you know just a very few ids left now because it assumes that someone is going to want to add another box in there some place and it’s going to want to use the same style and therefore use the same class and you can’t do that if you have ids.

Andrea: Okay, I got you. Okay, thank you.

Rick: You’re welcome. Have a good day.

Andrea: Okay, thanks. Bye.

How to Use Drop Caps?

Rick: Let’s see, okay Janine, let’s see where did you go Janine, there you are. Good afternoon, Janine I just unmuted your microphone.

Janine: Thank you. I just want to know about the drop caps.

Rick: The drop caps, yeah.

Janine: You didn’t answer it so I just wanted to say, is that something you would always do on an inline coding?

Rick: Yes. A drop cap would be a span tag.

Janine: Right but there’s no CSS way to do that because it’s so unique, right?

Rick: No, there is actually. In fact, if you’re using Thesis Classic, I believe it has built-in drop cap set up, I’m just going to check here real quick. I think it does. Yep, drop cap so all you have to do is add the span drop cap to something so let’s see, let’s choose a different page. Around the “T” and then that span should have a class of drop cap, is that what we said it was, drop_cap. Okay, were did it go, I thought I did it on a “T”. The About page is a perfect place to state your case, that’s what I did, . What’s interesting is that it is not actually behaving the way I expect it to and let’s see, I’m missing it.

Janine: You missed that quotation mark after cap.

Rick: Exactly. So that’s how you would handle it in this skin. Some skins don’t have drop cap styles and so you would create your own.

Janine: That’s changing in the HTML though and maybe in WordPress text editor, that’s how I would do it so what’s the advantage of having it in the CSS?

Rick: The advantage is that you change its style. If you’ve got a hundred of them, you can change all hundred of them with one style change.

Janine: I see.

Rick: Whereas if you’ve done it a hundred times and you want to change its style, you have to go back to those hundred times and change it a hundred times.

Janine: So any styling changes you would make to it would be done in the CSS not inline but the span class itself has to be done inline?

Rick: Oh yes, right. The HTML, I mean the span tag is an HTML tag and the only way to get that span tag in there well, there are other options. There are ways to do this with the first letter of every paragraph or the first letter of the first paragraph without putting a span tag in there but the traditional way is to wrap the first letter in a span tag and give that span a class and then do that and so that does require you to place the HTML tag inside the text editor.

Janine: Okay, thank you.

Rick: You’re welcome. Anything else?

Janine: No, thank you.

Rick: Okay, have a great day.

Janine: Thanks, you too. Bye.

How to Structure CSS in the CSS Editor?

Rick: Bye. Okay let’s see, Judith, did I answer your question? Judith I’m going to unmute your microphone. Judith did I answer your question about the span class and the CSS style?

Judith: Yes, thank you.

Rick: Good. Can I answer anything else for you?

Judith: Yeah, I was just wondering when you’re wanting CSS in CSS editor, is there any particular hierarchy or would you just put them after the last rule, after the last rule?

Rick: Well no, actually what I try to do is not so much a hierarchy as it is structuring your CSS file so that you will be able to find your stuff and what I generally try to do is take the stuff that is at the top of my page so header related styles, I put at the top, footer related styles I put at the bottom and I kind of work my way down sort of the visual page structure and organize my stuff that way so that if I need to try and find all the stuff I have about the menu then I generally know the menu is near the top of my file and so I can just kind of scan down to the top of my fiel and if I want to get it something in the footer, I generally know it’s down the bottom of my file.

On a short little thing like what we’re doing here, it doesn’t really matter but you know typically is somebody gets involve in this and they’re going to end up with several hundred lines of CSS code. At which point you know, it’s good to have a system and alphabetical system doesn’t work very well because the chances are you’ll have rules that are related to each other but they don’t necessarily have exactly the same selectors therefore alphabetical arrangement might not put them together.

Judith: Okay, that’s really useful. Thank you.

Rick: Just think of an organizational system that makes sense to you and I’ve always found that just the hierarchy of top to bottom makes the most sense to me.

Judith: The other thing that I was going to ask was where you’ve been talking about Thesis 2 assuming some of the techniques, they work on 1.8.5 because the CSS and HTML are the same?

Rick: Well, the CSS and HTML are not the same at all actually but the concepts are the same. I’m sorry, let me refresh that. CSS and HTML that Chris wrote for 1.8.5 is not the same as the CSS and HTML that he wrote for 2.1 but h tags are h tags whether it’s Thesis or Genesis or a standalone HTML site and that’s the same is true with attributes and classes and all the rest of that kind of stuff. Those things are the same regardless of what theme or what application you’re using.

Judith: Okay.

Rick: And so the tool of using Firefox tools for identifying selectors and that kind of stuff, that’s going to be the same no matter where you are. It’s just that obviously, you don’t have the skin editor, you don’t have a custom CSS editor like this in Thesis 1.8.5 so you have to use something else.

Judith: Okay. Well, that’s really useful because when you brought that page it looks as though you’ve got like one big box and then you’ve got boxes inside boxes.

Rick: And which page are you referring to now, the source chart?

Judith: Yes. It almost looks good as boxes inside boxes inside boxes.

Rick: That’s exactly what it is that’s why they represent it this way. That’s why Thesis 2 describes them as boxes because that’s exactly what they look like and eventhough these menu items actually are sitting side by side in view when you’re looking at the menu, in HTML they’re still sitting on top of each other because that’s the way the HTML actually works.

Judith: Nice because I think in my head now, I’ve got a picture that you’ve got sort of like the main part of the website and then you’ve got boxes within that boxes within the boxes. I can have a better visual in each of it.

Rick: Yeah and this little tool, this chart tool will help you sort of reinforce that visualization I think.

Judith: Excellent. Thank you so much, that has been a brilliant webinar.

Rick: Well, great. I’m glad you’ve found it useful. You have a great evening.

Judith: I did, thank you.

Rick: Bye.

Judith: I will indeed, I’m going to bed very shortly.

Rick: It sounds like it’s way past your bedtime.

Judith: It is, it is but thank you so much.

Rick: What time is it, 1:30 in the morning.

Judith: Not quite but it’s getting there.

Rick: Okay, bye.

Judith: Thank you. Bye.

Where to Underscores or Hyphens?

Rick: Let’s see who else, so Geoffrey, let’s see where are you Geoffrey. Hey, Geoffrey I just unmuted your microphone.

Geoffrey: Good afternoon, Rick.

Rick: So, you had a couple of questions.

Geoffrey: Just one. I wonder if you could speak a little bit about best practice as far as using the underscore versus the hyphen when we’re naming elements or classes?

Rick: You know, it’s very subjective. I personally generally try to use hyphens in my class names but I find myself not paying close enough attention when I do that because when I’m programming in PHP, I use underscores all the time so all of my code in PHP has underscores so inevitably a bunch of my code in HTML ends up with underscores because I’m not paying close enough attention. I don’t think there’s actually a right answer or wrong answer. Standard WordPress coding standards says that you know, all class names should have hyphens but that’s a very arbitrary thing and it’s not necessarily a standard practice outside of WordPress itself.

Geoffrey: Alright, well that’s all I needed to know then. It sounds like I can just take off and do whichever way I prefer.

Rick: Yes, that’s absolutely the case.

Geoffrey: Okay. Thanks for hanging in there with us today Rick, keep on going far beyond what you would intended.

Rick: Yeah, I definitely want to get these done. I don’t have to reschedule it again so.

Geoffrey: Well and now you can anticipate how much time you’re going to need for Genesis.

Rick: Oh, absolutely that’s right. Okay, have a good day.

Geoffrey: Thank you.

Rick: Bye. Actually, I think I pretty much have all the questions answered now. Let’s see, not yet Sharon’s got a question, I’m sorry Sharon. Hi Sharon, I’ve just unmuted your microphone

Sharon: Hi, thanks.

Rick: Yeah.

Sharon: Thank you. Okay, let’s see I use a new hardware, do I want to use a new hardware? Anyway, personally I did sell a product well, thanks to what we were talking about. You know, it seems that my problem was that, I develop a website in Chrome and Iron and it looks fine and when I looked at it in Firefox and IE, it was terrible. Basically, I think I learned from that, I can’t develop it in Chrome because that seems to be very forgiving of syntax. I did have a missing single apostrophe around the URL and a background image and it caused no problem when I was working on it but Firefox and IE, it breaks the CSS so that was the first thing. I still have problems but at least that one got solved. I think we encountered that before that Chrome and Iron are actually too forgiving and therefore we missed out on our syntax. If you could go to the website,

Rick: Yep.

Sharon: Okay. Okay.

Rick: So this is what it’s supposed to look like huh?

Sharon: Well, almost, almost and not quite, I’m getting there. Personally, you see in the Destinations at the top where it has the bar across the top and just the grey around the background Destinations, the word “Destinations”, it’s in the section header, okay. I did that with two background URLs, Destinations I made that into a link, it doesn’t go anywhere because I could get the background limited to that, I put that on top of a background which is repeat X of a little grey and a lot of white across the back. That works, I’ve made some adjustments with padding but I finally got it work.

Now, the client wants the same thing on the widget titles, you see the padding is adjusted so that it’s move up or down a bit but I got it, They want the same effect on the widget titles. Now, the reason I was able to do this was because I made Destinations a link that doesn’t go anywhere, I just made everything set to white so it has that effect, it’s inline. With the widget titles though, I don’t know if that’s possible as you can see, I was using the same basic code but it steals the whole background, I’m wondering if I can make links out of the widget titles because they are widgets.

Rick: Well, you can’t make them links but you could always make them display inline.

Sharon: Will that solve the problem, do you think?

Rick: I think it will, yeah.

Sharon: Right now.

Rick: Widget title, display:inline. Yep see, display:inline does it.

Sharon: Okay, so I don’t even have to work with the link, I could on the other one, that will help. Now, if you look at the teasers, you can see how the title is sunken and this is the text, the excerpt is wrapping around it which I don’t want. I’m not sure why, I think it’s not happening in the first one because the title is so wide.

Rick: So you made this float: right?

Sharon: Yes.

Rick: Yeah, that’s why. I mean you could clear it afterwards.

Sharon: I tried that, I’ve tried that. By the way, your information about clearing and inline and block and that clear that you really explained it very well today, I appreciate that because I was always a little weak on that and it was helpful but I tried doing clear divs after each element.

Rick: I’m not using the…

Sharon: The clearfix?

Rick: Yeah, the clearfix on the after.

Sharon: I think I did that, headline_area:after, I have $z_clearfix, I put that in my…

Rick: Oh, is that right, headline_area:after $z_clearfix?

Sharon: Yeah, I did that.

Rick: It’s not showing up here.

Sharon: Well, that’s interesting. Yeah, that means a lot of code is..

Rick: Let’s see, well just because it’s not showing up there doesn’t mean that’s…

Sharon: It’s towards the end in the custom CSS.

Rick: Yep.

Sharon: You know, CSS yeah. Let’s see, it’s after section titles, I’m seeing some invalid stuff here. Yeah, there .top_container: but yeah, it’s in that area.

Rick: This thing right here is not rendering a value. See it’s saying {$z_clearfix;}, it’s not substituting the value for $z, I’m going to spit this out, yeah, you’ve got it all over the place here. It looks to me like, what skin is this?

Sharon: Let’s see, this was already done by someone else, I’m doing styling I have to check and see what skin it is.

Rick: Well, what you have to do is you have to go get that $z_clearfix, you need to copy the $z_clearfix value out of another skin.

Sharon: I think it’s there, I’m just going to check real quick.

Rick: Well, every instance of…

Sharon: Clearfix, clearfix, that’s what they call it, they call it clearfix.

Rick: Not $z_clearfix?

Sharon: Yeah, this one says clearfix, yeah.

Rick: Okay, so you just have to change those and they’ll probably work.

Sharon: Let’s hope, and I’m wondering if you look at this in Firefox you’ll see that the banner image at the top, you see there, there it is, that’s it. Let me just change my clear fixes and see if that will help because you see it’s wrapping banner instead of being under. Let’s see if that helps.

0 Comments… add one
0 comments… add one