Build Your Own Business Website header image

J Shortcodes Plugin – Part 6 Advanced Button Styling

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 6 of the J Shortcodes Plugin Series and here we show a more advanced way of styling and arranging your buttons by adding some custom CSS.

Video Transcript

So then the last thing I want to talk about here is how to apply some custom CSS to these. And we’re safe doing that because nobody left in the session is a beginner so we’ll go ahead and do that.

Now one thing that you can do is you could create a series of buttons that sit side by side. Notice how each one of these buttons starts all over again, right? So you’ve got a button here and then a button here and they just stack right on top of each other like that. They don’t sit side by side. Well, if we give this button a float, I believe this will just pop up right beside it. So you could theoretically create a little menu like this, of buttons of all the same height and size and they would sit by side. And the way you would do that is you’d make them float left.

So for an example here, you can add custom CSS with a CSS here. So if we say a CSS, copy that and then so we’re extra large and we’re going to… that’s the link new page icon equals download. Okay and so, here it’s going to say CSS and what we do is we replace that little asterisk with something like float: left; And I think that will do the job. Yes, it does.

So for example, if we made both of these things 2 lines tall… so we add our little br tag here…okay. Oh, isn’t that interesting? So if they were… let’s see if we gave them both the same width. So let’s do… actually, let’s do the same thing with this one. Let’s give it a float = left…icon… let’s see, right there, okay. a_CSS = float: left; update that. No, okay they’re both floating. Now, let’s give them both the same width. Width: 300 px and let’s do exactly that same thing in the one above. Okay let’s see, in the one above, CSS… update. Oh I thought that would work. I wonder if my problem is it’s the 2 line thing. I wonder if that’s the problem.

Brian thinks I need to put both of them on the same line in the source. You know what, Brian? You may be absolutely right about that. Let’s try that before I try to float something else. Like that, hit update, refresh… way to go, Brian. That was it. You’re absolutely right.

And so if instead 300 pixels… in fact, we could probably just get rid of that. But let’s say 25% and then the other one is going to be 25% also. Update… so 25% not quite wide enough for that one.

Okay so the next thing I wanted to do with the CSS was to specify the width. Let’s say you’re putting this in a place where you really want it to be a specific width and you kind of saw that already. But you can definitely, within that CSS, say something like width: 300 px so that the thing was actually 300 pixels wide if that was what… I mean, if there was a reason for doing it that way.

The other thing you can do is you could give some margin or a padding to it. So for example, if you needed to add some margin, say you wanted to space those out a little bit. You could say then margin left: 20 px and hit update. And you would you know, add a little bit of space there.

So that’s the way in which you can add some custom CSS to adjust the location of the buttons or you know, adjust the size of the buttons or fine tune some elements of the CSS of these buttons.

0 Comments… add one
0 comments… add one

Leave a Comment