Build Your Own Business Website header image

Add Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin Part 5 – Customize the Widget Headings

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

In part 5 of this series on Adding Widgets to the Content Area Using the BYOB Thesis Shortcode Content Widgets Plugin we show how to customize the heading style.

Video Transcript

Anyway, we’re going to go ahead and customize the heading style. So we’ll hit save there and once we hit… once we customize the heading style, let’s use Arial Black as our heading style. Let’s make the headings… let’s make them 22 pixels tall. No, let’s make them 18 pixels tall. We can… yeah, let’s let the color of them be white but let’s choose the background color up to a really dark grey or a darker grey. And then let’s give ourselves 10 pixels of padding around the heading. I want to go down to 1 pixel for the letter spacing rather than that 2 pixel. I’m going to get rid of all caps, I’m going to center the headline text, and I’m going to… I’m not going to make that bold. That’s already here in black. So if we hit save to that, we come back over here and refresh it. Okay, now we have a nice, little centered heading with a different color. And you know, instead of this color, we could easily put this as the background for those.

So for example, let’s go get the… from our Full Width Backgrounds, let’s get that image address and then we’ll say header area background image. Copy that and go back to our content widgets and then under the heading, block heading style… oh, I can’t do that because I don’t provide a method for swapping out the heading background. I do provide a method for swapping out the text background and I also provide a method for… actually, this’ll work. Widget block background style, this is where we can do it. Or no, we can’t do it there. I’m sorry, that’s not true. We can’t do it there because that would be the entire block. So that’s something I’m going to have to add into the plugin because I would like to be able to take this thing and put it here rather than just using a color.

And although you know, I could take that and put it in the background of this… yes Dennis, I can add gradients to the background. Can I add gradients to the background? I believe I can. You know, I get lost sometimes and when I have widget column background style… if I say yes to that, no. No, I haven’t added gradients to this yet. I will add gradients to it. Block background styles, let’s just check there real quick. No, no gradients for those yet but that is absolutely something that we should do because I like those gradients. I think they’re cool. So that’ll be something that we add here in the not very distant future.

Dennis, yes, version 1.0 is the current one that you upload but once you install it tomorrow morning or later in the day, you’ll have a message on it that says it’s been upgraded to 1.2 and you can press the button to upgrade automatically and it’ll run off and grab the 1.2. I just got that done before I pressed record. So I haven’t had the chance to get that stuff fixed. I mean, I haven’t had the chance to swap that out yet.

But this is what I wanted to show you, you know, the ability to… without having to write the CSS yourself, to be able to create things like this using that… using these plugins. And you know, just in case you were wondering how much CSS this writes, each of these plugins writes their CSS to the same file.

And so if we come over and look at… and it’s stored in the Thesis custom folder so that when you upgrade, it will stay there. And if we go over to thesis and custom file editor and we select the BYOB custom CSS file, here’s all the CSS that has been written by that plugin in order to style this stuff the way it styles it. So essentially, what it does is it has a very light load on the load of the page because it does not rely on option settings and things like that for the page load. And what it does is place the… it places all the styling in that CSS file and hooks these things to the specific functions, just as if you were doing it in your custom CSS file, I mean, your custom functions php file for these which means that these plugins are… should have very limited impact on the loading of your site. And there’s no jQuery or javascript in there or anything like that so there’s no possibility of conflicts between these plugins and any other plugins. I mean, I suppose there may be some possibility of conflict between these plugins and a plugin that also relies on Thesis hooks like… what is it? That Thesis hooks plugin, whatever that one is. So there may be some things like that but otherwise, it should… it’s intended to be fast and to do all the heavy lifting while you’re in your Admin screens, not when the page is loading. So…

0 Comments… add one
0 comments… add one