Community Forums › Forums › Archived Forums › Design Tips and Tricks › Column Classes (e.g. "first") for Sandbox Featured Widget?
- This topic has 5 replies, 2 voices, and was last updated 10 years, 6 months ago by
jmrallen.
-
AuthorPosts
-
July 31, 2014 at 2:38 pm #116476
jmrallen
MemberThe Genesis Sandbox Featured Widget lets you select columns (one-third, one-half, etc.), but I've not figured out how to get it to display "first" for the first one-half column and thus allow the second half to slip-in alongside it.
I think I'd be able to use the plugin to reproduce the look of the "Category Posts Boxed" section on this website, but I think I'll need that "first" ability to do so. Is there a way to tell a widget to display first like that, and then have the second widget slip-in along side it, or am I hoping for functionality that just doesn't exist?
August 1, 2014 at 1:20 am #116539Ben @ Inbound Creative
MemberThat theme doesn't use column classes.
Though I can't be 100 per cent sure, it appears that each of those columns are two separate sidebars with widget areas wrapped in divs with a left and a right class.
I can tell you how to replicate it, but I need to know how comfortable are you with PHP and CSS.
August 1, 2014 at 1:06 pm #116591jmrallen
MemberI'm fairly comfortable with PHP and CSS, as well as functions.php manipulation. I think you're right in saying the visual effect could be reproduced with a new sidebar area and one widget area for each "side." If you have some ideas, I'd love the suggestion.
Ultimately I'm hoping to create four of those box-like areas on my homepage, each focused on showcasing entries from a different category. That would of course lead to a LOT of sidebar areas and widgets. Correct me if I'm wrong, but wouldn't such an increase in sidebars and widgets slow down the overall performance of the page? Or, does the number of widgets and sidebars really not have a negative impact on page load times?
August 1, 2014 at 5:46 pm #116617jmrallen
MemberOK, I've gone ahead and made all those widgets and their associated CSS. I am completely stumped about one item, though, and I'm positive it's just me being stupid and going "code blind" after staring at it for so long.
As you can see on my development site, I've got all four category widgets registered and displaying content. The content's not real, nor is the styling -- I'm just using those hideous colors so I can tell the different sections apart. Anyway... I'm struggling mightily to get the left and right halves of each section to slip-in next to one another. Here's how I created the widgets in the functions.php file (reproduced accordingly for each widget):
//* Display Left and Right Category Subsections only on homepage add_action( 'genesis_loop', 'home_subfeatures' ); function home_subfeatures() { if ( ! ( is_home() || is_front_page() ) ) return; genesis_widget_area( 'home-sub-games-left', array( 'before' => '<div class="home-sub-games"><div class="wrap"><div class="home-sub-games-left widget-area one-half first">', 'after' => '</div>', ) ); genesis_widget_area( 'home-sub-games-right', array( 'before' => '<div class="home-sub-games-right widget-area one-half">', 'after' => '</div></div></div>', ) ); genesis_widget_area( 'home-sub-sports-left', array( 'before' => '<div class="home-sub-sports"><div class="wrap"><div class="home-sub-sports-left widget-area one-half first">', 'after' => '</div>', ) ); genesis_widget_area( 'home-sub-sports-right', array( 'before' => '<div class="home-sub-sports-right widget-area one-half">', 'after' => '</div></div></div>', ) ); }
In my CSS file, I have the following (reproduced accordingly for each widget):
.home-sub-games { border-top: 1px solid #ff0000; background: url(images/test-sublabel.jpg) no-repeat left top; background-color: #e3e3e3; clear: both; margin: 0 20px 10px 20px; padding: 23px 0 0 0; } .home-sub-games-left { float: left; padding: 5px 5px 0 10px; width: 50%; } .home-sub-games-right { float: right; padding: 5px 5px 0 10px; width: 50%; }
What am I missing, be it in the functions.php code or the CSS, that's not making those left and right areas not slip-in alongside one another rather than stack-up awkwardly like they are? Any and all help would be greatly appreciated.
August 1, 2014 at 10:52 pm #116638jmrallen
MemberI took a shot in the dark and changed the CSS width to 48% and got the desired effect. It "breaks" again at 49%, but I've at least found a clooged-together solution. If anyone here has a more-glamorous and/or better-coded way to accomplish this, I'm still open to any and all suggestions. However, I may just call it good for now if I don't hear from anyone in the next couple of days.
August 2, 2014 at 2:09 pm #116704jmrallen
MemberJust to close the loop here, the reason it required 48% rather than 50 was because the one-half reference in the CSS called for 48.71 bla bla bla percent. So, as long as I keep the reference 48.7% or lower it displays just fine. I'll consider this case closed.
-
AuthorPosts
- The topic ‘Column Classes (e.g. "first") for Sandbox Featured Widget?’ is closed to new replies.