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  AC 1 year, 6 months ago.

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

    AC
    Blocked
    Post count: 7712

    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.

    #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

    AC
    Blocked
    Post count: 7712

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

    #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:

    [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’ ),
    ) );[/php]

    The hook those widgets into where the feature image normally goes on the home page. Still in functions.php replace:

    [php]if ( is_home() ) {
    echo ‘<div id="featured-image"><img src="’. get_stylesheet_directory_uri() . ‘/images/sample.jpg" /></div>’;
    }[/php]

    with:

    [php]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 –>’;

    }[/php]

    And for the CSS:

    [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;
    }[/css]

    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

    AC
    Blocked
    Post count: 7712

    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.

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

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