What we’re going to do now is open it up to questions. I know you have a couple of questions, one from Kate and one from Kim. I’m going to start with Kim here. Kim, I’m unmuting your microphone.
Kim: What was my question?
Rick: What’s your question? You had some question about page background color.
Kim: Okay. I know this is a pretty stupid question. I think it’s on tailoring the web.
Rick: I’m opening it up right now, foam.tailoringtheweb.com
Set the Page Background Color Using Custom CSS
Kim: Okay. Got you, that’s what I want to find. Really I have just focused on doing the Home part of this because they don’t have a lot of content right now. I really want to get this out of a jpeg which is what they have right now. It’s ridiculous but you know you have to do it, right? When I go to the About Friendly Foam page, I really want the the background to be white. Does that make sense?
Rick: Instead of the green?
Kim: Instead of the green, correct.
Rick: Is that the case for all the rest of the pages? Do you only want green on the front page?
Kim: I only want green on the front page, that’s correct.
Rick: The thing to do then would be to set the page background color to white everywhere and use some Custom CSS for setting the front page to green. Obviously, if it’s the only page you want to be green, then that’s what you would do.
If we go back to our Home page, this is out of the beginner level but if we look at the Custom Body Class would be Home, the code would look something like this. I can type .custom.home and then background-color:#fff. No, it’s this green color, isn’t it?
Kim: Yes. I was trying to figure out what that green color is but I get it.
Rick: That’s okay, I got an eyedropper right here.
Kim: The only one I want green is the Home and everything else will be white. I think I don’t mind that green on the other pages but the client doesn’t like the color.
Rick: Okay. There it is, .custom.home, background-color:# such and such. That will make the background color actually that’s not right because what you really are is space.page (.custom.home .page) and is this the full width background?
Kim: No, I can’t remember, it has been so long.
Rick: Go back and view the source again here. Content, no.
Kim: I need to install that?
Rick: No, you don’t need to install that. You just take this, #page, .custom.home #page, give it that background color and that’s all there is to it. You don’t mind if I put it in the chat window?
Kim: Please thank you.
Rick: There it is, it’s in the chat window.
Kim: Okay, thank you.
Rick: Is that it?
Kim: That’s it, for tonight.
Rick: Okay, well have a lovely evening.
Kim: Thank you.
Menu not displaying
Rick: Next we have Kate. Kate you had a question about your menu.
Kate: Yeah. Hi Rick.
Rick: Good evening Kate.
Kate: I’m setting up my Nav Bar and I’ve done it all in the menu area but it doesn’t show up on my Homepage.
Rick: Okay. I have made you the presenter, there you go. Now we can see your screen. Can you not hear us, Kate?
Kate: I can hear you but all I can see… Can you hear me?
Rick: I can, yes. I can see your screen right now.
Kate: All I can see is my profile.
Rick: Yeah, because you logged in to my site, not your site.
Rick: There you go. I think you’re in the right spot there on your site under menus.
Rick: So if you want to go over to that for a second.
Kate: I can’t work it, wait a minute. Nope, it keeps me in my BYOB Website profile.
Rick: Just click the other window, you’re fine. Scroll up to the top and the primary menu you have is the main menu, okay. Hit save under primary menu for a second then go to Thesis Site Options. Just make sure that you’ve got the WordPress Menu Style you have. Let’s go down to BYOB Thesis Plugins, there you go.
Kate: Okay, got you.
Rick: Go over to the Simple Nav Menu. I think that’s probably going to show that it’s not on the Thesis Nav Menu location. It’s still not showing.
Kate: Right. It’s not showing.
Rick: Crazy. Let’s see, I’m going to make myself the presenter here for a second and we’re going to come over to your site here, inspireddesignstudio.net, is that right?
Rick: Inspect the Element for just a second here so it should be above the header. That’s funny because you’ve got everything configured properly and this does not appear to be but let’s look at some other stuff. I’ve made you the presenter again, you just have to accept that.
Rick: Let’s go back to your control panel and open up plugins for me for just a second.
Rick: No, the main plugins. The big plugins.
Kate: Okay. Install?
Rick: Yes, install plugins and scroll down a little further. You don’t have any plugins that could be causing a problem. Go to Thesis and let’s look in the Custom File Editor for a moment. So Thesis, Custom File Editor, there you go.
Instead of Custom CSS, switch to Custom Functions PHP, go ahead and edit the selected file. You don’t have any code there that can be causing the problem. Go back over and instead of Custom Functions PHP, select BYOB Custom. Now, it’s still on the same screen you’re on but just drop that BYOB Custom.
Kate; Right there?
Rick: Yes. There is no CSS here for your menu. Go back to BYOB Thesis Plugins and go to the Simple Nav Menu again.
Kate: Should I save that?
Rick: No, we didn’t change anything. Go to the Simple Nav Menu and let’s look at the Nav Menu Style for a second. On the other row where it says Custom CSS Location, let’s change that from head of page to separate CSS File and hit Save. It’s showing now although I cannot tell why it didn’t show before.
Kate: Right. Okay.
Rick: I’ve absolutely no idea why it’s working and it wasn’t working before. I wish I did.
Kate: I’m glad to know it wasn’t just me.
Rick: No, absolutely it was not you. That’s got me stumped.
Kate: Thanks very much for that, Rick.
Rick: You know, Kate it’s my pleasure. Can I help you with anything else tonight?
Kate: No, that’s great. Thank you.
Rick: Okay. Talk to you later.
Rick: You bet. Bye. I don’t know why it happens but it happens. John’s got a question. Good evening, John I’ve unmuted your microphone.
John: Good evening, Rick you’re really talented huh?
John: I didn’t think you had any clue of that, it’s impressive..
Rick: Gosh. I don’t know. She shouldn’t have had the problem the first place so I’m not quite sure what that was about.
John: Right. Can’t figure out either come or going? Well, you got it working, that’s all that matters.
Rick: Yeah, absolutely.
Creating Sitemap Using Thesis Archives Template
John: I was curious about you recommend having a sitemap that humans can see and just how do you recommend going about doing that?
Rick: You could create a sitemap that people can view. Although it’s not quite as satisfying in this context but one way to do that is to use that Thesis Archives Template.
If we go to that sample page again and instead of the default template, you switch to the Archives Template, that’s going to give you a map. No, it’s not. It’s only showing the Archives for the blog, it’s not showing the page listing.
Rick: Actually if it can be done in a way that it’s not confusing, I do think that having a sitemap for people to look at is a good thing. This can be the beginning of a sitemap but obviously it’s not everything and what you’d need to be able to do is add more code to this Archives Template that would display pages and that would display the pages hierarchically because you want to see the hierarchical relationship from page to page and you could create that using widgets.
The first thing we could do on Wednesday is I could give you some code that would be attached via a hook to the Archives Template that would add the pages and list out all the pages. This is probably a little bit more satisfying because you could also go back to the Default Template here and then stick a couple of widgets.
Let’s see Shortcode Content Widgets and let’s just add a second block. We won’t do any styling of this, we’ll just create two widget columns and then inside this we would put a widget that would do the same listing. Let’s first describe that shortcode. Under our sample page, go back to edit page and we’ll just paste that.
John: Where did you get the shortcode for that page?
Rick: I got the shortcode from the widget block settings so we create the second widget block and we grab the shortcode. Hit Update. I was expecting it to display my..
John: The two columns?
Rick: No, I still got the Archives Template. That’s the problem, it’s not there.
Rick: Now I have my two columns and what I do under Appearance and Widgets is add Widget Block 1 – Column 2. I think it added a pages widget and we can call it “Pages”. We could start by page orders, that’s what we would do, hit Save, come back over and refresh. It’s not showing it hierarchically though, you just don’t really see it.
I thought we had installed Widgets Reloaded on this but evidently we did not. Widgets Reloaded will give us more control over the output of that widget. On the other hand, you could take a Categories Widget and do the same thing. It showed the hierarchy categories and hit Save.
You would do this with the different plugin because the standard default WordPress formatting for this isn’t very good. If you use the Widgets Reloaded, you could get better indentation, better separation and more control over both of these things.
This is essentially a sitemap simply by doing that. That could be a way for you to create a sitemap, you could change the name of this thing to “Sitemap” and give it a little brief description and then have a two column set up like this with pages and categories. It doesn’t have to be categories, it could be Articles or Site pages or whatever as a way of showing the sitemap.
John: Okay, that’s a good idea. Actually, I have one client who has just about maybe an 8-page site, it’s not very deep. I could always just make that on my own and link it to the pages.
Rick: The nice thing about this is that it does it automatically.
Rick: When it adds a new page, it automatically gets stuck in there and when it changes the page’s name or whatever it will update. That’s why you would want to use something like a widget or some kind of automatic dynamic code to generate those kinds of things because it just reduces the amount of time it takes to keep the site up to date.
Rick: Actually, I think this is probably a little bit better than the archives.
John: Yeah, I like what you’ve done here. Especially on a simple side of it. If there’s no hierarchy involved, you don’t need any of the visual, that could work well. Then I was going to change the subject unless you have something else about that?
Will Contact Form 7 Work on WordPress?
John: What about the Contact Form 7 Styling Plugin that you have. Will that work on other WordPress sites that don’t have Thesis or is it Thesis dependent?
Rick: This is Thesis dependent. The rationale is that, what we’re doing is creating dynamically generated CSS code and so you have to have a place to write it.
Rick: This is why there are very few plugins like this out there because it’s difficult to have dynamically generated code., You can’t really in a universal way.
John: WordPress didn’t allow for that like Thesis does.
Rick: It’s not just that, it’s that you know how to create the file and store it in Thesis. I don’t necessarily know how to do that in another theme because there’s not necessarily any consistency and there’s not any consistency about whether or not a directory is writable.
The Custom Directory in Thesis is writable which is why I can write a brand new file there. The reason why they do that kind of stuff is to prevent a malicious code from being able to write to the Theme’s main files so you’re looking for a way to segregate off the code into a safe place. As it turns out, I know where Contact Form 7 writes its CSS code and it’s theoretically possible for me to write the code to Contact Form 7’s CSS File as long as the server that the site is on will allow for that.
It is theoretically possible for somebody to create a plugin like this that would style Contact Form 7 using Contact Form 7’s own stylesheets except that you never really know whether or not the files are going to be writable because that’s very dependent upon server configurations. The Thesis Custom Folder, we know is writable because if it wasn’t writable, when you installed Thesis, you had to go make it writable in order for Thesis to work.
John: If I installed some of your plugins and used them will my Custom CSS stylesheet change and I can go in there and look at the code that you have generated?
Rick: What it creates is a file byob-custom.css and yes, you can see that. We can see it here actually if we just come over to the custom file editor, byob-custom.css, it’s one of the files available now.
John: I see what you’re saying.
Rick: If you select it, here’s all of the code that is written and in order for this to be able to change its code, this plugin has its own code block which has a start point, here’s BYOB Thesis Contact Form Styles CSS. That’s where it starts and here is its ending point. That’s how it can always tell where it is and you can look at the code here at that point.
The one problem that you have is if you were trying to use the plugin with a different theme, what it does is it adds a style to the widget and it adds a style that’s based on that style definition.
We created Style 1 so the CSS looks for li.widget.byob-cform7-style-1 and this code won’t work if I put it in Custom CSS and uninstalled the plugin. This code still wouldn’t work because it takes the plugin to add this style to the widget.
John: I got you.
Rick: Which is why there’s very few people attempting to dynamically create CSS because it’s complicated and it’s hard to be able to ensure that you can also dynamically assign classes to the appropriate location. It’s not as straightforward although if you wanted to apply the code to a different theme, you could easily copy the code, paste it into the other theme’s stylesheet and then modify the selector so that you are selecting for the selectors that are applicable to that theme.
John: Yeah, that makes sense. I don’t need to do that.
Rick: I understand the question. Because once you get past the selector and you get past where the thing is stored, you get past those two things. It’s very generic, it’s an ordinary code.
John: You’re home free then?
Rick: Right. Those are the quirks of the question.
John: If you change code, if you change something here like the background hover color, would it then cascade back to your plugin if you went in there and looked at it or is it only a one way thing?
Rick: I’m sorry, I don’t understand the question.
John: Let’s say you had a blue background and over here you change it to red. If you’ve pulled up your plugin, would it show the new color red?
Rick: No, the plugin doesn’t store its information in this file, it stores its information in the database. What it would do is as soon as you hit Save, it would take its information out to the database and write over the top of whatever was here. That’s why this file really isn’t a legitimate file to edit because it gets recreated every time.
John: Yeah, I got you. This is more like just something to look at that is not editable, that makes sense.
Rick: Yeah, you lose the edit.
John: Okay, sure. That’s all my questions until Wednesday and I look forward to check with you.
Rick: I am going to be re-teaching this class for Genesis and I will be porting these plugins to Genesis. Genesis and Thesis are very similar to each other and they have similar kinds of hooks and filters.
It’s not trivial to make the change but it is possible to do that so I do plan this year on porting the plugins over to Genesis as well. I’ll keep looking down the road and at my crystal ball to make sure that I’m not teaching how to use a buggy whip and looking for other places that it may need to be applied.
John: That makes sense. Thank you again and I’ll see you on Wednesday. By the way, I wanted to thank you for starting on time. So many people don’t bother to do that or say, “Hey, we’re going to wait a couple of minutes for the stragglers” and I really respect the fact that you acknowledge the people that are here on time and it’s like, “Let’s go”, so good for you.
Rick: You’re welcome. Talk to you on Wednesday.
John: Alright, bye.