Merhaba Joomla'daki bazı css sınıflarıyla ilgili sorunlar yaşıyorum. Bir modülde iki div'im var, biri sarmalayıcı sınıfı = "sarmalayıcı", diğeri içerik sınıfı = "içerik". İçerik sarmalayıcının içindedir. Yapmaya çalıştığım şey, içerik sınıfında bir css stilini hedeflemek. Genellikle stil sayfasına .content {stil bilgilerim} koyardım, ancak sorun şu ki, bu sınıf sayfa boyunca birkaç kez kullanılıyor. Yani arka uçta, bir modüle bir sınıf adı atayabilirsiniz, bu yüzden bunu .testimonials olarak adlandırdım.

Böylece sayfadaki diğer tüm içerik sınıflarını değiştirmemek için şunu koymaya çalışıyorum:

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

ama çalışmıyor, bunu div'lerle yapabileceğinizi biliyorum, bu yüzden

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

ama sorum şu, bu derslerle yapılabilir mi? Eğer öyleyse, aşağıdakileri kullanmaya çalıştığım için bir şeyler ters gidiyor:

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

bazı nedenlerden dolayı içerik sarılmıyor ve paragrafın sonunda sayfadan kayboluyor, bu yüzden içeriğin oturduğu 1. seviye sınıfın hiçbir şeyle örtüşmediğinden emin olmaya çalışıyorum, garip olan şey düzeltsem bile içeriğin oturduğu div sınıfı 50px'e kadar metne devam etmeyecek, bu yüzden doğru hedeflediğimden emin değilim.

düzenle >>>>>>>>>> ..

HTML Joomla'nın yarattığı temelde şuna benzer >>

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

daha sonra eski Joomla stilinde bir milyon başka div'e sarılır.

Modüle referans sınıfını verdim, bu yüzden şöyle bir şeye benziyor:

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

DÜZENLE 3 >>>>>>> Tamam, tükürdüğü şey bu

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

DÜZENLE 4 >>>>>>

Yaptığı bu

HTML'nin neye benzediğinden emin değilim (bu yanıtlara yardımcı olur). Eğer öyleyse

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

daha sonra css'nizdeki alanı kaldırın. A la ...

.testimonials.content { css here }

GÜNCELLEME:

Tamam, HTML'yi gördükten sonra bunun işe yarayıp yaramadığını görün ...

.testimonials .wrapper .content { css here }

ya da sadece

.testimonials .wrapper { css here }

veya

.desc-container .wrapper { css here }

3'ü de çalışmalıdır.

Tablolar yerine div kullanıyorum ve aşağıdaki gibi ana sınıf içindeki sınıfları hedefleyebiliyorum:

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>

Belirli bir "hücre" yi özel olarak biçimlendirmek istiyorsanız, başka bir alt sınıf veya div kimliğini kullanabilirsiniz, örneğin:

.main #red {renk: kırmızı; }

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