Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Visual Style Builder > are we all mad?

• Rick

  Posted on Aug 17, 2009 (permalink)

  I'm sorry but I just can't get my head around what Telerik is trying to do to the world.  I just tried the Visual Skinning tool and, though it looks flashy, ... what's this all about?
  
  Look:
  I don't want to create "custom skins" for anything. I want the code that telerik generated to simply BE VOID OF STYLING. Nothing. Rien. Nada .. and whatever.
  
  I want it to have NO BUILT-IN CLASSES, NO INLINE STYLES.  I want it to know exactly what its supposed to look like by having it react to the CSS that already exists on its page. I want telerik grids to look JUST LIKE the non-telerik grids on the rest of the website.
  
  I thought / hoped we were rid of the pre-thunked (as in thinked) "we know better than you" nonsense that plagues microsoft controls (gridview, formview, etc).  But no we see Telerik has taken this mad idea to a whole new level ..
  
  the gods of the internet bless MVC .. and death to blobbous unbeliveably overcomplex self-styling non-confirming controls.
  
  Its only because my company is forcing me to use telerik that, unfortunately, I continue to use telerik.
  
  
  

  Reply

• Todd Anglin Master

  Posted on Aug 17, 2009 (permalink)

  Hello Rick-

  
  

  First, I am very sorry to hear you're having trouble with the Telerik tools and the Visual Style Builder. Obviously, our goal is to help reduce the time it takes for you to write and style a web application, so let me see if I can help.

  
  

  "Empty" / "Non" Styling

  I definitely understand your desire here, but unfortunately, the web standards that exist today do not enable HTML controls to automatically assume the look-and-feel of a website. If you look at the rendering of a RadControl, you'll find that is nothing more than HTML + CSS class names. The skins that Telerik provides "know" how the controls render their HTML and that governs the CSS rules that they define. The CSS transforms the known HTML structure in to the "styled" control that you see. A "generic" site stylesheet does not posses the "knowledge" to correctly style a rich HTML control.

  
  

  If you want to have truly "skinless" controls, you can do that, too! The Telerik skins are split in to two CSS files- base styles that control the layout of a control, and "theme" styles that control the look-and-feel. In most circumstances, when you're creating a custom skin, you're only modifying the "theme" styles. If you set EnableEmbeddedSkins="False" for a control, though, and supply an empty Skin="" property value, your control will only render the "base" styles, completey devoid of styling (a.k.a an unstyled control).

  
  

  That said, the controls will probably look relatively ugly. That's why we provided the Visual Style Builder- so you could quicklky cusomtize the CSS of the "theme" styles to match your application. If you start with the "Simple" common skin (a "CSS-only" skin), you should be able to tweak the HEX color values to match your site for any of the RadControls.

  
  

  ASP.NET MVC

  We agree that ASP.NET MVC makes some of the WebForms stuff easier. Skinning is not going to be particularly easier, but the HTML rendering should at least be a bit cleaner (though Telerik WebForms controls already render semantic HTML). Telerik has announced (just last week) the beginning of our official support for ASP.NET MVC. It's a new open source project (MS-PL) that will be evolving over the next few months, and the first release will be later this year. If you're interested in MVC, it may be worth checking out:

  
  

  http://www.telerik.com/mvc

  
  

  Feedback

  If you will be working with WebForms, we'd love to get your feedback for what you think we can do better within the limits of WebForms. If you think there are better ways of doing some things with standards-based technology in the WebForms world, let us know! We work hard to make sure our controls render as little HTML as possible and that they use predictable CSS, but if we've missed the mark somewhere, we're always eager to fix it.

  
  

  I hope this extra info helps provide some context. I know styling for the web can be a pain, but hopefully between our skinning documentation, our Visual Style Builder, and our pre-built skins, it will be as easy as it possibly can be!

  
  

  -Todd

  Reply


