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 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts

    set different widths within single class

    Hi All,

    my next dilemma (following Sidebar problem after adding Page Boxes to functions.php) having created my new page template to include Page Boxes, I want to be able to set a specific width for each individual box rather than a single width for all boxes.

    here's the relevant bit from my css:

    Code:
    #page-box-wrapper {}
     
    	.page-box {
    		width:150px;  
    		float:left;   
    		margin:40px 0px 20px 0px;
    		} 
    		
    		.page-box   img {
    			float:left; 
    			margin:6px 10px 5px 0px; 
    			padding:1px 1px;   
    			background:#EEE;  
    			border:1px solid #CCC;
    			}
    		
    		.page-box h3 {
    			margin-bottom:20px;
    			margin-top:0px;
    			
    			} 
    		
    			.page-box ul li  {
    				margin:0px 0px 5px 0px; 
    				padding:0px 0px 0px 20px; 
    				line-height:25px;   
    				display:block;    
    				list-style-type: none;  
    				font-size:12px;  
    				color:#767676;   
    				background:url(images/widget-list-bg.gif) scroll transparent no-repeat;   
    				background-position:0px 8px;
    				}	
    			
    				.page-box ul li  a {
    					padding:4px 0px; 
    					font-style:italic; 
    					letter-spacing:1px;
    					}
    				
    					.page-box ul li a:hover {
    						border-bottom:1px dotted #767676;
    						}
    						
    					.page-box ul li ul  {
    						margin-top:10px;
    						}
    and, not sure this helps but here's the code from the php:

    Code:
    <div id="page-boxes-wrapper">	
    	
    	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Page Boxes") ) : ?>Default right sidebar stuff here?
    	
    	<?php endif; ?>
    	
    <div style="clear:both"></div><!-- CLEAR THE FLOATS -->
    	
    </div><!-- /page-boxes-wrapper -->
    So rather than have a width of 150px, to have widths of 28%, 28% and 44% or 126px, 126px, 198px.

    Not sure of the best way to approach this...

    Help and thoughts appreciated

    Thank you

  • #2
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I've found a temporary solution by changing the class to:

    Code:
    	.page-box {
    		width:auto;  
    		float:left;   
    		margin:40px 30px 20px 0px;
    		}
    the width auto means the text fits well but not exact as I would like it.

    Is it possible to have a different class for each box within a sidebar plugin?

    Doing something clever with 'before_widget' perhaps?

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ok sorry to keep on posting, here's another solution I came up with:

    I added a class in my css for the wider box and called it page-box2

    Code:
    #page-box-wrapper {}
    
    	.page-box {
    		width:156px;  
    		float:left;   
    		margin:40px 0px 20px 0px;
    		} 
    		
    		.page-box   img {
    			float:left; 
    			margin:6px 10px 5px 0px; 
    			padding:1px 1px;   
    			background:#EEE;  
    			border:1px solid #CCC;
    			}
    		
    		.page-box h3 {
    			margin-bottom:20px;
    			margin-top:0px;
    			
    			} 
    		
    			.page-box ul li  {
    				margin:0px 0px 5px 0px; 
    				padding:0px 0px 0px 20px; 
    				line-height:25px;   
    				display:block;    
    				list-style-type: none;  
    				font-size:12px;  
    				color:#767676;   
    				background:url(images/widget-list-bg.gif) scroll transparent no-repeat;   
    				background-position:0px 8px;
    				}	
    			
    				.page-box ul li  a {
    					padding:4px 0px; 
    					font-style:italic; 
    					letter-spacing:1px;
    					}
    				
    					.page-box ul li a:hover {
    						border-bottom:1px dotted #767676;
    						}
    						
    					.page-box ul li ul  {
    						margin-top:10px;
    						}
    
    	.page-box2 {
    		width:248px;  
    		float:left;   
    		margin:40px 0px 20px 0px;
    		} 
    		
    		.page-box2   img {
    			float:left; 
    			margin:6px 10px 5px 0px; 
    			padding:1px 1px;   
    			background:#EEE;  
    			border:1px solid #CCC;
    			}
    		
    		.page-box2 h3 {
    			margin-bottom:20px;
    			margin-top:0px;
    			
    			} 
    		
    			.page-box2 ul li  {
    				margin:0px 0px 5px 0px; 
    				padding:0px 0px 0px 20px; 
    				line-height:25px;   
    				display:block;    
    				list-style-type: none;  
    				font-size:12px;  
    				color:#767676;   
    				background:url(images/widget-list-bg.gif) scroll transparent no-repeat;   
    				background-position:0px 8px;
    				}	
    			
    				.page-box2 ul li  a {
    					padding:4px 0px; 
    					font-style:italic; 
    					letter-spacing:1px;
    					}
    				
    					.page-box2 ul li a:hover {
    						border-bottom:1px dotted #767676;
    						}
    						
    					.page-box2 ul li ul  {
    						margin-top:10px;
    						}
    I updated functions.php with

    Code:
    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'name' => 'Page Box2',
    'before_widget' => '<div class="page-box2">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
    ));
    and I updated my page template

    Code:
    <div id="page-boxes-wrapper">	
    	
    	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Page Boxes") ) : ?>Default right sidebar stuff here?
    	
    	<?php endif; ?>
    
    	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Page Box2") ) : ?>Default right sidebar stuff here?
    	
    	<?php endif; ?>
    	
    <div style="clear:both"></div><!-- CLEAR THE FLOATS -->
    	
    </div><!-- /page-boxes-wrapper -->
    I still feel a clever solution using 'before_widget' in functions.php to determine which class to use would be neater, but this is good for now.


  •  

    Posting Permissions

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