Link to home
Start Free TrialLog in
Avatar of divahomemaker
divahomemaker

asked on

how to have the <h2> title of a widget above the <div>

I am creating a wordpress custom theme and I have a sidebar widget that I want the <h2> title to be above the <div> that contains the widget instead of inside it.  The widget is only supposed to appear if it is active and I am using css to style the <div>

This is the page I am working on: click here

Here is my css code:
#white-box-content {width: 217px; padding: 8px; background: #fff; border: #fc4792 5px solid; border-left: #fc4792 5px solid; margin: 0 auto;}
h2 {font-size:36px; font-family: tangerineregular; font-weight:normal;}

Open in new window


Here is the code for the page where the widget it:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("White Box") ) : ?>
<?php endif; ?>

Open in new window


Here is the function.php code for the widget:
//Register White Box
    if (function_exists('register_sidebar')) {
    	register_sidebar(array(
    		'name' => 'White Box',
    		'id'   => 'white-box',
    		'description'   => 'These are widgets in the white box on the sidebar on the homepage.',
    		'before_widget' => '<div id="white-box-content" class="rounded-corners">',
    		'after_widget'  => '</div>',
    		'before_title'  => '<h2>',
    		'after_title'   => '</h2>'
    	));
    }

Open in new window

Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

The div is the container for the widget.  Why would you want the title to show up outside of the container and break the semantic flow?  There's probably a simpler way to accomplish what you are looking to do but I don't understand the end goal.
Avatar of divahomemaker
divahomemaker

ASKER

I want the title to be above the box that is white with the pink border.  The title will be in white and a specific font style.  I would like for the end result to be this: User generated image
ASKER CERTIFIED SOLUTION
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks jason1178 -- The only issue is that with Wordpress it isn't quite that easy if I only want it to show up when the widget is active.  All the <div>s have to go in the function.php for that to work correctly.  I can do a <div> before the widget and a </div> after the widget and then something before and after the title.  If I try to do the h2 tag where it floats above the widget then it is under the logo which is above it.  I cannot add a margin to the logo above it because it won't be needed unless this widget is active.  If the widget isn't active then there would be a weird space.
I took your idea jason1178 and tweaked it a little.....I just had to think outside the "box" and yes the pun is intended...

Here's how I ended up doing it:

Function.php (instead of h2 tags I used a <div>)

//Register White Box
    if (function_exists('register_sidebar')) {
    	register_sidebar(array(
    		'name' => 'White Box',
    		'id'   => 'white-box',
    		'description'   => 'These are widgets in the white box on the sidebar on the homepage.',
    		'before_widget' => '<div id="white-box-content" class="rounded-corners">',
    		'after_widget'  => '</div>',
    		'before_title'  => '<div id="white-box-title" class="widget %2$s">',
    		'after_title'   => '</div>'
    	));
    }	

Open in new window


CSS (I made the <div> for the header float above the box but gave the extra margin to the <div> that made the actual box.  That way, if the widget isn't active it doesn't show the extra space

#white-box-content {width: 217px; padding: 8px; background: #fff; border: #fc4792 5px solid; border-left: #fc4792 5px solid; margin: 50px auto 10px auto;}
#white-box-title {color: #fff; margin: -60px 0 20px 0; font-family: tangerineregular; font-weight:normal; font-size: 36px; text-align:left;}

Open in new window