All Collections
Basics
Can I add custom CSS to Flockler layouts?
Can I add custom CSS to Flockler layouts?

You can create unlimited Walls, Grids, Carousel, and Slideshows, and add a custom CSS to make them fit the brand look & feel

Toni Hopponen avatar
Written by Toni Hopponen
Updated over a week ago

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.

Editing the layout styles, elements, colours, etc. on the Flockler app

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:

  1. Add custom CSS via Flockler’s 'Display' tab.

  2. Add custom CSS directly to your page and any other digital service.

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.

Flockler’s layout editing tools and a custom CSS field

CSS variables

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

CSS Example

Here’s an example for changing the 'Load more' button background and text colour when adding the custom CSS via Flockler’s editor:

.flockler-posts {
  --fl-load-more-background: #478C5C;
  --fl-load-more-text-color: #FFFFFF;
}

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:

:root {
  --fl-item-background: #000;
  --fl-text-color: #fff000;
  --fl-link-color: red;
}

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:

#flockler-embed-EMBED_UUID {
  --fl-item-background: #000;
  --fl-text-color: #fff000;
}

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.

Did this answer your question?