Written by Ryan Christian In this tutorial, we are going to be diving into how you can implement and use custom CSS on your Carrot site! If you want to edit the design of your website beyond the styling options that are offered in design theme and in the Visual Editor, custom CSS can be used on Carrot sites to do this!
We’ll be going over where and how to implement custom CSS, as well as how to troubleshoot it and what to do when you run into a visual/design bug. We’ll cover:
Let’s dive in!
🚨 Note: Custom CSS is considered a modification, and is added/used at your own discretion. We are unable to write custom CSS for you or provide extensive support and guidance on CSS.
Where and How to Use Custom CSS
There are two places where you can implement custom CSS on your site: the design editor and block-specific CSS classes.
The design editor will apply CSS styles site-wide on your site. Using block-specific CSS will allow you to apply styles to specific areas of your website’s pages.
Adding Custom CSS via the Design Editor
To get to the Custom CSS section in the design editor, follow these steps:
Step 1: Go to Your Site Dashboard
Step 2: Go to “Design”
Step 3: Go to “Custom CSS”
You should land in a section that looks like this —->
The Custom CSS section has some features to offer, these are:
- Real time updates – when you properly add a CSS rule you will see the page update instantly
- IntelliSense – if you start typing a CSS property it will show a dropdown of all relevant properties
- Error reporting – if there is an error in your CSS, it will underline the text in red and hovering your mouse over the red line will show you the error
- Multiple views – at the bottom of this pane, there is a desktop, tablet and mobile view so you can ensure you are making CSS changes that are responsive
🚨 Note: While adding CSS updates the page here in real time, removing CSS does not. If you want to preview the removal of CSS, you must publish the change then back out of the design editor and view the page.
As previously mentioned in this guide, we are unable to write CSS for you or provide extensive guidance on CSS. If you wish to learn CSS at your own discretion, W3 Schools is a great free resource to do so!
Using Block-Specific Custom CSS
Next, let’s dive into how to use block-specific CSS! There are two ways to use it, you can either assign a block a custom CSS class, or use a pre-configured CSS class:
- Custom CSS class – you can add any word to the field to assign that block a custom CSS class, that way you can easily use it as a selector in the design editor. This way, you don’t have to inspect elements to see and use their already set classes.
- Pre-configured CSS class – these are classes that already exist that will accomplish their purpose when added to the block. For example, the
alignfullclass will make a block full-width on a supported block.
To access the field to add a class to a block, first edit a page and then click on a block. Then in the right-hand pane under block settings, scroll to the bottom and expand the “Advanced” tab. Additional CSS classes can be added here:
Troubleshooting Custom CSS
If you find a visual/design bug on your site, such as content that shifted unexpectedly or text in a certain area that is styled incorrectly, it could be your CSS.
Luckily there is a pretty quick and easy way to troubleshoot this and see if the CSS is causing it that preserves your CSS! Let’s dive into how to do that:
Step 1: Navigate to the Page Where the Issue Is
We can see in the example below, the footer’s headings have disappeared. We want to get that fixed so visitors know what they’re looking at!
Step 2: Click “Design” On the Carrot Navigation Bar
Step 3: Click “Custom CSS”
Step 4: Copy All Your CSS and Paste it Into a Text Editor
For this step, you can right-click on your CSS and click “Select All” then right-click and click “Copy” or use keyboard shortcuts like Control/Command + A and Control/Command + C. Paste it in a program like Notepad (Windows) or TextEdit (MacOS) with Control/Command + V.
Step 5: Delete the CSS in the “Custom CSS” Section and Publish
Once you have your CSS stashed in your Text Editor, delete the CSS in Carrot, publish, and view the section in question.
If the CSS was the culprit, then you should see your visual/design bug disappear. If this happens, modify your CSS at your discretion to have the outcome you are hoping for!
If the CSS was not the culprit, this indicates that there is a different problem that may be unrelated to you. If you run into an issue after removing your CSS, please reach out to us and let us know!
Conclusion
That’s a wrap! You now know how to view, add and troubleshoot CSS on your Carrot site, as well as block-level CSS!
As previously mentioned in this guide, we are unable to write CSS for you or provide extensive guidance on CSS. If you wish to learn CSS at your own discretion, W3 Schools is a great free resource to do so!
Custom CSS can be a great tool to enhance styles here and there on your site, but ultimately if you find yourself writing hundreds of lines of CSS to achieve the look you want, that means we could be improving our design options. Please let us know if this is the case so that we can continue to improve our designs and editing options!