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

Forums / Designing with Sitefinity / Add css class for SitePanelbar item

Add css class for SitePanelbar item

7 posts, 0 answered
  1. Paul
    Paul avatar
    176 posts
    Registered:
    18 Nov 2008
    04 May 2009
    Link to this post
    Hi!

    I need to add css class for SitePanelbar item. The structure of SitePanelbar on webpage is presented by <UL> and <LI> tags. All root items of my menu have css classes from skin but I also need to add css class for each <LI> item.
    <ul class="rpRootGroup"
    <li class="rpItem rpFirst"
    </li> 
    <li class="rpItem"
    <class="rpLink root2 rpExpandable" href="../AboutFaculty/History.aspx"
    <span class="rpText">About</span> 
    </a> 
    <div class="rpSlide"
    </div> 
    </li> 
    <li class="rpItem"
    <class="rpLink root2 rpExpandable" href="Administration.aspx"
    <span class="rpText">Structure</span> 
    </a> 
    <div class="rpSlide" style="display: block;"
    <ul class="rpGroup rpLevel1" style="display: block;"
    <li class="rpItem rpFirst"
    <class="rpLink" href="Administration.aspx"
    <span class="rpText">Administration</span> 
    </a> 
    </li> 
    <li class="rpItem"
    <class="rpLink" href="StudyAdmin.aspx"
    <span class="rpText">Study</span> 
    </a> 
    </li> 
    <li class="rpItem"
    <class="rpLink rpExpandable" href="Departments.aspx"
    <span class="rpText">Departments</span> 
    </a> 
    <div class="rpSlide"
    </div> 
    </li> 
    <li class="rpItem"
    <class="rpLink rpExpandable" href="StudyOrg/Member.aspx"
    <span class="rpText">Ученый совет</span> 
    </a> 
    <div class="rpSlide"
    </div> 
    </li> 
    <li class="rpItem"
    <class="rpLink" href="EkspPravCenter.aspx"
    <span class="rpText">Center</span> 
    </a> 
    </li> 
    <li class="rpItem"
    <class="rpLink" href="JurClinic.aspx"
    <span class="rpText">Clinic</span> 
    </a> 
    </li> 
    <li class="rpItem rpLast"
    </li> 
    </ul> 
    </div> 
    </li> 
    <li class="rpItem"
    <class="rpLink rpExpandable" href="../Education.aspx"
    <span class="rpText">Education</span> 
    </a> 
    <div class="rpSlide"
    </div> 
    </li> 
    <li class="rpItem"
    </li> 
    <li class="rpItem"
    </li> 
    <li class="rpItem"
    </li> 
    <li class="rpItem rpLast"
    </li> 
    </ul> 

    I want to add css class for LI items wich already have css class "rpItem".
  2. Paul
    Paul avatar
    176 posts
    Registered:
    18 Nov 2008
    07 May 2009
    Link to this post
    Can anybody help me?
  3. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    07 May 2009
    Link to this post
    Hello Paul,

    In this case, why don't you define a new CSS file in which you have the following:

    .rpItem 
     css-rule !important; 
     other-css-rule !important; 

    Then you should include this stylesheet in the same page, where you have the SiteTabStrip.
    These rules will apply to the existing ones. We are putting !important in order to give higher priority on this one, over the default ones.

    Greetings,
    Georgi
    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.
  4. Paul
    Paul avatar
    176 posts
    Registered:
    18 Nov 2008
    08 May 2009
    Link to this post

    Hi Georgi!

    I need not to replace this class but add for each LI with class rpItem other cssclass. Let me explain why I do this. I want to make a special design for SitePanelbar: each root item (LI rpItem) in panelbar must have a special color and its childrens also must have special color. How I can do this?

  5. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    11 May 2009
    Link to this post
    Hi Paul,

    I think you could use a different approach.

    You can change each items CssClass based on your rules. You can do this on the SitePanelBar item databound event:
    public void RadPanelbar1_ItemDataBound(object sender, RadPanelBarEventArgs e) 
        { 
            ...         
            if (e.Item.Level > 2) 
            { 
                //or something else 
                e.Item.CssClass = "MyClass"
            } 
        } 

    I hope this will help you.

    Best wishes,
    Georgi
    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.
  6. Paul
    Paul avatar
    176 posts
    Registered:
    18 Nov 2008
    11 May 2009
    Link to this post

    Hi Georgi!

    Thanks for your reply but this is not the solution of my problem.

    But I finally did what I want through javascript. I will post my code later.

    Description for RadPanelBar help me to find solution.

  7. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    11 May 2009
    Link to this post
    Hi Paul,

    Thank you for following up. I am glad you have found a solution.

    Regards,
    Georgi
    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.
Register for webinar
7 posts, 0 answered