3-Column class as a Widget no working in Executive Theme

Community Forums Forums General Discussion 3-Column class as a Widget no working in Executive Theme

This topic is: not resolved

This topic contains 16 replies, has 4 voices, and was last updated by  Catherine_B 9 hours, 48 minutes ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #66246

    russpond
    Participant

    I’m trying to setup a home page in Executive Theme, and I’m using the Home Middle Widget to place three images with text, and I need them displayed in 3 columns across the full width of the page. So, I used the Genesis 3-column class:

    <div class="one-third first">content 1</div>
    <div class="one-third">content 2</div>
    <div class="one-third">content 3</div>

    But, when it displays the columns are way too small, acting like one-sixth instead of one-third.

    Here’s the dev site: http://dev.etrak.com

    Any thoughts or ideas on why this is happening? Do column classes not work in widgets?

    Thanks,
    Russ

    http://dev.etrak.com
    #66263

    braddalton
    Participant

    Yes because the CSS code determines the width at 33%

    .home-middle .widget,
    .home-top .widget {
    	float: left;
    	padding: 0 2.8%;
    	width: 33.33333333333%;
    }
    

    You can change this or add a full width widget before or after the home middle section.


    #66264

    russpond
    Participant

    Perfect! Thanks.

    I just changed it to 100%.

    Appreciate the quick feedback.

    #66275

    braddalton
    Participant
    #163596

    mhexpert
    Participant

    @braddalton

    I have a question along the same lines.

    I’m using Executive Pro, and the Middle Section Widget is 3-columns by default.

    I have 4 items to show, so wanted to change the widget to a 2 x 2.

    I took your CSS code and added this to my stylesheet (I use Genesis Design Palette Pro – Freeform CSS):

    .home-middle .widget, .home-top .widget {
        float: left;
        padding: 0 2.8%;
        width: 50%;
    }
    

    As you can see on my front page, it is not working exactly. It’s showing the first row as 2 columns, but the third item in the next row, and the fourth item in a different row.

    Is there something I need to add to front-page.php or functions.php?

    I’ve been looking for hours…so thank you in advance.

    http://manufacturedhomes.expert/

    #163668

    braddalton
    Participant

    2×2? Or 4 widgets inline?

    I would change the width to 25% or a little less if needed and it should work.

    Also, modify the CSS so it doesn’t effect the home-top widget area.


    #163669

    braddalton
    Participant
    .home-middle .widget {
    	float: left;
    	padding: 0 2.8%;
    	width: 25%;
    }
    

    Untested.


    #163673

    mhexpert
    Participant

    I meant 2 widgets/columns per row.

    So in my front page I want the Buy & Sell to be on one row (which they are), and Upgrade & Cash Out to be on the next row.

    But right now Upgrade and Cash Out are on different rows.

    I’ve only edited the CSS…haven’t added anything to functions.php or front-page.php.

    Thank you!

    #163675

    braddalton
    Participant

    Change the 3n+1 to 2n+1

    Tested and works

    Leave the width at 50%.


    #163763

    mhexpert
    Participant

    Thank you @braddalton.

    Still not working on my end.

    I changed the 3n to 2n following your advice here and on http://wpsites.net/web-design/increase-agency-pro-themes-home-middle-widgets-from-3-to-4-columns/.

    This is what I have on my Freeform CSS:

    /* Change middle widget from (3n+1) to (2n+1) to display 2 widgets on each line instead of 3*/
    .home-middle .widget:nth-of-type(2n+1) {
    clear: left;
    }
    
    /* make the middle widgets display 2 instead of 3 */
    .home-middle .widget {
        float: center;
        padding: 0 2.8%;
        width: 50%;
    }
    #163772

    Catherine_B
    Participant

    Dear Brad – When you say ‘add a full-width widget’ in ExecPro – there is none in the widget choices. I need one on that theme and am stuck. I also thought you could only use the widgets so named as ‘home widgets’ in that theme, which is causing more problems.

    Thank you from Catherine.

    #163813

    braddalton
    Participant

    Works for me. Tested on the SP Exec demo theme. Can take a screenshot if you like.

    I would deactivate the plugin and add the mods i suggested to your style.css file before the media q’s as i did.

    Maybe caused by CSS you have in the plugin or the plugin over riding any theme mods.


    #163814

    braddalton
    Participant

    For the full width widget, just copy an existing widget in the front page file and change the widget i.d and remove the class.

    Then register a new widget in functions.php matching the i.d.


    #163816

    Catherine_B
    Participant

    Dear Brad –

    I’ve left something out apparently. (I’m now on the Streamline-Pro template.) For creating a full-page widget, first I duplicated the original php file for safety sake. So I take this existing code from the front page file here:

    function streamline_homepage_widgets() {
    
    	if ( is_active_sidebar( 'home-featured-1' ) || is_active_sidebar( 'home-featured-2' ) || is_active_sidebar( 'home-featured-3' ) ) {
    
    		echo '<div class="home-featured">';
    	
    		genesis_widget_area( 'home-featured-1', array(
    			'before' => '<div class="home-featured-1 widget-area">',
    			'after'  => '</div>',
    		) );
    		
    		genesis_widget_area( 'home-featured-2', array(
    			'before' => '<div class="home-featured-2 widget-area">',
    			'after'  => '</div>',
    		) );
    		
    		genesis_widget_area( 'home-featured-3', array(
    			'before' => '<div class="home-featured-3 widget-area">',
    			'after'  => '</div>',
    		) );
    
    		echo '</div><!-- end #home-featured -->';	
    
    	}

    >>>>>>>>>>>> and then duplicate the last entry and change it to THIS in bold: ?

    		genesis_widget_area( 'home-featured-3', array(
    			'before' => '<div class="home-featured-3 widget-area">',
    			'after'  => '</div>',
    		) );
    
    <strong>		genesis_widget_area( 'full-width-4', array(
    			'before' => 
    			'after'  => '</div>',
    		) );
    </strong>
    
    

    >>>I’m not sure I renamed it properly to show up and use, as there is no such new widget in the refreshed widget area.

    Thank you very much!

    #163823

    Catherine_B
    Participant

    Following up, I had forgotten to register it in the functions file. I did something wrong, because the site would not reload after altering that functions file, so I put the original front page and function pages back, and it reloads like before. That’s the bad news. The good news is: I did see the widget, named as I assigned it, in the widget area before messing up in functions and having to putting the pages back to original status.

    Just fyi, here is how I registered the widget in streamline, which must be wrong:

    genesis_register_sidebar( array(
    	'id'          => 'after-entry',
    	'name'        => __( 'After Entry', 'streamline' ),
    	'description' => __( 'This is the after entry section.', 'streamline' ),
    ) );
    
    >>>ABOVE IS WHAT I COPIED TO DUPLICATE; BELOW IS MY FAILED ATTEMPT TO PROPERLY REGISTER IT.
    
    genesis_register_sidebar( array(
    	'id'          => 'full-width-4',
    	'name'        => __( 'Full-width Widget', 'streamline' ),
    	'description' => __( 'This is a test full-width widget.', 'streamline' ),
    ) );
Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.