The other day I pasted a huge chunk of CSS from a file from an email into the CSS in Beaver Builder, and suddenly the beaver builder edit mode was just a white screen. I was unable to make any further edits, and could not figure out how to fix it for days.
I wanted to just disable the Beaver Builder custom CSS in the inspect tab, but when I asked ChatGPT how, it said this:
As of my last knowledge update in January 2022, most web browsers do not provide a built-in feature to disable entire CSS sources directly from the browser’s developer tools. However, you can achieve a similar effect by disabling individual CSS rules, stylesheets, or elements within the developer tools. Here’s how to do it:
- Disable Individual CSS Rules:
- Open the browser’s developer tools (usually by right-clicking and selecting “Inspect” or “Inspect Element”).
- In the “Elements” or “DOM” tab, locate the HTML element or section where the problematic CSS is applied.
- In the “Styles” or “CSS” tab, you can toggle individual CSS rules on and off by clicking the checkbox next to each rule.
- This allows you to selectively disable specific CSS rules without affecting the entire stylesheet.
- Disable Stylesheets:
- In the “Elements” or “DOM” tab, navigate to the “head” section of the HTML document.
- Locate the
<link>elements that reference external CSS files. You can identify them by theirrel="stylesheet"attribute.- To disable a stylesheet, you can right-click on the
<link>element and select “Disable” or “Remove.”- Override Styles:
- In the “Styles” or “CSS” tab, you can add new CSS rules that override the problematic ones. This allows you to modify the styling without disabling the entire source.
- Local Overrides (Chrome-specific):
- Google Chrome offers a feature called “Local Overrides” that allows you to make temporary changes to a website’s CSS and save them for future sessions. It’s useful for testing without affecting the actual website.
- To use Local Overrides, right-click on an HTML element in the “Elements” tab, select “Add Rule,” and add your custom CSS rule. Chrome will remember these changes for that specific URL.
Please note that these methods are intended for temporary debugging and testing purposes. Disabling or modifying CSS in this way will only affect your current browser session and won’t persist for other users or devices. To permanently remove or modify CSS on a website, you would need to access and edit the actual CSS files or stylesheets on the server.
ChatGPT
However, I tried these and they did not work; as I did not want to interfere with the database to manually remove the bad CSS, I was at a loss of what to do. Thankfully someone on my team found another easy way to fix this. Since all of the elements were there, just invisible, he just used the inspect to navigate through the interface, open the page CSS in beaver builder, delete the bad CSS, and then save the page.
In summary, Using the browser’s inspect tool to navigate through the interface, locate the problematic CSS in Beaver Builder, and then delete it from there is an effective way to fix the issue without directly modifying the database or affecting the entire website. It allows you to make targeted changes to the specific page’s CSS, which can quickly resolve the problem while keeping the rest of your website intact.
Leave a Reply