Changing Other Colors Not in ThemeMagic

aztechgeeks

How do I change the color of the font on the menu, the hero button & text color, the background color and color of the icons?

I have attached pictures, I would like to turn all the orange, red, like the "AZ Tech Geeks" at the upper left.

Thanks

aztechgeeks

Okay just two issues left:

the issue with the icons and the background color of the tiles

and then offcanvas menu will not let me rename it, also I would like to change its color to what seems to be the "danger" setting for both this and the "Back to Top" button

Thanks

saguaros

Hi aztechgeeks

For offcanvas title, you can override the language constant: TPL_SIDE_BAR in Admin panel > Extensions > Languages > Overrides : https://prnt.sc/snvmxr

To change its color text and background color, just override this css rule:

#t3-off-canvas .t3-off-canvas-header {
  background: linear-gradient(135deg, #fd7d57, #f55d59) !important;
  color: #ffffff !important;
	}
	
#back-to-top .btn.btn-primary {
  background: linear-gradient(135deg, #fd7d57, #f55d59) !important;
}

Note: change above color to your desired color.

aztechgeeks

Thanks, I only have a problem with the blue text and the orange boxes now. When I change them on the inspector it works, but when I upload it, I get a red box.

saguaros

Hi aztechgeeks

Try to add background-clip property as below:

.acm-features.style-1 h1 {
    background: linear-gradient(135deg,#f00,#ff2a00);
    background-clip: text;
}

aztechgeeks

Nope still causes the entire space to be red. I have left the code there for you to inspect. www.aztechgeeks.com

saguaros

aztechgeeks

It looks good now: https://prnt.sc/sp7485

Is that what you want to achieve?

aztechgeeks

No it still has the red square around it on my device. I cannot figure out where the code may be in the @media tags

saguaros

aztechgeeks

I used Firefox so didn't notice that it not work with Chrome/Safari, pls update above code to:

.acm-features.style-1 h1 {
    background: linear-gradient(135deg,#f00,#ff2a00);
    background-clip: text;
		-webkit-background-clip: text;
}

and clear browser's cache.

aztechgeeks

Thank you!