1. #1
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    25
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Question Unanswered: CSS Styles Not Overriding Sencha's CSS

    Unanswered: CSS Styles Not Overriding Sencha's CSS


    So I'm styling a Sench Touch 2 App and I'm having trouble getting my new CSS to override the sencha-touch.css file.

    I don't have a problem when there isn't a style already existing in Sencha's CSS.

    Here's the order of my file references

    Code:
            <link rel="stylesheet" type="text/css" href="touch2/resources/css-debug/sencha-touch.css">
            
            <!-- Default CSS -->
            <link rel="stylesheet" href="css-default.css" media="screen">
            
            <!-- Retina only CSS -->
            <link rel="stylesheet" href="css-retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">
    
    
            <script type="text/javascript" src="touch2/sencha-touch-debug.js"></script>
            <script type="text/javascript" src="app.js"></script>
    Here's an example of some styling I've been struggling with for buttons in the top toolbar with a custom UI class

    Code:
    /* TOOLBAR BUTTON STYLES */
    
    .x-button-mgpToolbarBtn{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(131,96,2,0.6)), color-stop(99%,rgba(76,50,9,0.6)));
    box-shadow: inset 0 0 .25em #56380c; 
    border: none;
    font-family: 'PacificoRegular';
    font-weight: normal;
    font-style: normal;
    }
    
    .x-button-mgpToolbarBtn .x-button-label{
    color: #dabf98;
    /* If I try to apply label font styles here other than color it doesn't work at all. */
    }
    
    .x-button-pressed.x-button-mgpToolbarBtn{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(131,96,2,0.6)), color-stop(99%,rgba(76,50,9,0.6)));
    box-shadow: inset 0 0 .25em #56380c; 
    border: none;
    }
    The button text is showing up as bold and the original gray background gradient and color would not be replaced by my new CSS. The only way I can get it to work is be deleting the styles from the sench-touch.css file. I feel like that would be bad practice.

    I want to do this properly but I've hit a roadblock.

    (I also want to avoid using SASS and Compass for the time being.)

    If anyone has any direction that would be appreciated!

    Thanks!

    Shayne

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3461
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Using SASS would be the preferred way. You may need to use the !important flag. If any of the styles are set by JavaScript (inspect the DOM and if the style attribute has styles in it, that usually means JavaScript set that style) then that would trump any CSS.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    25
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Default


    Thanks for the reply, Mitchell.

    I have tried the !important flag and that didn't always work for me like in this specific case. Would using SASS give me the ability to trump other styles or does Sencha expect people to alter the sencha-touch.css file then minify it when ready?

    I would think that creating a UI class for different elements would allow you to make use of some defaults yet have your own custom classes to use when you want. The best of both worlds I suppose.

    I guess I'm fine with removing things from Sencha's file but I feel like that's not what the developers were shooting for. I want to keep everything I can...if that makes sense?

    Thanks!

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3461
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Yes. Say if Sencha Touch uses the x-list-item and has some styles in it (as it does). If you use the same CSS selector, the styles you specify could overwrite Sencha Touch's.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    25
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Default


    What it sounds like you're saying is that if I use the general class of a button I get those styles along with whatever I add to my custom UI class (.x-button-mgpToolbarBtn) AND the styles I've added should override the styles of .x-button?

    If that's what you're saying I've had the css written like below in the near past but it didn't make a difference either way.

    .x-button.x-button-mgpToolbarBtn{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(131,96,2,0.6)), color-stop(99%,rgba(76,50,9,0.6)));
    box-shadow: inset 0 0 .25em #56380c;
    border: none;
    font-family: 'PacificoRegular';
    font-weight: normal;
    font-style: normal;
    }

    Am I missing something else?

    Thanks!

  6. #6
    Sencha User ggendre's Avatar
    Join Date
    Feb 2012
    Location
    Lannion, France
    Posts
    24
    Vote Rating
    0
    ggendre is on a distinguished road

      0  

    Default


    you can also specify an id on your main component.
    This will create a div with this same id in the HTML dom,

    Then, there is a chance that if you put this id before your CSS selector, you will override the sencha's default
    Code:
     #myAppId .x-button{
    ...
    //this will override sencha .x-button styles 
    }

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3461
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Using id is not a good idea as you can have collisions real easy.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Sencha User ggendre's Avatar
    Join Date
    Feb 2012
    Location
    Lannion, France
    Posts
    24
    Vote Rating
    0
    ggendre is on a distinguished road

      0  

    Default


    thanks for the advice !

    when you talk about collision, you mean : collisions with the id of other components? something else?
    maybe a class or an id on the body is safer ?

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3461
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you have two components with the same id, you will loose reference to the older one because of the id collision.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Sencha User Trozdol's Avatar
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    25
    Vote Rating
    0
    Trozdol is on a distinguished road

      0  

    Default


    Yeah. The easiest way to remember is that an ID can only be used once on a page. Usually reserved for things like a logo etc.