Hai, Saya mengalami masalah dengan beberapa kelas css di joomla. Saya memiliki dua div dalam satu modul, satu adalah kelas pembungkus = "pembungkus", yang lainnya adalah kelas konten = "konten". Konten ada di dalam pembungkus. Apa yang saya coba lakukan adalah menargetkan gaya css pada kelas konten. Biasanya saya hanya akan meletakkan .content {info gaya saya} di lembar gaya, tetapi masalahnya adalah bahwa kelas ini digunakan beberapa kali di seluruh halaman. Jadi di backend, Anda dapat menetapkan nama kelas ke modul, jadi saya menyebutnya .testimonials.

Agar saya tidak mengubah semua kelas konten lain di halaman, saya mencoba menargetkannya dengan meletakkan ini:

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

tetapi tidak berhasil, saya tahu Anda dapat melakukan ini dengan div, jadi

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

tetapi pertanyaan saya adalah apakah ini dapat dilakukan dengan kelas?, jika demikian, ada yang salah saat saya mencoba menggunakan yang berikut ini:

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

karena untuk beberapa alasan konten tidak membungkus dan menghilang begitu saja dari halaman di akhir paragraf, jadi saya mencoba memastikan kelas tingkat 1 konten duduk tidak tumpang tindih apa pun, yang aneh adalah bahkan jika saya perbaiki kelas div konten berada hingga 50px itu masih tidak akan membungkus teks, jadi saya tidak yakin apakah saya menargetkannya kan?.

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

HTML yang dibuat Joomla pada dasarnya terlihat seperti ini >>

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

kemudian dibungkus dengan jutaan div lainnya dengan gaya Joomla lama yang bagus.

Saya telah memberikan modul kelas testimonial, jadi akhirnya terlihat seperti:

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

EDIT 3 >>>>>>> OK, ini yang dimuntahkan

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

Inilah yang dilakukannya

Tidak yakin seperti apa HTML itu (itu akan membantu dengan jawaban). Jika itu

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

lalu cukup hapus spasi di css Anda. A la ...

.testimonials.content { css here }

MEMPERBARUI:

Oke, setelah melihat HTML lihat apakah ini berfungsi ...

.testimonials .wrapper .content { css here }

atau hanya

.testimonials .wrapper { css here }

atau

.desc-container .wrapper { css here }

semua 3 harus bekerja.

Saya menggunakan div dan bukan tabel dan saya dapat menargetkan kelas dalam kelas utama, seperti di bawah ini:

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>

Jika Anda ingin memberi gaya "sel" tertentu secara eksklusif, Anda dapat menggunakan sub-kelas lain atau id dari div misalnya:

.main #red {color: red; }

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