We are proud to announce our new feature – custom CSS! From now on you can add your own CSS code to customize how the widget will look on your website.
How this feature can be used?
If you ever wanted to change something in a widget but you did not find relevant option in our widget generator, now you can add it. Ever wanted to change font or text color in our widget? Simply add proper CSS code.
It does not mean that we will not add dedicated option to widget generator. At some point things such as caption color, additional hover effects and widget styles will appear in widget generator form.
In order to add custom CSS to your widget code try to generate new widget or edit your widget settings.
Tick Custom CSS checkbox to enable custom CSS code.
In text box that appears after checking Custom CSS option provide your CSS code. Code below will add dark background color, white text and it will center out the captions.
Hit Preview button to see the changes in the widget:
Technical side of Custom CSS
We know that changing widget styles with custom CSS requires knowledge of CSS itself. New feature is dedicated to more advanced users who wish to have more possibilities to change styles of widgets like developers or web designers.
Couple of tips that might be helpful:
- Your styles will be added to separate <style> tag. This tag is placed in HEAD section, just after our styles.
- We do CSS minification on our side but you can use minified code too.
- You can use @import rule to include additional fonts or styles.
- You can also have styles hosted on your website instead of copy-paste them into text field. Simply use @import rule.
- We use BEM in our own styles, just in case you wonder about class names.
- Please note that we add new features or make improvements to our current styles. It can cause conflicts with your own custom CSS. If you notice that something is not working and you do use custom CSS, please verify if there were any changes to styles that might affect your own code.
- Adding tons of custom CSS or @imports can slow down loading time of your widget. Please use it wisely:)
If you manage to add some cool features with custom CSS and you think that it should be part of our widget generator, use our Support page and submit the ticket with your code:) We might also create a page with snippets so other users will be able to easily add some nice additions to their widgets:)