PDA

View Full Version : [CLOSED] Write own css



pawangyanwali
Jun 02, 2013, 10:13 AM
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
Jun 03, 2013, 4:26 AM
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
Jun 03, 2013, 11:23 AM
I am unable to get ThemePath property of ResourceMananger, when I tried to achieve it in this way



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

Daniil
Jun 03, 2013, 12:32 PM
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
Jun 04, 2013, 4:29 AM
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
Jun 04, 2013, 8:56 AM
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
Jun 05, 2013, 4:38 AM
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.

ext-theme-access
ext-theme-classic
ext-theme-gray
ext-theme-neptune
themes


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

ext-theme-<respective-theme-name>-all
ext-theme-<respective-theme-name>-all-debug
ext-theme-<respective-theme-name>-all-debug-embedded
ext-theme-<respective-theme-name>-all-embedded
ext-theme-<respective-theme-name>-all-rtl
ext-theme-<respective-theme-name>-all-rtl-debug
ext-theme-<respective-theme-name>-all-rtl-debug-embedded
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
Jun 05, 2013, 5:46 AM
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
Jun 05, 2013, 7:18 AM
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
Jun 05, 2013, 12:21 PM
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.

pawangyanwali
Jun 06, 2013, 3:46 AM
Actually this is how I am changing my theme.

View.


@Html.X().MenuItem()
.Text(ViewBag.GetLabelText(ResourceLabelConstants. LBL_THEME_TEXT))
.Icon(Icon.Paintcan)
.Menu((@Html.X().Menu()
.Items(mi =>
{
mi.Add(Html.X().CheckMenuItem()
.Text("Default")
.Group("theme")
.Checked(true)
);
mi.Add(Html.X().CheckMenuItem()
.Text("Gray")
.Group("theme")

);
mi.Add(Html.X().CheckMenuItem()
.Text("Access")
.Group("theme")

);

})
.Listeners(l =>
{
l.Click.Fn = "themeChange";
})
))


Here is the javascript 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');
}
});
};


My question is how is it getting the theme and resources though it is sending me the failure result .

I have to accomplish this through javascript because I can't perform page reload when user changes theme.

And can you please provide me guideline for this?


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

Daniil
Jun 06, 2013, 5:30 AM
How does the GetThemeUrl look?


I have to accomplish this through javascript because I can't perform page reload when user changes theme.

Please note that you won't be able to switch between Neptune and "classic" (blue, gray, access) themes without page reload. But it is possible to switch between "classic" themes. So, if you don't need the Neptune theme, you are on the right way.


And can you please provide me guideline for this?



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



Well, please just try to pass your URL to the setTheme method.

Ext.net.ResourceManager.setTheme("your custom URL to the gray theme", "gray");

pawangyanwali
Jun 06, 2013, 7:15 AM
My javascript file is inside
Resources>js>main.js
and my theme files are in
extjs>resources>ext-theme-gray.

When I tried to implement your code,



var themeChange = function (menu, item, e, eOpts) {
debugger;
Ext.net.ResourceManager.setTheme("../../extjs/resources/ext-theme-gray/", "gray");
};

It gives me following error:

Unable to get value of the property 'setTheme': object is null or undefined.

I tried this one too.


var themeChange = function (menu, item, e, eOpts) {
debugger;
Ext.net.ResourceManager.setTheme("../../extjs/resources/ext-theme-gray/ext-theme-gray-all-rtl-debug-embedded.css", "gray");
};

But generated error.


What Am I missing? Do I have to set Theme.None in my view???

I have tried setting Theme.None too.

But it messes up my view and MenuItem is not shown.

Here what I have understood is by setting Theme to None, I am telling ext.net that I am using my own custom theme.

Daniil
Jun 06, 2013, 7:39 AM
Sorry, it should be:

Ext.net.ResourceMgr.setTheme("your custom URL to the gray theme", "gray");

ResourceManager => ResourceMgr

pawangyanwali
Jun 06, 2013, 8:30 AM
Thank You so much Daniil.It worked as I have wanted.

Now just to make missing gif icons visible.

Daniil
Jun 06, 2013, 9:52 AM
Now just to make missing gif icons visible.

Please clarify are you expecting our assistance on this?

Daniil
Jan 20, 2014, 4:14 AM
Here is a related thread.