Hi I am having problems with some css classes in joomla. I have two divs in a module, one is the wrapper, the other is the content . Content is inside wrapper. What I am trying to do is target a css style on the content class. Usually I would just put .content {my style info} in the style sheet, but the problem is that this class is used several times throughout the page. So in the backend, you can assign a module a class name, so I have called this one .testimonials .

So that I dont alter all the other content classes on the page I am trying to target it by putting this :

.testimonials .content {my style info I am trying to apply} 

but it is not working, I know you can do this with divs, so

#testimonials .content {my style info I am trying to apply} 

but my question is can this be done with classes ?, if so something is going wrong as I am trying to use the following :

.testimonials .content {font-size:12px; width:300px !important;}

as for some reason the content is not wrapping and just vanishes off the page at the end of the paragraph, so I am trying to make sure the 1st level class the content is sitting is not overlapping anything, the odd thing is even if I fix the div class the content sits in to 50px it still wont wrap the text, so I am not sure if I am targeting it right ?.

edit >>>>>>>>>>..

The html Joomla is creating basically looks like this >>

<div>
<div>SOME CONTENT</div>
</div>

then it is wrapped in a million other divs in the good old Joomla style.

I have given the module the class of testimonials, so it ends up looking something like :

<div> <div> <div>SOME CONTENT</div> </div>
</div>

EDIT 3 >>>>>>> OK, this is what it is spitting out

<div> <div> <div><h2>Client Testimonials</h2></div> <div> <div> <script type="text/javascript"> RokStoriesImage['rokstories-184'].push(''); RokStoriesImage['rokstories-184'].push(''); RokStoriesImage['rokstories-184'].push(''); </script> <div > <div> <div> <div> <div> <div> <img src="/sos/" alt="image" /> </div> <div> <div> <span><p>Arrived in under 30 mins and got my pride and joy home in one piece, the day it conked out on me.</p> <p>- Mr A Another</p></span> </div> </div> </div> <div> <div> <img src="/sos/" alt="image" /> </div> <div> <div> <span> <p>Great Service ! , SOS came to the rescue me in no time at all and made my day.</p> <p>- a customer</p> </span> </div> </div> </div> </div> </div> </div> </div>

EDIT 4 >>>>>>

This is what it is doing

3 Answers

Not certain what the HTML looks like (that would help with answers). If it's

<div>stuff</div>

then simply remove the space in your css. A la...

.testimonials.content { css here }

UPDATE:

Okay, after seeing HTML see if this works...

.testimonials .wrapper .content { css here }

or just

.testimonials .wrapper { css here }

or

.desc-container .wrapper { css here }

all 3 should work.

I use div instead of tables and am able to target classes within the main class, as below:

CSS

.main { .width: 800px; .margin: 0 auto; .text-align: center;
}
.main .table { width: 80%;
}
.main .row { / ***something ***/
}
.main .column { font-size: 14px; display: inline-block;
}
.main .left { width: 140px; margin-right: 5px; font-size: 12px;
}
.main .right { width: auto; margin-right: 20px; color: #fff; font-size: 13px; font-weight: normal;
}

HTML

<div> <div> <div> <div>Swing Over Bed</div> <div>650mm</div> <div>Swing In Gap</div> <div>800mm</div> </div> </div>
</div>

If you want to style a particular "cell" exclusively you can use another sub-class or the id of the div e.g:

.main #red { color: red; }

<div> <div> <div> <div>Swing Over Bed</div> <div>650mm</div> <div>Swing In Gap</div> <div>800mm</div> </div> </div>
</div>

.parentClass { background:green; padding:20px:
}
.parentClass>.childClass { background:pink; padding:10px; margin:10px;
}

<div> Donec a sem pharetra, ultricies ipsum id <div> Lorem ipsum dolor sit amet consectetur </div> Donec a sem pharetra, ultricies ipsum id
</div>