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?

Improve this question

2 Answers 2

Reset to default
2

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

Improve this answer
6
  • i tried your settings , but they did not chnage the color from green to blue !! any idea?
    – John John
    Sep 16, 2013 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 John
    Sep 16, 2013 at 16:36
  • 1
    .ms-cui-tt-a > .ms-cui-tt-span { color: #008CD2 !important; }
    – Alvmad
    Sep 16, 2013 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 John
    Sep 17, 2013 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, 2013 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

Improve this answer
1
  • 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 John
    Sep 16, 2013 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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