Remove and change category-23px-light.png?

[WoodiE]

I've setup a test install of XF 1.0 in order to get accustomed with it and to create a style that fits my current vB site. One thing I'm having an issue with is, when I go to: Style Properties: Forum List > Category Strip

Changing the Text color to anything does nothing to my forum index view. If I change background color and don't specify the background color change but the "category-23px-light.png" is still laid over top of it even though I have nothing in the image field.

I'm assuming if I wanted a different gradient or image for that view I would enter it there, however I don't want any image just a solid color. How do I get XF to remove "category-23px-light.png" as I've told it to in the style properties?

 

[Paul B]

Have you tried background-image: none; ?

 

[WoodiE]

Great!

That fixed the gradient problem. Thanks Brogan!


Now it would be nice if the text color changed when I give it a different value then default.

 

[x4rl]

User firebug there might be some other class over the top.
Nvm ^_^

 

[WoodiE]

Great!

That fixed the gradient problem. Thanks Brogan!


Now it would be nice if the text color changed when I give it a different value then default.

I figured out this last issue, I have to drop down to "Category Strip Title" not "Category Strip".

 

[WoodiE]

I'll be the first to admit I've got some learning to do when it comes to styles on XF, I guess I'm so used to doing things in vB probably isn't helping either.

Take for example borders - default has a top and bottom border.

.nodeList .categoryStrip
{
    font-size: 11px;
color: #6d3f03;
background: #f9d9b0 url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 5px 10px;
margin: 3px auto 0;
border-top: 1px solid #f9d9b0;
border-bottom: 1px solid #f9bc6d;
 
    background: rgb(121, 21, 8) url('/custom/cat_top_bg.gif') repeat-x;
padding: 5px 10px;
margin: 0;
border-bottom-color: #f9bc6d;
border-radius: 5px; -webkit-border-radius:  5px; -moz-border-radius:  5px; -khtml-border-radius:  5px;
min-height: 6px;

}

Even though the style properties have none listed:

Category Strip


Category Strip Title


Category Strip Description


Yet as you see in the code at top there is a border-top and border-bottom.

Sure I could set "none" to top, right, bottom and left border properties and change my background color and/or image as mentioned above to what I want but then you get this horrible mess of a code in CSS:

.nodeList .categoryStrip
{
    font-size: 11px;
color: #6d3f03;
background: #f9d9b0 url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 5px 10px;
margin: 3px auto 0;
border-top: 1px solid #f9d9b0;
border-bottom: 1px solid #f9bc6d;
 
    color: rgb(255, 255, 255);
background: rgb(121, 21, 8) url('/custom/cat_top_bg.gif') repeat-x;
padding: 5px 10px;
margin: 0;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-radius: 5px; -webkit-border-radius:  5px; -moz-border-radius:  5px; -khtml-border-radius:  5px;
min-height: 6px;

}

Notice that "category-23px-light.png" is STILL being listed in the CSS but then over written by my customer image "cat_top_bg.gif" the CSS code is effectively doubled when you make changes to the "default" style. Same goes for the borders, listed for top and bottom then erased when the last set of CSS to none.

Surely there has got to be a better way to actually remove the images and borders w/o having XF add two properties.

What am I missing here?

 

[Paul B]

It's normal for css classes to overwrite others further up the cascade, that's how they have been designed to be used.

Check any complex design and you will see numerous classes being overwritten, several times sometimes.

 

[WoodiE]

Just because it's "common" doesn't mean it's correct. Furthermore I have a hard time believing this type of "coding" is common practice. This is just one single class in a style sheet and already 5-6 properties are being written and overwritten.

Why have:

.nodeList .categoryStrip
{
    font-size: 11px;
color: #6d3f03;
background: #f9d9b0 url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 5px 10px;
margin: 3px auto 0;
border-top: 1px solid #f9d9b0;
border-bottom: 1px solid #f9bc6d;

    color: rgb(255, 255, 255);
background: rgb(121, 21, 8) url('/custom/cat_top_bg.gif') repeat-x;
padding: 5px 10px;
margin: 0;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-radius: 5px; -webkit-border-radius:  5px; -moz-border-radius:  5px; -khtml-border-radius:  5px;
min-height: 6px;

}

