YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

How to customize Widgets

In this tutorial we'll show you, how to start customizing Widgetkit and which tools do you need to learn to make small modifications like changing the look and colors of a widget.

Web Developer Tools

Whenever you try customizing a widget we highly recommend using Web Developer Tools like the famous Firebug-Plugin for Firefox. Other browsers like Chrome, Opera or Safari include very similar functionalities. Using these tools you have the possibility of easily trying out CSS styles right in your browser and inspecting used styles.

Editing CSS styles directly in your browser

Bring up Firebug by right-clicking on an interesting element and choosing "Inspect Element". On the left side you see the html-structure of your document (make sure you have the HTML-Tab enabled). Here you have the possibility to add and edit attributes and their values. Just double-click parts of the code to edit them.

Web Developer Tools

Even more interesting is the right side of the plugin, here you see all css-styles for the selected element. If you want to edit something just double click on it, enter your new value and press enter when you are done. You will notice that Firebug opens a new empty line so can not just edit existing styles but also add new ones. Firebug even shows you the computed style-values for the selected element, make sure you have activated the style-tab for our example.

More Resources

Here are some useful resources to get you more started with the web developer tools:

Where to put the CSS to override Widgetkit styles in Warp themes?

If you want to override some widget styles and you are using a Warp theme, please use the extensions.css file, located in your theme css directory.

Create your own widget style

Styles are variations of the default widget which provide its own custom HTML output and CSS styles. Creating a new widget style is the recommended way to customize widgets. You can create your own style or just start off by copying an existing one. This way Widgetkit can be updated without merging all your customization to the updated style. Read on how to create a new style

Learn the basics

Widgetkit customizations are not an easy task and you need some serious PHP and JavaScript skills. Here are some useful resources to get you started:

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!