In this final part our seminar on How to Install, Configure and Style the Social Media and Email Signup Boxes from DIYThemes we answer participants questions.
Using CSS Class Selectors and IDs
I’ve got a bunch of questions here. Ken said, “What’s your take on trying to use only CSS class selectors versus CSS IDs?
Well, there’s no benefit to using only class selectors and not using ID selectors. The thing about the ID selector is that it can only exist once on a page so you wouldn’t use it for something that repeats.
And secondly, it adds a great deal of weight to the specificity calculation for a CSS selector. So if you need to make sure that you’ve got CSS rules that will apply to that element, if you would add an ID to that or add an ID to something that it’s in and reference that ID, it will automatically get the specificity of the ID selection. IDs are necessary and useful all the time.
It would be a mistake to use IDs for everything and just like it’s a mistake to use classes for everything, there are different tools for the same job. Let’s see, Ken says, “It’s all gone silent here”. Okay, let’s see I’m going to try to respond and have him log back in again and then I’ll come back to him. But Sandy has exactly the same question so I’m just going to unmute Sandy’s microphone.
Sandy: Yes, good morning.
Rick: Good morning. Okay so you have actually a similar question about that.
Sandy: Right, yeah. When I looked at the code in FireBug, I can copy and paste it but I’m just trying to understand the hierarchy when you use one or the other but I think you somewhat explained it but you know, like you said this specificity, so when you use an ID then you can further refine it by adding a class to it, is that correct or…
Rick: Yes and that’s also true for classes, right. You can pile classes on to something so something can have more than one class and something can’t have both the class and an ID. The thing is that, let’s just say you have a selector and it has two different styles assigned to it. Now, this happens all the time. In fact, this is normal, it is the normal thing that you have general definitions for your selectors and those general definitions are overwritten by more specific definitions.
This is a normal case where you’ve got more than one style assigned to a specific selector and the way CSS determines which style to apply to it is it calculates which style is most specific that is, which one is the least general and in terms of that specificity calculation, it gives greater weight to something that has an ID than something that doesn’t.
So for example, if we’re just looking at Thesis’ layout here, you’ve got the div id container and inside of div id container, you’ve got ul id=”menu”, div id=”header”, div and div id=”footer”. Now, if you have a style say for this class attributions, you’ve got a style for attribution in the footer, if you had a style for attribution in the header and a style for attribution in the columns, you would and each of those is different.
You would start that style with id=”footer” and then give the style and when you wrote that one, it would not apply to an attribution that was in columns or an attribution that was in header because it’s very specific. It’s the attribution that’s inside the footer that gets that style.
Well, that’s the same thing that we were doing here with this button. If we inspect this element, there is a style that’s being ignored and it is .input_submit, right. It’s being ignored because a more specific selector #free_register .input_submit is taking precedence over it.
Rick: And you can increase the specificity of it by adding additional classes, by adding an HTML element or by adding an ID so anything that can be in a selector can be used to increase specificity. This is kind of difficult to talk about abstractly but I do have a relatively lengthy lesson on this under Customize Thesis Like a Pro in Lesson 6 about specificity and inheritance and how those things work. And the reason why we were able to make this blue was because we made it more specific than the very general one .input_submit.
Rick: So this will apply every time .input_submit is used and this will apply only on those input submits that are included within something called #free_register, given the ID #free_register.
Sandy: Okay, that make sense and I’ll watch that Lesson 6 then too.
Rick: Okay. Anything else?
Sandy: Thank you. No, I think that’s good for today, thank you.
Rick: Okay, you’re welcome. Bye.
Using Social Media Plugins with Thesis 2
Rick: Okay so let’s see, who else is there with a question? Vic’s got a question. Vic, I’ve just unmuted your microphone.
Vic: Okay, I’m here.
Rick: Perfect so what’s your question?
Vic: Well, I have a lot of questions but basely, you showed me the Social Media stuff and so this is the only way you’re going to get this started, there’s no plugins that will work with this then?
Vic: Can I take plugins, I didn’t know what to do with plugins. All my other sites I have plugins and they work but anything else besides what you showed here I don’t think would work.
Rick: Well, if you’ve got a plugin that you like to use, it will undoubtedly work just fine in Thesis 2 as well.
Vic: I did try a few and for example with the Google+1, there’s actually two pieces of script you got to put to different places for it to possibly work, I just gave up that’s why I emailed you on that because I have no way of doing this.
Rick: Okay, well obviously, if this is the kind of Google+, I mean if these buttons do the things you want them to do, then they’re probably the most efficient way to do it. Rather than using somebody else’s plugin because they all share code so you have less code that has to load, it takes less memory and they’re designed specifically to work with Thesis. But if there’s something that you want to do with your Social Media that these aren’t doing, then you can certainly use a plugin. What plugin was it that you were using that didn’t work?
Vic: Well, actually I went straight to WordPress. I ask them for suggesting a couple of different plugins and they also seemed to ask to put in two different parameters for the Google+. One went into the head, one went somewhere else and that got too confusing for me. I’m just curious about this one if this needs any script so where is it nowhere to go in Google+1?
Rick: Well, this automatically adds a script to the places that it needs to be.
Vic: So it just knows what to do with it?
Rick: Yeah, that’s the point of it, right. See that’s why it works in Thesis 2 so well is because it already knows it has complete control over Thesis. So it can put stuff in the head and put stuff in the foot and it not matter. It’s easy for Thesis base boxes to do that or it’s more difficult for a non-Thesis box to do it although if you need to put scripts in the head, the place to put scripts in the head is here under Site Options and then HTML Head.
Rick: And then come down to this Head Scripts and you can paste your head script right there so if you’ve got a Google+1 script that needs to go in here, you can automatically put it in there just by putting it here. However..
Google Analytics Tracking Scripts
Vic: Now, is that the same place you would put the analytics if you wanted this thing to be tracked by Google Analytics?
Rick: No. Google Analytics, you would use tracking scripts here. And the easiest way to do it for Google Analytics is just to use your own Tracking ID. So you just place your Tracking ID there rather than their whole set of scripts and this will take the latest asynchronous script and put it in and put the ID in place.
Vic: Is that the UA number?
Rick: Yes, that is the UA number, yes.
Rick: And it goes in the right spot automatically and then if you have other tracking scripts other than Google then you can put those in here.
Vic: Okay. Now the other thing that I asked you about was when I was on CSS I was doing the saving, the saving stuff on CSS? It wouldn’t save immediately, I’d have to go to a non-logged in page and it still didn’t save it so it didn’t tell me exactly whether I actually saved it or not. I thought I saved it by it didn’t save it.
Rick: Yes, because what you did was, you made a change here.
Rick: , you made some change there and you hit Save and that Save thing showed up in your canvass.
Rick: That’s the way Thesis works. Thesis 2 lets you make changes to these things and you can view them in your canvass before you make the change live so as soon as you like it in your canvass you come over here and hit Save CSS and now those changes are really made, right. They’re made of the CSS file not just the canvass and those changes then show up on a regular page but until you hit this Save CSS, that’s not going to be the case.
Vic: That’s the main button then.
Rick: Well, this is the Save CSS button.
Vic: Yeah, because you have other button in basically just right above the yellow section there, it says, “Save and Process”. I can’t exactly remember what it was but it said something else, just above the yellow section on your CSS Skin Editor when you’re doing the Save.
Rick: Yeah, I’m not… I mean I think once upon a time it said Save and Compile?
Vic: That’s right, yeah.
Rick: But this is the latest version. It doesn’t really matter. You still have the two things, right? In order to close this thing out, you save the package, save the content of the package and then when that’s done, you save the CSS and now you actually have a compiled CSS page.
Vic: That’s your live button, in other words the Save CSS is actually your live button then.
Vic: Yeah, okay. Okay, so that’s good then. I’m going to keep on slogging along as you can see where I get with this.
Rick: Sure, okay.
Vic: Thanks a lot.
Rick: You betcha, have a good day. Bye.
Vic: Same to you.
IDs and Styling
Rick: Okay, Ken let’s try you again. I see that you made it back and I want to hope that… let’s see where are you Ken Jordan. Okay, Ken I’ve just unmuted your microphone.
Ken: Can you hear me?
Rick: I can hear you perfectly.
Ken: Oh great, great.
Ken: Yeah. Yes, it’s just I see online debate about trying to getting you yes, efficient coding as possible and there’s an argument, people are saying well, they’re not going to use IDs to style things or try not to use any IDs as tool to do any styling in the long term so that when they could code back and not be kind of in a , struggle of specificity in terms of that one is more specific than this so I’ll stick an ID in but then reduce using ID rather than a class you know, how they’re going to overwrite that ID, whereas with classes, you can always do that. I’m just really interested in what is your take in the use of quite a few IDs and you know, what was your take on that argument?
Rick: Well, I generally only use IDs for structural elements that only happen once. Now, if I’m demonstrating something like this, you know I use the ID #free_register because I wanted to make sure that style actually showed up and I didn’t really want to have to you know, try and problem solve specificity issues if it didn’t but ordinarily, I mean if I was actually coding this myself rather than making an ID, I would’ve instead made it a class just because I generally only use IDs for structural elements.
Now, that’s not always the case, I mean sometimes I need to be more specific you know for whatever reason and so then I will in fact, do that. But I think the choice not to use IDs is pretty esoteric you know, the purpose for the ID is for something that exists only once on a page and so much of a person’s page structure falls into that category and you can be more specific by piling classes on, right.
You could instead of calling it an ID, you could call it a class and you could have a class within a class and so you just add classes together until you’re specific enough to make it work but I don’t see how that’s really significantly different than using an ID, I mean I suppose there may be. In actual practice, I use IDs for major structural elements on page and then classes for everything else unless I’m having a specificity issue.
Rick: And I probably wouldn’t have had a specificity issue with this, right. I mean if I just come back over to this thing and instead of pound sign (#) I put period (.) since I changed that to a class. I’m guessing this thing works just fine anyway. Let’s just make sure that reloaded. No, it didn’t and so .input_submit #free_register .input_submit but what is that, did I form class free_register. Oh, that’s interesting so why isn’t that more specific? Oh, it’s because of my additional CSS, I still have those same rules in additional CSS there that were referencing the ID that no longer exists.
Rick: So I could have done all of this without an ID and as a general rule, I probably would’ve done it without an ID just because my rule of thumb is use IDs for main structural elements unless you absolutely need one, that’s my typical rule.
Ken: Yes, yeah. Okay, cool.
Rick: Okay. Anything else?
Ken: No, that’s it thank you very much.
Rick: Okay, you bet. Have a good day.