Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 535
  • Last Modified:

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

0
divahomemaker
Asked:
divahomemaker
  • 3
  • 2
1 Solution
 
Jason C. LevineNo oneCommented:
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.
0
 
divahomemakerAuthor Commented:
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: final version
0
 
Jason C. LevineNo oneCommented:
Okay, there are two better ways to do that.

The first is to have a div within the div.  The outer widget div is black background and no borders.  Then the title, then an inner div style to white background with the rounded pink border.

The second is to style the h2 tag so it floats above and outside the border.
0
 
divahomemakerAuthor Commented:
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.
0
 
divahomemakerAuthor Commented:
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

0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now