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.
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:
- Firebug for Firefox
- Firebug Guide for Web Designers
- Chrome Developer Tools
- HTML5 Rocks - Introduction to Chrome Developer Tools
- Paul Irish - A Re-introduction to the Chrome Developer Tools
- Safari Developer Tools
- Opera 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 {doc: create-a-style text: 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: