Themeover edits not showing on Front-end with Latest OxygenBuilder

Tagged: , ,

Author Posts

p8092040 November 16, 2023 at 9:06 pm

I’m using the most current versions of WordPress, Themeover & Plugins.
The relevant versions for this issue are:
WordPress v6.4.1, Themeover (Microthemer) v7.2.4.8
OxygenBuilder v4.7.1, FV Player v7.5.41.7212

With Themeover, I am editing the style of the FV Player (free) plugin’s pop-up form for collecting new lead info. OxygenBuilder does not have access within it’s editor to the pop-up form’s styles as I am using a shortcode to insert the FV Player into a page.

I edited with Themeover, Saved and Published.
The Themeover editor shows my desired changes but the front-end page only displays the original styles. I also checked the front-end page in another web browser but it’s not showing my changed styles.

Q#1. Is the latest OxygenBuilder compatible with Themeover?
Q#2. Where can I see the changes, as saved by Themeover?
Q#3. How can I fix this such that my changed styles are displaying on the front-end page?

I’m attempting to change the form’s background colors and submit button colors.
Here’s the CSS code Themeover generated:

/* submit button */
#wpfp_faecad5b1d4d3b29ab610bea8cd5cae8_custom_popup input[type="submit"] {
	color: rgb(255, 255, 255);
	font-size: 13px;
	font-weight: 600;
	background-color: rgb(51, 153, 102);
}
/* background-color on top part of form */
#wpfp_faecad5b1d4d3b29ab610bea8cd5cae8_custom_popup .wpfp_custom_popup_content {
	background-color: rgb(84, 84, 84);
}
/* background-color on bottom part of form where fields & button are located */
#wpfp_faecad5b1d4d3b29ab610bea8cd5cae8_custom_popup .mailchimp-form-3 {
	background-color: rgb(84, 84, 84);
}

Sebastian November 16, 2023 at 10:02 pm

Hey Peter,

Sorry to hear about your issues viewing your styles outside of Microthemer. This is usually due to caching, which needs to be cleared. But some other reasons are discussed in the troubleshooting video.

Looking at your CSS (e.g. #wpfp_faecad5b1d4d3b29ab610bea8cd5cae8_custom_popup), it could also be an issue with dynamic HTML id attributes. This is discussed in the troubleshooting video at seek point 5:15. On rare occasions builders/addons generate HTML content that changes on every new page refresh, including the ids Microthemer hooks into when generating CSS selectors. So they become invalid on the next page load.

The workaround is usually to choose an alternative CSS selector from the default one Microthemer suggests. The selecting elements video explains how to do this, as well as how to set the default specificity level to “low”, so that MT favours classes over ids.

In answer to your questions:

  1. Microthemer is still compatible with Oxygen as far as I’m aware. I will address any problems that are reported.
  2. Microthemer styles are written to external stylesheets located in /wp-content/micro-themes. The content of these styles is loaded in an line style tag if the folder holding the styles is set to load inline. This is the default for page-specific folders. CSS in global folders is combined into one stylesheet. For logged in administrators this will be: /wp-content/micro-themes/draft-styles.css. For non-logged in users this will be /wp-content/micro-themes/active-styles.css.
  3. Hopefully my previous advice to clear the cache or adjust your selector targeting to avoid dynamic ids is helpful for solving your issue. But if not, please let me know. It’s late here in the UK so I will reply tomorrow, but I’m happy to spend time getting to the bottom of the issue if you’re still stumped. If you can post a link to the page you’re working on, that would help me troubleshoot.

Cheers,
Sebastian

p8092040 November 16, 2023 at 11:57 pm

Hi Sebastian,

Thanks for your reply and suggestions. I’m not to CSS savvy though.
I don’t have much time to learn CSS related things from the videos you suggested. But, will do so when I have fewer deadlines.

Maybe, to start, I’ll try to change the “default specificity level to “low”, so that MT favours classes over ids… “. ** I can’t find where to change this? Please help? **

Since I’m using Oxygen, should I “enable” the “Enable Oxygen” setting under Settings?
I don’t want to create a mess, so what ever is more conservative. Please explain… ?

You asked for the address of the page. How do I send it to you privately?

Kind regards,
Peter

Sebastian November 17, 2023 at 10:01 am

No problem Peter, I understand not wanting to get too involved when timing is tight.

You can send a link to the page privately via my contact form.

To set the specificity of Microthemer’s CSS selectors to low:

  1. Click the “Inspect” button in the foot of the MT interface
  2. A set of panels with display in the footer
  3. On the right-hand side, click the low option in the low | high toggle.
  4. Microthemer will then try to use classes to target elements, where possible. The same set of selectors will still be available, but low specificity selectors will be ordered first, and so the default selector will often use a single class.

Regarding the “Enable Oxygen” option, it’s not necessary, but it can help speed up the workflow if you want to add content with Oxygen and then style it with Microthemer at the same time (from a single browser window). You can also just load the frontend in Microthemer if that feels like a simpler approach.

I hope that helps. I’m here if you have any more questions.

Thanks,
Sebastian

You must login or register to reply to this topic.