This is Part 2 of 2 in a series on the J Shortcodes Plugin. Here we discuss how to add colored boxes and how to configure the box color, its title, border, shadow, radius, gradient and text color using shortcodes.
So the first thing I want to do is I want to add a button… actually, the first thing, let’s do… let’s go ahead and do a box. And so, okay those are the buttons. Here are the boxes. Now the boxes give you a pretty wide range of choices of configuration.
So we’re going to start off with just J box as our shortcode and let’s see what happens. So let’s go to book reviews and we’ll go to this review. And we’re going to take this right here and we’re going to say… let’s see, I don’t think… yeah, it didn’t produce its own shortcode. So we’ll do this in the HTML view and so we’ll just say J box and then the closing shortcode… slash J box. Let’s make sure I’m right about that syntax. Yeah so opening is J box, closing is that J box. We won’t insert a color. We’ll just see what happens without inserting a color.
We’ll update this and let’s view the page. Okay so without doing any sort of formatting at all, all we did was say J box, this is the kind of box that we got by doing that. Now you know, we can take that a step further by adding a color. And so, the color choices that it gives you are white, grey, platinum, red, green, blue, and yellow. And I think we’ll go ahead and use yellow for the moment and the way you do that is in the first one, you would just say color equals yellow, I think. I don’t think we… no, we need the parentheses about it too or not a parentheses, the double quotation marks. So double quotes and double quotes so J box color = yellow. If we update this and we refresh it, now we end up with a yellow style of box then.
Okay so let’s add another thing to it. Rather than… let’s see, we could add an icon to it but we’re not going to. The first thing we’ll do now is we’ll add a title. And so, the title equals… this is the bit of text that you’re going to use in there and we’ll come in here and say space, paste it… title equals and then we’ll use this section as our title. And if we say update, now you have that first sentence as a title that goes across the top of that.
So the next thing we could do is we could increase the border. And so, I think by definition, the border is 1 but I believe that we will make it 3. And so, we’ve got that in there, we can give it a space and we say border = 3. Update, refresh it, and now you can see the border got to be quite a bit thicker. We can even probably take that one up to 5 and refresh it. So now, you have a nice strong border. You’ve got a little shadow, you’ve got a heading across the top.
So the next thing we’ll look at is increasing the border radius. Now, I’m not sure what the existing border radius is but we’ll assume for the moment. Well, let’s just look and see if it’s actually 18. That might be an 18 pixel border radius. So we’ll put this in there and see if it changes it.
So we go back inside of this, give ourselves a space, place that piece of the shortcode. In fact, let’s just go to 5. Let’s say we just want to really tighten up that border radius there. So, if we hit update and give it a fairly small border or a small radius at the corner, now it is a tight little radius.And the alternative, if we take that and make it 18 so that it’s… maybe that’s what it’s… by definition is, yeah that looks like that was about the right… so you can change this up. In fact, I believe, you can take a border radius and say 0 and make it square if you didn’t want that at all. In fact, let’s go ahead and try that. Border radius is 0, update…oh no, that didn’t work. Did I do it wrong? Border radius = 0. Okay so if I don’t want a border radius at all or radius, I wonder if I can say no to that. Let’s try it.
Let’s try border radius no or maybe none. That’s what it would be in CSS, it would be border radius none so that might do the job. No, it doesn’t. So I guess if we really want to make that border radius go away as far as possible, we should just do one which is as close to no radius as possible and you really can’t even tell that it’s radius as a way of accomplishing that.
So then the next thing we’ll look at is increasing or decreasing the shadow. And so if we copy that and we come in here and add shadow and let’s say the shadow = 6. Update okay, there’s quite a bit more shadow that way. And if you don’t want the shadow at all, let’s see what happens if we say shadow = 0. We might have to do the one again, that might be the way to make it work. Yeah, we’re going to have to do something else. Shadow = 1. Well, you definitely still get a tiny bit of shadow. It doesn’t look like there’s a way to say no shadow whatsoever. Yeah, it doesn’t look like it.
So the next thing we could do in here is we could add a gradient background instead of a colored background. And so, it looks like it has a blue and a grey gradient, let’s see. Oh no actually, you can select your own color for this gradient. So if we do vertical gradient or vgradient instead of color, let’s see… where did that go? Okay so instead of color, let’s put the vgradient in and let’s just use Thesis’ color picker in order to figure out what colors we want to do.
So if we go to Design Options and let’s just say that we want to use…let’s go from a dark green to a light green. And I think that they’re saying that the way to make that work is to let’s see, vgradient, you put in 2 colors so it’s #onecolor vertical bar #2nd color. So then we’ll do that here, we’ll do # and then that color and then a vertical bar and then # and now let’s pick our light color. Okay, let’s just pick that one, see what happens. It’s not probably going to look any good but you get the point. You can specify the grading here yourself and I think it’s going to start with this color at the top and go to this color at the bottom. We’ll update it and refresh it. Yeah so that’s the way that works. Starts with one color at the top, works its way down you know, not that that looks any good. But you can certainly find ways to play around with this gradient.
For example, I bet you, if we wanted our own custom color and we wanted a solid color, rather than using you know, one of these predefined colors, we probably could use this vgradient, specify the same color in both places, update. And that will allow us to add our own custom color to this. Pardon me…indeed, it does.
And then the only other thing I would say is that if you wanted to change the text, we could probably use this J box CSS. Oh no, let’s use the content CSS. That’s the thing to change. And let’s try color = white for that. So if we want a white text inside of this thing, we come right here, take that content CSS and then say color = white. And I think that will give us white text. Let’s see… no, I didn’t. So maybe, what we need to do is CSS color… so rather than color = white, it’s color: white and I wonder if I need a semi-colon in there too. So now, this is more code-like. Turned in the wrong one… yeah, there we go.
So that’s it, using a CSS code style while we can you know, affect or change the color of text as well in here. What we’re going to do though instead of that is we’re going to go back to that yellow. I don’t like my colors here. And so, what we’ll do is we’ll go back to color = yellow. I lost J box, didn’t I? I did. J box and then we’re going to get rid of color = white content CSS. We’ll get rid of… and update it and refresh it.
And there you go. We have a way of presenting these nice little colored boxes in the middle of our text without using any custom CSS simply using shortcodes based on this shortcode or plugin… or this, I’m sorry, the J Shortcode Plugin. You know, in the coming weeks, I’m going to show you how to do other things like the next time, we’ll go ahead and do how to do buttons and we’ll start looking at how to do columns and things like that. I’d like to do a full complement of how to use this because there are so many customization things that you would need to know CSS for that you can do with this plugin.