Community Forums › Forums › Archived Forums › Design Tips and Tricks › Theme Widget Alignment
Tagged: alignment, executive pro, widget
- This topic has 26 replies, 2 voices, and was last updated 11 years, 3 months ago by
nutsandbolts.
-
AuthorPosts
-
November 2, 2013 at 7:15 am #70495
blueivorycreative
MemberHi,
I'm using the Executive-Pro theme and came across a strange issue. In the Top section of the home page, where there are generally three "featured page" widgets, I added a second line below to create six. However, the alignment on the second line is completely wrong. The far left widget and center widget are significantly below the top line, while the far right widget is exactly where it's supposed to be.
I've tried adjusting the settings on the widgets and I've inspected the CSS with Firebug and I can't seem to find anything wrong. Has anyone had this issue happen to them? Or can someone tell me what I should be looking for in the CSS that would cause a similar problem?
The problem is that the site isn't live yet - it's currently hosted on my client's private server - so I can't let anyone inspect it themselves. In spite of that, though, does anyone have ANY clue as to what could be wrong?
Thanks!
November 2, 2013 at 3:31 pm #70565nutsandbolts
MemberYou may need to add a
clear: both;
to the div for the second featured area - not the individual areas, but the div that contains all three of them. Without seeing it, it's hard to know what might be wrong.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 2, 2013 at 8:29 pm #70625blueivorycreative
MemberThat makes sense, but when I examined the page with Firebug, I only found divs for the entire Top area and for the widgets individually, not one for the bottom three widgets. Is there a specific tag that I'm looking for?
November 2, 2013 at 8:35 pm #70627nutsandbolts
MemberYou may need to add an overall div to the function for the new area. Can you paste in your function versus the one that was already there for the original widget area?
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 3, 2013 at 8:15 am #70659blueivorycreative
MemberThe overall HTML for the Top Widget Area is as follows:
<div class="home-top widget-area">
<section id="featured-page-4" class="widget featured-content featuredpage">
<section id="featured-page-5" class="widget featured-content featuredpage">
<section id="featured-page-6" class="widget featured-content featuredpage">
<section id="featured-page-7" class="widget featured-content featuredpage">
<section id="featured-page-8" class="widget featured-content featuredpage">
<section id="featured-page-9" class="widget featured-content featuredpage">
</div>Then the CSS for the Top Widget Area is:
*::-webkit-input-placeholder {
color:#999999;
}
style.cs...ver=3.0.0
.home-middle, .home-top {
background-color:#FFFFFF;
clear:both;
overflow:hidden;
padding:6rem 3rem 0;
}
style.cs...ver=3.0.0
*, input[type="search"] {
box-sizing:border-box;
}And for each individual widget (all of which are exactly the same, even though the problem is occurring):
*::-webkit-input-placeholder {
color:#999999;
}
style.cs...ver=3.0.0
.home-middle .widget, .home-top .widget {
float:left;
padding:0 2.8%;
width:33.33333333333%;
}
style.cs...ver=3.0.0
*, input[type="search"] {
box-sizing:border-box;
}
style.cs...ver=3.0.0
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display:block;
}November 3, 2013 at 8:38 am #70660nutsandbolts
MemberOkay, that's what I was talking about - right now all of them are in the same div called home-top-widget-area, so any styling for that div is going to spill over to the new set of widget areas that you added. Can you paste in the content of your functions.php and front-page.php?
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 3, 2013 at 8:42 am #70662blueivorycreative
MemberOkay, yeah that makes sense.
Functions.php is:
<?php
//* Start the engine
require_once( get_template_directory() . '/lib/init.php' );//* Set Localization (do not remove)
load_child_theme_textdomain( 'executive', apply_filters( 'child_theme_textdomain', get_stylesheet_directory() . '/languages', 'executive' ) );//* Child theme (do not remove)
define( 'CHILD_THEME_NAME', __( 'Executive Pro Theme', 'executive' ) );
define( 'CHILD_THEME_URL', 'http://my.studiopress.com/themes/executive/' );
define( 'CHILD_THEME_VERSION', '3.0.0' );//* Add HTML5 markup structure
add_theme_support( 'html5' );//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );//* Enqueue Google fonts
add_action( 'wp_enqueue_scripts', 'executive_google_fonts' );
function executive_google_fonts() {wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );
}
//* Add new image sizes
add_image_size( 'featured', 300, 100, TRUE );
add_image_size( 'portfolio', 300, 200, TRUE );
add_image_size( 'slider', 1140, 445, TRUE );//* Add support for custom background
add_theme_support( 'custom-background' );//* Remove the post meta function
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );//* Add support for custom header
add_theme_support( 'custom-header', array(
'width' => 260,
'height' => 100,
'header-selector' => '.site-title a',
'header-text' => false
) );//* Add support for additional color style options
add_theme_support( 'genesis-style-selector', array(
'executive-pro-brown' => __( 'Executive Pro Brown', 'executive' ),
'executive-pro-green' => __( 'Executive Pro Green', 'executive' ),
'executive-pro-orange' => __( 'Executive Pro Orange', 'executive' ),
'executive-pro-purple' => __( 'Executive Pro Purple', 'executive' ),
'executive-pro-red' => __( 'Executive Pro Red', 'executive' ),
'executive-pro-teal' => __( 'Executive Pro Teal', 'executive' ),
) );//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );//* Unregister layout settings
genesis_unregister_layout( 'content-sidebar-sidebar' );
genesis_unregister_layout( 'sidebar-content-sidebar' );
genesis_unregister_layout( 'sidebar-sidebar-content' );//* Unregister secondary sidebar
unregister_sidebar( 'sidebar-alt' );//* Load Admin Stylesheet
add_action( 'admin_enqueue_scripts', 'executive_load_admin_styles' );
function executive_load_admin_styles() {wp_register_style( 'custom_wp_admin_css', get_stylesheet_directory_uri() . '/lib/admin-style.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );}
//* Create Portfolio Type custom taxonomy
add_action( 'init', 'executive_type_taxonomy' );
function executive_type_taxonomy() {register_taxonomy( 'portfolio-type', 'portfolio',
array(
'labels' => array(
'name' => _x( 'Types', 'taxonomy general name', 'executive' ),
'add_new_item' => __( 'Add New Portfolio Type', 'executive' ),
'new_item_name' => __( 'New Portfolio Type', 'executive' ),
),
'exclude_from_search' => true,
'has_archive' => true,
'hierarchical' => true,
'rewrite' => array( 'slug' => 'portfolio-type', 'with_front' => false ),
'show_ui' => true,
'show_tagcloud' => false,
)
);}
//* Create portfolio custom post type
add_action( 'init', 'executive_portfolio_post_type' );
function executive_portfolio_post_type() {register_post_type( 'portfolio',
array(
'labels' => array(
'name' => __( 'Portfolio', 'executive' ),
'singular_name' => __( 'Portfolio', 'executive' ),
),
'has_archive' => true,
'hierarchical' => true,
'menu_icon' => get_stylesheet_directory_uri() . '/lib/icons/portfolio.png',
'public' => true,
'rewrite' => array( 'slug' => 'portfolio', 'with_front' => false ),
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'trackbacks', 'custom-fields', 'revisions', 'page-attributes', 'genesis-seo', 'genesis-cpt-archives-settings' ),
'taxonomies' => array( 'portfolio-type' ),)
);}
//* Add Portfolio Type Taxonomy to columns
add_filter( 'manage_taxonomies_for_portfolio_columns', 'portfolio_columns' );
function portfolio_columns( $taxonomies ) {$taxonomies[] = 'portfolio-type';
return $taxonomies;}
//* Remove the site description
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );//* Set Genesis Responsive Slider defaults
add_filter( 'genesis_responsive_slider_settings_defaults', 'executive_responsive_slider_defaults' );
function executive_responsive_slider_defaults( $defaults ) {$args = array(
'location_horizontal' => 'Left',
'location_vertical' => 'Top',
'posts_num' => '3',
'slideshow_excerpt_content_limit' => '100',
'slideshow_excerpt_content' => 'full',
'slideshow_excerpt_width' => '30',
'slideshow_height' => '445',
'slideshow_more_text' => __( 'Continue Reading…', 'executive' ),
'slideshow_title_show' => 1,
'slideshow_width' => '1140',
);$args = wp_parse_args( $args, $defaults );
return $args;
}//* Relocate the post info
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
add_action( 'genesis_entry_header', 'genesis_post_info', 5 );//* Change the number of portfolio items to be displayed (props Bill Erickson)
add_action( 'pre_get_posts', 'executive_portfolio_items' );
function executive_portfolio_items( $query ) {if( $query->is_main_query() && !is_admin() && is_post_type_archive( 'portfolio' ) ) {
$query->set( 'posts_per_page', '12' );
}}
//* Customize Portfolio post info and post meta
add_filter( 'genesis_post_info', 'executive_portfolio_post_info_meta' );
add_filter( 'genesis_post_meta', 'executive_portfolio_post_info_meta' );
function executive_portfolio_post_info_meta( $output ) {if( 'portfolio' == get_post_type() )
return '';return $output;
}
//* Register widget areas
genesis_register_sidebar( array(
'id' => 'home-slider',
'name' => __( 'Home - Slider', 'executive' ),
'description' => __( 'This is the slider section on the home page.', 'executive' ),
) );
genesis_register_sidebar( array(
'id' => 'home-top',
'name' => __( 'Home - Top', 'executive' ),
'description' => __( 'This is the top section of the home page.', 'executive' ),
) );
genesis_register_sidebar( array(
'id' => 'home-cta',
'name' => __( 'Home - Call To Action', 'executive' ),
'description' => __( 'This is the call to action section on the home page.', 'executive' ),
) );
genesis_register_sidebar( array(
'id' => 'home-middle',
'name' => __( 'Home - Middle', 'executive' ),
'description' => __( 'This is the middle section of the home page.', 'executive' ),
) );And front page.php is:
<?php
/**
* This file adds the Home Page to the Executive Pro Theme.
*
* @author StudioPress
* @package Generate
* @subpackage Customizations
*/add_action( 'genesis_meta', 'executive_home_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function executive_home_genesis_meta() {if ( is_active_sidebar( 'home-slider' ) || is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-cta' ) || is_active_sidebar( 'home-middle' ) ) {
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'executive_home_sections' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
add_filter( 'body_class', 'executive_add_home_body_class' );}
}
function executive_home_sections() {
genesis_widget_area( 'home-slider', array(
'before' => '<div class="home-slider widget-area">',
'after' => '</div>',
) );genesis_widget_area( 'home-top', array(
'before' => '<div class="home-top widget-area">',
'after' => '</div>',
) );genesis_widget_area( 'home-cta', array(
'before' => '<div class="home-cta widget-area">',
'after' => '</div>',
) );genesis_widget_area( 'home-middle', array(
'before' => '<div class="home-middle widget-area">',
'after' => '</div>',
) );}
//* Add body class to home page
function executive_add_home_body_class( $classes ) {$classes[] = 'executive-pro-home';
return $classes;}
genesis();
Thanks so much for your help! I'm a designer, not a coder, so I really appreciate it!
November 3, 2013 at 8:46 am #70665nutsandbolts
MemberOkay, now I'm confused. How exactly did you add the new widget area to the theme? I don't see anything in either file other than the stock widget areas.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 3, 2013 at 8:47 am #70666blueivorycreative
MemberWell, it's not a new widget area. I literally just added the three new widgets below the other three in the Top area.
Would adding a new widget area solve the issue?
November 3, 2013 at 9:15 am #70667nutsandbolts
MemberOkay, now it makes sense. It could probably be done that way, but I don't know what CSS you'd need to fix it without being able to see the site.
Note: Please copy your entire functions.php into a file on your computer, as well as front-page.php, before you try any of the steps below. That way you'll be able to replace the files via FTP if anything breaks.
You should be able to fix this by adding a new widget area in functions.php (you can paste this right after the others toward the bottom of the file:
genesis_register_sidebar( array( ‘id’ => ‘home-second’, ‘name’ => __( ‘Home – Second’, ‘executive’ ), ‘description’ => __( ‘This is the second section of the home page.’, ‘executive’ ), ) );
Then in front-page.php, find this:
if ( is_active_sidebar( ‘home-slider’ ) || is_active_sidebar( ‘home-top’ ) || is_active_sidebar( ‘home-cta’ ) || is_active_sidebar( ‘home-middle’ ) ) {
and change it to this:
if ( is_active_sidebar( ‘home-slider’ ) || is_active_sidebar( ‘home-top’ ) || is_active_sidebar('home-second') || is_active_sidebar( ‘home-cta’ ) || is_active_sidebar( ‘home-middle’ ) ) {
Next, find this (also in front-page.php):
genesis_widget_area( ‘home-top’, array( ‘before’ => ‘<div class=”home-top widget-area”>’, ‘after’ => ‘</div>’, ) );
Leave it there, but add this after it:
genesis_widget_area( ‘home-second’, array( ‘before’ => ‘<div class=”home-second widget-area”>’, ‘after’ => ‘</div>’, ) );
Now you should have the widget area Home Second showing under Appearance > Widgets, but it won't have any styling. So you'll need to go through the stylesheet and add this (it may need some tweaking depending on what you've done to alter the theme):
/* Home Second --------------------------------------------- */ .home-second { background-color: #fff; clear: both; overflow: hidden; padding: 60px 30px 0; padding: 6rem 3rem 0; } .home-second .widget { float: left; padding: 0 2.8%; width: 33.33333333333%; } @media only screen and (max-width: 767px) { .home-second { margin: 0; width: 100%; text-align: center; } }
Hopefully that will take care of it but let me know if it doesn't!
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 3, 2013 at 9:41 am #70669blueivorycreative
MemberSo I started with the first step that you suggested, but it didn't even get through saving the file when a white screen appeared. Now, every time I try to login, it won't let me; only the white screen comes up.
Is this a server issue? Or a PHP memory issue? Or something else?
November 3, 2013 at 9:42 am #70671nutsandbolts
MemberI'm not sure - hard to say what might have happened since I can't see the site. You'll probably have to use CPanel or FTP to paste in the original functions file to get the site to come back up.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 3, 2013 at 9:46 am #70672blueivorycreative
MemberOkay, as I mentioned before, the client has it on his own private server, which I don't have access to. Is there an easy way for me to tell him how to do this?
November 3, 2013 at 9:51 am #70674nutsandbolts
MemberThis is why I included a disclaimer about being able to replace via FTP if anything breaks. 🙂
Your client should be able to log in, either via FTP, DirectAdmin, CPanel, or whatever interface his/her host provides and open the functions.php file in the /wp-content/themes/executive/ directory, paste in the original functions.php, and save. I would highly recommend getting login info so you can do this yourself if needed - anytime you edit theme files, things have the potential to break or need a manual fix.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 3, 2013 at 9:53 am #70675blueivorycreative
MemberSo basically he needs to delete the current functions.php file and replace it with the original, yeah?
And I know he can change this via FTP and I backed it up 🙂
November 3, 2013 at 9:53 am #70676nutsandbolts
MemberYes, that's correct.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 4, 2013 at 9:14 am #70822blueivorycreative
MemberSo I fixed the "white screen of death" and it let me add all the code that you mentioned. Another widget area was created, but now when I load the page, the website is white. So I can log in and edit the files, unlike before, but the site itself won't show up. Do you have any idea what could cause this?
November 4, 2013 at 9:21 am #70827blueivorycreative
MemberThe issue seemed to have occurred when editing the home page, not the functions.php.
November 4, 2013 at 9:22 am #70829nutsandbolts
MemberOkay, can you paste in the contents of your front-page.php?
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 4, 2013 at 10:05 am #70852blueivorycreative
Member<?php
/**
* This file adds the Home Page to the Executive Pro Theme.
*
* @author StudioPress
* @package Generate
* @subpackage Customizations
*/add_action( 'genesis_meta', 'executive_home_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function executive_home_genesis_meta() {if ( is_active_sidebar( ‘home-slider’ ) || is_active_sidebar( ‘home-top’ ) || is_active_sidebar('home-second') || is_active_sidebar( ‘home-cta’ ) || is_active_sidebar( ‘home-middle’ ) ) {
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'executive_home_sections' );
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
add_filter( 'body_class', 'executive_add_home_body_class' );}
}
function executive_home_sections() {
genesis_widget_area( 'home-slider', array(
'before' => '<div class="home-slider widget-area">',
'after' => '</div>',
) );genesis_widget_area( 'home-top', array(
'before' => '<div class="home-top widget-area">',
'after' => '</div>',
) );
genesis_widget_area( ‘home-second’, array(
‘before’ => ‘<div class=”home-second widget-area”>’,
‘after’ => ‘</div>’,
) );genesis_widget_area( 'home-cta', array(
'before' => '<div class="home-cta widget-area">',
'after' => '</div>',
) );genesis_widget_area( 'home-middle', array(
'before' => '<div class="home-middle widget-area">',
'after' => '</div>',
) );}
//* Add body class to home page
function executive_add_home_body_class( $classes ) {$classes[] = 'executive-pro-home';
return $classes;}
genesis();
-
AuthorPosts
- The topic ‘Theme Widget Alignment’ is closed to new replies.