+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / 3.5 custom skin and css not working in theme

3.5 custom skin and css not working in theme

13 posts, 0 answered
  1. Phil C
    Phil C avatar
    28 posts
    Registered:
    06 Sep 2012
    19 Oct 2008
    Link to this post
    In 3.5, navigation folder and css structures have changed because of prometheus, which is to be expected, but the help file does not offer much help, just the item at end of this post.

    In 3.2 I got the CSS for the RadMenu etc working fine by putting it in the RadControls/Menu/Skins/<my_name>, but that's all gone in the new AJAX 3.5 version, so i tried putting the RadMenu.skin file below (with skin="my_theme") into theApp_Theme/<my_theme> folder where it should be picked up automatically, together with the actual css which includes:

    .RadMenu_<my_theme> {font:11px/15px tahoma, verdana, sans-serif;} etc

    and
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="SiteMenu.ascx.cs" Inherits="UserControls_SitemapMenu" %>
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>

    <asp:SiteMapDataSource ID="SitemapDataSource1" runat="server" ShowStartingNode="false" />
    <telerik:RadMenu ID="RadMenu1" runat="server"
        EnableEmbeddedSkins="false"
        DataSourceID="SitemapDataSource1" OnItemDataBound="RadMenu1_ItemDataBound" Skin="my_theme" SkinID="my_theme"
    >
    </telerik:RadMenu>
    as the modified Sitefinity/UserControls/Navigation35/sitefinity.ascx

    ... but no result.

    So, how exactly do you style the controls in 3.5?

    Phil


    From 3.5 helpfile:

    Below is a sample of a skin file that applies the SitefinityBlue control skin to the RadMenu control.

    RadMenu.skin Copy Code
    <%@ Register TagPrefix="radM" Namespace="Telerik.WebControls" Assembly="RadMenu.Net2" %>
    <
    radM:RadMenu
     
    runat="server"
     
    Skin="SitefinityBlue">
    </
    radM:RadMenu>

     Having this .skin file in a theme will make RadMenu controls use SitefinityBlue skin for all pages in the project that use this theme, unless specified otherwise in the RadMenu control properties.


  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    08 Dec 2016
    20 Oct 2008
    Link to this post
    Hello Phil C,

    Please refer to the following topic of the RadMenu for ASP.NET AJAX documentation that describes the changes which should be made in the CSS class names in your Skin: Migrating Skins from RadMenu ASP.NET to ASP.NET AJAX.

    Hope this helps.


    Greetings,
    Pepi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    03 Nov 2008
    Link to this post
    Pepi,

    The link is broken.  Can you please update it?

    Thanks!
  4. Pepi
    Pepi avatar
    981 posts
    Registered:
    08 Dec 2016
    03 Nov 2008
    Link to this post
    Hello Dan,

    Here is the content of "Migrating Skins from RadMenu ASP.NET to ASP.NET AJAX" article:

    Since RadMenu for ASP.NET AJAX inherits its rendering from RadMenu for ASP.NET "Classic", it is rather easy to migrate a skin. The only change in the CSS class names is the control-specific prefix ("rm") and the capitalization of the first letter of the "Classic" class names afterwards. The following table lists all class names in the "Classic" version of RadMenu and their equivalents in the RadMenu for ASP.NET AJAX:

    RadMenu "Classic" class name RadMenu for ASP.NET AJAX class name

    link

    rmLink

    focused

    rmFocused

    expanded

    rmExpanded

    text

    rmText

    rootGroup

    rmRootGroup

    group

    rmGroup

    expandLeft

    rmExpandLeft

    expandRight

    rmExpandRight

    horizontal

    rmHorizontal

    vertical

    rmVertical

    item

    rmItem

    first

    rmFirst

    last

    rmLast

    topArrowDisabled

    rmTopArrowDisabled

    bottomArrowDisabled

    rmBottomArrowDisabled

    leftArrowDisabled

    rmLeftArrowDisabled

    rightArrowDisabled

    rmRightArrowDisabled

    topArrow

    rmTopArrow

    bottomArrow

    rmBottomArrow

    leftArrow

    rmLeftArrow

    rightArrow

    rmRightArrow

    disabled

    rmDisabled

    separator

    rmSeparator

    leftImage

    rmLeftImage

    slide

    rmSlide

    Hope this helps.

    All the best,
    Pepi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    07 Nov 2008
    Link to this post
    The only thing is that I don't understand where to put these .skin and/or .css files? Is it in the App_Themes directory, or in my own folder? In that case I should add a reference manually from my SiteMenu in code?

    Still a bit confused, and I can't find it inside the help file.

    Daniel
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    07 Nov 2008
    Link to this post
    Hi Daniel,

    You need to override the old .css classes with the new one. Then, the skin should work in Sitefinity3.5.
    On another hand you can use a separate CSS file. When taking this approach, you must add a <link> tag to the <head> section of the ASPX file.You can define the styles directly in the <head> section of the ASPX file.

    I hope this helps.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    07 Nov 2008
    Link to this post
    Hi Ivan,

    Since there is no RadControls/Menu/Skins folder anymore, it means I am 'forced' to create my own seperate css file for the menu? (option 2 from your reply).

    Am I right? Or should I manually create this old folder structure again?

    Daniel
  8. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    07 Nov 2008
    Link to this post
    My solution was to kill the second style sheet.  I set EnableEmbeddedSkins="false" and EnableTheming="false"  (click the "Edit" button under the misc tag). 

    Personally, I don't feel that you need more than one stylesheet (except for dealing with IE).  Wouldn't you change the menu styles if redesigning anyway?  I think the menu styles should reside in the main skin CSS.

    Then I put my styles in my skin stylesheet like so:

    #nav-main .RadMenu { 
    float:left; 
    position:relative; 
    width:auto; 
    background:red; 
    white-space:normal; 
     
    #nav-main .RadMenu .rmItem{ 
    border-bottom:1px #ffffff solid; 
     
    #nav-main ul { 
    margin: 0px; 
     
    #nav-main .RadMenu a { 
    background-color: green; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:1.0em; 
    color:#FFFFFF; 
    text-decoration:none; 
    width:183px; 
    padding-left:5px; 
    padding-right:5px; 
     
    #nav-main .RadMenu a:hover { 
    background-color: yellow; 
     
    #nav-main .rmExpandRight 
        background:transparent url("images/arrow.png") no-repeat right 1px; 
     

    And overriding any default Rad Menu styles in this manner:

    .RadMenu { 
        white-space:normal !important; 
     

    Another example of override for Rad PanelBar:

    .RadPanelBar { 
    width:auto !important; 
     
    .RadPanelBar .rpText:after, .RadPanelBar .rpTemplate:after, .RadPanelBar .rpItem:after { 
    clear:none !important; 
     
    .RadPanelBar .rpLink { 
    width:auto !important; 
     


    Hope that helps!
  9. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    11 Nov 2008
    Link to this post
    Hello Dan,

    Thank you for your answer. Hopefully this will shed some light on the Daniel's issue.

    Kind regards,
    Georgi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. snehal kadiya
    snehal kadiya avatar
    3 posts
    Registered:
    09 Mar 2010
    26 Mar 2010
    Link to this post
    link is broken
  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    26 Mar 2010
    Link to this post
    Hi snehal kadiya,

    Here is the updated link - http://www.telerik.com/help/aspnet-ajax/menu_migratingskins.html

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  12. snehal kadiya
    snehal kadiya avatar
    3 posts
    Registered:
    09 Mar 2010
    26 Mar 2010
    Link to this post
    <DIV style="Z-INDEX: 7000" id="ctl00_cphSiteMenu_tm_sitefinity_usercontrols_navigation35_sitemenu_ascx1_RadMenu1" class="RadMenu RadMenu_Menu" value="">
    <UL class="rmHorizontal rmRootGroup">
    <LI class="rmItem rmFirst" _itemTypeName="Telerik.Web.UI.RadMenuItem" jQuery1269614480649="3">
    <A class="rmLink" href="http://localhost/diweb/en/HomePage/services/networking.aspx"><SPAN class="rmText">Services</SPAN></A>
    </LI>
    <LI class="rmItem " _itemTypeName="Telerik.Web.UI.RadMenuItem" jQuery1269614480649="4">
    <A class="rmLink" href="http://localhost/diweb/en/HomePage/partners/partnerslist.aspx"><SPAN class="rmText">PARTNERS</SPAN></A>
    </LI>
    <LI class="rmItem " _itemTypeName="Telerik.Web.UI.RadMenuItem" jQuery1269614480649="5">
    <A class="rmLink" href="http://localhost/diweb/en/HomePage/Company/AboutUs.aspx"><SPAN class="rmText">Company</SPAN></A>
    </LI>
    <LI class="rmItem " _itemTypeName="Telerik.Web.UI.RadMenuItem" jQuery1269614480649="6">
    <A class="rmLink" href="http://localhost/diweb/en/HomePage/showcase.aspx"><SPAN class="rmText">SHOWCASE</SPAN></A>
    </LI>
    <LI class="rmItem " _itemTypeName="Telerik.Web.UI.RadMenuItem" jQuery1269614480649="7">
    <A class="rmLink" href="http://localhost/diweb/en/HomePage/SupportContactSales.aspx"><SPAN class="rmText">SUPPORT & CONTACT SALES </SPAN></A>
    </LI>
    <LI class="rmItem " _itemTypeName="Telerik.Web.UI.RadMenuItem" jQuery1269614480649="8">
    <A class="rmLink" href="http://localhost/diweb/en/HomePage/Pressroom.aspx"><SPAN class="rmText">Rassegna Stampa</SPAN></A>
    </LI>
    <LI class="rmItem rmLast" _itemTypeName="Telerik.Web.UI.RadMenuItem" jQuery1269614480649="9">
    <A class="rmLink" href="http://localhost/diweb/en/HomePage/Product/helthmonitor.aspx"><SPAN class="rmText">Products</SPAN></A>
    </LI>
    </UL>
    <INPUT id="ctl00_cphSiteMenu_tm_sitefinity_usercontrols_navigation35_sitemenu_ascx1_RadMenu1_ClientState" type="hidden" name="ctl00_cphSiteMenu_tm_sitefinity_usercontrols_navigation35_sitemenu_ascx1_RadMenu1_ClientState" autocomplete="off" value="" />
    </DIV>


    Hi sitemenu is formateed in this structure so do we need to create style with the same name as rendered in the class.
    Thanks & with best regards.
    snehal kadiya
  13. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    26 Mar 2010
    Link to this post
    Hello snehal kadiya,

    "The only change in the CSS class names is the control-specific prefix ("rm") and the capitalization of the first letter"

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Register for webinar
13 posts, 0 answered