• Rick

  Posted on Aug 18, 2009 (permalink)

  
  h*ll & d*mn - I had created a 10 minute careful response, then accidently selected your statement below for excerpting:  ".. controls, you can do that, too! The .." but accidently clicked on the link and POOF entire response obliterated .. sigh.
  
  Point is - I wasn't being so stupid as to suggest html voodoo "..but unfortunately, the web standards that exist today do not enable HTML controls to automatically assume the look-and-feel of a website".  RadGrid generates one (or more) tables, right?  And so the CSS that is in effect for tables on the page should have control of styles applied to tables, right?  And if I have one given table that needs different styling, then I wrap it in a div with particular id or class and style that in CSS, right?
  
  So from my simple little world I see no reason why RadGrid needs to generate *anything* to do with style IF I DON'T WANT IT TO.  Sure go ahead out of the box and auto-generate all sorts of quickie demo eye-candy. fine. BUT allow me to be able to turn this all off.
  
  And no your suggestion above (I'm not going to try to copy it again!) doesn't really work. The result is a mess, with classes and inline styles leftovers littering the entire generated table. I'll have to spend .. hours? days? .. trying to generate my own classes to matched the hard-coded names to make the resulting tables style in with the rest of the page.
  
  What I was really hoping for is somehow to turn off ALL styling. No generated divs, no inline styles, no class statements.  Just tables, thead's, tbody's, tfoot's, th's, td's  - that's it. But I guess not possible, thx for your cheerful response though.  You can delete this from the forum too - no point in continuing. Cheers.
  
  

  Reply

• Todd Anglin Master

  Posted on Aug 18, 2009 (permalink)

  Hello Rick-

  
  

  I definitely do understand your pain. As a web developer, I too have had moments where I wished other controls on my page could more seamlessly fit my site's stylsheet. And while you are right about what something like a RadGrid renders (HTML tables, columns, rows, etc.), the rendering is actually much more complex than you (and your CSS) might expect.

  
  

  Still- if you want to disable almost all (there are some inline styles that will render at runtime as the result of control settings) CSS- you can do that. In addition to the step I described previously for disabling the "theme CSS," also set the EnableBaseStyleSheet="False". This will effectively disable all CSS rendered for the control. You can even preview what this would look like by using Firefox and the free Web Developer Toolbar extension. From the CSS menu, select "Disable Styles > Disable Linked StyleSheets."

  
  

  True, this won't elminate the rendering of the class names on the HTML elements. Those class names are part of a control's definition and that rendering cannot be disabled. The docs do fully document every class name's usage, though, and with Firebug in Firefox, you should be able to quickly test the custom CSS you want use.

  
  

  Then again, that all starts to become a lot of work, and if you go the path of disabling all CSS styles, certain controls will not behave as expected and many features fail to render correctly. Hopefully the work being done on MVC will appeal to your need for complete control over HTML and provide the alternative that you seek in the future.

  
  

  In the mean time, we're happy to help wherever we can with your custom skinning. If you have trouble getting the tools to work or finding the answers you need in the docs, just let us know.

  
  

  -Todd

  Reply

• Dimo Dimo

  Posted on Aug 18, 2009 (permalink)

  Hello Rick,
  
  Concerning particularly RadGrid, here is an online demo showing the control with no predefined and rendered CSS classes and no predefined styles. The control will take up any table-related CSS styles that you add to the web page.
  
  http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/migration/defaultcs.aspx
  
  
  I would also like to throw some light on the discussed topic about inline styles and predefined CSS classes.
  
  Due to some specifics of the browsers, a given control's functionality and its HTML rendering, there may be a need for some CSS styles to be applied in all cases, no matter what the control's skin is. These are the so called "base" or "common" styles. Most of the RadControls have them and in most cases, if these base styles are not applied, the control will not look even close to what it should. One should not forget that RadControls are more complex than the standard ASP.NET framework controls, so the more complex HTML rendering also requires more complex styling, which in some cases cannot be simply stripped in full. RadGrid is an exception, as it has no base stylesheet and its layout is mostly "self-created", because it is table-based.
  
  This is the main reason why RadControls render some amount of inline styles and/or CSS classes even when Skin="".
  
  One can set  Skin="" and EnabledEmbeddedBaseStyleSheet="false" and in this case a control will be displayed "as naked as possible" and will not register any CSS files. Thus, it will be easily stylable by generic CSS code. Indeed, some inline styles and CSS classes may still be rendered, but they will not prevent the generic CSS code from being applied. On the contrary, they should facilitate the creation of suitable CSS selectors to style the control. Some controls, e.g. RadSlider, are not suitable for styling by generic CSS code, as RadGrid is, so it will be impossible to use those controls without a single CSS class rendered.
  
  I dare say that the way RadControls are currently implemented, with respect to HTML and CSS, suits the vast majority of our customers, which are specialized in server-side development and prefer to not care about the controls' HTML output, CSS classes, styling, etc. Simply changing the embedded skin is enough for them. In almost all cases, custom skins are created by copy-pasting an existing skin and making some changes here and there. So these people are greatly facilitated by the existence of predefined CSS classes, inline styles and base stylesheets.
  
  Surely, we are always open to feedback and suggestions, and I thank you for sharing your opinion and experience with our products.
  
  Let us know if you need additional information.
  
  
  All the best,
  Dimo
  the Telerik team

  
  Instantly find answers to your questions on the new Telerik Support Portal.
  Check out the tips for optimizing your support resource searches.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Visual Style Builder > are we all mad?