[CLOSED] Write own css

[pawangyanwali]

I am using Ext.Net 2.2. I want to write my own css to implement in my web application for all the themes separately. I want to write default styles for those controls so that I don't have to implement them by using Cls property. How can I accomplish this one?

[Daniil]

Hi Pawan,

ExtJS has nice guides regarding theming.
http://docs.sencha.com/extjs/4.2.1/#!/guide/theming
http://docs.sencha.com/extjs/4.2.1/#!/video/19159630

I can add that you are not restricted to use SASS or Sencha Cmd. The task is to get a CSS theme file which you can add to your application by setting a ResourceManager's ThemePath property.

You can take the ext-theme-classic-all.css and extnet-all.css files, change them as you need, then combine them into a single file and, finally, you are getting a theme file which you can refer by a ResourceManager's ThemePath.

Hope this helps.

[pawangyanwali]

I am unable to get ThemePath property of ResourceMananger, when I tried to achieve it in this way

Html.X().ResourceManager().ThemePath()

[Daniil]

Yes, it was unavailable, but it has been fixed in the SVN trunk. So, please update or use the following as a workaround.

1. Set up

@Html.X().ResourceManager().Theme(Theme.None)

2. Register a theme CSS file manually.

[pawangyanwali]

Thank You, So much. What I did is I changed Theme to None and placed a css file in my application manually.

Html.X().ResourceManager().Theme(Theme.None)

<link href="~/Resources/css/ext-theme-classic-all.css" rel="stylesheet" />

This is also working ok. But what I really want to accomplish is, I want to write separate css for separate themes like Default, Gray and Access. So when I change theme they get css from their particular theme.


And by the way, icons are not being displayed. What is wrong???

[Daniil]

Thank You, So much. What I did is I changed Theme to None and placed a css file in my application manually.

Html.X().ResourceManager().Theme(Theme.None)

<link href="~/Resources/css/ext-theme-classic-all.css" rel="stylesheet" />

This is also working ok. But what I really want to accomplish is, I want to write separate css for separate themes like Default, Gray and Access. So when I change theme they get css from their particular theme.

You can:

1. Replace the respective files in the Ext.NET sources with your custom files and rebuild the Ext.NET solution.

or

2. Still use Theme="None" and register CSS theme files manually. For example, calling

X.ResourceManager.RegisterClientStyleInclude("myCustomTheme", "url");

in Page_Load. To change a theme you will need to reload the page.

And by the way, icons are not being displayed. What is wrong???

Did you put the "images" folder into "Resources/css"?

[pawangyanwali]

Among two options you have suggested me to implement, I want to implement the first one. I just want to make changes to the existing theme files by modifying css properties. But for this, I am not getting the theme folders. This may look simple question but as I am new to this one, I am unable to find out where the actual theme folders are that contain css files. It would be so much helpful to me if you explain this to me that how it is working?

var themeChange = function (menu, item, e, eOpts) {
    debugger;
    App.direct.GetThemeUrl(item.text, {
        success: function (result) {
            Ext.net.ResourceMgr.setTheme(result);
            var mainPanel = Ext.getCmp("pnlComp");
            mainPanel.items.each(function (el) {
                if (!Ext.isEmpty(el.iframe)) {
                    if (el.getBody().Ext) {
                        Ext.net.ResourceMgr.setTheme(result);
                    }
                }
            });
            mainPanel.doLayout();
        }
    });
};

I have folders of respective themes.

1. ext-theme-access
2. ext-theme-classic
3. ext-theme-gray
4. ext-theme-neptune
5. themes

Each folder has 'images' folder and list of css files except 'themes' folder.

1. ext-theme-<respective-theme-name>-all
2. ext-theme-<respective-theme-name>-all-debug
3. ext-theme-<respective-theme-name>-all-debug-embedded
4. ext-theme-<respective-theme-name>-all-embedded
5. ext-theme-<respective-theme-name>-all-rtl
6. ext-theme-<respective-theme-name>-all-rtl-debug
7. ext-theme-<respective-theme-name>-all-rtl-debug-embedded
8. ext-theme-<respective-theme-name>-all-rtl-embedded

Is it okay if I put those folders inside Resources folder of my Application?

I have another folder named 'Content'. But it has css of jquery.ui.

Please explain me in this one.

[Daniil]

Among two options you have suggested me to implement, I want to implement the first one. I just want to make changes to the existing theme files by modifying css properties. But for this, I am not getting the theme folders. This may look simple question but as I am new to this one, I am unable to find out where the actual theme folders are that contain css files. It would be so much helpful to me if you explain this to me that how it is working?

