Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Fix The Expected RBRACE Or Unexpected Token CSS Issue In Divi

Nelson Miller Profile Orange
In this tutorial I will explain and show you how to fix the expected RBRACE CSS issue you may face when using custom code snippets.

▶️ Please watch the video above to get all the exciting details! 👆

The Problem

If you are following one of our hundreds of tutorials and are copying and pasting CSS code or if you are writing your own CSS code, you may face an error message that looks similar to the screenshot below. It will say “Expected RBRACE.” and Unexpected token ‘}’ as a red error message.

expected rbrace and unexpected token in a Divi module CSS Main Content

This may seem like a big problem, but don’t worry, it is very minor, and the solution is very simple.  Both errors are related, and both of them are referring to the “right brace” otherwise known as the closing curly bracket.

The first error you may see is “Expected RBRACE” which is showing kind of as a false positive. When writing CSS, it is always required to end any code block with a curly bracket, so if it is missing, you will see the error of Expected RBRACE since it was expected (aka required) but not found.

The second error called the “unexpected token” is actually the real issue here. It is trying to let you know that a right curly bracket has been used in this CSS code box, but it is not possible to use that here.

However, in our screenshot and probably what you are facing, you can see it clearly has a right curly brace. One of the errors says it is expected, the other says it is unexpected. Hmm, so you may be saying, “This is a contradiction!” Well, you would actually be right, and I will do my best to explain.

In our case, there is a totally different issue that only happens if you are writing or pasting code in a Divi module in the Advanced tab in the Custom CSS toggle in the Main Element CSS box. So in reality, the error message is simply confused – there is no better way to let us know that there is a bigger issue, so it gives us these errors. If you are not familiar with the bigger issue, then I totally understand your confusion, but that is why I am writing this guide. The bigger problem causing this error to happen is simply due to the fact that you are pasting or writing the code in the wrong location.

The Wrong Location

Most likely you are seeing this issue when writing or pasting code within the Main Element code box in a module in the Divi Builder. You are probably trying to paste a code snippet you copied from a tutorial, but are getting the error. However, it is not possible to use a CSS selector within a module. That is because this module is already a selector. For example, the Text module CSS selector is .et_pb_text and this would be exactly the same selector as the Main Element box. Since the Main Element is already a selector, it would not be possible to add another selector within that one. The only possible code that you could write in this box would be CSS properties and values which would style the Main element, or in this case they would apply to .et_pb_text. For example, you could write “color: red;” in the Main Element CSS code box, but if you wrote “.selector {color:red;}” with the selector and curly braced it will not work.

The Solution

If you were facing this error in the Main Element of an Advanced tab of a Divi module, this is the wrong location for the code. You need to place the code either in the Divi>Theme Options> Custom CSS or in a child theme’s style.css file. Simply navigate to the backend of your website, hover over the Divi menu, and go to Theme Options. Scroll to the bottom, and you will see the Custom CSS box there, which is the correct location to place code like this with a selector.

How To Add css code to the Divi theme Options custom CSS

NOTE: If you were getting the Expected RBRACE error in the Divi Theme Options, it means you are missing a closing curley brace, so be sure that each of the code blocks end with “}“.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

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

Recent Posts

0

Your Cart