Fix Module Settings Code Editor Styles Messed Up

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;

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin


  1. That solved my issue! 😉 Great support! 👍

    • I'm really glad it helped, Peter :)


Submit a Comment

Your email address will not be published. Required fields are marked *