Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Over-riding with extra.css

Discussion in 'Showcase Support' started by RobParker, Jan 24, 2013.

  1. RobParker

    RobParker Member SC Premium Pickem Sportsbook

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

        .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: 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;
                    /*padding-bottom: 5px;*/
                    overflow: hidden;

    In firebug I see the following:

    Screen Shot 2013-01-24 at 20.39.41.png

    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!"?

  2. Bob

    Bob Developer Staff Member

    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.
  3. RobParker

    RobParker Member SC Premium Pickem Sportsbook

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

    Bob Developer Staff Member

    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.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.