View Full Version : CSS Classes Using PHP

04-04-2011, 02:45 PM

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.

border-radius: 5px;
border:solid 1px #d3d8e0;
padding:30px 30px 20px 30px;

border-radius: 5px;
padding:15px 15px 23px 15px;
.widget-area {
-webkit-text-size-adjust: 120%;

*+html .boxcolor{padding:15px 15px 17px 15px; margin-bottom:11px;}

<?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 ?>
<?php }?>

<div class="widget-area">
<div class="box">
<ul><li id="widgets-3" class="widget-container"><img src="banner.gif" /></li></ul>
<div class="boxcolor">
<div class="rightblock">
<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>

// repeating code comes here from different other widgets.


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.


04-04-2011, 03:54 PM
That's a CSS problem. PHP will not affect the image placement.

04-04-2011, 07:33 PM
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.

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.

04-04-2011, 08:16 PM
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.