Fix Module Settings Code Editor Styles Messed Up

Written by Dan Mossop

Some Divi modules, such as the code module and the code snippet module, include a code editor field. Occasionally other plugins will accidently affect the styles of this code editor field making it hard or impossible to use. Here's how to fix some of these style conflicts.

Fix weDocs affecting module settings code editor styles

The weDocs documentation plugin adds some styles to code boxes in its "docs" post type. These override and affect the module settings codemirror code field. Here's an example of how an affected code editor looks:

This can be fixed by overriding Wedocs' styles with the following CSS:

#et-fb-app pre.CodeMirror-line {
	font-family: inherit;
	display: block;
	padding: 0 4px;
	margin: 0;
	word-break: normal;
	word-wrap: break-word;
	white-space: pre-wrap;
	background-color: transparent;
	border: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

Related Post: Adding CSS to the Divi Theme

We may earn a commission when you visit links on our website.

Run PHP Code Directly in your Divi Layouts

Unlock endless customization, automation, and dynamic functionality by seamlessly adding PHP code to your Divi pages and posts with the Divi PHP Code Module. Style, preview, and debug your PHP creations directly in the visual builder with robust error handling and enhanced security.

Get Divi PHP Code Module

Latest Posts

Add Text Before the Number in the Divi Circle Counter

Adding a custom number prefix to your Circle Counter lets you clarify what the value represents—such as currency, units, or labels—without relying on the default percentage format. This helps your counters better match real-world metrics and keeps the design...

Add a Second Line of Text in a Divi Button Module

Adding a second line of text beneath a button’s main label lets you provide extra context, a brief benefit statement, or a supporting call-to-action without cluttering your design. This can improve clarity and increase clicks by making the button’s purpose more...

Top (or Bottom) Align Divi Icon List Module Icons

When Icon List items wrap onto multiple lines, the default icon alignment can make the icon appear vertically centered next to the text, which may look unbalanced or harder to scan. Setting the icons to align at the top creates a cleaner, more consistent...

Make Divi Button Modules Full Width with Centered Content

This configuration makes a Divi button stretch to the full width of its container while keeping its label neatly centered, creating a bold, edge-to-edge call-to-action. You might want this for hero sections, pricing tables, or any layout where a standard-sized button...

Fix the Flickr Typo in the Divi Social Media Follow Module

Sometimes it's the small things that make the difference... there is a minor typo in the Divi Social Media Follow module that was present in Divi 4, and (currently) remains in Divi 5. Specifically, the tooltip for Flickr is misspelled as "Flikr". Here's how to fix...

2 Comments

Peter on November 18, 2022 at 10:12 am

That solved my issue! 😉 Great support! 👍
Reply
- dan on November 18, 2022 at 10:30 pm
  
  I'm really glad it helped, Peter :)
  Reply

Divi Booster