Homepage › Community Forums › Epik Theme Support › How to change width of epik home feature widgets?
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!
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
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!
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
Thanks Eric! Legend.
Also for future readers… between using this support post:
https://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.
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