Hola, tengo problemas con algunas clases de CSS en Joomla. Tengo dos divs en un módulo, uno es el contenedor class = "contenedor", el otro es el contenido class = "content". El contenido está dentro de la envoltura. Lo que estoy tratando de hacer es apuntar a un estilo CSS en la clase de contenido. Por lo general, solo pondría .content {my style info} en la hoja de estilo, pero el problema es que esta clase se usa varias veces en toda la página. Entonces, en el backend, puede asignar a un módulo un nombre de clase, así que lo he llamado .testimonials.

Para no alterar todas las demás clases de contenido en la página, estoy tratando de orientarla poniendo esto:

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

pero no funciona, sé que puedes hacer esto con divs, así que

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

pero mi pregunta es ¿se puede hacer esto con las clases ?, si es así, algo va mal ya que estoy tratando de usar lo siguiente:

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

ya que, por alguna razón, el contenido no se ajusta y simplemente desaparece de la página al final del párrafo, así que estoy tratando de asegurarme de que la clase de primer nivel en la que se encuentra el contenido no se superponga con nada, lo extraño es que incluso si lo arreglo la clase div en la que el contenido se encuentra en 50px todavía no envuelve el texto, así que no estoy seguro de si lo estoy apuntando, ¿verdad?

editar >>>>>>>>>>> ..

El html que Joomla está creando básicamente se ve así >>

<div class="wrapper">
<div class="content">SOME CONTENT</div
</div>

luego está envuelto en un millón de otros divs en el buen estilo antiguo de Joomla.

Le he dado al módulo la clase de testimonios, por lo que termina luciendo algo como:

<div class="testimonials">
 <div class="wrapper">
<div class="content">SOME CONTENT</div
</div>
</div>

EDITAR 3 >>>>>>> OK, esto es lo que está escupiendo

<div class="testimonials">
   <div class="key4-block">
      <div class="module-title"><h2 class="title">Client Testimonials</h2></div>
         <div class="key4-module-inner">
            <div class="module-content">                                
               <script type="text/javascript">
                 RokStoriesImage['rokstories-184'].push('');
                 RokStoriesImage['rokstories-184'].push('');
                 RokStoriesImage['rokstories-184'].push('');
            </script>
         <div id="rokstories-184" class="rokstories-layout6 content-left"  >
           <div class="feature-block">        
            <div class="feature-wrapper">
              <div class="feature-container">
                 <div class="feature-story">
                    <div class="image-full" style="float: right">
                        <img src="/sos/" alt="image" />                            
                    </div>
                    <div class="desc-container">
                        <div class="wrapper">                                                        
                           <span class="content"><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 class="feature-story">
                   <div class="image-full" style="float: right">
                      <img src="/sos/" alt="image" />                            
                   </div>
                   <div class="desc-container">        
                      <div class="description">                                                        
                         <span class="feature-desc">
                            <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>

EDITAR 4 >>>>>>

Esto es lo que esta haciendo

No estoy seguro de cómo se ve el HTML (eso ayudaría con las respuestas). Si es

<div class="testimonials content">stuff</div>

luego simplemente elimine el espacio en su css. A la ...

.testimonials.content { css here }

ACTUALIZAR:

Bien, después de ver HTML, mira si esto funciona ...

.testimonials .wrapper .content { css here }

o solo

.testimonials .wrapper { css here }

o

.desc-container .wrapper { css here }

los 3 deberían funcionar.

Uso div en lugar de tablas y puedo apuntar a clases dentro de la clase principal, como se muestra a continuación:

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 class="main">
    <div class="table">
        <div class="row">
            <div class="column left">Swing Over Bed</div>
            <div class="column right">650mm</div>
            <div class="column left">Swing In Gap</div>
            <div class="column right">800mm</div>
        </div>
    </div>
</div>

Si desea diseñar una "celda" en particular exclusivamente, puede usar otra subclase o la identificación del div, por ejemplo:

.main #red {color: rojo; }

<div class="main">
    <div class="table">
        <div class="row">
            <div id="red" class="column left">Swing Over Bed</div>
            <div class="column right">650mm</div>
            <div class="column left">Swing In Gap</div>
            <div class="column right">800mm</div>
        </div>
    </div>
</div>