Executive Pro Widget to Right of Slider

Community Forums Forums Design Tips and Tricks Executive Pro Widget to Right of Slider

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  braddalton 8 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #79232

    mountash
    Participant
    Post count: 47

    I can get the widget to show up, and it works correctly. My issue is it is always below the slider. I want the slider to be 60% and the CTA widget to be 40%. How do I get them to be inline?

    Thank you,
    Janet


    Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
    Visit Our Site for more information and pricing.

    http://mountainash.org/worksite/
    #79235

    braddalton
    Participant
    Post count: 9415

    You need to re-code your front-page.php file like this:
    [php]

    <?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-cta’ ) || is_active_sidebar( ‘home-top’ ) || 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-cta’, array(
    ‘before’ => ‘<div class="home-cta widget-area">’,
    ‘after’ => ‘</div>’,
    ) );

    genesis_widget_area( ‘home-top’, array(
    ‘before’ => ‘<div class="home-top 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();
    [/php]

    And then add some CSS
    [css]
    .executive-pro-home .home-cta {
    float: right;
    width: 40%
    }
    .executive-pro-home .home-slider {
    float: left;
    width: 60%;
    }
    [/css]


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #79257

    mountash
    Participant
    Post count: 47

    I have to make some changes to your code, but it got me a good start. However, as everyone will notice the CTA Top is still below the slider. What is missing? I need to get it up. Here is the code I added:

    function.php

    genesis_register_sidebar( array(
    	'id'          => 'home-cta-top',
    	'name'        => __( 'Home - Call To Action - Top', 'executive' ),
    	'description' => __( 'This is the top call to action section on the home page.', 'executive' ),
    ) );

    We still want the middle cta, so this one it top.

    front-page.php
    genesis_widget_area( 'home-cta-top', array(
    		'before' => '<div class="home-cta-top widget-area">',
    		'after'  => '</div>',
    	) );

    style.css

    .executive-pro-home .home-cta .widget-title {
    	font-size: 24px;
    	font-size: 2.4rem;
    	font-weight: 500;
    	margin: 0px;
    	padding: 0px;
    	text-transform: none;
    	width: 60% !important;
    }
    
    .executive-pro-home .home-cta-top {
           float: right;
        width: 40% !important;
    }

    60% would be 684px, so I set the largest photo to 675px.

    What I am missing?


    Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
    Visit Our Site for more information and pricing.

    #79271

    mountash
    Participant
    Post count: 47

    Hi Brad,

    I got it. I had not added

    .executive-pro-home .home-cta .widget-title {
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: 500;
    margin: 0px;
    padding: 0px;
    text-transform: none;
    width: 60% !important;
    }
    to the css. I just changed the slider info that was there…

    Thank you,

    Janet


    Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
    Visit Our Site for more information and pricing.

    #79426

    braddalton
    Participant
    Post count: 9415

    Hello Janet

    I wrote a post which may help but seems you got it worked out. http://wpsites.net/web-design/move-call-to-action-next-to-slider-in-executive-pro-theme/

    The CSS could be improved as i didn’t spend much time on that part of the solution.

    cta next to slider


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.