1

I have made some modification to my team site CSS, mainly I make the username text to be white and the background color to be blue. This will work well till the user move the mouse over the username , then the hover colour which seems to be white will hide the username text since it is also white as follow:-

enter image description here So is there a way to remove the hover over the username, or to define different hover color (something such as blue)?

The defualt view is :- enter image description here

and the custom CSS is :-

div#suiteBarLeft{
background-color: #008CD2 !important; 
filter: none !important;
color: #FFFFFF;
}


div#siteIcon{ 
display: none;
}



div#suiteBarRight{
background-color: #008CD2 !important; 
filter: none !important;
color: #FFFFFF;
}

div#zz4_Menu_t{

color: #FFFFFF;
}

div#zz4_Menu{

color: #FFFFFF;
}


#s4-titlerow{ 
    display: none !important;
}
#pageTitle {position: absolute; left: 400px; top: 40px;color:white;}

#uppersearch{ 
    background-color:white;background:white;color:white !important;
    }



div#welcomeMenuBox span.ms-core-menu-root { background-color: white; color: white !important; }

#SearchBox { background-color: white; }

.s4-title h1 a, .s4-title h2, .s4-title h2 a{color:white !important;}


/* Change the color of the usernames*/
#welcomeMenuBox a
{
        Color:#FFFFFF;
}
.ms-core-menu-box {
        background-color:#008CD2}

#zz5_Menu_t{
 background-color:#008CD2;   
        }
#zz5_Menu{
 background-color:#008CD2;
        }

#zz1_ID_PersonalActionMenu
{
 background-color:#008CD2; }



/* Change the color of the App page tittle*/
#pageTitle a
{
        Color:#FFFFFF;
}
</style>
.ms-welcomeMenu
{
   background-color: red;
}

for its text

.ms-welcomeMenu A:link
{
    color: red;
}

when hovering

.ms-welcomeMenu A:hover
{
    color: red;
    background-color:red;
}

Baring in mind that the Red color in the custom CSS will not show, i just added it for testing purposes.

  • 1
    Can you edit your question uploading a picture without clicking the username (default view of the page) and your css? – Alvmad Sep 16 '13 at 14:10
5

There are custom SharePoint CSS classes that you may need to overwrite to change the colour of the hovering. Using IE developer tools I found that the two classes you're looking at are .ms-welcome-hover and .ms-siteactions-hover the welcome hover class obviously being the top bar for the page.

This code in your custom CSS should change it to a blue background with black text, just adjust the colours to what you need.

.ms-welcome-hover, .ms-siteactions-hover
{
    background-color:#FF6666;
    color:#000000;
}

Regards

~Donald

  • i add the following :- .ms-welcome-hover, .ms-siteactions-hover { background-color:red; color:red; } . but no red color will appear either for the background or for the text color ? – john Gu Sep 16 '13 at 14:57
  • .ms-welcome-hover{ background-color:#63BAE7; } worked well :) – john Gu Sep 16 '13 at 15:53
2

Please concentrate on the following css classes:

.ms-welcome-hover .ms-siteaction-hover

and adjust the background colors:

css

for the font color adjust this here:

css2

  • Chrome does a really good job on its developer tools. Just hit F12 and hover. Chrome will highlight the new CSS classes. You see clearly what's changing. – hupseb Sep 16 '13 at 14:34
  • If you want to get rid of theming, there is also a good alternative: Buy one :) here bindtuning.com – hupseb Sep 16 '13 at 14:34
  • i added the following to my cusotm CSS " i add the following :- .ms-welcome-hover, .ms-siteactions-hover { background-color:red; color:red; }" . but no red color will appear either for the background or for the text color ? – john Gu Sep 16 '13 at 14:58
  • For changing the color of the name (text) when hovering use ".ms-signInLink:hover". For not hovering use ".ms-signInLink". Just like in the second screenshot ;) It should work. – hupseb Sep 16 '13 at 15:00
  • unfortunelty adding these to my custom CSS ".ms-signInLink{ background-color:#008CD2; color:white; } .ms-signInLink:hover{ background-color:#63BAE7; color:white; } ". will still display white hover over the username which is already white ! – john Gu Sep 16 '13 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.