Build Your Own Business Website header image

J Shortcodes Plugin – Part 10 Add Styling to Tabs

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 10 of the J Shortcodes Plugin Series and in this session we show how you can customize your tabs by specifying theme and width you prefer and even styling using Shortcodes.

Video Transcript

Then the next thing to do would be to change the theme or from this smoothness theme, say we want to use the blitzer theme so you would use theme = blitzer, for example. We’ll just go ahead and copy that. And then inside that first tab, theme = blitzer, make sure we have the double quote afterwards and hit update. And now, this isn’t going to produce the desired result. Oh, isn’t that interesting? I didn’t realize it would give us this cute, little warning. That’s nice. It gives you this warning because that theme is not currently enabled on the site.

In order to reduce the amount of stuff that is loaded when you load the page, J Shortcodes allows you to specify which of these themes is going to be loaded. And so, the smoothness theme is enabled by default. If you enable all of them then what will happen is these will all get loaded every time which of course, you don’t really want. So what you’d want to do is you’d want to pick the theme that you’d want to use and then enable it. Right now, I just enabled smoothness and blitzer and hit Save Settings. If we refresh it now, the blitzer will show up. Okay so it makes sense to only activate the one that you want.

So the next thing that we want to do then is we want to put it instead of here, let’s…actually, let’s do the width next. So then if we come back over to our… let’s see, let’s edit that page here. And let’s say, width = 400. I don’t think we have to say px here. I think it’s just width = 400. Let’s just make sure, see I it says anywhere… yeah, it doesn’t say that. So we’ll just say width = 400 and hit update and then view that page. And now, this has been you know, scaled down in size so it doesn’t take up any more space.

So if you want to set this so that it can act as a… so that it can sit off the side, in fact, I wonder whether or not text will wrap up beside it. That’s an interesting question. Let’s play with that. Let’s see whether or not… if we put text down here below it, whether that text will float up around the side of it. Sometimes these educational webinars are educational for both of us. Well, it doesn’t. You know, if you’re playing around your custom CSS, I’m sure you could make this thing float. And if you made it float, then the text would bop up beside it and I know this isn’t a beginner task but I’m just going to experiment with it for just a second here.

So I inspect that element so I should be able to just take this style. Let’s see, let’s just add another style. Let’s see, float left… yeah and then we probably want a little margin, a new property. And so, margin right 20 px.

So you know, you could customize the styles here so that you end up with something you know, a little bit different than it comes out of the box. But out of the box is pretty dang cool.

0 Comments… add one
0 comments… add one

Leave a Comment