From Flockler’s 'Display' tab, you can edit the look & feel of each layout and embed code. Click 'Edit style & settings' for any of the layouts.
But sometimes, you need to fine-tune details, and that’s when the custom CSS comes in handy.
It’s easy to add custom CSS to Flockler layouts. You can either:
Both options have their benefits.
The first option allows you to make changes from Flockler’s dashboard without any work needed on your websites and other digital services.
The second option is helpful if your team wants to make sure that the custom CSS is always the same and the look & feel is unified on all pages. Then, you don’t need to make any edits on Flockler – simply add the embed code and custom CSS to your website or any other digital service, and the CSS overrides Flockler’s styles on every page.
If you don’t have CSS skills and need help, don’t hesitate to send us a message via email or live chat on the website. Our customer success team is happy to help!
1. Add custom CSS via Flockler’s 'Display' tab
To add your custom CSS via Flockler’s dashboard, click the 'Display' tab in navigation and then 'Edit style and settings' for any of the layouts you’ve created.
Then, scroll down to the 'Advanced' part and add the custom CSS to the field.
These variables you can edit in the editor with the WYSIWYG colour selector, but you can also use the custom CSS to override them:
Layout’s background: --fl-background
Item’s background: --fl-item-background
Item’s text colour: --fl-text-color
Here are some of the key variables that you can edit with the custom CSS and which are not visible in Flockler dashboard for users to edit:
Item’s border-radius: --fl-item-border-radius
Item’s link colour: --fl-link-color
Item’s link colour when hovering: --fl-link-color-hover
Item’s footer text colour (e.g., timestamp): --fl-footer-text-color
Load more button text colour: --fl-load-more-text-color
Load more button colour: --fl-load-more-background
Load more button colour when hovering: --fl-load-more-background-hover
Load more button radius: --fl-load-more-border-radius
These variables are only used in the Grid layout:
Item’s content background colour when a text post without image or video: --fl-grid-text-background
Item’s content text colour when a text post without image or video: --fl-grid-text-color
These variables are only used in the Carousel out:
Item’s content background colour when a text post without image or video: --fl-carouselv2-text-background
Item’s content text colour when a text post without image or video: --fl-carouselv2-text-color
Here’s an example for changing the 'Load more' button background and text colour when adding the custom CSS via Flockler’s editor:
2. Add custom CSS directly to your page and any other digital service
If you are adding the custom CSS directly to your website or any other digital service, you can use the same CSS variables from above, but change .flockler-posts to :root.
Here’s an example CSS to change item’s background, text and link colours:
The CSS above would apply to all Flockler layouts on the page. If needed, you can add a unique custom CSS to each layout and embed code. Instead of :root, use the UUID of the embed code like this:
You’ll need to replace 'flockler-embed-EMBED_UUID' with the unique value of your embed code. You can find it in each embed code’s div-id attribute.
If you need any help with the custom CSS, please do not hesitate to contact our customer success team. We are happy to help via email and live chat.