New feature – custom CSS

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.

Screenshot showing how custom CSS checbox looks like

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.

Example CSS custom code in Custom CSS textarea.

Hit Preview button to see the changes in the widget:

Example widget with custom CSS applied.

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:

  1. Your styles will be added to separate <style> tag. This tag is placed in HEAD section, just after our styles.
  2. We do CSS minification on our side but you can use minified code too.
  3. You can use @import rule to include additional fonts or styles.
  4. You can also have styles hosted on your website instead of copy-paste them into text field. Simply use @import rule.
  5. We use BEM in our own styles, just in case you wonder about class names.
  6. 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.
  7. Adding tons of custom CSS or @imports can slow down loading time of your widget. Please use it wisely:)

Example CSS codes

Here are some useful CSS snippets that you can use in your widgets:

Remove orange focus box

Snippet below will remove the orange border activated on focus. It’s recommended to change the color with snippet below in order to provide better accessibility.

.lightwidget .lightwidget__link:focus::after{ display:none; }

Change color of orange focus box

Snippet below will change the orange border activated on focus to blue. You can use any color you want.

.lightwidget .lightwidget__link:focus::after{ box-shadow: inset 0 0 0 .4vw #0000ff; }

Additional info

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:)

Comments (15)

You must be logged in to post comments.