One of the best features that Featured Articles has is the ability to easily switch between themes to obtain a totally different look of any slideshow published in your WordPress website. While creating new themes can be quite challenging in some cases, modifying the look of any existing theme can be done pretty easy, it only requires some CSS knowledge. All themes delivered by default with the plugin have external CSS stylesheets for color customization purposes.

Placing themes into a safe folder

Before beginning to create a new color stylesheet, a quick note on Featured Articles plugin themes folder is needed. As you may already know, all slideshow themes are delivered into a folder within the plugin files. Problem with this is that in case you create or change a theme, when updating the plugin, given the fact that the folder containing the themes is located inside the plugin folder in WordPress, all files will be deleted (including the themes) and replaced by the new files from the update. This is pretty bad because all changes made to themes will be lost.

To avoid loosing your customized themes, in plugin menu (FA Lite or FA PRO), go to page Settings. Into that page, under Change FeaturedArticles themes folder follow all instructions and move all themes to a new folder outside the plugin folder by using an FTP client (FileZilla for example). Once that is done, any changes you do to any slideshow theme will be safe and you won’t have to worry about backing up before updating the plugin.

Extending existing themes with new color palettes

Now that themes are into a safe location, it’s time to make them blend in with your website. CSS for themes is located into 2 different stylesheets: one is used for creating the layout of the theme (image position, title styling and so on) and the other is used to apply the colors on all the elements a slideshow might have.
The main stylesheet is located inside the theme folder and must be called stylesheet.css (more about theme file structure here). All stylesheets controlling colors are located inside folder colors within the theme folder.
All themes delivered by default with the plugin (except theme Classic) have only one color variation: dark. To create a new color palette for any of the themes, follow the steps below:

1. Duplicate dark.css inside folder colors of any theme. Rename the new file to whatever you want (renaming it by the color palette it will have is a good idea). Always remember to use a web-safe name (no spaces or funny characters).
2. Edit the file you created and for each element put the colors you want to use.
3. Save the changes on the new file and if needed, upload it into folder colors within the theme you want to extend.
4. In slideshow editing, when selecting the theme you created the colors for, you’ll find under option Color Scheme that you can select the stylesheet you just made.

As a note, when creating color variations for themes, it may be helpful to use the console (most modern browsers have it) to identify faster the elements that certain CSS rules apply to; for PRO users that try this and find themselves into trouble, a ticket will quickly grant them access to help from our support team.