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 http://codingforums.com/showthread.php?t=199070) 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
    •