Community Forums › Forums › Archived Forums › Design Tips and Tricks › Working with widget areas
- This topic has 2 replies, 2 voices, and was last updated 7 years ago by pgless.
-
AuthorPosts
-
March 30, 2017 at 6:10 am #204048pglessMember
Looking for help and direction with widget areas.
The whole page is layed out perfect in design terms with the exception of the slider widget area I am trying to float over four widget areas.
I have declared several widget areas in functions.php as follows:
//* Register widget areas
genesis_register_sidebar( array(
'id' => 'home-featured-1',
'name' => __( 'Home - Featured-1', 'irecruitment' ),
'description' => __( 'This is the featured-1 section of the Home page.', 'irecruitment' ),
) );
genesis_register_sidebar( array(
'id' => 'home-featured-2',
'name' => __( 'Home - Featured-2', 'irecruitment' ),
'description' => __( 'This is the featured-2 section of the Home page.', 'irecruitment' ),
) );
genesis_register_sidebar( array(
'id' => 'home-slider',
'name' => __( 'Home - Slider', 'irecruitment' ),
'description' => __( 'This is the slider section of the Home page.', 'irecruitment' ),
) );
genesis_register_sidebar( array(
'id' => 'home-left-content',
'name' => __( 'Home - Left Content', 'irecruitment' ),
'description' => __( 'This is the xoo content section of the Home page.', 'irecruitment' ),
) );
genesis_register_sidebar( array(
'id' => 'home-mid-content',
'name' => __( 'Home - Mid Content', 'irecruitment' ),
'description' => __( 'This is the oxo content section of the Home page.', 'irecruitment' ),
) );
genesis_register_sidebar( array(
'id' => 'home-right-content',
'name' => __( 'Home - Right Content', 'irecruitment' ),
'description' => __( 'This is the oox content section of the Home page.', 'irecruitment' ),
) );
genesis_register_sidebar( array(
'id' => 'home-bottom',
'name' => __( 'Home - Bottom', 'irecruitment' ),
'description' => __( 'This is the bottom section of the Home page.', 'irecruitment' ),
) );And using a front-page.php file for the home-page and styles for the whole website.
I have made the layout same as below in three rows: top, middle, bottom. First []'s cover a thrid of screen width 1140px, Second []'s cover the reminder of the width. []'s in the middle section are 1/3 each.
top: [ ][ ]
mid: [ ][][]
bot: [ ]Top is declared: add_action( 'genesis_after_header', 'irecruitment_home_top_widgets' );
Middle is declared: add_action( 'genesis_before_loop', 'irecruitment_home_middle_widgets' );
Bottome is decalred: add_action( 'genesis_before_footer', 'irecruitment_home_bottom_widgets', 1 );Each of the widgets are styled:
//* Home top widgets
function irecruitment_home_top_widgets() {genesis_widget_area( 'home-featured-1', array(
'before' => '<div class="home-featured-1 widget-area">',
'after' => '</div>',
) );genesis_widget_area( 'home-featured-2', array(
'before' => '<div class="home-featured-2 widget-area"><div class="wrap">',
'after' => '</div></div>',
) );genesis_widget_area( 'home-slider', array(
'before' => '<div class="home-slider widget-area"><div class="wrap">',
'after' => '</div></div>',
) );}
//* Home middle widgets
function irecruitment_home_middle_widgets() {genesis_widget_area( 'home-left-content', array(
'before' => '<div class="home-left-content widget-area"><div class="wrap">',
'after' => '</div></div>',
) );genesis_widget_area( 'home-mid-content', array(
'before' => '<div class="home-mid-content widget-area"><div class="wrap">',
'after' => '</div></div>',
) );genesis_widget_area( 'home-right-content', array(
'before' => '<div class="home-right-content widget-area"><div class="wrap">',
'after' => '</div></div>',
) );}
//* Home bottom widgets
function irecruitment_home_bottom_widgets() {genesis_widget_area( 'home-bottom', array(
'before' => '<div class="home-bottom widget-area"><div class="wrap">',
'after' => '</div></div>',
) );}
My problem is I am trying to get a widget area to float: right; over the bottom part of the top area and the top part of the middle and right []'s area.
I am wondering if anyone has solved a problem similar this or could point me in the right direction.
The website is being developed off-line using XAMPP so cannot give a url.
March 31, 2017 at 5:38 am #204107Victor FontModeratorThe PHP you posted above has nothing to do with the CSS needed to apply the floats you need. THere isn't anyway to help while you are developing locally. We need to be able to examine your CSS with the browser inspect tool so we can help give you the CSS you need. Sorry.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?April 18, 2017 at 9:57 am #204950pglessMemberNo worries, it was a pure css problem, which I have managed to fix by creating a separate css file for the front page. thx
-
AuthorPosts
- The topic ‘Working with widget areas’ is closed to new replies.