Out of the box our Dynamic Webcams WordPress Plugin
looks like the homepage of iFriends.
But maybe your site is shades of red and our color scheme just doesn't work. Does that mean you have to unstall the plugin? Nope! It means that we get to edit the CSS that drives the plugin!
Accessing the Plugin's CSS
- Log into your WordPress Admin
- Access the list of installed plugins
- Identify the ClickCash Webcams Plugin
- Click the "EDIT" link for that plugin
This will take you straight to the PHP and CSS Files that drive the plugin. Click on the Style.css for our plugin. Now we're ready to edit!
Editing the CSS
Before we get started, it's useful to understand a little bit about how CSS works. A good resource for that is W3Schools
. We recommend that you take some time to learn some basic HTML before attempting to edit this file. And making a backup of your file before you start is a must!
The main lines to edit to make this plugin your own include:
- background-color - selects the color of the background of each cell. This is the color that appears behind the model screenname.
- color - specifies the color of the font used for the model screennames
- font-size - adjusts the size of the font used for the model screennames
- font-family - customizes the font used for the model screennames
By just making some small tweaks to these values, your plugin could go from this:
In the second image, we've updated the colors, font size, and font face to better match our site.
There are even more ways that you can customize this WordPress plugin, including:
- Changing hover behavior
- Updating the image sizes
- Setting a different target for your clicks
We'll be touching on these different ways to customize your plugin next time!