Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

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

Text color and hover #navigation


Reply


3 Posts   1258 Views

Avatar
Leslie

Community Member, 6 Posts

26 March 2010 at 12:50am

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

Avatar
Hamish

Community Member, 712 Posts

26 March 2010 at 8:43am

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.

Avatar
Leslie

Community Member, 6 Posts

27 March 2010 at 1:02am

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