[CLOSED] Buttons, and Custom CSS design guidelies

  1. #1

    [CLOSED] Buttons, and Custom CSS design guidelies

    We’re customizing the style of the Buttons by basically flattening and setting a background color.

    However, in IE8/9 we’ve seen that buttons are rendered using a <table> instead of <span>, and in order to render rounded corners there are background images the child elements of the table itself…

    Click image for larger version. 

Name:	button_sample.png 
Views:	106 
Size:	2.0 KB 
ID:	24895

    In the image above, the button is with a gray background, however in Chrome we see it with orange background (which is our configured style override).

    In our case, we would like to change the style of the buttons primarily to “background color” and “padding” styles.

    We would like to know your point of view and suggestion on the following requirements.

    FIRST REQUIREMENT: We need to reset the styles defined by ExtJS to the buttons.

    Currently we’re resetting background-image and backgroun-color of all the classes of this kind (x-btn-default-small-tr, … -tl, … ml… ).

    This way we’re skipping background images from being applied:

    For example, we’re specifying this override:

    body.x-nbr a.x-btn-over .x-btn-default-small-mr {
        background-image: none;
        background-color: transparent;
    }
    • We’re also taking advantage of the x-nbr/x-nlg classes, that are added to the body to limit the rules only to buttons rendered with <table> element.
    (x-nbr = no border radius, x-nlg = no linear gradient, https://forums.ext.net/showthread.ph...erent-browsers)

    • We’re using the same technique for all button statuses (eg. overriding the classes also for x-btn-over, x-btn-focus, x-btn-pressed).

    Is this approach correct? Is there a simpler way remove the background images added to the buttons somehow?

    SECOND REQUIREMENT: Make sure that our specified style isn’t overridden by ExtJS base styles for IE 8/9

    We’re only defining custom styles for buttons directly for the most external element of the button (.x-btn).
    In order to make our styles work with IE8 and 9 we’re currently required to define it with !important keyword, since there is a base ExtJS class that enforces the background color as “transparent”:

    Click image for larger version. 

Name:	styles.png 
Views:	124 
Size:	10.8 KB 
ID:	24896

    Our override:

    body.x-nbr a.x-btn {
        padding: 6px 12px !important;
        background-color: #E28B00 !important;
    }

    Is there another way to avoid this issue from your knowledge?

    THANK YOU FOR YOUR VALUABLE SUPPORT
    Last edited by fabricio.murta; May 12, 2017 at 11:46 PM.
  2. #2
    Hello @adrianot!

    First requirement (best practices for styling) answer:
    By what you explained it seems this is the most objective and simple way to apply CSS overrides on Ext.NET themes. You don't need to fiddle with the themes structure, nor merge changes nor rebuild the code every CSS change you do.

    You can always follow the CSS hierarchy to find which rule is best to override with your customizations to reduce the amount of CSS classes you override, and you can also give the components custom CSS (either specifying directly on the components or setting on a container's Defaults so that everything inside it gets the custom CSS class), for example, with the BaseCls or Cls config options (component properties).

    So it is hard to just say which one is best in all situations. It seems in your case -- who wants to restyle any buttons no matter what -- the approach of just overriding ExtJS classes is best. But if you ever think on having exceptions to the rules, then you might consider giving the custom components also custom CSS classes.

    Second requirement (ie9 different CSS rules) answer:
    Well, I copied the first style block you provided to a clean example on Ext.NET 3.3.0 but I couldn't see any difference in the resulting button comparing to a non-styled button. Maybe a runnable test case, in which we can reproduce this styling issue when we switch between browsers, could help us have an opinion to share with you about how to best deal with that.

    Hope the first part of the response gives you a good feedback, and looking forward to additional information so we can provide a feedback about the IE8/9 issue!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    An additional thing about IE8 and 9 compatibility with Ext.NET -- which follows ExtJS requirements:
    - ExtJS - supported browsers

    Notice version 5.x of ExtJS (which comes bundled to Ext.NET 3) has a strict DOCTYPE requirement for compatibility with IE8 and IE9.

    And as for what DOCTYPE to use, it would be covered here: ExtJS FAQ - What Doctype to use?

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hello @adrianot!

    Been some time since we last replied you here and still no feedback. Did the posts above help you at all, or do you need more assistance e.g. something not well explained or that you could use more elaboration?..

    We may mark this thread as closed if you don't post a follow-up in 7+ days from now but don't worry, as even after we mark it as closed, you will still be able to post follow-ups if you feel the need and availability to.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Custom css design
    By shaileshsakaria in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 16, 2013, 3:50 PM
  2. [1.0] Adding custom buttons to HtmlEditor
    By olakara in forum 1.x Help
    Replies: 2
    Last Post: Apr 19, 2010, 7:11 AM
  3. Custom Paging - Simple Next/Prev buttons
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: May 22, 2009, 3:10 PM
  4. Custom Paging - Simple Next/Prev buttons
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Apr 23, 2009, 12:15 AM
  5. Image buttons / Custom built buttons
    By conman in forum 1.x Help
    Replies: 2
    Last Post: Jul 15, 2008, 11:01 AM

Posting Permissions