🎨 Overwriting CSS

Userback's default UI is designed to be clean and intuitive, but there are times when you may wish to customize its look and feel to better align with your brand's identity. This guide will walk you through the steps to overwrite Userback's CSS, ensuring that your customizations take precedence.

⚠️ Important Note: Always use the !important rule when overwriting CSS styles.

Simple Use-Case: Adding a Gradient Background to the Userback Button

To give the Userback feedback button a gradient background, you can use the following CSS:

.userback-button {
    background: linear-gradient(to right, red, yellow) !important;
}

Advanced Use-Case: Custom Font Based on Mobile Device Size

Step 1: Add your custom font to your CSS file.

@font-face {
    font-family: 'CustomFont';
    src: url('CustomFont.woff2') format('woff2');
}

Step 2: Apply the custom font to the Userback button, but only for mobile device sizes.

@media (max-width: 768px) {
    .userback-button {
        font-family: 'CustomFont', sans-serif !important;
    }
}

Code Snippet for Targeting Userback Elements

To target the Userback elements, use the following CSS classes:

.userback-button-container {
    /* your custom styles */
}

.userback-button {
    /* your custom styles */
}

Limitations and Considerations

• Your custom CSS may break if we update our HTML structure.

Frequently Asked Questions (FAQ)

1. Why do I need to use !important?
   Userback's default styles come with high specificity. Using !important ensures your styles take precedence.

2. Will my custom styles affect mobile responsiveness?
   You can use media queries to control how your styles appear on different screen sizes.

Support & Further Reading

Encounter issues? Please send a message to our support team.