• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: Columns, full width widget, middle home widget

  • This topic has 22 replies, 4 voices, and was last updated 7 years, 6 months ago by mhexpert.
Viewing 20 posts - 1 through 20 (of 23 total)
1 2 →
  • Author
    Posts
  • October 11, 2013 at 6:56 am #66246
    russpond
    Member

    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
    October 11, 2013 at 8:04 am #66263
    Brad Dalton
    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.


    Tutorials for StudioPress Themes.

    October 11, 2013 at 8:07 am #66264
    russpond
    Member

    Perfect! Thanks.

    I just changed it to 100%.

    Appreciate the quick feedback.

    October 11, 2013 at 8:35 am #66275
    Brad Dalton
    Participant

    no worries.


    Tutorials for StudioPress Themes.

    August 26, 2015 at 12:58 pm #163596
    mhexpert
    Member

    @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/

    August 26, 2015 at 5:49 pm #163668
    Brad Dalton
    Participant

    2x2? 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.


    Tutorials for StudioPress Themes.

    August 26, 2015 at 5:49 pm #163669
    Brad Dalton
    Participant
    .home-middle .widget {
    	float: left;
    	padding: 0 2.8%;
    	width: 25%;
    }
    

    Untested.


    Tutorials for StudioPress Themes.

    August 26, 2015 at 6:33 pm #163673
    mhexpert
    Member

    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!

    August 26, 2015 at 6:48 pm #163675
    Brad Dalton
    Participant

    Change the 3n+1 to 2n+1

    Tested and works

    Leave the width at 50%.


    Tutorials for StudioPress Themes.

    August 27, 2015 at 11:40 am #163763
    mhexpert
    Member

    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%;
    }
    August 27, 2015 at 12:57 pm #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.

    August 27, 2015 at 5:11 pm #163813
    Brad Dalton
    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.


    Tutorials for StudioPress Themes.

    August 27, 2015 at 5:13 pm #163814
    Brad Dalton
    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.


    Tutorials for StudioPress Themes.

    August 27, 2015 at 5:47 pm #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!

    August 27, 2015 at 7:06 pm #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' ),
    ) );
    August 29, 2015 at 12:57 am #163973
    Brad Dalton
    Participant

    How did you go with this?


    Tutorials for StudioPress Themes.

    August 29, 2015 at 7:47 am #163998
    Catherine_B
    Participant

    Brad - I don't know who you are asking the question of (How did you go with this?).

    If it's my question abt the full page widget, I was stuck at the code mistakes I must have made and posted as above so had to abandon it. I switched to streamline pro from my original exec pro because of issues that were taking too long.

    I see you spend a lot of time on here helping, and I know everyone really appreciates you. Thank you.

    August 29, 2015 at 8:05 pm #164022
    Brad Dalton
    Participant

    Thanks for the positive feedback Catherine. Just wanted to follow up and see if you resolved the issue.

    Normally i leave it with people for some time so they try and have a go themselves which you did.

    Catch you next time.


    Tutorials for StudioPress Themes.

    September 2, 2015 at 5:26 pm #164374
    mhexpert
    Member

    Brad,

    I left this alone for a few days to come back with fresh eyes. I'm still having trouble, but I think it's closer.

    I deactivated the Genesis Design Palette Pro.

    I added the mods to the style.css file.

    However, the front page now shows one featured page middle widget on its own row, instead of in two widgets per row.

    I'm attaching screenshots of the website with inspect elements and of the style.css file.

    If this can't easily be resolved here, let me know if you offer private tech help.

    Thanks in advance.

    style css code

    inspect element code

    September 2, 2015 at 5:29 pm #164375
    mhexpert
    Member

    Oops, left off tags:

    <img src="http://manufacturedhomes.expert/page-code/" alt="page code inspect element" />
    
    
    <img src="http://manufacturedhomes.expert/style-css-code/" alt="style css code" />
    
    
  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 23 total)
1 2 →
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble