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 8 years, 9 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.