Question

I am using Joomla to create a website at the moment and I am having problems with a certain module getting padding applied to it. The problem is with Joomla you have classes for the modules that I cant seem to override. The layout is as follows :

    <div id="rt-page-surround">
    <div class="rt-container">
    <div class="rt-container-bg">
    <div id="rt-drawer">
    <div id="rt-header">
    <div class="rt-grid-6 rt-alpha">
    <div class="rt-grid-6 rt-omega">
    <div class="thumbnail_scroller">
    <div class="rt-block">
    <div class="module-content">
    <div id="jdv_iscroll122_wrap" class="jdv_iscroll_wrap " style="width: 620px; height: 110px; ">
    <div id="jdv_iscroll122_inner" class="jdv_iscroll_inner horizontally" style="width: 32766px; height: 110px; left: 0px; ">
    </div>

The module I am trying to modify is thumbnail_scroller, the problem is it is getting 15px of padding from rt-block. If I set rt-block to padding:0px this gives the desired affect to thumbnail_scroller but it also applies the zero padding to everything else on the page as the rt-block class is shared with numerous other elements on the page (this is the way the template is coded by the author). What I want to do is apply zero padding to rt-block but only for the thumbnail_scroller module.

I have tried

.thumbnail_scroller {padding:0px !important}

but this seems to do nothing, anyone any ideas on this one ? 🙂

Answer 1

div.thumbnail_scroller div.rt-block {
    padding:0;
}

This specifically targets divs with the rt-block class that are inside a div with the thumbnail_scroller class.