heow to remove css styling of built in widgets entirely and use my own
Hi,
for example, I got navigation widget (rad tab strip) and I want to use my own css, however even if I disable theming, tab strip get some classes (rtsLevel rtsLevel1 etc) which override my css settings, for example padding, font size. I know that perhaps I can bypass this by using custom ascx, or using !important in my css file, but is there any cleaner way?
Thanks!
Robert
Hi Robert
I used my own master pages referencing their own stylesheet and then added and selected a theme with a stylesheet containing no items (to stop the basic theme stylesheet from over-riding everything).
This was the only way I could get control of the pages and stop my own styles from being over-ridden.
We tried ot use the inbuilt templates and make themes but had terrible stylesheet caching (resaving the web.config file after every style sheet update was not an option for us
To get sitefinity styles out of the master stylesheet we saved the page from the browser and took what we needed from saved css file.
I hope someone will tell me that we have got this all wrong and that there is an easier way...
Best Regards
Ian
Hi Ian,
thank you for your insight, I agree there should be an easier way to do this. The problem of rad controls is that they use rather 'aggressive' css styles, they wrap everything multiple times with span div and I don't know what else.. There should be an option to turn off these styles, so that they produce just clean html.
Robert
@Robert,
Officially trying to clean out a RadControl remains cumbersome and there's no way to clean out the produced html (<li><span><div>).
The easiest way to clean up the 'theming' is to use stylebuilder.telerik.com and create an empty skin and attach that to your RadControl. This should hold all the style elements so you can easily override them (or as intended build your style there visually).
If you add this to your custom theme, you'll have all the default Sitefinity CSS stripped and just the clean (or correct) RadControl CSS.
<
appSettings
>
<
add
key
=
"Telerik.EnableEmbeddedSkins"
value
=
"false"
/>
<
add
key
=
"Telerik.EnableEmbeddedBaseStylesheet"
value
=
"false"
/>
</
appSettings
>
<?
xml
version
=
"1.0"
encoding
=
"UTF-8"
?>
<
configuration
>
<
appSettings
>
<
add
key
=
"Telerik.EnableEmbeddedSkins"
value
=
"true"
/>
<
add
key
=
"Telerik.EnableEmbeddedBaseStylesheet"
value
=
"true"
/>
</
appSettings
>
</
configuration
>
Hi Jochem,
thank you much for elaborating on all possible ways how to solve this :)
In fact I use the approach with !important you mentioned, but will consider the one with two web.config files, it sounds interesting, perhaps most suitable for bigger projects with advanced themes. I'll bookmark this:)
Robert
Hey Robert,
Be careful though with the 2 web.config's - it's totally untested and unsupported. It would be far 'better/safer' to use something like
<
sfMap:SitefinitySiteMapDataSource
runat
=
"server"
ID
=
"SitefinitySiteMapDataSource1"
ShowStartingNode
=
"false"
/>
Similarly to what Jochem just suggested, I have also created a custom nav widget. I am not an expert with the SiteMap object, but I have found that this works....at least until someone builds a better menu widget that outputs plain ole HTML.
I'm not suggesting this a solution, just as a different way of doing what Jochem mentioned with the SitefinitySiteMapDataSource. We wanted a widget that provided a nav list as related to the current page. A nav tree with a "You are here" type of highlight.
I pull the sitemap from here:
var provider = SiteMapBase.GetSiteMapProvider(
"FrontendSiteMap"
);
var currentNode = provider.CurrentNode;
if
(currentNode.HasChildNodes)
foreach
(SiteMapNode node
in
currentNode.ChildNodes)
// Using node.Url and node.Title you can build out the <li> child page links here
if
(currentNode.ParentNode !=
null
)
var siblingNodes = currentNode.ParentNode.ChildNodes;
foreach
(SiteMapNode node
in
siblingNodes)
// can build sibling pages here using node.Url and node.Title
// additionally you can test if node.Url == currentNode.Url to find the current page and apply a special class
Hey Robert. I struggled with this for a while. In the end I adding a made up skin name in the Design Setting field on the nav widget UI. It appears that SF tries to pull the styles for this non-existent skin file. Since SF is looking for styles that belong to "xyzskin" it does NOT load the original CSS.
So, now the page pulls in our custom CSS to style the nav widget.
This works great for me. I just needed a simple <ul><li> list.
<
sfMap:SitefinitySiteMapDataSource
runat
=
"server"
ID
=
"SitefinitySiteMapDS"
ShowStartingNode
=
"false"
/>
<
asp:Repeater
ID
=
"Repeater_MainNav"
runat
=
"server"
DataSourceID
=
"SitefinitySiteMapDS"
>
<
HeaderTemplate
>
<
ul
class
=
"nav nav-tabs"
>
</
HeaderTemplate
>
<
ItemTemplate
>
<
li
><
a
href='<%# Eval("Url") %>' runat="server"><%#Eval ("Title") %></
a
></
li
>
</
ItemTemplate
>
<
FooterTemplate
>
</
ul
>
</
FooterTemplate
>
</
asp:Repeater
>
Hello Jochem,
When you talk about the:
"Go to the Sitefinity folder (root/Sitefinity not the one under App_Data) and create a web.config file and add this"
Can you be more specific as to where this is?
Also, can you go into more detail about:
"However page edit runs on the actual page url, so you'll have to add a custom stylesheet to fix the page editor."
Thanks,
Jonathan
Hey Jonathan,
Brilliant post!!
Every posters are master mind in designing styles..........:-)
<a href="mppglobal.com">ecommerce solutions</a>
Thanks @Jochem,,
Your suggestion works for me in the same issue.
In my application, default telerik style was applied in all pages even in blank pages. But after adding some keys in <appSetting> its resolved.
Regards,
Harsh Patel
Perfecto!