Different menu txt colour on menu at a Dolphine site

Hi,

This menu below is my original menu of my dolphine site,

is it possible to make it as colourful as on the myyearbook menu?

Below is my top_meu.css file and I really have no clue what I should do to get the colourful menu!


div.sys_top_menu {
    min-height: 31px;

    position: relative;
    z-index: 100;
    
    background: transparent url(../images/tm_bg.png) repeat-x scroll center top;
}
div.sys_top_menu a,
div.sys_top_menu a:link,
div.sys_top_menu a:visited,
div.sys_top_menu a:active,
div.sys_top_menu b {
    font-size: 12px;
}

table.topMenu {
    margin: 0px auto;
    position:relative;
    z-index:1;
}

table.topMenu td.top {
    padding: 0px;

    position:relative; 

    border-right: 2px solid transparent;
}
table.topMenu td.right {
    border-right: 0px;
}

.topMenu .top ul.sub {
    width:190px; 
    height:auto;
    right:0px;
    margin:0px;
    padding:2px 0px 0px 0px;
    
    position:absolute;
    z-index:20;
    display:none;
    visibility:hidden;
    
    background:transparent url(../images/tm_smenu_bg.png) repeat-y left top;
    
    list-style:none;    
    white-space:nowrap;    
    text-align:left;
}

.topMenu .top ul.sub li { 
    width:100%;
    margin: 0px;
    line-height:33px;
    /*height:33px;*/
    min-height:33px;
}

.main_elements { left:0px; }

#mmm {border-collapse:collapse; top:0px;right:0px; width:0; height:0; position:absolute; }

/*.topMenu td.top a:hover {visibility:visible; position:relative;display:block;} */

.topMenu td.top:hover ul.sub {visibility:visible;display:block;}
/*.topMenu td.top a:hover ul.sub {visibility:visible;display:block;} */

.topMenu td.top a:hover ul.sub, .topMenu td.top:hover ul.sub {
    right:0px; position:absolute;
}

.topMenu ul.more_sub { 
    margin-left: 18px;
    padding: 0px;

    list-style: none;
}

.topMenu ul.sub li:hover {
    background:transparent url(../images/tm_sitem_act.png) no-repeat 0px 0px;
    vertical-align:middle;
}

.topMenu ul.sub ul.more_sub li:hover {
    background:transparent url(../images/tm_smenu_sitem_act.png) no-repeat 0px 0px;
}

.topMenu ul.sub .more_sub li {
    background-image: none;
    overflow: hidden;
}

.topMenu .more_down, 
.topMenu .more_right {
    width: 9px;
    height: 31px;
    vertical-align: middle;
    margin: 0px;
}

.topMenu .more_down {
    background:url(../images/icons/tm_sitem_down.gif) no-repeat left 0px;
    margin-top:1px;
}

.topMenu .more_right {
    background:url(../images/icons/tm_sitem_right.gif) no-repeat left 0px;
    margin-top:1px;
}

.topMenu { background-image:none; }

.topMenu td {
    height:31px;
    background-color:transparent;
    margin-right:0px;
    vertical-align: middle;
}

.topMenu a, 
.topMenu b { 
    height:31px; 
    line-height:31px; 
}

.subMenusContainer .subMenuOvr .subMenuInfoKeeper a,
.subMenusContainer .subMenuOvr .subMenuInfoKeeper a:link,
.subMenusContainer .subMenuOvr .subMenuInfoKeeper a:visited,
.subMenusContainer .subMenuOvr .subMenuInfoKeeper a:active {
    font-size:18px;
}

td.sys_page_header {
    max-width: 680px;
    padding: 0px 10px;
    
    white-space: nowrap;
    overflow: hidden;
}

.topMenu a, 
.topMenu a:link, 
.topMenu a:visited, 
.topMenu b {
    margin: 0px;
    padding: 0px 0px 0px 5px;
    
    display: block;
    
    background: transparent url(../images/tm_item_left.png) no-repeat scroll 0%;
    border-width: 0px;

    text-transform: capitalize;
    text-decoration: none;
    color:#666666;    
    font-weight: normal;
}
.topMenu a:focus {
    outline: 0;
}


