1

Blue is our official colour, and the higher management mentioned that all the colours should be blue. So for my Ribbon Calendar the upper boarder will be green as follow:-

enter image description here

So is there a way to change the upper boarder colour to be blue?

1

Yes. You have to override this classes as follows:

.ms-cui-cg-gr. ms-cui-cg
{
   border-top-color: #36a7ca;
}

.ms-cui-cg-gr .ms-cui-ct-last > .ms-cui-tt-a, .ms-cui-cg-gr .ms-cui-ct-last > .ms-cui-tt-a:hover
{
   border-right-color: #36a7ca; 
}

.ms-cui-cg-gr .ms-cui-ct-first > .ms-cui-tt-a, .ms-cui-cg-gr .ms-cui-ct-first > .ms-cui-tt-a:hover
{
   border-left-color: #36a7ca;
}

Change the color 36a7ca by your desired

UPDATED

.ms-cui-cg-gr, .ms-cui-cg
{
   border-top-color: #36a7ca !important;
}

.ms-cui-cg-gr .ms-cui-ct-last > .ms-cui-tt-a, .ms-cui-cg-gr .ms-cui-ct-last > .ms-cui-tt-a:hover
{
   border-right-color: #36a7ca !important; 
}

.ms-cui-cg-gr .ms-cui-ct-first > .ms-cui-tt-a, .ms-cui-cg-gr .ms-cui-ct-first > .ms-cui-tt-a:hover
{
   border-left-color: #36a7ca !important;
}

Try it now

  • i tried your settings , but they did not chnage the color from green to blue !! any idea? – john Gu Sep 16 '13 at 16:04
  • thanks a lot it worked well for the boarder color. but the Events and Calender links text are still green . i tried adding the following to my CSS to chnage the text color " .ms-cui-tt-a, ms-cui-tt-span { color: #008CD2 !important; } .ms-cui-tt-a:hover, ms-cui-tt-span:hover { color: #008CD2 !important; } ". but seems it will not chnage the text color from green to blue. any idead abotu this ? – john Gu Sep 16 '13 at 16:36
  • 1
    .ms-cui-tt-a > .ms-cui-tt-span { color: #008CD2 !important; } – Alvmad Sep 16 '13 at 17:02
  • I added the following CSS ".ms-cui-tt-a > .ms-cui-tt-span { color: #008CD2 !important; } .ms-cui-tt-a:hover > .ms-cui-tt-span:hover { color: #008CD2 !important; }". It will chnage the text color to blue. but when hovering over it the color will be green , also the color will be green for the currently selected menu. any idea how to chnage all to be blue? – john Gu Sep 17 '13 at 9:16
  • 1
    try this .ms-cui-cg-gr .ms-cui-tt-s > .ms-cui-tt-a > .ms-cui-tt-span, .ms-cui-cg-gr .ms-cui-tt > .ms-cui-tt-a:hover > .ms-cui-tt-span { color: #008CD2 !important; } – Alvmad Sep 17 '13 at 10:38
0

Of course you can ;) Use Google Chrome to find the css class and overwrite it. Here you go:

enter image description here

Look on the right there is the name of the class: .ms-cui-cg-gr.ms-cui-cg

  • i added these CSS " .ms-cui-cg-gr .ms-cui-cg { border-top-color: #008CD2; } .ms-cui-cg-gr .ms-cui-ct-last > .ms-cui-tt-a, .ms-cui-cg-gr .ms-cui-ct-last > .ms-cui-tt-a:hover { border-right-color: #008CD2; } .ms-cui-cg-gr .ms-cui-ct-first > .ms-cui-tt-a, .ms-cui-cg-gr .ms-cui-ct-first > .ms-cui-tt-a:hover { border-left-color: #008CD2; } ". But none of them change the default green to be blue . any idea what is wrong? – john Gu Sep 16 '13 at 16:05

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.