Before you begin
Ensure you have access to modify CSS in your Experiences by Jebbit.
Review 'Customizing experiences with HTML’
Familiarize yourself with basic CSS principles before making modifications to your experiences.
Note: To gain access to custom CSS for your Experiences by Jebbit, contact your Jebbit Customer Success Manager. This feature is restricted by default.
Add and Modify CSS
You can add custom CSS to your Jebbit experience either locally (applying to a single screen) or globally (applying across all screens).
Adding Local CSS
Navigate to the specific screen's editor within your Jebbit experience where you want to apply custom CSS.
Look for the "Advanced" section within the screen's settings.
Check the box next to “Show custom css”. This will open a CSS editor for that screen.
In the editor, you can write your custom CSS rules to target elements on that specific screen. You can use element selectors, IDs, or custom classes that you've added to the HTML. For example:
.myClass {
color: blue;
}Your custom CSS will be applied only to the elements within the current screen.
Adding Global CSS
In the Jebbit builder map, click the "design" button located in the top right corner.
In the design settings, toggle the switch next to "Show custom css". This will open a global CSS editor.
Within this editor, you can write CSS rules that will apply to all screens within your Jebbit experience.
Global CSS is useful for applying consistent styling across your entire experience.
Setting Custom Classes via the Editor
For more reliable CSS targeting, you can set custom classes directly within the element editor.
Select an element in the Jebbit Editor and check the ‘Show custom css’ box.
In the CSS editor, locate the "Class Name" text input field.
Enter your desired custom class name in this field. You can then use this class name to target the element in your local or global custom CSS.
Understanding Main Classes
When elements are added to a screen, Jebbit assigns default CSS classes. Some of the main encompassing classes include:
content-block-inner: Contains the main content of the page, excluding the logo.campaign-logo-wrapper: Specifically wraps the logo and is a sibling ofcontent-block-inner.content-block-primary: Contains bothcontent-block-innerandcampaign-logo-wrapperelements.content-piece-wrapper-x: Used for individual page elements, with "x" indicating the numerical placement (starting from 0 for the topmost element).column-wrapper and column_x: Used for columns within container elements, with "x" indicating the column number (starting from 0).content-piece-wrapper-column_x-y: Used for elements within columns, with "x" indicating the column number and "y" indicating the element's position within that column (starting from 0).
Next Steps
After adding or modifying your custom CSS:
Preview your Jebbit experience to ensure the changes are displayed as expected.
Test your experience on different devices and screen sizes to verify responsiveness.
Iterate on your code as needed to achieve the desired look and functionality.