Overlap home widgets over featured content

Home Forums Premium Themes Support ForumOverlap home widgets over featured content Responsive II (Responsive Mobile)Overlap home widgets over featured content Overlap home widgets over featured content

This topic contains 5 replies, has 2 voices, and was last updated by  Milind (CyberChimps Team) 6 months, 2 weeks ago.

  • Author
    Posts
  • #261180

    tomhees
    Participant

    Hi,

    I’m trying to make the home widgets overlap the featured content for a bit.
    But I can’t get it to work.

    I tried it with the following code but I can’t get it to work.

    
    #widgets .home-widget {
        float: left;
    	z-index: 999;
    	margin-top: -150px;
    }

    Also the div #widgets is at a strange place see picture on imgur

    http://imgur.com/a/vgFIm

    and this is my sidebar-home.php code

    <?php
    
    // Exit if accessed directly
    if( !defined( 'ABSPATH' ) ) {
    	exit;
    }
    
    /**
     * Home Widgets Template
     *
     *
     * @file           sidebar-home.php
     * @package        Responsive
     * @author         Emil Uzelac
     * @copyright      2003 - 2014 CyberChimps
     * @license        license.txt
     * @version        Release: 1.0
     * @filesource     wp-content/themes/responsive/sidebar-home.php
     * @link           http://codex.wordpress.org/Theme_Development#Widgets_.28sidebar.php.29
     * @since          available since Release 1.0
     */
    ?>
    <?php responsive_widgets_before(); // above widgets container hook ?>
    	<div id="widgets" class="home-widgets">
    		<div id="home_widget_1" class="grid col-220">
    			<?php responsive_widgets(); // above widgets hook ?>
    
    			<?php if( !dynamic_sidebar( 'home-widget-1' ) ) : ?>
    				<div class="widget-wrapper">
    
    					<div class="widget-title-home"><h3><?php _e( 'Home Widget 1', 'responsive' ); ?></h3></div>
    					<div
    						class="textwidget"><?php _e( 'This is your first home widget box. To edit please go to Appearance > Widgets and choose 6th widget from the top in area 6 called Home Widget 1. Title is also manageable from widgets as well.', 'responsive' ); ?></div>
    
    				</div><!-- end of .widget-wrapper -->
    			<?php endif; //end of home-widget-1 ?>
    
    			<?php responsive_widgets_end(); // responsive after widgets hook ?>
    		</div>
    		<!-- end of .col-300 -->
    
    		<div id="home_widget_2" class="grid col-220">
    			<?php responsive_widgets(); // responsive above widgets hook ?>
    
    			<?php if( !dynamic_sidebar( 'home-widget-2' ) ) : ?>
    				<div class="widget-wrapper">
    
    					<div class="widget-title-home"><h3><?php _e( 'Home Widget 2', 'responsive' ); ?></h3></div>
    					<div
    						class="textwidget"><?php _e( 'This is your second home widget box. To edit please go to Appearance > Widgets and choose 7th widget from the top in area 7 called Home Widget 2. Title is also manageable from widgets as well.', 'responsive' ); ?></div>
    
    				</div><!-- end of .widget-wrapper -->
    			<?php endif; //end of home-widget-2 ?>
    
    			<?php responsive_widgets_end(); // after widgets hook ?>
    		</div>
    		<!-- end of .col-300 -->
    		
    				<div id="home_widget_2" class="grid col-220">
    			<?php responsive_widgets(); // responsive above widgets hook ?>
    
    			<?php if( !dynamic_sidebar( 'home-widget-2' ) ) : ?>
    				<div class="widget-wrapper">
    
    					<div class="widget-title-home"><h3><?php _e( 'Home Widget 2', 'responsive' ); ?></h3></div>
    					<div
    						class="textwidget"><?php _e( 'This is your second home widget box. To edit please go to Appearance > Widgets and choose 7th widget from the top in area 7 called Home Widget 2. Title is also manageable from widgets as well.', 'responsive' ); ?></div>
    
    				</div><!-- end of .widget-wrapper -->
    			<?php endif; //end of home-widget-2 ?>
    
    			<?php responsive_widgets_end(); // after widgets hook ?>
    		</div>
    		<!-- end of .col-300 -->
    
    		<div id="home_widget_3" class="grid col-220 fit">
    			<?php responsive_widgets(); // above widgets hook ?>
    
    			<?php if( !dynamic_sidebar( 'home-widget-3' ) ) : ?>
    				<div class="widget-wrapper">
    
    					<div class="widget-title-home"><h3><?php _e( 'Home Widget 3', 'responsive' ); ?></h3></div>
    					<div
    						class="textwidget"><?php _e( 'This is your third home widget box. To edit please go to Appearance > Widgets and choose 8th widget from the top in area 8 called Home Widget 3. Title is also manageable from widgets as well.', 'responsive' ); ?></div>
    
    				</div><!-- end of .widget-wrapper -->
    			<?php endif; //end of home-widget-3 ?>
    
    			<?php responsive_widgets_end(); // after widgets hook ?>
    		</div>
    		<!-- end of .col-300 fit -->
    	</div><!-- end of #widgets -->
    <?php responsive_widgets_after(); // after widgets container hook ?>
  • #261264

    Hi,

    Apologies for the delay in reply.
    I think you are referring to responsive pro theme. Can you please share your site URL.

    I checked the screen shot. The div #widgets is on proper position. It is the theme design and it is included below #featured div.

    Can you please let me know what you actually want to do.

    If you want to replace the featured content area with the home widgets, there is no need to fully add the content from the sidebar-home.php file.

    Please copy the code from :
    <div id="widgets" class="home-widgets">

    till….

    </div><!-- end of #widgets -->

    You can add above code on any page and the home widgets will appear on that page.

  • #261267

    tomhees
    Participant

    Hi

    Thnx for the reply.

    This is how I wan’t it to look at the end. http://imgur.com/a/S6e2v
    As you can see in the picture the home widgets are overlapping the featured content.
    This is made in respsonsive mobile but for the support of grid I switched to responsive II pro

    At the moment I can’t give you the site link because I’m constructing it in Mamp

    I Hope you can help me

    	<div id="widgets" class="home-widgets">
    		<div id="home_widget_1" class="grid col-220">
    			<?php responsive_widgets(); // above widgets hook ?>
    
    			<?php if( !dynamic_sidebar( 'home-widget-1' ) ) : ?>
    				<div class="widget-wrapper">
    
    					<div class="widget-title-home"><h3><?php _e( 'Home Widget 1', 'responsive' ); ?></h3></div>
    					<div
    						class="textwidget"><?php _e( 'This is your first home widget box. To edit please go to Appearance > Widgets and choose 6th widget from the top in area 6 called Home Widget 1. Title is also manageable from widgets as well.', 'responsive' ); ?></div>
    
    				</div><!-- end of .widget-wrapper -->
    			<?php endif; //end of home-widget-1 ?>
    
    			<?php responsive_widgets_end(); // responsive after widgets hook ?>
    		</div>
    		<!-- end of .col-300 -->
    
    		<div id="home_widget_2" class="grid col-220">
    			<?php responsive_widgets(); // responsive above widgets hook ?>
    
    			<?php if( !dynamic_sidebar( 'home-widget-2' ) ) : ?>
    				<div class="widget-wrapper">
    
    					<div class="widget-title-home"><h3><?php _e( 'Home Widget 2', 'responsive' ); ?></h3></div>
    					<div
    						class="textwidget"><?php _e( 'This is your second home widget box. To edit please go to Appearance > Widgets and choose 7th widget from the top in area 7 called Home Widget 2. Title is also manageable from widgets as well.', 'responsive' ); ?></div>
    
    				</div><!-- end of .widget-wrapper -->
    			<?php endif; //end of home-widget-2 ?>
    
    			<?php responsive_widgets_end(); // after widgets hook ?>
    		</div>
    		<!-- end of .col-300 -->
    		
    				<div id="home_widget_3" class="grid col-220">
    			<?php responsive_widgets(); // responsive above widgets hook ?>
    
    			<?php if( !dynamic_sidebar( 'home-widget-3' ) ) : ?>
    				<div class="widget-wrapper">
    
    					<div class="widget-title-home"><h3><?php _e( 'Home Widget 3', 'responsive' ); ?></h3></div>
    					<div
    						class="textwidget"><?php _e( 'This is your second home widget box. To edit please go to Appearance > Widgets and choose 7th widget from the top in area 7 called Home Widget 3. Title is also manageable from widgets as well.', 'responsive' ); ?></div>
    
    				</div><!-- end of .widget-wrapper -->
    			<?php endif; //end of home-widget-2 ?>
    
    			<?php responsive_widgets_end(); // after widgets hook ?>
    		</div>
    		<!-- end of .col-300 -->
    
    		<div id="home_widget_4" class="grid col-220 fit">
    			<?php responsive_widgets(); // above widgets hook ?>
    
    			<?php if( !dynamic_sidebar( 'home-widget-4' ) ) : ?>
    				<div class="widget-wrapper">
    
    					<div class="widget-title-home"><h3><?php _e( 'Home Widget 4', 'responsive' ); ?></h3></div>
    					<div
    						class="textwidget"><?php _e( 'This is your third home widget box. To edit please go to Appearance > Widgets and choose 8th widget from the top in area 8 called Home Widget 4. Title is also manageable from widgets as well.', 'responsive' ); ?></div>
    
    				</div><!-- end of .widget-wrapper -->
    			<?php endif; //end of home-widget-3 ?>
    
    			<?php responsive_widgets_end(); // after widgets hook ?>
    		</div>
    		<!-- end of .col-220 fit -->
    	</div><!-- end of #widgets -->
  • #261309

    Hi,

    I am not clear what you are actually looking for.
    Earlier you have sent the screen shot of Responsive theme. In the next reply you have sent the screens shot of Responsive II theme.
    Both the themes have Home widgets area.
    – In which theme you want to replace the featured content area.
    – Do you want to replace the “Featured content” of Responsive theme with the “Home widgets” of Responsive II theme
    – There are 2 section in Home page setting, “Content area” and “featured content”. Based on the screen shot http://imgur.com/a/S6e2v, do you want to make the “Content area” full width and remove the “featured content” area?

  • #261655

    tomhees
    Participant

    Hi I solved the problem on that,

    I have just one more question how do I use grid in Responsive II?

  • #261847

    Hi

    Apologies for the delay in reply.
    Good to hear that the issue is fixed.
    Regarding grid system, It is not yet included in this Responsive II theme.

You must be logged in to reply to this topic.