.topMenu a:hover, 
.topMenu a:active { 
    color:#333; 
}

.topMenu td#tm_active a.top_link, 
.topMenu td#tm_active a.top_link:link, 
.topMenu td#tm_active a.top_link:visited, 
.topMenu td#tm_active a.top_link:active {
    background:transparent url(../images/tm_item_left_act.png) no-repeat scroll 0%;
    color:#333;
}

.topMenu td.top:hover a.top_link, 
.topMenu td.top:hover a.top_link:link, 
.topMenu td.top:hover a.top_link:visited, 
.topMenu td.top:hover a.top_link:active {
    background:transparent url(../images/tm_item_left_act.png) no-repeat scroll 0%;
}

.topMenu b { 
    color:#000; 
}

.topMenu a span.down, 
.topMenu b span.down {
    padding: 0px 5px 0px 0px;

    display: block;
    background: transparent url(../images/tm_item_right.png) no-repeat scroll right top;            

    text-align: center;
    cursor: pointer;
}
.topMenu a span.down img, 
.topMenu b span.down img {
    margin-left: 4px;
}
.topMenu td.top:hover a span.down, 
.topMenu td.top:hover b span.down {
    background-image:url(../images/tm_item_right_act.png);
}
.topMenu td.top a:hover a span.down, 
.topMenu td.top a:hover b span.down {
    background-image:url(../images/tm_item_right_act.png);
}

.topMenu td#tm_active a span.down {
    background-image:url(../images/tm_item_right_act.png);
}

.topMenu ul.sub li a.button {
    width: 160px;
    height: 33px;
    margin: 0px 0px 0px 20px;
    padding-left: 0px;
    
    background-image: none;

    text-align: left;
    font-size: 12px;
    color: #666;
    
    cursor: pointer;
    overflow: hidden;
}
.more_down_tab_noimg {
    width: 30px;
    float: left;
    cursor: pointer;

    text-align: center;
}

