Showing results for 
Search instead for 
Did you mean: 

Changing Text Colour on Website

Changing Text Colour on Website

Hi All!,


I'm brand new to development of Magento and I'm trying to figure out as of now, how to change the colour of the text on the header of the sidebar (see image point 1) and the Navigation Menu Text (see image point 2.). For the sidebar I'm trying to turn it's Title and the subject contents back to black, and for the Navigation menu, I'd like to change the text to white when it's highlighted in blue. I'm using Magento 1.9 with the Athlete Theme 1.5.1 I've tried to adjust the image on Appearance Settings but to no luck, nothing changes. I've tried to change the colour settings, such as the Header, Sidebar and Navigation Sections under System -> Configuration -> Athlete Theme Appeareance Settings, reindex and refresh cache but no luck nothing changes.


Thanks in advance for everybody's input.


Magento Text ChangeMagento Text Change

Alternatively, if nobody can see the image, heres the link to hopefully the public album with the same image link


Re: Changing Text Colour on Website

As i know use your browser's developer tools to inspect the elements you want to modify. Right-click on the header, sidebar title, or navigation menu text, and select "Inspect" or "Inspect Element." This will open the developer tools, allowing you to view the HTML and CSS styles applied to the selected elements. screen mirroring hbo max In the developer tools, find the CSS classes or IDs associated with the header, sidebar title, and navigation menu text. Take note of these classes or IDs as you'll need them to target the elements in your CSS file. hope it helpful to you.



Re: Changing Text Colour on Website

Sidebar Title:

  • Create a local.css file and target the .block .block-title selector to change the color
  • Or edit title.phtml template file and modify the inline style on the h2 tag

Navigation Menu:

  • In local.css target .nav a to change active link color
  • Or in topmenu.phtml edit the inline style on the li tag

The key is to use a local.css file or modify template files to override the default theme styles, without editing the core theme files. Clear caches after making changes.