Minimum Theme: Need 3 Widgets

Community Forums Forums Design Tips and Tricks Minimum Theme: Need 3 Widgets

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  anitac 1 year, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #23625

    anitac
    Participant
    Post count: 6489

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #23667

    Hard Boiled Greg
    Participant
    Post count: 88

    Hi Anita,

    I sent you a DM on Twitter.

    HBG


    Website: Hard Boiled Greg Twitter: @hbgreg

    #23723

    anitac
    Participant
    Post count: 6489

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #23843

    Hard Boiled Greg
    Participant
    Post count: 88

    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

    #23876

    anitac
    Participant
    Post count: 6489

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Minimum Theme: Need 3 Widgets’ is closed to new replies.