1) If I create a theme and a skin file and a css file to go with that theme, does the skinfile automatically pickup the css file I created? What happens if you have multiple css files under a theme?
2) Do css files in themes override global css files? I created a global one and the theme that had a css file did not change the background color to the one I had in the theme, but the theme that did not have a css file, did change the background color to the one in the global css file.
3) It appears that skins and css files are the same? Can't I just create a theme and use css files within the themes instead of skins? Are skins just for asp.net server controls?
I dont like skinning and prefer to just use plain ol CSS. Thats precisely what a skin is but very limited. I say drop the skin and stick to CSS files.
You can have many theme folders within the App_Themes folder. An ASP.Net Theme can consist of many skin files and many css files.
Yes, the Skin file is aware of the CSS file. When you apply a Theme, your page is made aware of all of the .css files in the Theme automatically.
I'm not sure. Testing is the only way to go.
No, .skin files are different than .css files. Yes, you can just use css files in a theme and skip the skins. Yes, skins are just for asp.net server controls.
Themes vs. Cascading Style Sheets
Themes are similar to cascading style sheets in that both themes and style sheets define a set of common attributes that can be applied to any page. However, themes differ from style sheets in the following ways:
Themes can define many properties of a control or page, not just style properties. For example, using themes, you can specify the graphics for a TreeView control, the template layout of a GridView control, and so on.
Themes can include graphics.
Themes do not cascade the way style sheets do. By default, any property values defined in a theme referenced by a page's Theme property override the property values declaratively set on a control, unless you explicitly apply the theme using the StyleSheetTheme property. For more information, see the Theme Settings Precedence section above.
Only one theme can be applied to each page. You cannot apply multiple themes to a page, unlike style sheets where multiple style sheets can be applied.
Quoted from: ASP.NET Themes and Skins Overview
My Opinion:
Generally, if you've got a good understanding of CSS you don't really need .Skin files but Themes are still useful.
The Themes in asp.net are a bit confusing, they are somewhat css and a somewhat finicky.
Stick to normal css and create your own skin framework (eg: configured css folder)
It will be much easier to use things like jQuery plugins with normal css and it will easier to work with designers who know normal css for cross browser development.
Related
Is there anyway we can override existing theme and its controls to a custom font?
Problem: I can able to override the global font with my custom font, but I can't override each and every controls font since all the controls have their own Font property assigned rather than inheriting from the global.
Any solution?
UI5 Theming and LESS
UI5 is using LESS internally to enable Theming in a comfortable way. LESS is a CSS Precompiler that extends CSS functionality. The implication and drawback is that the delivered UI5 Themes are precompiled already meaning your application is only using the generated, plain CSS.
UI5 Tooling for Themes
Unfortunately the real UI5 tooling behind it wasn't unveiled to us developers so far. The only tooling they provide is Theme Designer. There even is a on-demand version here. With Theme Designer you should be able to achieve easy styling changes as you are looking for.
Hacking UI5 Themes
But still all the ControlName.css files contained in the Themes ARE the uncompiled less files and you can find all the LESS variables UI5 is using in the library.less file. So with a little bit of hacking you should be able to recompile those LESS files into a new library.css file which is used at runtime. All css files of a library are combined and compiled with library.less into a single file - library.css
So if you want more details and understand what's going on behind the scenes check the library.less files
e.g. http://[host][:port]/[path_to_my_application]/resources/sap/m/themes/sap_bluecrystal/library.less
You will find all the UI5 LESS variables in there. Probably most interesting for you is #sapUiFontFamily.
Anyways I would not recommend to change a lot in here since your styling can break very easily with new UI5 versions!
Are you using the UI Theme Designer to generate the CSS files for your custom theme? If not, you should give it a try. It makes adjustments really easy.
To customize a few or all font families, simply choose the "Expert" settings tab on the right hand side of the designer and filter for "FontFamily". It will then list all the relevant attributes.
We want to distribute our .NET Themes out to edge of the Cloud.
However, my research through Google and Help files tells me that ASP.NET Themes (App_Themes) must be served from a physical sub-folder of the web server folder or an IIS virtual directory; ergo: Themes cannot be served from a CDN (we are currently using AWS). This seems a major failing and I hope that I am just going to get flamed for not researching properly, but I have to ask:
Does someone know of a way of serving ASP.NET Themes from a different server (and URI) than the web application that uses the Themes?
(Windows Azure could be a possibility, if it is a/the_only way to achieve this.)
Using themes and skins you primarily style server controls. Then it doesn't make sense to have theme files in CDN, since they are processed by the server.
Themes vs. Cascading Style Sheets
Themes are similar to cascading style sheets in that both themes and style sheets define a set of common attributes that can be applied
to any page. However, themes differ from style sheets in the following
ways:
Themes can define many properties of a control or page, not just style properties. For example, using themes, you can specify the
graphics for a TreeView control, the template layout of a GridView
control, and so on.
Themes can include graphics.
Themes do not cascade the way style sheets do. By default, any property values defined in a theme referenced by a page's Theme
property override the property values declaratively set on a control,
unless you explicitly apply the theme using the StyleSheetTheme
property. For more information, see the Theme Settings Precedence
section above.
Only one theme can be applied to each page. You cannot apply multiple themes to a page, unlike style sheets where multiple style
sheets can be applied.
Source: ASP.NET Themes and Skins
I am developing a website in ASP.Net..
Is it good to develop the Styles using Themes with SkinFile or CSS as we use in HTML
Which is best?
Themes vs. Cascading Style Sheets
Themes are similar to cascading style sheets in that both themes and style sheets define a set of common attributes that can be applied to any page. However, themes differ from style sheets in the following ways:
* Themes can define many properties of a control or page, not just style properties. For example, using themes, you can specify the graphics for a TreeView control, the template layout of a GridView control, and so on.
* Themes can include graphics.
* Themes do not cascade the way style sheets do. By default, any property values defined in a theme referenced by a page's Theme property override the property values declaratively set on a control, unless you explicitly apply the theme using the StyleSheetTheme property. For more information, see the Theme Settings Precedence section above.
* Only one theme can be applied to each page. You cannot apply multiple themes to a page, unlike style sheets where multiple style sheets can be applied.
Please go to msdn for more detail:
ASP.NET Controls can have properties set using skin files. For instance you can define that every button on your site needs the following properties:
<asp:Button runat="server"
BackColor="Red"
ForeColor="White"
Font-Name="Arial"
Font-Size="9px" />
It is a way to generalize styling for your website but nothing that can't be done using CSS alone.
With regard to your question, if all what you need is styling, then I would recommend the CSS way, especially because of its performance benefits, since it can be cached and does not cause any overhead in the Server.
We have a ASP.NET solution using images, css and .skin files with in the App_Theme/{selected theme}. The themes today contains many, many files and images and for a customer theme we add a new folder to the App_Themes and copy all files to the new folder and make the 10-200 changes on images, skin and css's.
The issue here is that the default theme, the one we normally have when we develop, evolve's and grows making theme customer theme out of date. So when an upgrade comes we have to go through all files looking for changes and hopefully finding them all. Sometimes we miss things that are really important.
The perfect solution would be to have a base theme that contains the base css, skin and images. And when we add a new customer theme we only tell the system what has been changed, what css-selectors to override and what images to use instead of the images from the base theme. In my understanding, if using the normal ASP.NET theme functionality in App_Themes folder, you can only have ONE theme and not a BASE theme and then say a DeliveryCustomer-theme that has a different background and some other images that the solution shall use instead of the ones in the BASE-theme.
Does anyone have some guidelines to solve this in a maintainable way for the future. I seen that people override the App_Theme path to make it work with custom skins.
thanks!
Use the concept of a base theme like you described. Pull out all common CSS rules into another file, let's call it base.css.
Take base.css and all the images that are common, and put them in a folder outside of App_Themes, and just include the CSS file like you normally would any other on your master page.
<link rel="stylesheet" type="text/css" href="/styles/base.css" /> <!-- Note this isn't in app_themes -->
Then, make sure your CSS files in various themes only specify the delta for your styles.
Ok, so here is how I'v done it know.
I have created a Default theme that is the original theme with all the css-files, skin-files and images that is needed, and that is alot. This theme is in the App_Themes folder. Them I'v created a new folder called ThemeSkins next to the App_Themes folder. In this folder I have all the new skins in different folders. The folders name is the name of the new theme that one want's to have. In each of the skin folders there are css-files that contains only the selectors that I want to overload. There is also images that I want to replace.
I have created a ThemeCreator tool that does three things:
Remove all themes except the Default theme in the App_Themes folder. This is to only have one main theme to work on for the developers. There will still be work that needs to be done in the ThemeSkins, but the overall work load will be minimal.
Next the tool looks at the folders that is in ThemeSkins and creates a folder under App_Themes for each skin with its name. Then it copies the Default theme into all the new skin folders that it just created.
The last thing is that it will merge the skin specific files into the newly created skin under App_Themes and let the user know what files were added just for information. The tool adds a prefix, "z_", on all css-files so that these are loaded last of all css-files and there for will overload the default selectors.
The thing that remains is to update the skin-files, so far, no customer has needed changes in these files. But when they do, I guess I just add a skin files and have to update the default in a automatic way since the skin-markers can't be overloaded as css-selectors can.
This works really smooth and gives us a nice and lean way to work with skins on our themes.
Any one got a better idea how to get the same result? the major issue using ASP.NET themes are that you can't use a default theme and then just apply skins to it without using the shape and color attribute in the skin-files. This is not recommended as the skin files will copy out all attribute to all the places that they are needed in the markup and not just reference them as css-classes do.
Can anyone tell me themes are better or CSS style sheets are better in asp.net for design?
Please explain the concept also with an example.
A theme can specify both .skin files and .css files. So there no reason not to use themes.
As for skins versus css: Go for css if its css'able.
You should combine them. Use your css files in the theme folder for your normal styling of all the html elements in your website (include all the generated elements).
In the skin file of a control, you can set the default css class. Other properties like the layout and default behaviour of the elements (sample: calender control) are editable here too.
Skin files are good for all layout specific configuration you can't easily do with css, but with the .net properties of the controls.
Basically themes is built for server controls. You can not use themes with html controls.
The css is used for server controls,html controls and tags. If you are using only server controls then you can use "theme" because you can enable or disable theme on control basis, page basis and whole website basis.
In my opinion CSS is best way to design website. because after rendering theme it shows the css style with controls and tags.
You can also use "Theme" and "CSS" together.
Same query is avilable at my post at following link.
ASP.NET 2.0, AppTheme: How can we utilize AppTheme in best way for my ASP.NET WEBSITE
It make you happy