Class names update

Hi there! This article will be important for users using our Custom CSS feature. We had to update the HTML structure of the widgets as well as rename some of the classes.

Reasons for the change

We plan to add some new options to our widgets. They will require additional HTML elements. The previous HTML code structure had some limitations. We decided to change the structure a bit to make it easier to add new elements and to keep the code semantic.

In the CSS code of our widgets, we use the BEM methodology. As the structure of the HTML code changes, the naming of the classes also changes. We wanted to maintain the same naming standard everywhere.

HTML code changes

The <li> tag has been wrapped with an additional <div> tag.

HTML structure before the changes:

<ul class="lightwidget">
    <!-- list with posts -->
</ul>

HTML structure after the changes:

<div class="lightwidget">
    <ul class="lightwidget__posts">
        <!-- list with posts -->
    </ul>
</div>

New class names

Mainly block modifiers have changed. Below is a table showing the names of the classes before and after.

In most cases, the current code in Custom CSS should work fine. If there is any problem, please update the class names in the Custom CSS field according to the table.

BeforeAfter
.lightwidget--grid .lightwidget__posts--grid
.lightwidget--slideshow .lightwidget__posts--slideshow
.lightwidget--columns .lightwidget__posts--columns
.lightwidget--captions .lightwidget__posts--captions
.lightwidget--click-event-none .lightwidget__posts--click-event-none
.lightwidget--hover-zoom-in .lightwidget__posts--hover-zoom-in
.lightwidget--hover-caption-slide-up .lightwidget__posts--hover-caption-slide-up
.lightwidget--hover-fade-in .lightwidget__posts--hover-fade-in
.lightwidget--hover-fade-out .lightwidget__posts--hover-fade-out
.lightwidget--hover-likes-comments .lightwidget__posts--hover-likes-comments
.lightwidget--hover-show-icon .lightwidget__posts--hover-show-icon
.lightwidget--hover-show-instagram-icon .lightwidget__posts--hover-show-instagram-icon
.lightwidget--zoom-out .lightwidget__posts--zoom-out
.lightwidget--hover-zoom-rotate .lightwidget__posts--hover-zoom-rotate
.lightwidget--image-format-square .lightwidget__posts--image-format-square
.lightwidget--image-format-original .lightwidget__posts--image-format-original
.lightwidget--object-fit-fallback .lightwidget__posts--object-fit-fallback
.lightwidget--hide-tiles .lightwidget__posts--hide-tiles
.lightwidget--grid-{number} .lightwidget__posts--grid-{number}
.lightwidget--columns-{number} .lightwidget__posts--columns-{number}
.lightwidget .lightwidget__posts

If you need to apply some of the changes to class names simply edit your widget settings and update the values in Custom CSS field. If you don’t know how to edit your widget settings this article is for you – How to edit widget settings?

Comments (0)

You must be logged in to post comments.