Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts

    Help with putting title text

    Hey guys its been awhile since i been around since with my new job and all (truck driver) I started messing around with websites again but forgot all the tricks lol.

    the issue im having is with wordpress side bar the widget title needs to be on top of the header portion but, it left a space. now if i try to do it a different way the background of the side bar overloads the header so u get the header portion correct but then it looks like the error in the middle block which i left uncorrected for visual reference.

    Edit I changed it back to the same way the middle is right now maybe theres something that can be done in the CSS or the Basic HTML to fix my Issue

    anyway heres the link to the toy site hope someone can help http://pitbullmean.gegahost.net

    Code:
    /* -------------------------------------
    #sidebar
    ------------------------------------- */
    #sidebarfooter 
    { 	background: url(images/right_bottom.png) no-repeat;
    	height: 36px;
    	width: 338px;
    	
    }
    
    #sidebar
    {
    	float:right;
    	margin-right: 22px;
    	color: red;
    	width:338px;
    }
    .sidebar {
    background: url(images/right_bg.png) repeat-y;
    }
    
    #sidebar h2
    {
    	background: url(images/right_top.png) no-repeat;
    	padding:7px 10px 2px 7px;
    	display:block;
    	width:338px;
    	height:49px;
    	font-weight:normal;
    	color:#fff;
    
    }
    Code:
    <div id="sidebar">
    		<div class="sidebar"><ul>
    			<?php 	/* Widgetized sidebar, if you have the plugin installed. */
    					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    
                <li id="search" class="widget widget_search">			
                	<?php include (TEMPLATEPATH . '/searchform.php'); ?>
    			</li>
    
    			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
    			<li><h2>Author</h2>
    			<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
    			</li>
    			-->
    
    			<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
    
    			<li><h2>Archives</h2>
    				<ul>
    				<?php wp_get_archives('type=monthly'); ?>
    				</ul>
    			</li>
    
    			<?php wp_list_categories('show_count=0&title_li=<h2>Categories</h2>'); ?>
    
    			<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
    				<?php wp_list_bookmarks(); ?>
    
    				<?php } ?>
    			
    			<?php endif; ?>
    		</ul></div>
    <div id="sidebarfooter"></div>
    	</div>
    Last edited by PitbullMean; 06-12-2012 at 10:56 PM. Reason: Added coding
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Anyone willing to help?
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    the issue im having is with wordpress side bar the widget title needs to be on top of the header portion but, it left a space.
    Could you make a rough sketch of your desired output?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    searched your code for several times, looks like no problem. sorry...

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    The desired out look is just a block with the corners chopped off. But some reason the top of the block is throwing me the horns lol
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The background image on #sidebar is showing because the background on #sidebar h2 is set to transparent (giving you the 'horns')- set it to black and you're almost there.
    However, then the background image isn't long enough on either side - so you could just make it longer, or adjust the height and padding:

    Code:
    #sidebar h2 {
        background: url("images/right_top.png") no-repeat scroll 0 0 black;
        color: #FFFFFF;
        display: block;
        font-weight: normal;
        /*height: 49px*;/
        padding: 7px 10px 4px 7px;
        width: 338px;
    }

  • #7
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    hey SB,

    The background isnt black i just accidentally removed the background image from the FTP. If someone can take a look again that would be great
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #8
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Now i started to fix the left block but then i had a the mysterious gap on the image so i added a float to it to fix the issue which it did but then the horns are on the left block. But If i remove the float i get no horns but a gap at the bottom of the top of the block bg abduraooft HELP!! lol. I always got awesome help from you. if u need access to my wordpress site just let me know.

    EDIT, I Got rid of the horns Now I just need to find out a way to get rid of the spaces between the header and footer of the block
    http://pitbullmean.gegahost.net/
    Last edited by PitbullMean; 06-13-2012 at 10:54 PM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •