Academy Pro: how to change background color?

[hello.sun]

Hi,

Can someone teach me how to change the background color on the Academy Pro theme? I'd like to change the grey line (#f5f5f5) to another color.

In this topic, 'Academy Pro – Remove Grey Background', Victor mentioned how to completely remove the grey (#f5f5f5) color.

I used those lines of codes (lines 784 to 808) to change the 'background-color', however nothing happened, even after refreshing.

.site-inner::before {
	content: "";
	background-color: #f5f5f5;
	height: 50%;
	position: absolute;
	-webkit-transform: skewY(-5deg);
	-ms-transform:     skewY(-5deg);
	transform:         skewY(-5deg);
	top: 120px;
	width: 100%;
	z-index: -1;
}

.site-inner::after {
	bottom: 100px;
	background-color: #f5f5f5;
	content: "";
	height: 50%;
	position: absolute;
	-webkit-transform: skewY(-5deg);
	-ms-transform:     skewY(-5deg);
	transform:         skewY(-5deg);
	width: 100%;
	z-index: -1;
}

Thank you

http://local client website

[Baz]

Are you trying to change the color on the front page? There is a similar set of codes in style-front.css for each area.

.front-page-1::before {
	background-color: #f5f5f5;
	content: "";
	height: 150%;
	transform: skewY(-5deg);
	position: absolute;
	top: -240px;
	width: 100%;
	z-index: -1;
}

.front-page-1::after {
	bottom: -140px;
	background-color: #f5f5f5;
	content: "";
	height: 150%;
	transform: skewY(-5deg);
	position: absolute;
	width: 100%;
	z-index: -1;
}

You just need to change the 'background-color' to your own preference.

[hello.sun]

Hi,

No, I'd like to change the color for the entire website.

I ran into those lines of codes yesterday when I was looking to edit individual widgets.

Thank you for your input though.

[Baz]

Ah okay. The Academy Pro theme is littered with different 'background-color:' CSS 🙂

I would suggest you start by commenting out (/* css */) any 'background-color:' CSS, for the main site areas, and changing the values to see what effect it has. This will lead you to target the changes you need to make to change the entire site color.

[Victor Font]

You're on the right track, but changing the site-inner isn't enough since the widgets have their own back-ground color settings.

Search the #f5f5f5 color code and change them all to your new background color. Make a backup of the CSS files first just in case it doesn't produce the result you want.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[hello.sun]

Thanks Victor and Baz!

[Author]

Posts