Community Forums › Forums › Archived Forums › General Discussion › 3-Column class as a Widget no working in Executive Theme
Tagged: Columns, full width widget, middle home widget
- This topic has 22 replies, 4 voices, and was last updated 9 years ago by mhexpert.
-
AuthorPosts
-
October 11, 2013 at 6:56 am #66246russpondMember
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,
http://dev.etrak.com
RussOctober 11, 2013 at 8:04 am #66263Brad DaltonParticipantYes 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.
October 11, 2013 at 8:07 am #66264russpondMemberPerfect! Thanks.
I just changed it to 100%.
Appreciate the quick feedback.
October 11, 2013 at 8:35 am #66275Brad DaltonParticipantAugust 26, 2015 at 12:58 pm #163596mhexpertMemberI 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.
August 26, 2015 at 5:49 pm #163668Brad DaltonParticipant2x2? 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.
August 26, 2015 at 5:49 pm #163669Brad DaltonParticipant.home-middle .widget { float: left; padding: 0 2.8%; width: 25%; }
Untested.
August 26, 2015 at 6:33 pm #163673mhexpertMemberI 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 #163675Brad DaltonParticipantAugust 27, 2015 at 11:40 am #163763mhexpertMemberThank 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 #163772Catherine_BParticipantDear 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 #163813Brad DaltonParticipantWorks 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.
August 27, 2015 at 5:13 pm #163814Brad DaltonParticipantFor 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.
August 27, 2015 at 5:47 pm #163816Catherine_BParticipantDear 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 #163823Catherine_BParticipantFollowing 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 #163973Brad DaltonParticipantAugust 29, 2015 at 7:47 am #163998Catherine_BParticipantBrad - 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 #164022Brad DaltonParticipantThanks 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.
September 2, 2015 at 5:26 pm #164374mhexpertMemberBrad,
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.
September 2, 2015 at 5:29 pm #164375mhexpertMemberOops, 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" />
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.