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:
Here is the code for the page where the widget it:
Here is the function.php code for the widget:
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;}
Here is the code for the page where the widget it:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("White Box") ) : ?>
<?php endif; ?>
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>'
));
}
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.
ASKER
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
ASKER
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>)
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
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>'
));
}
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;}