Agency-Pro background color flash

[Ben Siegfried]

What is the CSS rule for the jQuery color fade effect in Agency Pro? In the demo it is the yellow fading color each time you visit a page. I don't have it working in a site I'm building out, link below. I've found what I think are the jQuery files for it, in agency-pro > js directories of the website, but it isn't clear to me which CSS, if any, is setting the color for the color fade.

http://thekennedybook.com/marketingdev/

[Brad Dalton]

I think you can change that color using the Background settings.

Go to Appearance > Background > Display Options > Background color.

---

Tutorials for StudioPress Themes.

[Ben Siegfried]

I just changed that to the color of the green island in the bg, cleared cache and it didn't do anything. The island is a .png with no background.

The body is the current blue.

The current blue bg has updated Agency-Pro's Blue theme CSS. Not sure if that would have anything do with it.

[Brad Dalton]

Tested it locally and it works for me.

---

Tutorials for StudioPress Themes.

[Ben Siegfried]

Tested mine or a version of yours locally?

[Ben Siegfried]

I went to Go to Appearance > Background > Display Options > Background color and changed it to red and nothing happens.

[Smarty]

I changed line 148 (background-color) of my styles.css and that worked for me.

body {
	background-color: #d7c603;
	color: #666;
	font-family: 'EB Garamond', serif;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.625;
}

If your not using the default color, look for the respective body color and change accordingly. For example for blue look around line 1665 - body.agency-pro-blue { background-color: #0cc4c6; }

Hope this helps.

---

Web Design, Development & Consultancy

Being The Best He Can Be! | http://www.paul-smart.co.uk

[Ben Siegfried]

Ok thanks. My issue turned out to be that I was using a background color of the same refresh color.

[lisavanahn]

Hey just following this link because I've been having a similar issue with this theme. Can either of you help me out?

I've updated the background to go 'white' instead of the specific green color I had edited for links and such (from Agency Pro Green I specified the green I wanted to use) but now all the buttons on my site have gone to yellow and I can't understand why!
http://www.lvafitness.com
What I want is the refresh to be white but all the links and hovers to stay the green I had specified. Right now all my links are green but if you click over any "buttons" they turn yellow. You can see this if you go down to the contact portion of my home page and hover on the contact button "I'm here to help" .

And then the weirdest thing ever...I changed the background so all the refresh to goes to white (with the hovers turning yellow, ouch) but this one page http://lvafitness.com/integrity-coaching/

turns to black before white. WHHAT???

This is so bizarre I can't figure it out!

Thanks in advance if you can help me out! Lisa-

[Ben Siegfried]

It also depends on the background image you have. I see that you have different background images coming in for different pages. Basically, if you want the same background refresh delay appearance you have to have the same image appearing site-wide. The image is delaying and then fading in.


//jQuery(document).ready(function($) {
//$("body").backstretch([BackStretchImg.src],{duration:7000,fade:1000});
//});


Here, in this example, I have a background-color set by the theme's Green theme color (I customized the bg from what the theme had it set at by default, and changed the color of the green to be the green that I want). Then, I have the Island (a .png with transparent background) coming in. So, the blue is a CSS background-color, and the image is backstretch jQuery but has a transparent background.

http://coronadomarketing.com

The background-color selector for the 'theme color' you choose in Genesis Settings is located in that area of the CSS where that color's CSS is found. If you choose no theme color and leave it default, then it defaults to I think the body tag, but if you choose a theme color then the background-color becomes the theme colors background which is found in THAT color's CSS. This is where it can get additionally confusing. As you can see below, I customized the bg to be that blue. When you're changing the theme color in Genesis Settings you're changing the body class for the background color. So if you're going to the body tag instead of body.agency-pro-my-theme-color-choice then it could get confusing.


body.agency-pro-green {
background-color: #B9E5FA;
}


[hoven002]

Hi Benjeeno or others,

Any idea, how to remove this background-color transition completely?

Regards,
Kenneth

[Ben Siegfried]

Try removing backstretch-set.js from the js directory.

[hoven002]

Nope, I tried to set the value to zero in backstretch-set.js and even removed it, but that didn’t work (result was a solid colored background).

My door is open for other suggestions (-;

[maziermedia]

Did you find an answer for this? I'm not a fan of the transition "flash" either.

[maziermedia]

Never mind, I found the other discussion...here is the link in case someone else had the same question.

How to remove background splash in Agency Pro and Metro Pro

[lmai]

For me, the issue isn't with the background set js file.
It's because the background color is seen before the image is faded in.

So the solve is the change the background color to white or black in the CSS file

body.agency-pro-orange {
  background-color: #fff;
}

Reference: http://larrymai.com/remove-the-color-flash-genesis-agency-pro-theme/

[Author]

Posts