Theme Widget Alignment

Community Forums Forums Design Tips and Tricks Theme Widget Alignment

This topic is: resolved

This topic contains 26 replies, has 2 voices, and was last updated by  nutsandbolts 11 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #70495

    blueivorycreative
    Member
    Post count: 14

    Hi,

    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!

    #70565

    nutsandbolts
    Moderator
    Post count: 3166

    You 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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #70625

    blueivorycreative
    Member
    Post count: 14

    That 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?

    #70627

    nutsandbolts
    Moderator
    Post count: 3166

    You 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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #70659

    blueivorycreative
    Member
    Post count: 14

    The 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;
    }

    #70660

    nutsandbolts
    Moderator
    Post count: 3166

    Okay, 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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #70662

    blueivorycreative
    Member
    Post count: 14

    Okay, 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!

    #70665

    nutsandbolts
    Moderator
    Post count: 3166

    Okay, 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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #70666

    blueivorycreative
    Member
    Post count: 14

    Well, 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?

    #70667

    nutsandbolts
    Moderator
    Post count: 3166

    Okay, 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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #70669

    blueivorycreative
    Member
    Post count: 14

    So 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?

    #70671

    nutsandbolts
    Moderator
    Post count: 3166

    I’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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #70672

    blueivorycreative
    Member
    Post count: 14

    Okay, 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?

    #70674

    nutsandbolts
    Moderator
    Post count: 3166

    This 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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #70675

    blueivorycreative
    Member
    Post count: 14

    So 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 :)

Viewing 15 posts - 1 through 15 (of 27 total)

The topic ‘Theme Widget Alignment’ is closed to new replies.