Jump to:

23493 Posts in 18996 Topics by 2878 members

General Questions

SilverStripe Forums » General Questions » Text color and hover #navigation

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1243 Views
  • Leslie
    Avatar
    Community Member
    6 Posts

    Text color and hover #navigation Link to this post

    Hi,

    In the layout.css I have defined #navigation. Code looks like following:

    #Navigation{
       width:800;
       height:33px;
       background:#b34700;
       overflow:hidden;
    }
    #Navigation ul{
       padding-top: 0px;
       padding-bottom: 0px;
       padding-left: 0px;
       padding-right: 10px;
       list-style:none;
       list-style-type:none;
    }
    #Navigation ul li{
       float:left;
       padding-top: 10px;
       padding-bottom: 10px;
       padding-left: 10px;
       padding-right: 10px;
       margin-top: 0px;
       margin-bottom: 0px;
       margin-left: 0px;
       margin-right: 0px;
       border-right:#ffbb00 2px solid;
    }
    #Navigation ul li:hover{
       background:#ffbb00;
    }

    QUESTION1:
    The menu displayes in a brownish color (#b34700) and on hover highlight with #FFBB00. All fine. Only the text displays blue underlined.

    Where can I change the color and font of the text in the navigation menu?

    QUESTION2:
    On a "mouseover" the navigation text I can click to get to the page. I would like this to be possible also as soon as I hover over the padding around the text ? Is there a way to do that ?

    Leslie

  • Hamish
    Avatar
    Community Member
    712 Posts

    Re: Text color and hover #navigation Link to this post

    Q1: use the 'a' selector.

    Q2. You need to use block style link tags with padding, not li tags.

    These are really CSS questions and you'll probably get better answers from CSS groups.

  • Leslie
    Avatar
    Community Member
    6 Posts

    Re: Text color and hover #navigation Link to this post

    Hi Hamish,

    Thank you very much. I managed to change the color with the 'a' selector.

    /* makes the menu text oker */
    #Navigation ul li a{
       color:#ffbb00 ;
       font-family:Arial;
       font-size:15px;
    font-weight:bolder;
       text-decoration:none;
    }

    /* menu text red and background oker on hover */
    #Navigation ul li a:hover{
    color: #b34700;
    background: #ffbb00;
    }

    Will post the topic at the right group next time.

    Leslie

    1243 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.