I added a transition effect to change the background color when hovering over certain boxes in a 3 box row (et_pb_row_1 .et-fb-mousetrap–column). I added the effect to each column/box (et_pb_column_3 .et-fb-mousetrap).
The effect is only showing when enabling the Divi builder (I use Divi theme by Elegant Themes). It is not showing when I exit the Divi builder or when I enter the URL not logged into WordPress.
I made the updates using Chrome but also tested it on Internet Explorer, and it is not working properly on either.
This is normally the result of a caching WordPress plugin like super cache, w3 total cache etc or server level the caching like cloudflare. Logged in users see the up to date non-cached version of the site. While non-logged in users see a cached version, that may not be up to date if you haven’t cleared your cache after making style changes with Microthemer.
You mention that the transition only works when the Divi page builder is enabled. This could fit with the caching theory, if Divi ensures CSS resources are not loaded from the cache when enabled. But it might also mean something else. It could mean that Divi is applying some extra (temporary) CSS classes which Microthemer is picking up on, which are not present in the HTML when Divi isn’t active.
Your staging site is password protected, so I couldn’t see the frontend. But if caching is not the issue I would be happy to troubleshoot this further if you can send access details to your site via our secure contact form?
(I would need to check for any differences in the HTML code for logged in vs not logged in users)
Thanks for sending access. This wasn’t a caching issue. My latter theory was correct – Divi adds extra HTML and CSS classes while active. This extra markup isn’t present on the final rendered content that loads for regular site visitors, and so Microthemer’s selectors that were valid while Divi was active are no longer valid.
The solution when styling a Divi site is simply to turn off Divi when working with Microthemer (using Divi’s Exit visual builder link in the top WP toolbar). That way, Microthemer will only target elements on the page using selectors that will remain valid.
To illustrate exactly why it’s necessary to disable Divis page builder when working with Microthemer, I’ve prepared some screenshots of the HTML code used for one of the boxes you were trying to style.
The first screenshot shows the HTML code Divi generates while active :
Notice the line highlighted in yellow. That div is missing outside of Divi’s page builder, along with some other divs and styling. The following is a screenshot of the published HTML when Divi is not active:
Consequently, the .et-fb-mousetrap portion of your selectors do not target anything on the live site.
On your MT setup, I see a number of experimental selectors with no styles, and a few selectors that only apply transitions when Divi is active. Would you like me to clear out the selectors with no styling in the General folder and update the transition selectors to work outside of Divi? Or would you prefer to do that yourself?
Cheers!
Sebastian
P.S we haven’t added deep integration for Divi yet, like the integration we added for Beaver Builder. With BB, Microthemer temporarily disables BB’s UI controls during targeting mode so the two programs can be used together in one screen. I would like to implement this functionality for Divi too soon, if it’s technically possible (I haven’t dived into Divi’s source code yet).
But I only want the effect to apply when hovering over each of the 3 content boxes (structured cabling; wifi; electrical installation) on the homepage: https://staging.nexusdatacommunications.com
I believe this could be happening because the target selectors used have the same name so it is applying to more elements than I want.
I have tried using different selectors, including those that seem more specific, but these are not having any effect at all e.g. .et_pb_column_2, .et_pb_row_1 .et_pb_column
I would appreciate if you could help point me in the right direction to solve this problem.
I was actually meaning to reply to you after adding the new transition selectors that work outside Divi. But I noticed a bug in which using the :hover event in combination with selectors that have a pseudo element (::before in your case) doesn’t work. I took a detour to fix this which I will release later today. As a workaround on your site, I just created a separate hover selector for applying the red background color. I created a ::before selector to achieve the same effect you had before because this wasn’t possible otherwise. The Divi HTML provided an overlay mask. But the published boxes just have a background-image, and background images are not animatable (in terms of fade replacing a solid color at least).
In answer to your question about limiting the scope of a selector, Microthemer has a CSS modifiers menu where you can tell Microthemer to make the selectors it suggests specific to the current page you are working on. In targeting mode, click the settings icon to the right of the selector label field. This will now be highlighted in green for you, as I’ve already enabled the page-id option. Notice how this will prefix all of your future selectors with a page-specific class added to the body element on all pages e.g. .mt-28342. This option is useful when you want to make sure your selectors don’t target elements on other pages of the site.
I hope that helps. Please let me know if you have any other questions.
.
.