Over-riding with extra.css

[RobParker]

I've added the following to extra.css to try and override the defaults but it's not working.

/*Showcase*/
    .showcaseItemContainer {
        border: 1px solid @primaryLighterStill;
        border-radius: 5px;
        /*margin: 1em 1em 1em 1em !important;*/
        margin: 3px !important;        
        background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        overflow: hidden; zoom: 1;        
        padding: 5px;        
    }

        .showcaseItemImage {}
        
            .boxModelFixer {
                overflow: hidden; zoom: 1;
                margin-bottom: 10px;
                margin-right: 0px;
                padding: 0px;                
                background-color: @contentBackground;
                border: 1px solid @primaryLighterStill;
                border-radius: 5px;
                text-align: center;
                width:220px;
            }

                .Thumbnail
                {
                    width: 222px;
                    height: 154px;
                    line-height: 112px;
                    display: block;
                    background: @content.background-color;
                    border: 0px solid @primaryLighterStill;
                    text-align: center;
                    vertical-align: middle;
                    float: left;
                }
                
                    .Thumbnail img
                    {
                        max-width: 222px;
                        max-height: 300px;
                        _width: 150px;
                        _height: 100px;
                        padding: 0;
                        margin: 0;
                        vertical-align: middle;
                    }
           
        .showcaseItemInfo {}

            .showcaseItemTitle {
                padding-bottom: 5px;
                overflow: hidden;
                white-space: nowrap;
            }

            .showcaseItemMessage{
                /*padding-bottom: 5px;*/
                height:20px;
                overflow: hidden;
            }

In firebug I see the following:



It seems that it's taking the default values and not showing my edited changes. I assume there's an easier way than marking every one as "important!"?

Cheers

 

[Bob]

You only need to add the individual elements that you want to change. Also, you don't need to add it to extra.css, just edit the css file directly as it belongs to showcase, not xenforo.

 

[RobParker]

Won't the cause problems when it's upgraded in the future?

 

[Bob]

Depends on what it is. IF there is a change in the CSS, yer going to have to revert anyway to make sure all the correct NEW/CHANGED CSS is used and not old css (which is why you should never put a huge chunk like that in extra.

IMO, the best way to do it is to use TMS and edit the Showcase CSS templates directly and only use extra css if its a Core Xenforo CSS Class.