Minimum Theme: Need 3 Widgets

[AnitaC]

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.

---

Need help with customization or troubleshooting? Reach out to me.

[Hard Boiled Greg]

Hi Anita,

I sent you a DM on Twitter.

HBG

---

Website: Hard Boiled Greg Twitter: @hbgreg

[AnitaC]

Thanks Greg, I responded to you. Check for the connection.

---

Need help with customization or troubleshooting? Reach out to me.

[Hard Boiled Greg]

Hi 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

[AnitaC]

Ahh, 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.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts