I've been tasked to update a website using DIVI builder (Elegant themes) on Wordpress.
As I'd like to write some custome code, I've found a neat integrated "Code" module that I can write my html, css and js in, but here lies my problem...
Whenever I write some code...certain tags are being deleted after saving and reloading to view the changes.
This is especially problematic when I want to write custom styling and the tags disappear, leaving the CSS code to be treated as HTML text without them.
For example...if I write
<h1>Test heading</h1>
<style>
.random-class {
color: red;
}
</style>
I end up with:
<h1>Test heading</h1>
.random-class {
color: red;
}
...which breaks the styles.
The product documentation clearly shows that the module should work normally.
I can use other ways, and inline styles, but as some things have been limited to me within the platform, this would be a neat way of doing it, if it works.
Any ideas?
TLDR: Tried using the "Code" module to insert internal css styles and expected them to work, but style tags get deleted on save and reload.
EDIT #1: I've been fiddling with it and it seems that it deletes only certain selectors. The usual HTML formatting selectors seem to be fine ", p>,, ", etc., but the problem persists with others that don't have to do anything with formatting...", , ", etc.
Pictures for illustration
Further testing To clarify...as said in the 1st answer, if I go to the advanced tab of the Code Settings, I can access a "Custom CSS" section where I can use css freely, although if selecting a specific class, it does give errors, while working semi-correctly.
Example of it working Example of errors
Example of it not working correctly
For testing purposes, I used the blog module, which I wanted to convert into display:grid as the built in grid option didn't give much room for modifying. If I use the "Code module" and insert it within the "Blog module" section, by using the style selector, I am able to modify all classes I need.
By using the Advanced tab's Custom CSS option, something gets broken along the way.
Possible workaround solution found I may have found a possible solution...within DIVI's "Theme options", there is a "Custom CSS" box at the bottom that seems to accept CSS normally.
It does give some EXPECTED RBRACE errors where there shouldn't be any, but it, so far, works.
It isn't an elegant solution as I need to jump between the editor and the settings area, so I'd still like to see if there is a fix for my initial inquiry, but if not, this should do...I hope.
you shouldnt have to use selectors you should just select the element you want to change for css stuff, click the gear icon go to advanced and then change color: red, in the main element of the css custom section. shouldnt have to do h1 { color: red} because you are already selecting the section you are changing.