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; }

Loading styles from your own server

You can also load styles from your own server. If you will find any limits in the Custom CSS field or if you just want to use things like Sass, PostCSS or keep the custom code in your repository, this is a way to go. Remember that the URL must be publicly available in order to be properly loaded.

@import url(https://mywebsite.com/path/to/styles/for/lightwidget.css);

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 (11)

  • Hi - If I want to change the css on my widget to display more than one or two lines of text with the instagram code, what would the correct format?

    staplessquash

    • Hi there. Do you refer to hover effect "Show caption" or to regular captions in grid/slideshow module?

      lightwidget

      • on hover

        veandvileofficial

      • So if it is for hover effect, you need to apply custom CSS like so: .lightwidget.lightwidget--hover-caption-slide-up .lightwidget__caption { white-space: normal; height: 60px; } You need to play around with height to show as many lines as you wish:)

        lightwidget

  • Hi. Is it possible to pass TAGS oin the html code somehow ?

    davenam82

    • Hi there! It is not possible at the moment. If you require some additional tags, please open a support ticket and describe us the use case. We might be able to help you:)

      lightwidget

  • hi. I can not set :before content: ''. It always return before content: \'\' . Please help me

    hopnv.1611

    • Hi there! This is common issue with custom CSS at the moment. Backslashes are added to avoid potential security issues. In such case we recommend to host the file with additional styles to the widget on your website. File must be publicly available. In Custom CSS field simply import the file like so @import url(https://my.website.com/lightwidget-styles.css); It will solve the problem:)

      lightwidget

      • Thank you so much

        hopnv.1611

  • where I can find name of all classes to change?

    mbalawajder

    • Hi there! The classes names actually depends on the settings of the widget. The easiest way is to configure the widget as you like and then use for instance Element Inspector in Chrome to find out the classes name. You can override every class that you can find, we don’t have any restrictions here.

      lightwidget

You must be logged in to post comments.