var themeChange = function (menu, item, e, eOpts) {
    debugger;
    App.direct.GetThemeUrl(item.text, {
        success: function (result) {
            Ext.net.ResourceMgr.setTheme(result);
            var mainPanel = Ext.getCmp("pnlComp");
            mainPanel.items.each(function (el) {
                if (!Ext.isEmpty(el.iframe)) {
                    if (el.getBody().Ext) {
                        Ext.net.ResourceMgr.setTheme(result);
                    }
                }
            });
            mainPanel.doLayout();
        }
    });
};

It works due to the ResourceMgr's setTheme client side method. It takes a theme's URL and name and can change the theme on the fly. But it doesn't work for the Neptune theme. To change to or from the Neptune theme, page reload is required.

ResourceMgr's setTheme

setTheme : function (url, name, rtl, debug) {
    var lowerUrl,
        path = this.cdnPath || this.resourcePath,
        ss,
        suffix,
        html;

    if(this.theme == "neptune" || name == "neptune")
    {
        return;
    }

    url = url || "";
    lowerUrl = url.toLowerCase();
    suffix = (rtl ? "-rtl" : "") + (debug ? "-debug" : "");
            
    if (Ext.isEmpty(lowerUrl) || lowerUrl == "blue" || lowerUrl == "default" || lowerUrl == "classic") {
        url = path ? (path + "/extjs/resources/ext-theme-classic/ext-theme-classic-all" + suffix + ".css") : "~/extjs/resources/ext_theme_classic/ext-theme-classic-all" + suffix +"-embedded-css/ext.axd";
        name = "classic";
    }
    else if (lowerUrl == "gray") {
        url = path ? (path + "/extjs/resources/ext-theme-gray/ext-theme-gray-all" + suffix + ".css") : "~/extjs/resources/ext_theme_gray/ext-theme-gray-all" + suffix +"-embedded-css/ext.axd";
        name = "gray";
    }
    else if (lowerUrl == "access") {
        url = path ? (path + "/extjs/resources/ext-theme-access/ext-theme-access-all" + suffix + ".css") : "~/extjs/resources/ext_theme_gray/ext-theme-access-all" + suffix +"-embedded-css/ext.axd";
        name = "access";
    }
            
    url = this.resolveUrl(url);
    html = document.body.parentNode;

    if (this.theme) {
        Ext.fly(html).removeCls("x-theme-" + this.theme);
    }

    if (name) {
        this.theme = name;
        Ext.fly(html).addCls("x-theme-" + this.theme);
    }

    //Ext.util.CSS.swapStyleSheet("ext-theme", url);
    //Ext.util.CSS.removeStyleSheet(id);
    ss = document.createElement("link");
    ss.setAttribute("rel", "stylesheet");
    ss.setAttribute("type", "text/css");
    ss.setAttribute("id", "ext-theme");
    ss.setAttribute("href", url);
    document.getElementsByTagName("head")[0].replaceChild(ss, document.getElementById("ext-theme"));
}

Is it okay if I put those folders inside Resources folder of my Application?

Well, you can, but you will need to set up Theme="None" (or RenderStyles="None") and manage the CSS resources manually.

[pawangyanwali]

Thank you so much for explaining this so briefly to me.

When I tried to run through this code,

var themeChange = function (menu, item, e, eOpts) {
    debugger;
    App.direct.GetThemeUrl(item.text, {
        success: function (result) {
            debugger;
            Ext.net.ResourceMgr.setTheme(result);
            var mainPanel = Ext.getCmp("pnlComp");
            mainPanel.items.each(function (el) {
                if (!Ext.isEmpty(el.iframe)) {
                    if (el.getBody().Ext) {
                        Ext.net.ResourceMgr.setTheme(result);
                    }
                }
            });
            mainPanel.doLayout();
        },
        failure: function (response) {
            alert('test');
        }
    });
};

the

App.direct.GetThemeUrl(item.text, {

is sending me the failure result. Can you please explain this to me? here item.text returns the name of the theme I selected from the menu item.

And after analyzing this code :

if (Ext.isEmpty(lowerUrl) || lowerUrl == "blue" || lowerUrl == "default" || lowerUrl == "classic") {
        url = path ? (path + "/extjs/resources/ext-theme-classic/ext-theme-classic-all" + suffix + ".css") : "~/extjs/resources/ext_theme_classic/ext-theme-classic-all" + suffix +"-embedded-css/ext.axd";
        name = "classic";
    }

What I understood is , if it gets the css files of the selected theme, it will load the file from application otherwise it will load from ext.axd.
So I put all the theme folders inside extjs/resources folder in my application. So that it can get the css files. If I can make it work, then my problem would be solved.

[Daniil]

the

App.direct.GetThemeUrl(item.text, {

is sending me the failure result.

Are you using this inside the GetThemeUrl DirectMethod?

this.ResourceManager1.GetThemeUrl(...);

If so, it works only with the default themes and its default URLs (embedded URLs). So, I think you should not use the GetThemeUrl method in your scenario.

I think you could try to pass a non-embedded URL into the setTheme method referring the place where your custom themes are.