Dashboard: Default Widget Banner
Theme

Dashboard: Default Widget Banner en

Salvatos 23 9

Gives a customizable default header image to entity previews when the entity doesn’t have its own image or banner. In addition to making your dashboard more colorful, it will help you achieve consistent heights between widgets.

Customize header by size

A different image can be specified for each widget size. Add the following to your campaign CSS, replacing the URLs as appropriate:

#campaign-dashboard .widget {
    --default-banner-100p: url(https://images.unsplash.com/photo-1600673351141-db8833b01915);
    --default-banner-75p: url(https://images.unsplash.com/photo-1600673351141-db8833b01915);
    --default-banner-66p: url(https://images.unsplash.com/photo-1600673351141-db8833b01915);
    --default-banner-50p: url(https://images.unsplash.com/photo-1600673351141-db8833b01915);
    --default-banner-33p: url(https://images.unsplash.com/photo-1600673351141-db8833b01915);
    --default-banner-25p: url(https://images.unsplash.com/photo-1600673351141-db8833b01915);
}

Each line sets the image for widgets with a width of 100% (Full), 75% (Large), 66% (Wide), 50% (Half), 33% (Small) and 25% (Tiny), respectively. Of course, you can use the same image for any number of them if its width is sufficient.

Customize header by widget type or ID

You can also target different widget types more specifically by targeting other widget classes, or even specific IDs:

.widget-random {
  --default-banner-33p: url(https://images.unsplash.com/photo-1600673351141-db8833b01915);
}
#dashboard-widget-111 {
  --default-banner-33p: url(https://images.unsplash.com/photo-1600673351141-db8833b01915);
}

You will still need to specify the URL for each widget size you wish to affect. Keep in mind that earlier declarations are overridden by later declarations (i.e. the above .widget-random rule will be ignored if #dashboard-widget-111 also applies, because the last applicable rule prevails).

Valid classes are: .widget-preview, .widget-random, .widget-calendar, .widget-recent, .widget-unmentioned.

Tip: Make sure to use a hash, not a dot, when targeting widgets by ID!

Remove default banner from specific widgets

You can also exclude certain types and sizes of widgets, or specific widgets, by replacing their url() declaration with "none":

.widget-calendar, #dashboard-widget-111 {
--default-banner-50p: none;
}
.widget-calendar .panel-heading h3, #dashboard-widget-111 .panel-heading h3 {
color: inherit;
text-shadow: unset;
}
The second rule in this example will reset the text color and shadow to their default values so you don't get white on white.


Latest version: 1.3 View Content
Released 1 month ago

Adds support for the new Large (75%) widget format.