70/30 Column Width Using Shortcode
-
Topic
-
Hi Jason,
I noticed that in Builder, you can have 2 columns that are 70/30, but in the TB shortcode button on a page, there is no 70/30. I’ve been creating Builder layouts unnecessarily because of this. Any chance we can get 70/30 and 30/70 into next version of Jump Start shortcodes? I will try to modify function in the meantime to add this option.
Thanks,
Angela
-
Replies
-
Hello Angela,
In terms of adding these to the framework, I kind of think this might be getting a little overboard on the column shortcodes, but there are CSS classes that you could utilize if you wanted to create these shortcodes in your Child theme.
Here’s how you’d do it:
/** * My custom column shortcodes */ function my_shortcode_columns( $atts, $content = '', $tag = '' ) { // Determine if column is last in row $last = ''; if ( isset( $atts[0] ) && trim( $atts[0] ) == 'last') $last = ' last'; // Figure out grid class to use $class = 'column '; switch( $tag ) { case 'seven_tenth' : $class .= 'grid_tenth_7'; break; case 'three_tenth' : $class .= 'grid_tenth_3'; break; } // Return column $content = '<div class="'.$class.$last.'">'.$content.'</div>'; return do_shortcode( $content ); } add_shortcode( 'seven_tenth', 'my_shortcode_columns' ); add_shortcode( 'three_tenth', 'my_shortcode_columns' );Let me know if that doesn’t work; I didn’t test it.
[seven_tenth]Column 1...[/seven_tenth] [three_tenth last]Column 2...[/three_tenth] [clear]
Thanks, Jason. That’s what I did. I just expected that the column options available in the Builder would also be available in the Shortcode dropdown on the posts/pages, but I can see how it would get quite long there. It was just surprising to have it in one place and not the other, as 70/30 is a common division since it more closely matches the default sidebar width/content width.
I guess I just don’t really see the Layout Builder plugin and the column shortcodes included with the Shortcodes plugin as really related.
Jason – just an info question – how does JS do columns? Bootstrap is based on a 12 column grid so I thought that I needed a fraction that could be x/12 – but a 30/70 split has nothing to do with 12 so obviously the grid is different.
What is the basic grid you are using?
Internally I do have a 12-column grid system in that I’ve created, but in addition, I have more classes you can use, as well.
Here’s where all of these grid classes are setup in /framework/frontend/assets/css/themeblvd.css if you want to see technically everything that is available to you.
Thanks, Jason! I did find all of these and then modified the TB shortcode generator to include the 70/30. I’m good at finding all the stuff, I was just curious why it was in Builder column options and not in the TB options in the Visual Editor. Just giving you a hard time.
That was for @sharonq … Don’t flatter yourself @askwpgirl; I want to make you DIG.
Jason Thanks for the tip on where to dig… so…. bootstrap gives me a bunch of CSS that I can use and then you add more on top. I thought that the TB shortcodes were just a simpler way to implement bootstrap but this looks more like the TB codes are based on your own CSS.
BTW – Where does “tight” come in to play? is it part of the shortcodes or something I would use with a or….
Angela – thanks for letting me piggyback on your thread to ask about this
- You must be logged in to reply to this topic.