Build Your Own Business Website header image

J Shortcodes Plugin – Part 4 Button Styling Options

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.

This is Part 4 of the J Shortcodes Series and in this session we show some additional button styling like changing the button’s corners. We also show how to add standard icons with a link and use multi-line text on it using J Shortcodes.

Video Transcript

Okay so the next thing we’re going to talk about then is some additional styling and in particular, we’re going to look at rounded versus unrounded buttons. We’re going to look at some of the standard icons that you can put in here and then we’re going to look at how to make these things multiline.

So let’s come back over here first and go back to our HTML view and this is still our shortcode, right? Right in this section here and so, inside of this shortcode, the next thing we’re going to do is specify… well first, let’s specify that we don’t want the corners to be rounded. Right now, by definition or by default, the corners come out rounded. But we can choose to say no to rounded, right?

And so, we can come right here and I think no works for this. Let’s see… space rounded and let’s just say no, see what happens. Update, we might have to say rounded 1 like we did with the boxes last week. Let’s see, one more time. Yeah, you know what? I think that’s right. We’re going to have to say rounded 1. Update…oh that’s what that is. What rounded does… I’m sorry, that was my mistake. What rounded does is it entirely rounds the whole thing. So rounded here would mean… let’s see what a different version of rounded mean. Let’s say rounded 5, update. I see, so rounded 1 makes a half round and then rounded 5 or whatever, for example… perhaps rounded 2. Let’s say rounded 2 for a second, update and then it would probably give us a 2-pixel… oh, it’s not a 2-pixel but it’s a smaller than a rounded 5. If we say rounded 0… no. So let’s see, rounded… I see. Rounded 1 will enable rounded but there isn’t a…but rounded… so this must be rounded right here where it’s a half-round.

And so, you can either say rounded 1 or rounded yes or it just does its own thing. Because if you said rounded 10, update… I bet you it stays exactly the same. Yeah, it does. So rounded no just means it’s going to take its normal radius. Rounded yes means it’s going to go in the half round and rounded 1 will do the same thing. It will make it go half round. But there isn’t… at this stage, there isn’t a way to change the radius on the rounding. Okay so you can either round it or not and we’re going to say rounded no to that for the time being because I don’t really want to round it.

So then the next thing we have are the icons and they come with the standard set of icons: yes, no, info, download, question, globe, add, document, forum, pdf, and love. And you can use any one of those icons simply by specifying the icon.

So for example, if we said icon… let’s say icon = info inside of this. So icon = info, select update and refresh it, now you got the little info icon button here. This is what happens when we change the size. If we change the size from extra large down to large, what do you think is going to happen with that icon? It’s going to get smaller. We’re going to use a smaller version of that same icon for this version.

Now, this is a good opportunity to talk about for example, using a download link. So let’s say that we’re in our Media Library… well in fact, let’s just do that right here. No, let’s go to our Media Library and let’s add a file for download. So let’s see, Add New, select a file and let’s see, let’s grab those PDFs from our last session. So byob website… videos and then membership website, documents and let’s take our week 5 notes and we’re just going to upload those and I’m going to grab this URL. Well actually, I’m just going to… yeah, I’m going to grab this URL and then we’ll go back to Demo 2. We’re going to edit the page and in fact, what I’m going to do right now is just going to paste that link in there for a moment. But what I really want to do is I’m going to take this button that we did and I’m going to… instead of orange, I’m going to make this one white. And it’s not going to have a link… well yeah, it is going to have a link. Its link is going to be this download link here so we cut that out, we take the link and we make it that download link. And then the icon will be download and the text will be download week 5 lecture notes. If we select update here and then we view the page, okay there we have download week 5 lecture notes and if you select that, there it is. We’ve downloaded the PDF.

So that’s how you can use that download button or that download icon with a button to download a PDF file for example. And so the next thing we’re going to take a look at is how to do this as multiline. So, rather than having a great big thing like this, why don’t we say download week 5 and then have lecture notes be below.

So the way to do that is just to use the line break tag which is an HTML tag so br / greater than sign. Less than br / greater than sign… if we select update now and come back over to this, now we have our download week 5 lecture notes. You know, I think I want to get rid of that extra space. It’s not quite… download week 5. We get rid of that space right there, it’ll look like it’s more aligned. There we go.

So download week 5 lecture notes and then we want to… let’s say we want to make this a little bit bigger. So if we take this and make it extra large…make it x large, update, refresh it. There you go, download week 5 lecture notes.

So that’s how you can use the regular old icon or one of their standard icons in a download link and also, use a multiline text on it.

0 Comments… add one
0 comments… add one

Leave a Comment