Salut, j'ai des problèmes avec certaines classes css dans joomla. J'ai deux div dans un module, l'un est le wrapper class = "wrapper", l'autre est le content class = "content". Le contenu est à l'intérieur du wrapper. Ce que j'essaie de faire, c'est de cibler un style css sur la classe de contenu. Habituellement, je mettrais simplement .content {mes informations de style} dans la feuille de style, mais le problème est que cette classe est utilisée plusieurs fois dans la page. Donc, dans le backend, vous pouvez attribuer un nom de classe à un module, j'ai donc appelé celui-ci .testimonials.

Afin de ne pas modifier toutes les autres classes de contenu de la page, j'essaie de la cibler en mettant ceci:

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

mais cela ne fonctionne pas, je sais que vous pouvez le faire avec les divs, donc

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

mais ma question est est-ce que cela peut être fait avec des classes?, si tel est le cas, quelque chose ne va pas car j'essaie d'utiliser ce qui suit:

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

comme pour une raison quelconque, le contenu ne s'enroule pas et disparaît simplement de la page à la fin du paragraphe, j'essaie donc de m'assurer que la classe de premier niveau où se trouve le contenu ne chevauche rien, la chose étrange est même si je corrige la classe div dans laquelle se trouve le contenu à 50px, il n'enveloppera toujours pas le texte, donc je ne suis pas sûr si je le cible correctement?.

éditer >>>>>>>>>> ..

Le html que Joomla crée ressemble essentiellement à ceci >>

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

puis il est enveloppé dans un million d'autres divs dans le bon vieux style Joomla.

J'ai donné au module la classe des témoignages, donc ça finit par ressembler à quelque chose comme:

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

EDIT 3 >>>>>>> OK, c'est ce qu'il crache

<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>

MODIFIER 4 >>>>>>

C'est ce qu'il fait

Je ne sais pas à quoi ressemble le HTML (cela aiderait avec les réponses). Si c'est

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

puis supprimez simplement l'espace dans votre css. À la...

.testimonials.content { css here }

MISE À JOUR:

D'accord, après avoir vu HTML, voyez si cela fonctionne ...

.testimonials .wrapper .content { css here }

ou juste

.testimonials .wrapper { css here }

ou

.desc-container .wrapper { css here }

tous les 3 devraient fonctionner.

J'utilise div au lieu de tables et je suis capable de cibler des classes dans la classe principale, comme ci-dessous:

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 vous souhaitez styliser exclusivement une "cellule" particulière, vous pouvez utiliser une autre sous-classe ou l'id du div, par exemple:

.main #red {couleur: rouge; }

<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>