I have a Team Site with many users accessing the site through mobile. I want to replace the blue color (tile color, font color etc.,) with our internal branding color (say orange). What is the best approach to achieve this.

Please note, as this is just a color change, our admin doesn't allow to disable mobile redirection, develop custom mobile view pages etc.,

So, I am looking for options which are simple and doesn't allow complex customization. Thanks in advance.

1 Answer 1


You need to overwrite the existing CSS. Add a content editor web part and identify the class which is providing the blue color. Write that class in the content editor web part under tag and give your color with !important syntax.

For example if

.ui-ribbon{ background-color: #0000 ; } 

write in editor webpart

.ui-ribbon{ background-color: #yourcolorcode !important;}

To identify which is the class, you have to press F12 from your keyboard and check on developer tool.

  • I want to achieve this on the mobile page (i.e., touchapp.aspx) page. Can we add a CEWP on this page?
    – Ram
    Commented Jan 5, 2017 at 8:31
  • Yes you can.. you need to see which css class is providing the color and then need to override that particular class Commented Jan 5, 2017 at 8:42
  • I understand the CSS part, but how do we add a Content Editor webpart on mobile page (_layouts/15/touchapp.aspx)? Can you plese provide the steps to add a content editor webpart on this page?
    – Ram
    Commented Jan 5, 2017 at 8:44

Your Answer

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

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