Community Forums › Forums › Archived Forums › Design Tips and Tricks › Minimum Theme: Need 3 Widgets
Tagged: add widgets, minimum
- This topic has 4 replies, 2 voices, and was last updated 11 years ago by Anita.
-
AuthorPosts
-
March 1, 2013 at 7:07 pm #23625AnitaKeymaster
If you look at this client site here - there are three circles. I need three widgets over them. Can someone help me with the appropriate code to register them and also styling them. I don't know if I need one widget area where I place three Text Boxes in the one area or if I need three separate widgets.
Love coffee, chocolate and my Bella!
March 1, 2013 at 9:48 pm #23667Hard Boiled GregMemberMarch 2, 2013 at 7:20 am #23723AnitaKeymasterThanks Greg, I responded to you. Check for the connection.
Love coffee, chocolate and my Bella!
March 2, 2013 at 8:05 pm #23843Hard Boiled GregMemberHi Anita,
As we discussed, a CSS solution might be more accommodating to your content at variable widths than the background image.
First register the widgets in functions.php:
genesis_register_sidebar( array( 'id' => 'circle-1', 'name' => __( 'Circle #1', 'minimum' ), 'description' => __( 'This is the left circle on the home page.', 'minimum' ), ) ); genesis_register_sidebar( array( 'id' => 'circle-2', 'name' => __( 'Circle #2', 'minimum' ), 'description' => __( 'This is the middle circle on the home page.', 'minimum' ), ) ); genesis_register_sidebar( array( 'id' => 'circle-3', 'name' => __( 'Circle #3', 'minimum' ), 'description' => __( 'This is the right circle on the home page.', 'minimum' ), ) );
The hook those widgets into where the feature image normally goes on the home page. Still in functions.php replace:
if ( is_home() ) { echo '<div id="featured-image"><img src="'. get_stylesheet_directory_uri() . '/images/sample.jpg" /></div>'; }
with:
if ( is_home() ) { echo '<div id="home-circles">'; genesis_widget_area( 'circle-1', array( 'before' => '<div class="circle-1 widget-area">', ) ); genesis_widget_area( 'circle-2', array( 'before' => '<div class="circle-2 widget-area">', ) ); genesis_widget_area( 'circle-3', array( 'before' => '<div class="circle-3 widget-area">', ) ); echo '</div><!-- end #home-circles -->'; }
And for the CSS:
/* Home Circles ------------------------------------------------------------ */ #home-circles { background-color: #58585a; margin: 0 auto; max-width: 1600px; overflow: hidden; padding: 3% 1.5%; text-align: center; } .circle-1, .circle-2, .circle-3 { border-radius: 50%; float: left; height: 0; overflow: hidden; padding-bottom: 31%; width: 32%; } .circle-2, .circle-3 { margin: 0 0 0 2%; } .circle-1 { background-color: #c3c4c6; } .circle-2 { background-color: #fefefe; } .circle-3 { background-color: #7a7e89; }
After you do that, drop in a text widget and you'll see your next challenge. The CSS border-radius (and your original image) doesn't "contain" or hold the text within the circumference of the circle. The text will take up the full width of the widget at all heights. So to keep the text within the circle you will have to add padding to all sides. How much padding depends on your text.
I haven't provided any responsive code for your style sheet yet. Play around with it and your anticipated text and move the browser window in and out a bit.
Contact me on Skype if you'd like to chat.
Take care,
Hard Boiled Greg
Website: Hard Boiled Greg Twitter: @hbgreg
March 3, 2013 at 6:23 am #23876AnitaKeymasterAhh, I forgot to jump back over here and THANK YOU :). As I mentioned, I am going to play around with it and try different things.
Love coffee, chocolate and my Bella!
-
AuthorPosts
- The topic ‘Minimum Theme: Need 3 Widgets’ is closed to new replies.