This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

70/30 Column Width Using Shortcode

  • Creator
    Topic
  • #3077
    askwpgirl
    Participant

    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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Author
    Replies
  • #3103
    Jason Bobich
    Keymaster

    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]
    #3699
    askwpgirl
    Participant

    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.

    #3707
    Jason Bobich
    Keymaster

    I guess I just don’t really see the Layout Builder plugin and the column shortcodes included with the Shortcodes plugin as really related.

    #3736
    sharonq
    Participant

    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?

    #3752
    Jason Bobich
    Keymaster

    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.

    #3819
    askwpgirl
    Participant

    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.

    #3837
    Jason Bobich
    Keymaster

    That was for @sharonq … Don’t flatter yourself @askwpgirl; I want to make you DIG.

    #3858
    askwpgirl
    Participant

    I’m digging it all right 😉

    #3862
    sharonq
    Participant

    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

    • This reply was modified 7 years, 7 months ago by sharonq.
    • This reply was modified 7 years, 7 months ago by Jason Bobich.
Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.