Hallo, ich habe Probleme mit einigen CSS-Klassen in Joomla. Ich habe zwei Divs in einem Modul, einer ist der Wrapper class = "wrapper", der andere ist der content class = "content". Der Inhalt befindet sich im Wrapper. Ich versuche, einen CSS-Stil für die Inhaltsklasse festzulegen. Normalerweise würde ich einfach .content {my style info} in das Stylesheet einfügen, aber das Problem ist, dass diese Klasse auf der gesamten Seite mehrmals verwendet wird. Im Backend können Sie einem Modul einen Klassennamen zuweisen, daher habe ich dieses als .testimonials bezeichnet.

Damit ich nicht alle anderen Inhaltsklassen auf der Seite ändere, versuche ich, darauf zu zielen, indem ich Folgendes eingebe:

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

aber es funktioniert nicht, ich weiß, dass du das mit divs machen kannst, also

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

Aber meine Frage ist, ob dies mit Klassen gemacht werden kann. Wenn ja, läuft etwas schief, da ich versuche, Folgendes zu verwenden:

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

Da der Inhalt aus irgendeinem Grund nicht umbrochen wird und nur am Ende des Absatzes von der Seite verschwindet, versuche ich sicherzustellen, dass die Klasse der ersten Ebene, in der sich der Inhalt befindet, nichts überlappt. Das Seltsame ist, selbst wenn ich das Problem behebe In der Div-Klasse, in der sich der Inhalt befindet, wird der Text immer noch nicht umbrochen, sodass ich nicht sicher bin, ob ich ihn als Ziel habe, oder?

bearbeiten >>>>>>>>>> ..

Das HTML, das Joomla erstellt, sieht im Grunde so aus >>

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

dann wird es in eine Million anderer Divs im guten alten Joomla-Stil eingewickelt.

Ich habe dem Modul die Klasse der Testimonials gegeben, so dass es ungefähr so ​​aussieht:

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

EDIT 3 >>>>>>> OK, das ist es, was es ausspuckt

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

EDIT 4 >>>>>>

Das ist es, was es tut

Nicht sicher, wie der HTML-Code aussieht (das würde bei Antworten helfen). Wenn es

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

dann entfernen Sie einfach den Platz in Ihrem CSS. A la...

.testimonials.content { css here }

AKTUALISIEREN:

Okay, nachdem Sie HTML gesehen haben, sehen Sie, ob dies funktioniert ...

.testimonials .wrapper .content { css here }

oder nur

.testimonials .wrapper { css here }

oder

.desc-container .wrapper { css here }

Alle 3 sollten funktionieren.

Ich verwende div anstelle von Tabellen und kann Klassen innerhalb der Hauptklasse wie folgt ansprechen:

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>

Wenn Sie eine bestimmte "Zelle" ausschließlich formatieren möchten, können Sie eine andere Unterklasse oder die ID des div verwenden, z.

.main #red {Farbe: rot; }}

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