styling individual widgets

[mbreese]

I am going to have a need to create a site where individual widgets will need custom styling.
Here are the things I have to achieve:

1. some of these widgets will be used site wide and some will be page specific
2. the end use of the site will be creating (and removing) widgets on a fairly regular basis.
3. there will be 4 different styles for the widgets.
4. The end user will need to be able to easily select which style they want applied to a specific widget.

So I can style a specific widget after is created. For Example:

.widget-3 {
    background-color: #FF45BB;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.25);}

Or

#calendar-2 {
    background-color: #FF45BB;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.25);}

I can put such rules in the font and custom css rules.

That is the only way I can figure the end user can do this: make a widget, look at it’s id or class with developers tools in firefox or something, then add the rule to the font & custom.

Does anyone have a better way of doing it than this or any other suggestions?

[scrambler]

1. The theme can do per page widget areas, but for individual widget control, I suggest you use a plugin like Dynamic widget.

3-4, The way to make this easier is to use a plugin that lets you add your own Classes to widgets. With that plugin in place, when people add a widget, they can give it a specific class.

https://wordpress.org/plugins/widget-css-classes/

So you just need to create styling for 4 classes (ie: mywidget-1  mywidget-2  mywidget-3  mywidget-4) then your users will simply have to add the class name for the wanted style in the widget class box

[Author]

Posts