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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Classes Using PHP

    Hi,

    I am setting up a wordpress theme in which sidebar is populated using widget. So, all widgets which comes into sidebar goes through a single CSS class - which is quite fine for text boxes (rendered by widgets). However, when I use any image in another widget in the same sidebar than issues comes up.

    Attached screen shot will better explain the problem.

    So, I am sure that it is because of padding and margin attributes used in the class in PHP code, but issue is how can I apply different class to each of the box rendered by a widget in the same sidebar.

    Following is the CSS, PHP and finally HTML code.
    Code:
    .box{
    	border-radius: 5px; 
    	border:solid 1px #d3d8e0;
    	padding:30px 30px 20px 30px;
    	margin-bottom:10px;
    }
    
    .boxcolor{
    	border-radius: 5px;
    	padding:15px 15px 23px 15px;
    	width:auto;
    	margin-bottom:10px;
    	background-color:#323945;
    }
    .widget-area {
    	-webkit-text-size-adjust: 120%;
    }
    
    *+html .boxcolor{padding:15px 15px 17px 15px; margin-bottom:11px;}
    PHP Code:
    <?php  if ( is_active_sidebar'page-wide-sidebar' ) ) {?>
            <div class="widget-area" id="wide-sidebar">
                <div class="box">
                <?php if ( ! dynamic_sidebar'page-wide-sidebar' ) ) : ?><?php endif; // end general widget area ?>
                </div>
            </div>
    <?php }?>
    Code:
    <div class="widget-area">
    	<div class="box">
            	<ul><li id="widgets-3" class="widget-container"><img src="banner.gif" /></li></ul>
    	</div>
    	<div class="boxcolor">
    		<div class="rightblock">
    		</div>
    		<span class="title-plan"><strong>title</strong><span class="styled1">text line 1</span></span>
    		<ul class="list">
    			<li>text line 2</li>
    			<li>text line 3</li>					
    		</ul>
    
    	</div>
        // repeating code comes here from different other widgets.
    
    </div>
    The box size is same for all boxes in the side bar and image is of exactly fixed-sized as of box size. One padding or margin is applied to image it goes out of the box while the same padding or margin is applied to text it becomes fit within the box.

    Thanks.
    Attached Thumbnails Attached Thumbnails CSS Classes Using PHP-screen-shot.jpg  

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    That's a CSS problem. PHP will not affect the image placement.
    Are you a Help Vampire?

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    24
    Thanks
    1
    Thanked 1 Time in 1 Post
    Usually, <ul> tags have padding and margin CSS atributes set by default. Try adding additional group in CSS that would describe <ul> things. It should be something like that.
    Code:
    ul.something {
    margin: 0px;
    padding: 0px;
    }
    After you did that, check for changes. Maybe they will show you, what you should do next. Good luck, hope it will be helpful for you

    P.S. I've just recognised that you've set <UL> class with text widgets, while image widget <UL> class is not set. So, just do as I said, it shoud really help.
    Last edited by withoutnick; 04-04-2011 at 07:37 PM.

  • #4
    Codeasaurus Rex
    Join Date
    Jun 2008
    Location
    Redmond, WA
    Posts
    659
    Thanks
    31
    Thanked 100 Times in 94 Posts
    I think you'll benefit more from HTML and CSS guidance than PHP programming advice on this topic. Moved from PHP to Client Side -> HTML & CSS.
    Unless otherwise stated, any code posted is most likely untested and may contain syntax errors.
    My posts, comments, code, and suggestions reflect only my personal views.
    Web Portfolio and Code Snippets: http://shanechism.com


  •  

    Tags for this Thread

    Posting Permissions

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