Skip to main content
CallTower Solutions Center

EXAMPLE: Change the UI highlight color

Let's look at a quick example of using LESS CSS in your MindTouch site.


The user interface highlight color

You'll notice that throughout your MindTouch site, there is a blue highlight color for links and certain user interface (UI) elements:


Identify your color

What if you wanted to change that highlight color to your corporate color?  In the example below we change the highlight color to the MindTouch red in our logo here:


Find a MindTouch page that contains both a link and your logo. Right-click the link and select Inspect from the context menu. In the right panel of the developer tools, find the current link color:

Click on the color square to bring up a color selector.

Now, move your cursor over your site logo (in our case, the default MindTouch logo) and target the correct color pixel:


Notice the hex color code in the color selector window and record the color code.


Change your highlight color

As outlined in our basic branding documentation, there is a single line of LESS CSS to target the site's highlight color:

@highlight-color: #30b3f6;


Now, navigate to Site tools > Control panel > Branding > Custom Site CSS and copy the above line of CSS into the All Roles CSS field:


Finally, change the color code to the new hex color recorded earlier and click Save at the bottom of the page. You've now changed your site's highlight color with one line of CSS!

Ok, let me try.


Go here next!

  • Was this article helpful?