1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    102
    Vote Rating
    0
    qbert65536 is on a distinguished road

      0  

    Default Slate and Grey themes

    Slate and Grey themes


    How do I set the CSS to slate or grey in my own applications ?

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Location
    Maryville, IL, US
    Posts
    288
    Vote Rating
    0
    httpdotcom is on a distinguished road

      0  

    Default


    download and install theme into:
    Code:
    /path/to/extjs/resources/css/xtheme-[themename].css
    /path/to/extjs/resources/images/[themename]/
    reference stylesheet in your <head> block:
    Code:
    <link rel="stylesheet" type="text/css" href="/path/to/extjs/resources/css/xtheme-[themename].css" />

  3. #3
    Ext JS Premium Member jadrake75's Avatar
    Join Date
    Sep 2008
    Posts
    108
    Vote Rating
    4
    jadrake75 is on a distinguished road

      0  

    Default


    If you are using a theme selector you also need to remember to inherit the Themes in your main gwt.xml file

    Code:
     <inherits name='com.extjs.gxt.themes.Themes'/>
    If you are using eclipse (or another environment) make sure they are copied to the war folder. I use an ant build script to copy it over from my system's GXT install location.

  4. #4
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    102
    Vote Rating
    0
    qbert65536 is on a distinguished road

      0  

    Default


    Ok I've included that inheritance, and added a ThemeSelector widget, but looking at the GWT logs I'm seeing this warning.

    [WARN] 404 - GET /gxt/css/gxt-gray.css (127.0.0.1) 1406 bytes


    And nothing changes it's still the blue theme. Do I need to tell it where to look somehow ?

  5. #5
    Sencha User
    Join Date
    Feb 2009
    Posts
    107
    Vote Rating
    0
    marman is on a distinguished road

      0  

    Default


    you need to put that stylesheet at that location, or if you are linking it from your html, point it to the correct path

  6. #6
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
    Arno.Nyhm is on a distinguished road

      0  

    Default


    if you get a 404 then your path to your css is wrong. check the path!
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  7. #7
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    102
    Vote Rating
    0
    qbert65536 is on a distinguished road

      0  

    Default


    How do I tell the ThemeSelector widget where to look for CSS ?

  8. #8
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
    Arno.Nyhm is on a distinguished road

      1  

    Default


    Quote Originally Posted by qbert65536 View Post
    How do I tell the ThemeSelector widget where to look for CSS ?
    just look inside the ThemeSelector. they got it from the ThemeManager.

    and if you search for ThemeManager in the source ZIP file then you find this snippet:

    PHP Code:
    ThemeManager.register(Slate.SLATE); 
    and the Slate theme have this constructor:

    PHP Code:
      public Slate() {
        
    super("slate""Slate""gxt/themes/slate/css/xtheme-slate.css");
      } 
    and if you look in the Slates super class Theme then you see this possible path:

    PHP Code:
        BLUE = new Theme("blue"GXT.MESSAGES.themeSelector_blueTheme(), "gxt-all.css");
        
    GRAY = new Theme("gray"GXT.MESSAGES.themeSelector_grayTheme(), "gxt/css/gxt-gray.css"); 
    if you got it working with gwt-all.css then you have to place your css in the given subfolders.
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  9. #9
    Sencha User
    Join Date
    Dec 2013
    Posts
    1
    Vote Rating
    0
    GNainar is on a distinguished road

      0  

    Default


    Though Ext.util.CSS.swapStyleSheet will work, It has few drawbacks:

    1. It takes more time to render the page with new CSS theme.
    2. While switching between themes, your page will be out of any css for a while. That will make the page look bad (broken and plain).
    3. Unnecessary scrollbars will appear on the screen.

    I overcame these by using Javascript ways..

    Here,

    1. Include all the CSS files in your HTML file.
    HTML Code:
    <link rel="stylesheet" id="theme1" type="text/css" href="../Theme1.css" />
    <link rel="stylesheet" id="theme2" type="text/css" href="../Theme2.css" />
    2. Disable all the themes except one you want as default.
    HTML Code:
    document.getElementById('theme1').disabled = true;
    document.getElementById('theme2').disabled = false;
    Now the page will be loaded with 'theme2'.

    3. If you want to switch the theme. Do the vice versa of the above..
    HTML Code:
    document.getElementById('theme1').disabled = false;
    document.getElementById('theme2').disabled = true;
    In this way, the switching will be real fast. Since we have loaded all the css file initially. It will not ask the server for new theme everytime.

    It worked for me very well.