Align homepage widgets horizontally instead of vertically

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

With the default settings, widgets added to the bottom of the homepage will vertically align and stack on top of each other, leaving a large gap on the right side of the homepage. This tweak will align the content horizontally so they are side-by-side and properly centered.

 PHP

Locate the home.php file in /themes/chameleon/

Save an exact copy of this file to /themes/chameleon-child/

Locate the following code near line 62:

<div id="from-blog">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage') ) : ?>
<?php endif; ?>
</div> <!-- end #from-blog -->

 Change it to this:

<div id="from-blog-right">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage') ) : ?>
<?php endif; ?>
</div> <!-- end #from-blog-right -->

 

CSS

Locate your style.css file in /themes/chameleon-child/

Add this code:

#from-blog-right .main-widget {
width: 260px; float:left;
min-height:250px;
margin-right:55px; }
 
#from-blog-right .main-widget:nth-child(3) {
margin-right:0px;
width:230px}

    3 Comments

  1. I did everything you said, created a child theme and did the following:

    Changed:

    To:

    Added at the bottom of Child Theme Style CSS:

    #from-blog-right .main-widget {
    width: 260px; float:left;
    min-height:250px;
    margin-right:55px; }

    #from-blog-right .main-widget:nth-child(3) {
    margin-right:0px;
    width:230px}

    It didn’t work. Can someone help me figure out where i went wrong?

    Thomas

    February 5, 2015

    • it didn’t work as a child theme, so i adjusted the php and css files from the master theme and it worked.

      Thomas

      February 5, 2015

    • Hi Thomas. Sounds like your child theme might not be active? Have you verified the stylesheet of your child theme is set up correctly and working? Make sure home.php is named correctly. You need to edit this file in a text editor and make sure the extension is .php, not home.php.txt

      Brad (admin)

      February 6, 2015

Post a Reply

Your email address will not be published. Required fields are marked *