.topMenu .sub a.more_ntop_element:hover { color:#333; }

.topMenu .sub a.more_top_element.active,
.topMenu .sub a.more_ntop_element.active
{
    color: #333;
    font-weight: bold;
}

.topMenu .top ul.sub .li_last_round { 
    height: 3px;
    position: absolute;
    
    background: transparent url(../images/tm_smenu_bottom.png) no-repeat scroll left top;

    line-height: 0px; 
    font-size: 0px; 
}
.topMenu .top ul.sub .li_last_round:hover {
    background: transparent url(../images/tm_smenu_bottom.png) no-repeat scroll left top;
}

.subMenu { padding-top:0px; }

.subMenu .subMenuContainer {
    width:100%;
    background:transparent url(../images/tm_cm_bg.png) repeat-x scroll;
    height:38px;
    text-transform: capitalize;
}

.subMenu .subMenuContainerEmpty {
    width:100%;
    background:transparent url(../images/tm_cm_bg.png) repeat-x scroll;
    height:20px;
}

.subMenuOvr {    
    margin-left: 0px; 
    position: relative;
}
.subMenu table { 
    margin-left: 0px; 
}
.subMenu table td.usual { 
    height:36px; 
}
.subMenu table td.tabbed { 
    height:36px; 
}

.subMenu table td.usual div, .subMenu table td.tabbed div {
    height:36px;
    line-height:35px;
    display:block;
    float:left;
    overflow:hidden;
}

.subMenu table td.usual div { margin-top:4px; }

.subMenu table td.tabbed div { font-size:14px; color:#333; }

.subMenu table td.divider div { display:block; height:34px; margin-top:5px; }

.subMenu table a.sublinks,
.subMenu table a.sublinks:link,
.subMenu table a.sublinks:visited {
    padding:0px 8px;
    margin:0px 0px;
    color:#666;
    display:block;
    height:32px;
    font-weight:normal;
    text-decoration: none;
}

.subMenu table a.sublinks:hover, 
.subMenu table a.sublinks:active { 
    color:#333; 
    background-color:#FFF; 
}

div.sys_tm_title_addon {
    height: 61px;
    margin-top: 10px;
}
div.sys_tm_actions {
    height: 39px;
    margin-top: 5px;
    
    position: relative;    
    float: right;
}
div.sys_tm_actions div.input_wrapper {
    padding: 0px;
}
.subMenuOvr .sys_tm_actions .button_wrapper, 
.subMenuOvr .sys_tm_actions .button_wrapper_close { 
    background-image: url(../images/nl.png); 
}
.subMenuOvr .sys_tm_actions .button_wrapper {
    margin-right: 4px;
}
.subMenuOvr .sys_tm_actions .button_wrapper_close {
    right: -4px;
}
.subMenuOvr .sys_tm_actions input[type="submit"], 
.subMenuOvr .sys_tm_actions input.submit {
    min-width: 98px;
    width: 98px;
    padding: 7px 6px 32px;
    background-image: none;
    font-size: 18px; 
    font-weight: bold;
}
.subMenuOvr .sys_tm_actions .button_wrapper, 
.subMenuOvr .sys_tm_actions .button_wrapper input, 
.subMenuOvr .sys_tm_actions .button_wrapper_close {
    cursor:pointer;
    height: 39px;
    background-color:transparent;
}
.sys_tm_actions .bigJoinButton { 
    color: #990000; 
}
.sys_tm_actions .bigLoginButton { 
    color: #009900; 
}

/******From general*********************/

div.subMenusContainer{ 
    margin: 0px auto;
    border: 0px;
}

.subMenu {
    font-weight: bold;
}

.subMenuOvr .subMenuInfoKeeper {
    height:71px;    
    margin: 0px 10px;
    
    /*float: left;*/
    
    color:#333333;
    text-transform:capitalize;
    padding:0;
    font-size:18px;
}

.subMenuInfoKeeper .notify_message {    
    min-width: 450px;
    max-width: 450px;        
    
    position: relative;
    float: left;
}
.subMenuInfoKeeper .notify_message table { width:100%; }


.subMenuOvr .actionItem { width:98px; }

.img_submenu {
    margin: 0px; 
    vertical-align: middle; 
}

#gse_search {
    background: transparent url(../images/tm_sitem_search_bg.png) no-repeat scroll center;
    height: 33px;
}

#gse_search input {
    width: 145px;
    height: 15px;
    margin: 7px 10px 0px 30px;
    padding-top: 3px;        

    border: none;
    background: transparent;    
    font-size:11px;    
}
/* more states for search box*/
.input_main {
    color: #d4d4d4;
}

.input_focus {
    color: #333333;
}

.subMenuOvr .menu_user_actions {
    position:absolute; 
    right:0px; 
    top:0px;
    width:250px;
}

/* * * * Breadcrumbs * * * */
.breadcrumb {
    height: 19px;
    margin: 0px 10px;

    position: relative;

    background: transparent url(../images/bc_bg.png) repeat-x scroll;

    line-height: 19px;        
    text-transform: capitalize;
    font-size: 9px;
    color: #666666;
}
.breadcrumb div.bc_open,
.breadcrumb div.bc_close {
    top: 0px;
    width: 10px;
    height: 19px;
    
    position: absolute;
}
.breadcrumb div.bc_open {
    left: -10px;
    background: transparent url(../images/bc_bg_open.png) no-repeat scroll left center;
}
.breadcrumb div.bc_close {
    right: -10px;
    background: transparent url(../images/bc_bg_close.png) no-repeat scroll right center;
}
.breadcrumb div.bc_unit { 
    float: left; 
    margin: 0px 10px 0px 0px;
}
.breadcrumb img.bc_divider {
    width: 7px;
    height: 19px;
    margin: 0px 10px 0px 0px;
    
    position: relative;
    float: left;
}
.breadcrumb div.bc_addons {

    position: relative;
    float: right;
}

