Advanced CSS Overrides

Whilst we surface as many practical styling settings as possible in App Settings, there are instances where you might want to change the design of more intricate components in your Experience.

To see a list of the classes, components, atoms and more which can be targeted easily with CSS Overrides, check out FanKit's Storybook page

1. Create a CSS class we can apply to specific Elements

Writing a CSS class and applying it to specific Elements

1

Create your Poll Element

In your Element, navigate to the Converters tab and scroll to the Custom class names field. Insert the CSS class specialPoll

2

Create a "specialPoll" class

Navigate to App Settings → Styles → Advanced → CSS override block and insert the following CSS:

.specialPoll {
    .fk-element-title {
        font-size: 26px;
    }
}

Hit Save Changes at the bottom of the screen. You now have a class named "specialPoll" which is applied to any Elements you assign "specialPoll" in your Project.

Inside your class there's another class called "fk-element-title" which is a FanKit class (see more FanKit classes in the FanKit Storybook). We've then given it the font size of 26 pixels.

Hit Save Changes at the bottom of the screen. Any Elements with "specialPoll" applied will now have a 26 pixel title font!

3

Creating abmore complex Element class

Let's also give all "specialPoll" Elements some extra visual candy by making them indented with rounded corners and a drop shadow. In your CSS override block add the following beneath our previous CSS additions:

.element-layout.specialPoll {
    margin: 16px;
    border-radius: 16px;
    box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.2);
}

This will first target the FanKit class "element-layout" which applies to all Elements. Then it looks inside those Elements to see if our "specialPoll" class is applied. Each individual line of styling afterwards is applied to all applicable Elements.

Hit Save Changes at the bottom of the screen. Any Elements with "specialPoll" applied will now have a drop shadow, rounded corners and a slight indent!

You can create as many classes as you like. A great use for this is changing the style or highlighting specific Elements relating to teams or brand partners which need to look unique without changing the global Element styling

2. Apply style changes to Experience components

Writing a CSS class to change components in your Experience

1

Identify the component you wish to edit

To find which component you wish to customise you can use Storybook or your browser's "inspect" tools. For this example we'll change the "Sign in" button, which has the class name fk-profile-button

2

Writing the CSS

Navigate to App Settings → Styles → Advanced → CSS override block and insert the following CSS:

.fk-profile-button {
    border-radius: 32px;
}

The class selector targets the FanKit class "fk-profile-button" in the first line. Inside the braces { } we have changed the border-radius property to 32 pixels, which will round the corners of this component.

Hit Save Changes at the bottom of the screen. If you have turned on the "Sign in" button on your Experience, you'll see it now has rounded corners!