Styling question

3 posts, 0 answers
  1. Daniel Plomp
    Daniel Plomp avatar
    130 posts
    Member since:
    Feb 2004

    Posted 09 Sep 2010 Link to this post

    Hi all,

    I've a question about styling the RadMenu. I'm not so good in CSS, but I have this challenge to make this menu work in Sitefinity.

    The code for the menu is like this:
    <ul id="nav">
       <li class="active">
          <a href="#"><span class="l"><span class="c">Home</span></span><span class="r"> </span>
          </a>
       </li>
       <li>
          <a href="#"><span class="l"><span class="c">Maatschappelijke stages</span> </span><span class="r"> </span>
          </a>
       </li>
       <li>
          <a href="#"><span class="l"><span class="c">Contact</span></span><span class="r"> </span>
          </a>
       </li>
    </ul>

    This is my CSS code:
    #nav{
        list-style:none;
        padding:0;
        margin:0;
        overflow:hidden;
        height:50px;
        background:url(../Img/bg-nav.gif) repeat-x 0 100%;
        text-transform:uppercase;
    }
    #nav li{
        float:left;
        font:24px/27px BigNoodleTitlingRegular, Arial, Helvetica, sans-serif;
        margin:0 0 0 -4px;
    }
    #nav a{
        float:left;
        letter-spacing:-1px;
    }
    #nav a:hover,
    #nav .active a{
        color:#000;
        text-decoration:none;
        border:0;
        cursor:pointer;
    }
    #nav span{float:left;}
    #nav .c{padding:20px 10px 3px;}
    #nav .l{padding:0 0 0 8px;}
    #nav .r{
        width:8px;
        height:50px;
    }
    #nav a:hover .l,
    #nav .active .l{background:url(../Img/bg-nav-left-hover.png) no-repeat;}
    #nav a:hover .c,
    #nav .active .c{
        background:url(../Img/bg-nav-center-hover.png) repeat-x;
        overflow:hidden;
    }
    #nav a:hover .r,
    #nav .active .r{background:url(../Img/bg-nav-right-hover.png) no-repeat;}

    I do not understand how I can transform this into a RadMenu_Custom skin. Because of the <span> tags that are around the menu items. I don't know if it is possible for the RadMenu to just output <ul> and <li>?

    Anyway, if there is anyone that has done such kind of styling: I really could use some help.

    Thanks!
    Daniel
  2.
  3. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 10 Sep 2010 Link to this post

    Hello Daniel,

    Have you tried the Visual Style Builder, which allows you to create skins for the different RadControls.

    I hope that helps.
  5. Daniel Plomp
    Daniel Plomp avatar
    130 posts
    Member since:
    Feb 2004

    Posted 10 Sep 2010 Link to this post

    Ehm...yes I tried it, but I cannot add multiple spans around and inside the text element.
    So, I have no clue about how to do this example inside the RadMenu.

    I solved it (temporarily) with building a repeater that generates an <ul> etc...
    I don't understand why RadMenu can't just output a simple <ul> <li> list. Would make things easier.

    Well, I hope someone has have the same issue.

    Thanks anyway,
    Daniel
Back to Top