[CLOSED] Changes in overriding css styles 2.x to 4.x

  1. #1

    [CLOSED] Changes in overriding css styles 2.x to 4.x

    Since upgrading from 2.x to 4.x many of our css style overrides are not really working. Spacing is off, fonts are not the same, padding is gone. This is an example override that looked fine in 2.x and in 4.x looks completely different.

            a.MainMenuBtn span.x-btn-inner,
            .x-btn-inner-default-toolbar-small {
                color: #15428b;
                font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
                font-size: 1.1em;
                font-weight: bold;
                margin: 0;
                height: 25px;
                padding-left: 16px;
            }
    Click image for larger version. 

Name:	Capture.JPG 
Views:	6 
Size:	50.2 KB 
ID:	24826

    The padding is gone and when I inspect the rendered html, it looks like it is applied but something else is taking precedence and overriding or being applied? I can't really tell. In 2.x if you look at the attached image (from inspect element) the second ".x-btn-inner-default-toolbar-small" is not there. That seems to be what it's using at least the font part.

    Can someone point me to what changed in this regard and what is the proper way to override elements in 4.x as opposed to 2.x

    Thanks.
    Last edited by fabricio.murta; Jan 27, 2017 at 7:04 PM.
  2. #2
    hello @rmelancon!

    The themes changed significantly between Ext.NET 2 to 4, there's no way to tell what changed how. The way to go would be to go without the broken CSS override, then load the page and, with debugger tools / DOM Inspector, adjust the CSS rules back to your liking.

    I can't really tell much of the CSS override you provided without the context where it should show. If you can provide the test case where it worked and where it didn't work (probably the same test case run on v2 and v4, we could help you figure out the override you need.

    At least for the first few CSS overrides, then possibly we can find a pattern of changes or general steps to perform on the upgrade process... Some screenshots of it working and with it broken (maybe pointing the broken visual issues) would help too.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Will do, I just thought there may be something obvious that I was missing. I had read somewhere about some "scopeResetCSS" setting that has changed and thought maybe that had something to do with it. Thanks again, I'm trying to put together a simple sample, but there are several levels of css that are in play and it's tricky to get the right stripped down version to show the problem. Thanks for the help.
  4. #4
    Alright, as I see you created another thread with the sample, right? If so, am I okay to mark this one as closed?
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Yes that's fine.

Similar Threads

  1. Prevent application CSS from overriding Ext.NET CSS
    By raihaniqbal in forum 2.x Help
    Replies: 2
    Last Post: Nov 12, 2014, 10:44 AM
  2. [CLOSED] Overriding the tab close icon click
    By RCM in forum 1.x Premium Help
    Replies: 1
    Last Post: Jun 26, 2012, 4:25 PM
  3. Replies: 3
    Last Post: Aug 06, 2009, 3:06 PM
  4. [CLOSED] Overriding Button Templates
    By UGRev in forum 1.x Premium Help
    Replies: 3
    Last Post: Dec 12, 2008, 1:36 PM
  5. [CLOSED] Overriding a ClientConfig default value
    By jchau in forum 1.x Premium Help
    Replies: 3
    Last Post: Nov 12, 2008, 11:21 AM

Posting Permissions