.breadcrumb a,
.breadcrumb a:link,
.breadcrumb a:visited,
.breadcrumb a:hover,
.breadcrumb a:active {
    color:#666699;
    font-size:9px;
    text-transform:capitalize;
}

Typically browsers only implement bold or normal in most fonts. You can supply a font-weight up to 900 but most will render it as bold anyway which has a weight of 700.
[URL=“http://www.sitepoint.com/forums/Note%20that%20many%20common%20computer%20fonts%20are%20only%20available%20in%20a%20limited%20number%20of%20weights%20(often,%20the%20only%20options%20are%20normal%20%20and%20bold).”]
More info here.

You could increase the text size a little and that will make it appear bolder in most cases.

How can I make $sBoldStyle = ($isBold) ? ‘style="font-weight:bold;color:’.$sRandColor.‘"’ : ‘style="color:’.$sRandColor.‘"’;
more bold.
Currently it is not really bold and I would like to have it more bold?

Thank you!

Hey Paul,
you gave me a start and some ideas. Because of people like you we find solutions!

Thank you for your support!

Cordially, Diddy

Glad you sorted it and sorry I wasn’t much help but I’m a strictly css guy :slight_smile:

Well you would have to program it with whatever language you are using and set the random color into a variable and then add it to the style element.

It’s not really a CSS question though and the thread probably needs to an appropriate programming forum (php I assume) so someone else can help.

With
$sBoldStyle = ($isBold) ? ‘style=“font-weight:bold;”’ : ‘style=“COLOR: #ff0000;”’;
I get the menu color to red, but how can I make this random color?

Of course I don’t give up :slight_smile:

Ok, there is a easier solution.

What variable can I add here to make the text colour random?

$sBoldStyle = ($isBold) ? ‘style=“font-weight:bold;”’ : ‘’;

$sBoldStyle = ($isBold) ? ‘style=“font-weight:bold;”’ : ‘style=“COLOR: #ff0000;”’;

make something like this:

  1. adding new function:

function random_color(){
mt_srand((double)microtime()*1000000);
$c = ‘’;
while(strlen($c)<6){
$c .= sprintf(“%02X”, mt_rand(0, 255));
}
return $c;
}

I got it, AndrewP of BoonEx gave it to me :slight_smile:

and after using it:

$sRandColor = ‘#’ . $this->random_color();

$sBoldStyle = ($isBold) ? ‘style="font-weight:bold;color:’.$sRandColor.‘"’ : ‘style="color:’.$sRandColor.‘"’;

THank you :slight_smile:

It looks like you have added new lines of html. All you needed to do was add the classes to the existing html.

e.g. this bold text only needs to be added


<span class="down [B]menu1[/B]" > Account

and so on for the other classes (menu1 - menu12) for the other menu items.


<span class="down [B]menu2[/B]" >People

I can’t help with how you manage your system if you are using a CMS but the effect you need to achieve is as shown above :slight_smile:

Some its there but on the wrong place.

The site is a BoonEx Dolphine 7 site

In my _sub_header.html it looks like this now:

&lt;bx_injection:injection_between_logo_top_menu /&gt;
&lt;div class="sys_top_menu"&gt;
&lt;td class="top"  &gt;&lt;a href="http://filipina-dating-community.com/join.php"   class="top_link"&gt;&lt;span class="down menu1" &gt;Account&lt;/span&gt;
&lt;td class="top"  &gt;&lt;a href="http://filipina-dating-community.com/browse.php"   class="top_link"&gt;&lt;span class="down menu2" &gt;People&lt;/span&gt;
&lt;td class="top"  &gt;&lt;a href="http://filipina-dating-community.com/m/photos/home/"   class="top_link"&gt;&lt;span class="down menu3" &gt;Photos&lt;/span&gt;
&lt;td class="top"  &gt;&lt;a href="http://filipina-dating-community.com/m/videos/home/"   class="top_link"&gt;&lt;span class="down menu4" &gt;Video&lt;/span&gt;
&lt;td class="top"  &gt;&lt;a href="http://filipina-dating-community.com/forum/"   class="top_link"&gt;&lt;span class="down menu5" &gt;Forums&lt;/span&gt;
&lt;td class="top"  &gt;&lt;a href="http://filipina-dating-community.com/blogs/home/"   class="top_link"&gt;&lt;span class="down menu6" &gt;Blogs&lt;/span&gt;
&lt;td class="top"  &gt;&lt;a href="http://filipina-dating-community.com/m/groups/home/"   class="top_link"&gt;&lt;span class="down menu7" &gt;Groups&lt;/span&gt;
&lt;td class="top"  &gt;&lt;a href="http://filipina-dating-community.com/page/games"   class="top_link"&gt;&lt;span class="down menu8" &gt;Games&lt;/span&gt;
&lt;td class="top"  &gt;&lt;a href="http://filipina-dating-community.com/m/chat/home/"   class="top_link"&gt;&lt;span class="down menu9" &gt;Chat&lt;/span&gt;
&lt;td class="top"  &gt;&lt;a href="http://filipina-dating-community.com/search_home.php"   class="top_link"&gt;&lt;span class="down menu10" &gt;Search&lt;/span&gt;
&lt;td class="top"  &gt;&lt;a href="http://filipina-dating-community.com/help.php"   class="top_link"&gt;&lt;span class="down menu11" &gt;Help&lt;/span&gt;
    &lt;bx_injection:injection_top_menu_before /&gt;
    __top_menu__        
    &lt;bx_injection:injection_top_menu_after /&gt;		
	&lt;div class="clear_both"&gt;&nbsp;&lt;/div&gt;
&lt;/div&gt;
&lt;bx_injection:injection_between_top_menu_breadcrumb /&gt;
&lt;div class="sys_breadcrumb"&gt;
   &lt;div class="sys_bc_wrapper" style="width:__main_div_width__;"&gt;
        &lt;bx_injection:injection_breadcrumb_before /&gt;	  
        __top_menu_breadcrumb__
        &lt;bx_injection:injection_breadcrumb_after /&gt;
        &lt;div class="clear_both"&gt;&nbsp;&lt;/div&gt;
    &lt;/div&gt;

You will need to create a rule for each of the menu items that you have. I can’t remember how many tabs you had but if you had 12 tabs then you would need 12 rules:
e.g.


div.sys_top_menu a span.menu1{color:red}
div.sys_top_menu a span.menu2{color:blue}
div.sys_top_menu a span.menu3{color:yellow}
div.sys_top_menu a span.menu4{color:teal}
div.sys_top_menu a span.menu5{color:black}
div.sys_top_menu a span.menu6{color:orange}
div.sys_top_menu a span.menu7{color:cyan}
div.sys_top_menu a span.menu8{color:green}
div.sys_top_menu a span.menu9{color:blue}
div.sys_top_menu a span.menu10{color:red}
div.sys_top_menu a span.menu11{color:black}
div.sys_top_menu a span.menu12{color:yellow}


You would need to add all those rules to your css file in the appropriate place.

Then you would need to go to the html file and add all those class menu1 - menu12 to each of the menu elements as shown in my first post (where I showed then on two elements as an example).

Hi Paul thank you so much?

so this one “div.sys_top_menu a span.menu1{color:red}” I add to my css file, right?

And this one “div.sys_top_menu a span.menu1{color:red}” in my header?

Or do add both at my css?
And where at the css?

Hi,

You’d need to add a class to each menu item and then apply a rule to change its colour uniquely.

e.g.


div.sys_top_menu a span[B].menu1{color:red}[/B]
div.sys_top_menu a span[B].menu2 {color:blue}[/B]

etc......


<td class="top"  ><a href="http://filipina-dating-community.com/join.php"   class="top_link"><span class="down [B]menu1[/B]" >Account</span>


<td class="top"  ><a href="http://filipina-dating-community.com/browse.php"   class="top_link"><span class="down [B]menu2"[/B] >People</span>

And so on for all the items in the menu.