WordPress.org

1. johnjf
   Member
   Posted 2 years ago #
   

   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

2. johnjf
   Member
   Posted 2 years ago #
   

   Can anyone help me please?

3. alchymyth
   The Sweeper & Moderator
   Posted 2 years ago #
   

   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.

4. johnjf
   Member
   Posted 2 years ago #
   

   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?

5. alchymyth
   The Sweeper & Moderator
   Posted 2 years ago #
   

   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 ;-)

6. johnjf
   Member
   Posted 2 years ago #
   

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

Topic Closed

This topic has been closed to new replies.