Dashboard: Default Widget Banner en

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:

.widget {
	--default-banner-100p: url("https://images.unsplash.com/photo-1601137705550-adcd8d863861?fit=crop&w=1200");
	--default-banner-75p: url("https://images.unsplash.com/photo-1601137705550-adcd8d863861?fit=crop&w=1000");
	--default-banner-66p: url("https://images.unsplash.com/photo-1601137705550-adcd8d863861?fit=crop&w=800");
	--default-banner-50p: url("https://images.unsplash.com/photo-1601137705550-adcd8d863861?fit=crop&w=800");
	--default-banner-33p: url("https://images.unsplash.com/photo-1601137705550-adcd8d863861?fit=crop&w=400");
	--default-banner-25p: url("https://images.unsplash.com/photo-1601137705550-adcd8d863861?fit=crop&w=400");
}

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 similar rules may override each other (e.g. in the above example, the .widget-random rule will be ignored on #dashboard-widget-111 even if it’s also a random widget, because targeting by ID has higher priority).

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

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

Remove default banner from specific widgets

You can also exclude specific widgets by going to their Advanced tab in the dashboard setup and adding "no-default-banner" in the CSS class field.

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):