Skip to content

Widget styling help

Besides a better loading method (the same one used by Facebook, among others), the new widgets also let you add your own CSS styles. We recommend this option for people with a basic knowledge of HTML and CSS.

Note: for a basic introduction to CSS, we recommend this introduction (in Czech).

You can control everything in the widget via CSS. Every class always starts with the widget- prefix.


Examples

Note: in the examples, we deliberately use the long-form style notation. Of course, you can use all the shorthand properties available in CSS.

How to left-align the title and description

.widget-title { text-align: left; }
.widget-description { text-align: left; }

How to change the background color of the widget header

.widget-head { background-color: black; }

.widget-custom-open { color: red; }

We will keep adding more examples as you start working with the widgets. If you have an inspiring solution of your own, feel free to send it to podpora@darujme.cz and we can publish it as inspiration for other organizations.