Hello there! Welcome to Youjoomla Support Forums

We are Web Development Company specializing in Joomla Templates , Joomla Extensions and WordPress Themes development . You are not able to see some forum threads due to your memberhip level. To unlock all forums and special customer support please take few moments to signup . If you are just searching for free joomla templates , or free joomla extension support simply head to our Free Joomla Support forums and open a new thread. Our moderators will help you as soon as possible. To spead up the response time please take few seconds and go over forum rules

Have fun!

Problem overriding one class in layout.css

06-01-2011, 07:29 AM
# 1 (permalink)
crossmr
I have been trying to override one class in one module on yougrids. I've got a module I'm using twice to make a list on the side, and I want to remove the padding to make it look a little nicer. I've tracked this down to exactly one div, the problem is, I can't get at it. I've tried adding a suffix class for the module so that I can address them with some extra code, but the problem is, this one div just won't take the class. I added " testclass" to the module and wound up with this:

Code:

<div class="yjsquare testclass">
<h4>
</h4>
<div class="yjsquare_in">
<ul class="menu testclass">
The problem is, it's yjsquare_in that I need to address.
Both the ul class from the module and the main container yjsquare from the template take the suffix, but the inside container yjsquare_in simply refuses. The module itself doesn't define this class at all.

and the full list of styles being applied to this class are:

Code:

3 x 6
.yjsquare_in {
}
metal.css (line 242)
.yjsquare_in, .yjsquare_yj1 .yjsquare_in, .yjsquare_yj2 .yjsquare_in {
    overflow: hidden;
    padding: 10px;
}
layout.css (line 294)
Inherited fromdiv#leftblock
#leftblock, #midblock, #rightblock, #insetblock, #insetsholder_2t, #insetsholder_2b, #insetsholder_3t, #insetsholder_3b {
    text-align: left;
}
layout.css (line 62)
Inherited fromdiv#holder
#holder, #holder2, #holder3 {
    text-align: center;
}
layout.css (line 52)
Inherited fromdiv#centerbottom
element.style {
    font-size: 12px;
}
#centertop, #centerbottom {
    text-align: left;
}
layout.css (line 16)
Inherited frombody#stylef6
body#stylef1, body#stylef2, body#stylef3, body#stylef4, body#stylef5, body#stylef6, body#stylef7, body#stylef8, body#stylef9, body#stylef10, body#stylef11, body#stylef12, body#stylef13, body#stylef14, body#stylef15, body#stylef16 {
    color: #555555;
}
metal.css (line 15)
#stylef6 {
    font-family: Arial,Helvetica,sans-serif;
}
template.css (line 46)
body {
    text-align: left;
}
fbchat.css (line 5)
body {
    line-height: 18px;
    text-align: center;
}
template.css (line 18)
I need to remove the padding: 10px that I bolded in the code. When I disable it with firebug it looks just as I want, but I'm not sure how I can override this when it won't take the suffix. Template override also doesn't seem to help since the template (from the module) doesn't seem to set this at all, and I don't want to change it for the whole site, only this specific spot.

So does anyone have any ideas how I can get this div to take a unique class on this module or some other way I can override this specifically in this spot and not template wide?
06-03-2011, 11:06 AM
# 3 (permalink)
crossmr
Yes they are, The problem was that .yjsquare_in was missing a bit of PHP code that tells it to take the suffix when passed to it. I added that and I was able to override that section finally.
I'm thinking this should be in the template, but it seems to be missing.

Code:

<?php echo $params->get( 'moduleclass_sfx' ) ?>
this code was missing. It was present on yjsquare, but not on yjsquare_in.
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Powered by vBulletin®
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.

Members Login

Username
Password