Is it possible to change the default template of each ASP.NET server control? In WPF and Silverlight, each control is supposed to be lookless, so the developer can provide a user-defined control template to change how the control looks. If, for example, I want to use an outer and inner square/rectangle other than an outer and inner circle in a RadioButton, how do I accomplish that?
Don't have much experience with ASP but we used to work with Prado a lot (a PHP framework that behaves much like ASP .NET).
I would say the easiest thing to do is assign a CSS class to the component, which you should be able to do to any ASP .NET component and then simply use CSS to style the component.
At the end of the day, its all spat out to the browser as HTML anyway, so there's no real reason why you couldn't style it using CSS.
I recommend you don't use the standard CSS classes, unless you want all instances of a particular component to the look the same for your application.
We write a lot of Ajax apps and this is what we do.
ASP.NET has support for Themes and Skins. You can use a combination of skins and CSS (packaged up into a theme for convenience) to apply some styles to your controls. However, different browsers on different operating systems may render various controls slightly differently (for example take a look at how radio buttons are rendered). I'm not sure how much control you'll have over that behavior.
Related
You can specify CssClass in server controls and your ASP.NET page will generate the style attribute for the control.
You can also specify an external CSS file in the ASP.NET page just as you would in an ordinary HTML page.
You can also write a tag in the ASP.NET page header section just as you would for an ordinary HTML page.
Then why are ASP.NET Themes necessary?
Don't confuse ASP.NET Themes with ASP.NET Skins. I've explained them here:
The Theme system in ASP.NET does not compete with CSS, instead it's a system that's meant to make it easier to allow users to choose the stylesheets that are applied to the site.
The idea being that you'd create a "BoringBlue.css" stylesheet and associated artwork, then make a few changes and create a new one called "HotPink.css". Rather than doing the work to generate the markup that enables or disables the page's style <link> elements ASP.NET Themes will do this heavy lifting for you.
However, ASP.NET Web Forms Web Controls were originally made during the IE6 love-in at Microsoft (back when they pretended Firefox didn't exist, so this is around 2004-2005) so they don't make heavy use of CSS, many controls render presentational attributes, such as bgcolor. "ASP.NET Skins" are a way to control the colors and other presentational settings of WebControls (note, not HtmlControls). ASP.NET Themes provide you with a way to choose which ASP.NET Skin is also applied, in addition to CSS stylesheets.
Note that under ASP.NET MVC, Themes and Skins are completely obsolete as the framework no-longer renders any complex markup, returning complete control to the developer. Finally, no more gimmicks - I haven't really come across a "let the user set the color scheme"-site since people stopped using phpNuke around 2007.
I am relatively new to website design and specifically working in ASP.NET, i am using CSS to style my site, but when i use ASP.NET Controls like GridView, Navigation controls, etc ...
they are messed up by the style sheets, and you can't see that until you run the website, because the controls are translated to HTML and so affected by CSS in a way that you can't predict, how to solve this, and is there a better way to layout and desgin sites in ASP.NET.
You can use ControlAdapters or better use ASP.NET MVC
A great method that's worked well for me is to create Skins for your ASP.NET controls.
http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx
http://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-skins-with-css-for-a-flexible-and-maintainable-aspnet-web-site
After getting my skins and CSS classes created for the different pieces of my ASP.NET controls I'll then run my app in a browser with good developer tools, Google Chrome has a stellar set of dev tools that allow you to modify your css classes and styles right in the page so you can see the results immediately. I'll then update my Skin CSS classes to match the styles I created using the browser dev tool.
Themes are control based and not html based – and as a result themes allow you to reuse almost any control property.
1)
a) Are there any control properties which affect the visual appearance of the control, but can’t be expressed through CSS?
b) If there are such properties, then I assume these properties are translated into Html and not CSS?! But that doesn’t make much sense, since CSS is far more capable of describing the visual appearance of a control!
c) Anyways, could you name me some of these properties?
2) I thought themes should be ( just like CSS ) all about presentation ( ie visual aspects of a Html document ), but that doesn’t seem to be the case, since controls also have many properties that don’t define the visual appearance of the rendered control?! In other words, I don’t see much usefulness for themes also specifying non-visually related control properties. Or am I missing something?
Thanx
Themes is an attempt at trying to replace CSS for redistributable controls. The main point of themes is that you have a more strongly typed syntax and a pre-built "skinning" framework.
In my opinion, Themes are a failure, for exactly the reasons you are describing - properties don't cover a wide enough range of DOM attributes to be more than marginally useful in specifying custom rendering for webcontrols. The additional coding needed to get obscure properties in negates the usefulness of themes the first time you need to code one. Additionally, having to learn an entirely new property syntax in order to abstract away CSS is counter-productive, since non-ASP.Net websites will never use it - in other words, it's just not standard.
Every webforms project I've worked on that started with Themes ended up dropping them for embedded CSS web resources.
To answer your questions:
a) Are there any control properties which affect the visual
appearance of the control, but can’t
be expressed through CSS?
I suppose it depends what you mean by "visual appearance". Adding an extra column to a grid, for example, certainly changes its appearance, but can't be done in CSS.
b) If there are such properties, then
I assume these properties are
translated into Html and not CSS?! But
that doesn’t make much sense, since
CSS is far more capable of describing
the visual appearance of a control!
Since a web page is basically HTML + CSS + Script, it makes sense that if the visual change isn't done with CSS, that it's probably HTML.
c) Anyways, could you name me some of
these properties?
How about the "Text" property on a <asp:Label>?
Themes are not "all about presentation."
Themes are simply a collection of CSS files, JavaScript files, images and skin files that work together. A Theme might contain a single CSS file, and have nothing at all to do with controls.
Skin files, though, are control-oriented. Skin files let you set property defaults for your controls. Most properties are default-able, not just the ones that control appearance. For example, if you're using GridViews in your application, skin files allow you to establish a standard appearance, rather than having to repeat the same property assignments every time the control is used.
StyleSheetThemes allow you to override those defaults on the page. Regular Themes take precedence over properties you assign on the page.
Also, collecting property defaults for your controls in a single place (the skin) makes them easier to manage, similar to what CSS classes do for HTML.
I'm a long time winforms developer and one of the things I really liked was the layout manager controls they had like flowlayoutpanel or gridlayout. unfortunately these don't seem to exist in asp.net or do they?
I'm in the process of modifying my existing asp.net website to use css instead of tables, but when I go into the visual studio design mode it looks terrible.
It's really difficult to wrap my head around all these floats, div:clears and css tricks and then test and retest in every browser. Surely there must be a better way. Ideally a layout manager control which would display properly in design mode, act as a container, be lightweight, and use smart enough to emit tables or css depending on the browser abilities.
does such a control exist as part of asp.net, open source, or commercial add-on?
Using tables instead of DIVs and css can certainly help with laying things out (a lot of people will think this is bad practice, but its works)
Also, have a look at the asp.net Repeater and ListView components. The ListView is very good in that you have a lot of control over the layout and the rendered html, I would look at that.
First thing - don't rely on the VS Designer. It's not a browser. Because each browser implements css in potentially different ways, your only option is to test in the browsers that you think your target market will use.
At first, css positioning can seem a bit confusing, but if you stick with it, you will be able to wrap your head around it. There is no such control as you describe that I know of. CSS is part of a web developers required learning, just as SQL is if you need to use a database etc.
I need to build a prototype for an intranet website, and I want to focus on usability (layout, navigability, etc) and leave the theme for later (I have very bad taste, so this will probably be done by someone else)
I know about ASP.NET's capability of switching themes instantly, but how do I have to design the WebForms for it to be easy later?
Should I create controls with a class attribute pointing to something that will exist in the future css?
Or do I simply create the controls without worrying about this and it'll be handled easily when we create the theme?
If you're planning on using ASP.NET Themes, then you can design all of the controls generically and add Skins later on. Depending on the complexity of the design (meaning how many different styles you have for textboxes or gridviews, etc), this might not save you a lot of work, but it's one way to use the built-in .Net support for theming.
Make sure you use a MasterPage so that all of your sub pages will have a common base, and give all of your elements good IDs, because you will still need to get your hands dirty with CSS to put it all together.
Here's a link to a decent Themes & Skins tutorial. Knowing what you'll have to do in the future to add this in will make it easier to design for it now.
I'd like to make the argument for ignoring themes altogether and using nothing but CSS. It's never been clear to me what value themes add; it's a very Microsoft-specific approach, and its output isn't always standards-compliant. By using CSS you will widen the pool of potential designers able to work on your project, and you will have a better chance of having a cross-browser and standards-compliant site.
If someone else is going to be styling this later, I'd just make sure that you provide enough "hooks" for them to be able to design this. This means adding CSS classes to pretty much everything you do that will be styled similarly, and wrapping things in divs or spans with CSS classes where appropriate, for example
<div class="ButtonContainer">
<asp:linkbutton runat="Server" cssclass="Button Cancel" command="Save" text="Save" />
<asp:linkbutton runat="Server" cssclass="Button Save" command="Cancel" text="Cancel" />
</div>
If you don't have a solid understanding of CSS and you don't have in-house naming conventions or standard style sheets, though, you won't really know how to structure your divs and classes. In our shop, the way we handle this is the programmer just writes standard ASP.NET markup, and the designer goes through and adds divs, spans, and class names that work with the style sheet they will develop.
Skins are probably the answer, but something about that irks me (maybe because I don't like being that vendor specific and I'd like my skills to be applicable to other web languages and platforms than .NET). I prefer to use CssClass attributes on all of my ASP.Net controls and carefully class everything else and to use as much semantic markup as possible. Then, when I get the controls set up and working, I use CSS to style everything (although I usually have to tweak the HTML and JavaScript stuff at this point).
Another developer I work with prefers to do everything the Microsoft way with Skins and page directives and so on. It's probably the best way to do it, but it feels to me like it's mixing too much of the presentation into the middle and back-end of the application.
just wrap your controls in divs. will make layout/style much easier in the end