• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

How to change width of epik home feature widgets?

Home › Community Forums › Epik Theme Support › How to change width of epik home feature widgets?

Tagged: columns, epik, featured, home, Slider, widgets

  • This topic has 5 replies, 2 voices, and was last updated 9 years, 4 months ago by Mike.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 11, 2013 at 3:37 pm #7338
    Mike
    Customer

    Hi all – has anyone figured out how to change feature widgets?

    I’d like to change the slider widget to have 2 columns

    Perhaps that can be done with CSS in the widget box or might need to recreate a new widget?

    Any ideas? Thanks!

    September 11, 2013 at 10:02 pm #7343
    Eric
    Customer

    It depends on what you need. If you only need two columns (from the same widget) then you could just use this – http://demo.appfinite.net/epik/columns/

    If you need two separate widgets in two separate widget areas then you’ll need to create another widget and add in all of the css and stuff.


    I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

    September 12, 2013 at 9:52 am #7355
    Mike
    Customer

    Cheers Eric.

    I was thinking 2 separate widgets (to enable use of widgets that auto update featured posts, videos etc)

    The 2 columns page is helpful though. Is there a link to show the code needed for those column classes?

    Thank you!

    September 12, 2013 at 12:35 pm #7363
    Eric
    Customer

    Below are examples of column classes that are available in the Genesis Framework style sheet.

    <h3>Two-Columns</h3>
    <div class="one-half first">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
    
    </div>
    <div class="one-half">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
    
    </div>
    <div style="border-bottom:1px solid #eee;clear:both;margin-bottom: 26px;"></div>
    <h3>Three-Columns</h3>
    <div class="one-third first">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
    
    </div>
    <div class="one-third">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
    
    </div>
    <div class="one-third">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
    
    </div>
    <div style="border-bottom:1px solid #eee;clear:both;margin-bottom: 26px;"></div>
    <h3>Four-Columns</h3>
    <div class="one-fourth first">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
    
    </div>
    <div class="one-fourth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
    
    </div>
    <div class="one-fourth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
    
    </div>
    <div class="one-fourth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
    
    </div>
    <div style="border-bottom:1px solid #eee;clear:both;margin-bottom: 26px;"></div>
    <h3>Five-Columns</h3>
    <div class="one-fifth first">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
    
    </div>
    <div class="one-fifth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
    
    </div>
    <div class="one-fifth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
    
    </div>
    <div class="one-fifth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
    
    </div>
    <div class="one-fifth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
    
    </div>
    <div style="border-bottom:1px solid #eee;clear:both;margin-bottom: 26px;"></div>
    <h3>Six-Columns</h3>
    <div class="one-sixth first">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
    
    </div>
    <div class="one-sixth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
    
    </div>
    <div class="one-sixth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
    
    </div>
    <div class="one-sixth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
    
    </div>
    <div class="one-sixth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
    
    </div>
    <div class="one-sixth">
    
    This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.
    
    </div>

    I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

    September 12, 2013 at 4:51 pm #7369
    Mike
    Customer

    Thanks Eric! Legend.

    Also for future readers… between using this support post:

    http://appfinite.com/topic/slider-on-the-left-sidebar-on-the-right-how/

    AND

    1) editing home.php to create the new widget areas below

    /**
     * Display widget content for "slider" and "welcome" sections.
     *
     */
    function epik_home_loop_helper_top() {
    			
    	genesis_widget_area( 'slider', array(
    		'before' => '<div id="slider"><div class="slider-inner">',
    		'after' => '</div></div>',
    	) );
    	
    	genesis_widget_area( 'homepage-left', array(
    		'before' => '<div id="homepage-left"><div class="homepage-left">',
    		'after' => '</div></div>',
    	) );
    	
    	genesis_widget_area( 'homepage-right', array(
    		'before' => '<div id="homepage-right"><div class="slider-right">',
    		'after' => '</div></div>',
    	) );
    		
    }

    AND

    2) Creating the new widget areas in functions.php

    genesis_register_sidebar( array(
    	'id'			=> 'homepage-left',
    	'name'			=> __( 'Homepage Left', 'epik' ),
    	'description'	=> __( 'This is the homepage left section.', 'epik' ),
    ) );
    genesis_register_sidebar( array(
    	'id'			=> 'homepage-right',
    	'name'			=> __( 'Homepage Right', 'epik' ),
    	'description'	=> __( 'This is the homepage right section.', 'epik' ),
    ) );

    AND

    3) Styling the CSS as below to have 2 side by side widgets

    .homepage-left {
        margin: 0 auto !important;
        overflow: hidden;
        padding: 0 0 0px !important;
        width: 50%;
        float: left; 
        
    }
    
    .homepage-right {
        margin: 0 auto !important;
        overflow: hidden;
        padding: 0 0 0px !important;
        width: 50%; 
        float: right;
    
    }

    This worked. So if you want more clickable content instantly on the homepage, this may help.

    September 12, 2013 at 5:02 pm #7370
    Mike
    Customer

    Whoops. Spoke to soon. It show while I still had test content in the Slider widget area

    When removing that, the new homepage-left and homepage-right widget areas stopped working.

    I assume it’s something to do with ‘if’ and ‘echo’ on home.php, but not sure how to fix?

    Any experts on this? thks

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework