Problem overriding one class in layout.css

crossmr · 06-01-2011, 06:29 AM

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?

neo · 06-01-2011, 11:58 AM

.yjsquare.testclass .yjsquare_in{} common css

crossmr · 06-03-2011, 10:06 AM

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.

06-01-2011, 06:29 AM	#1 (permalink)
crossmr Unlicensed Join Date: Apr 2011 Location: Seoul, South Korea Posts: 16	Problem overriding one class in layout.css 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-01-2011, 11:58 AM	#2 (permalink)
neo Join Date: Mar 2005 Location: Clearwater, Florida Posts: 10,409	.yjsquare.testclass .yjsquare_in{} common css __________________ *Joomla beginners guide* \| *Fast Joomla tips and tricks* \| How to install Joomla 1.5 ? How to install Youjoomla Demos Joomla and Wordpress Knowledgebase

06-03-2011, 10:06 AM	#3 (permalink)
crossmr Unlicensed Join Date: Apr 2011 Location: Seoul, South Korea Posts: 16	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
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Hello there! Welcome to Youjoomla Support Forums

Have fun!

Joomla 2.5.1 and 1.7.5 update released: More info

We are ready for Joomla! 2.5: More info

Help us improve our website and get 1 month Free Club Membership More info

Joomla 1.6/1.7 Templates Conversion Tracker: More info

Partners

Our Services

Company Info

Why choose Youjoomla.com?