custom widget styles

[Sandy Sailer]

Is there a “cheat sheet” on how to use the custom widget styles? I’m assuming they are shortcodes??? Thank you.

[Sushil Adhikari]

This will help:
http://demo.styledthemes.com/encounters/custom-widget-styles/

The colours are shown at the top, so you just need to enter those into the field for your Custom widget styling. Use a plugin called Widget CSS Classes for this which adds a field at the bottom of each widget in the admin. So for a red widget, in the field you would type in:

red

I’m assuming you seen the tutorial for this?
https://www.styledthemes.com/encounters-setup/120-understanding-how-to-style-your-widgets

**sorry, the volume is low on the video.

[Sandy Sailer]

I have not watched the video yet, but plan on doing so tomorrow. The video will tell me everything I need to know? I need to download a plugin called Widget CSS Classes first? Thanks!

[Sushil Adhikari]

No worries… and yes, the video should show you everything. Correct on the Widget CSS Classes plugin.

[Sandy Sailer]

Going through the Encounters demo, I have a couple more questions that aren’t answered in this video… What about Info Boxes, progress bars, rounded images, etc.? I do not see instructions for these items. Thank you.

[Anonymous]

Info Boxes and Progress bar are generated with div in the editor of WordPress and we will create the HTML snippet for them like tin the inline column example page so it will be easy for you. http://demo.styledthemes.com/encounters/inline-columns/ till then you can inspect the demo page using tool like Firebug or other chrome tool and copy the html from there.

Rounded images are created using CSS classes and those CSS classes are specified here under shaped images : http://demo.styledthemes.com/encounters/images/

[Sandy Sailer]

Okay … how would you use the Info Boxes then? Do you have an example of this? What do you put in the DIV tag? Thanks.

[Anonymous]

Here is the example :

    

        
This is an Important Box
            
Tincidunt sed eu tellus. Praesent volutpat, nibh gravida tempor pellentesque, tortor orci dapibus libero, ac venenatis sem enim et urna. Vivamus blandit luctus massa nec facilisis. Vivamus in massa ut eros porttitor posuere nec quis mi. Nunc ullamcorper facilisis erat.
           
    

And the class ibox-yellow can be empty for default red styled info box or you can other classes like : ibox-yellow , ibox-green, ibox-blue and ibox-grey

[Sandy Sailer]

Got it … this needs to be done in Text view. Can things like this be added to the documentation, so we don’t have to ask these questions in the forum? 🙂

[Anonymous]

Yes sure.. These snippet are provided on the extras folder of the theme but we will add it on the demo page itself so it’s clear.

[Sandy Sailer]

Aaaahhhh – I have not looked in the extras folder. Ooops! 🙂

[Author]

Posts