Build Your Own Business Website header image

Bee Crafty Theme Quickstart Guide – Part 9 – Question & Answer

Difficulty Level -

Listed Under Lesson Subjects -

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.


That wraps up how to set up this skin. I want to entertain some questions and then I’m going to do a little Photoshopping with you guys. So if you have questions about what I’ve presented or if there’s something you want to figure out how to do, now is a great time to ask those questions. Nobody’s posted any questions yet.

Okay so Kathleen, I’ve just unmuted your microphone. Good morning, Kathleen.

Kathleen: Hello?

Rick: Hi Kathleen.

Kathleen: Hi, how are you, Rick?

Rick: I’m doing well. How are you?

How to Reduce the Space Between Paragraphs

Kathleen: I’m great, thank you very much. This has been very, very educational and a lot of things I didn’t know and didn’t figure out so your presentation really helped. One question I have and I’m sure it’s probably something pretty simple. But when you have 7 paragraphs in a post, there’s a huge space between paragraphs. It’s almost like 4 spaces. Is there a way to reduce that so it’s a little bit more visually pleasing?

Rick: Yeah, probably. Let’s look at one of their examples. Okay, they don’t have very much text on their examples.

Kathleen: No, they don’t. When you had your… you had your 7th paragraph setup, you could see that there’s a huge space in between the paragraphs.

Rick: Yes. I know exactly what you’re talking about and I was going to say, it’s probably just an extra space in there but it doesn’t look like there is.

Kathleen: No because I’ve gone back to try and do that so I figured it’s something a little more technical that I had to do.

Rick: It’s got a bunch of padding around it. So it’s got a padding top of 20 pixels and then it’s got some bottom padding too, though. Oh no, it’s got margin so…it’s got a bunch of padding and margin that makes some sense to me to get rid of. The only way to get rid of it is to edit this content p tag and I’m going to show you one way to edit this. Do you know anything about CSS?

Kathleen: I know a little bit. I know enough to kind of find my way around.

Rick: We’re going to go into the editor, Appearance Editor and this uses style CSS. And what you can do then is just come down here to the very bottom of style CSS and type #content p. And then say margin: bottom. No, margin-bottom: 0 px. Actually, I want a semi-colon and then a closing bracket. I’m going to just say right here, Rick’s custom.

The problem with doing this is that of course, as soon as you go to upgrade your child theme, you’re going to lose these modifications. So you’re going to want to try and save these some place. But if we save that right now and come back over and refresh this… content p margin-bottom: 0. Oh great, because I added the important thing to it. I hate that. Not complaining about Genesis but it’s really the mark of poor CSS coding to have to use important. It means you don’t really know how to use CSS properly.

Let’s see, let’s look for important. Okay so there’s… my gosh, that’s 106 times. Oh, brother. That is such poor…

Kathleen: Poor coding?

Rick: Poor coding. It just means they don’t know how to do this stuff properly. Content, entry content. Well, let’s just see if the whole thing falls apart entirely without that important there.

Kathleen: Okay.

Rick: I mean, it shouldn’t unless they’ve just messed up their coding. Okay, that’s a little bit better. It just did, in fact, get rid of the 20 pixels so at that point, you’ve got to go find that content p and get rid of the important and then change the bottom margin to 0. You could also just change it directly in there. I added this code but you could have just as easily, in that section where we removed that important, you could just as easily have… instead of saying 20 pixels here, you could just have changed that to 0 pixels.

Kathleen: Okay, okay.

Rick: So that’s one thing.

Kathleen: Alright.

Rick: What else?

Can I Widen the Navigation Bar?

Kathleen: The only other question I had and I think I’ve kind of figured out how to get around it is if I have more choices in my primary navigation bar, is there a way to widen, like that orange ribbon strip or… because what I’ve ended up doing is just making major categories and having more drop downs. And that seemed to work but when I had more than 1 line you know, where you have carousel demo, Mommy Blogger, etc?

Rick: Right.

Kathleen: I had enough that it started scrolling around and it was visible but not very well. And I didn’t know if there was a way to increase the size of that navigation bar or not.

Rick: There really isn’t. What you’d want to do here is first, look at your titles and make your titles shorter. So if you’ve got my favorite mommy bloggers then you might take out my and mommy and just say favorite bloggers. That’s the first thing to do to reduce the space. Second thing to do then is to stack categories like you’re talking about so you have a main category and then you have it subcategories below it. Or you could have a thing like I did here which says just categories and then the categories are below that.

Kathleen: I see that. Yeah, that’s a good one.

Rick: Now this categories, it doesn’t go anywhere. I meant to say that but this categories here is a custom menu and its URL is pound sign. And so it’s really just a label to take the categories to sit under it.

Kathleen: Okay.

Rick: So there’s no page called categories and clicking on it doesn’t take you anywhere. The URL of pound sign means take me to the current page and so essentially, the result is it takes you no place. But give it a navigation label of categories and then place these as children of it.

Kathleen: Got it, okay.

Rick: Now from a design standpoint and from a usability standpoint, you probably don’t want more than 6 to 8 menu choices because the more menu choices you have, the less likely somebody is to make a choice. And so really, you should be able to imagine your website navigation as being able to be reduced down to 6 to 8… absolute maximum, 10 top level menu items.

Adding “Regular” Menu Items to the Secondary Nav Menu

Now with this little secondary nav menu you can actually use it in conjunction with regular menu items. So we could put regular menu items on the secondary nav menu in front of the social media links for Facebook, Twitter, LinkedIn, YouTube. Are you currently using the secondary menu?

Kathleen: I haven’t set that one up yet, no, because I wasn’t quite sure how to do that. And so I learned that today and I’ll be setting it up today.

Rick: So how many of those social networking things do you have?

Kathleen: I probably would only use 3 of them.

Rick: Yeah so you could easily…

Kathleen: Well maybe, 4. Sorry.

Rick: You could easily add other sorts of secondary menu items to this. So if we come over to the social networking and let’s just say we’ll add gallery and video example and add those to the menu… and then let’s say I want to give myself some spaces here and then a vertical bar and some spaces so it just kind of widens it out there a bit. Hit save that menu and refresh it. And now you’ve got some other things here that can go in beside these. So that’s something to consider for secondary menu elements. It doesn’t only have to be social networking.

Kathleen: Absolutely.

Rick: That pretty much wraps up the seminar. I am very interested in taking requests for doing seminars like this for other child themes for Genesis. So if you’re considering using a different child theme and you’d like a little bit of training on how to set that child theme up, all you’ve got to do is let me know and we’ll set it up. Thank you very much. Bye bye.

0 Comments… add one
0 comments… add one

Leave a Comment