Support » Fixing WordPress » Sidebar Titles Help

  • I’m having trouble and I’ve been trying to fix this all day. Bare with me as I’m new to wordpress. I’m trying to create my own theme and came across the problem with my sidebar.

    I’m trying to have one background image for all titles on my sidebar so that when I add a widget the title will go on it automatically without me having to make an image for each title. When I do so the title is on the upper left of the image and I can’t figure out how to align it so the text fits in with the image.

    here’s a link to an image
    http://www.kingfisherwebdev.com/problem.png

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter johnjf

    (@johnjf)

    Can anyone help me please?

    does the widget title have a css class or anything else to identify it with?
    i.e. what is the register_sidebar() code in functions.php?

    have you tried any padding or margins in the widget title’s css?

    (can’t get much html and css from looking at an image …)
    a link to your site showing the widget trouble would help.

    Thread Starter johnjf

    (@johnjf)

    This is what my code looks like. I’m using xampp to make my theme before I upload it to my web host.

    Sidebar.php

    <div id="side_nav">
    	<div class="nav_header">
        <?php if ( !function_exists('dynamic_sidebar')
            || !dynamic_sidebar() ) : ?>
        <h5>Resources</h5>
        </div>
    		<ul>
    			<li><a href="#">Lorem Ipsum</a></li>
        		<li><a href="#">Lorem Ipsum</a></li>
        		<li><a href="#">Lorem Ipsum</a></li>
        		<li><a href="#">Lorem Ipsum</a></li>
        		<li><a href="#">Lorem Ipsum</a></li>
        		<li><a href="#">Lorem Ipsum</a></li>
        		<li><a href="#">Lorem Ipsum</a></li>
    		</ul>
    <?php endif; ?>
    </div><!--End of side_nav-->

    functions.php

    <?php
    if ( function_exists('register_sidebar') )
        register_sidebar(array(
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
    		'after_widget' => '</div>',
            'before_title' => '<div class="nav_header">',
            'after_title' => '</div>',
        ));
    ?>

    the css

    #side_nav {
    	clear: both;
    	float: left;
    	margin: 50px 0 0 10px;
    	padding: 0;
    }
    .nav_header {
    	float: left;
    	background: url("images/nav_header.png") no-repeat;
    	text-align: left;
    	color: #ffffff;
    	width: 200px;
    	height: 50px;
    	margin: 5px auto;
    }

    Hope this helps?

    i would make a few small changes:

    <div id="side_nav">
    	    <?php if ( !function_exists('dynamic_sidebar')
            || !dynamic_sidebar() ) : ?>
        <div class="nav_header">
    <h5>Resources</h5>
        </div>
    		<ul>

    that makes a clear transition between preset output and real widgets;

    'before_title' => '<div class="nav_header"><h5>',
            'after_title' => '</h5></div>',

    that gives you a h5 within your div with the background image, for positioning;

    .nav_header h5 { margin: 5px 10px; } /*adjust this*/

    css for fine positioning the widget title.

    hope it works 😉

    Thread Starter johnjf

    (@johnjf)

    sweet, that was simple lol Thanks so much for the help 😀 it works!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Sidebar Titles Help’ is closed to new replies.