When this is MUCH better:

.nodeList .categoryStrip {
    font-size: 11px;
    color: #6d3f03;
    background: rgb(121, 21, 8) url('/custom/cat_top_bg.gif') repeat-x;
    padding: 5px 10px;
    margin: 3px auto 0;
    border-radius: 5px; -webkit-border-radius:  5px; -moz-border-radius:  5px; -khtml-border-radius:  5px;
    min-height: 6px;
}

Not only is it less code, it's easier to read, far less complicated (in the original code even items that wasn't changed was listed twice (ie: padding: 5px 10px and it's FASTER! The larger your CSS is the longer it takes to load, less code is quicker load times for the end user and less bandwidth usage.

This might not be an issue for small sites but large sites, all this stuff adds up. Plus it makes finding CSS issues 10 times easier, what benefit at all does listing padding properties twice with the exact same settings provide the end user or even admin? ZERO.

I'm really hoping I'm over looking something and that XF really isn't handling CSS this poorly.

 

[Paul B]

This is the default css for the above:

.nodeList .categoryStrip
{
    @property "subHeading";
    font-size: 11px;
    color: @secondaryDarker;
    background: @secondaryLighter url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    padding: 5px 10px;
    margin: 3px auto 0;
    border-top: 1px solid @secondaryLighter;
    border-bottom: 1px solid @secondaryLight;
    @property "/subHeading";

    @property "categoryStrip";
    padding: 5px 10px;
    margin: 0;
    border-bottom-color: @subHeading.border-bottom-color;
    border-radius: 5px;
    min-height: 6px;
    @property "/categoryStrip";
}

As you can see there are 2 different style properties in that class: subHeading and categoryStrip.
Hence why there are 2 sets of the same css, but they apply to different elements.

 

[Mike]

The reason this works like this is because the particular location you are dealing with is styled to look like a general sub-heading. The first group of CSS is coming from that style property. The category strip gives you the ability to modify that specific element.

If you don't want the image anywhere (as I would expect in a case like this), then you can remove it from the sub-heading property. If you don't want the image in this particular case (and there are some custom things we do here, though a couple could be removed), then specifying a background image of "none" in the category strip is what you want.

 

[WoodiE]

That doesn't change anything, you've already declared padding: 5px, 10px there is no need to declare it again. Same goes with the border issue, there is no need to declare a top and bottom border style only to then later in the exact same property erase it.

Show me ONE reliable CSS coding resource or book that suggests such madness.

 

[Mike]

As I said, a couple of them could be removed - the padding and border bottom at least. The others do override the defaults.

If you wish, you don't have to use the property system at all. You can edit the CSS fully and directly. The approach taken is designed to handle the vast majority of cases and still allow customizations. If you remove the base property and fold them like you're suggesting, you're undoing that approach.

 

[WoodiE]

Mike,

That was the issue, these type of changes should have been done in the sub-heading property and not in the Category Strip property.

Editing the sub-heading property only, gives cleaner code than what I had before, albeit not perfect as there are classes still with the same values but better than before for sure:

.nodeList .categoryStrip
{
    font-size: 11px;
color: rgb(255, 255, 255);
background: #f9d9b0 url('cat_top_bg.gif') repeat-x top;
padding: 5px 10px;
margin: 3px auto 0;

    padding: 5px 10px;
margin: 0;
border-bottom-color: ;
border-radius: 5px; -webkit-border-radius:  5px; -moz-border-radius:  5px; -khtml-border-radius:  5px;
min-height: 6px;

}

 

[yoghurtfarmer]

Then you lose some flexibility don't you? The redundancies exist as a compromise for easy styling. If you are comfortable with doing everything 100% CSS I'm sure you could come up with something more "efficient" and clean.