By default, WordPress does not offer any kind of widget styling other than plain basic looking widgets in a page. Unless a theme provides you with its own custom default styling, we are at the mercy of using a plugin to achieve this — which is actually a good thing.
Widget Styles for Longevity Pro
I kept the available styles to a minimum because of the design concept of LongevityPro. However, you get to choice of using the default widget styling that comes with WordPress or you can use the custom styles I’ve given you which also includes colours.
- Widget Style: Default
- Widget Style: Box
- Widget Style: Border
- Widget Style: Bar
- Widget Style: Line
Colour Styles
In addition to the widget styles you see above, you can also change the colours of them (with exception to the “Default” WordPress style) with the following colour classes in bold:
- Default is the light grey you see above.
- Blue = blue
- Tan = tan
- Grey = grey
IMPORTANT The colour options you see above are for the default theme colour scheme. Your widget colours will change based on the colour scheme you choose. The one colour that will remain the same across each colour scheme will be the default “light grey” colour, and will be in addition to the following colour options you see below. Also, these styles best work on the page background of white, so if you use them in the “Bottom” sidebar positions with the background colour, you may need to customize your colour styles with CSS.
Sky
- Sky = sky
- Light Sky = lightsky
Grey
- Dark Grey = darkgrey
Burgandy
- Burgandy = burgandy
- Light Burgandy = lightburgandy
Rust
- Rust = rust
Green
- Green = green
- Light Green = lightgreen
Olive
- Olive = olive
- Light Olive = lightolive
Yellow
- Yellow = yellow
- Light Yellow = lightyellow
Orange
- Orange = orange
- Light Orange = lightorange
Brown
- Brown = brown
- Light Brown = lightbrown
Taupe
- Taupe = taupe
- Light Taupe = lighttaupe
Tan
- Tan = tan
- Light Tan = lighttan
Aqua
- Aqua = aqua
- Light Aqua = lightaqua
Purple
- Purple = purple
- Light Purple = lightpurple
Pink
- Pink = pink
- Light Pink = lightpink
Install the Widget CSS Classes Plugin
To achieve the style results you see in the screenshot above, we need a plugin called “Widget CSS Classes” which when activated, adds a small text field at the bottom of every widget. In this field which gets labeled as “CSS Class”, we type in any of the classes I listed above in bold.
- Go to Plugins >> Add New
- In the Search field to the right, type in Widget CSS Classes, and then this should show up:
- Click to Install and then activate the plugin
Adding a Style to a Widget
When you activate this plugin, it adds a small field to the bottom of each widget. All you need to do is type in the widget style of your choice, or simply leave it empty if you want to use the default WordPress style.
EXAMPLE: Lets use the “box” style with the colour “blue“. When adding classes, make sure you leave a single space between each class.