Adding a new theme

Since Styles Pro Add-On version 3.0 and above, you can now add new themes instructively to your Styles Pro installation.

You can do that by simply adding a new CSS file to your theme or child theme, in /gf_stylespro/ directory.

Styles Pro will automatically create settings for this theme so you can customize Font sizes, colors and background for your theme just the same as one of the built-in Styles Pro themes.

Duplicating an Existing Theme

If you simply wish to use the same theme and use it for we advice you to use variations. But if you wish to do more than some customization and need to add a lot of extra CSS or change some of the CSS in the theme itself, it’s a good call to use a separate theme at that point to keep things simple. Plus, you’d have the freedom to move it to another site in a much cleaner way.

If you wish to duplicate one of the built-in themes, the easiest way is to:

1. Copy all contents of a theme stylesheet that you like, and paste into a new file.
2. Find and replace the theme slug with your own, new theme slug, It will replace all class names as well.
3. Change theme name and save as a stylesheet in /gf_stylespro/ in the theme’s directory (use theme slug as filename)

This is it! Theme should now be available for selection and the plugin will also create customization settings for the theme as well.

Rules for adding the a new theme:

The minimum requirements for your theme’s header are a name and a slug name, which should be the same as the file name, minus the extension.

• You must decide upon a unique theme slug:
  • Should be alphanumeric, cannot start with a number.
  • Must not contain any special characters other than _ (underscores)
    • We’ll use theme_slug as our example in this article
• Theme Stylesheet: It should saved in the /gf_stylespro/ directory inside your theme (or child theme) directory. Should be the same as theme slug, followed by .css
  • Following our example, it should be theme_slug.css
• Theme slug will be added as a Class to the form that theme is applied to, and with a similar wrapper class. It is advised that all styles in your stylesheet would use this targeting and use .theme_slug as class behind the styles so the styles would not conflict with other themes if they’re being used on the same page.
• All Styles Pro default themes’ slugs will be prepended with sp_, it is advised to use your own prefix so there remains no chance of an accidental override in case a future release has a similarly named theme.

Defining headers in the CSS files:

Consider the following Theme header:

/*
Theme Name: My Custom Theme
Theme Slug: theme_slug
Theme URI: http://gravitystylespro.com/themes/
Author: Warp Lord
Author URI: http://gravitystylespro.com/author/
Version: 1.0.1
Font: 16px/Josefin Sans/#808080/Google
Font Label: 14px/Josefin Sans/#9A2DB1
*/

• Theme Name will be used in in theme settings and theme selection menu.
• Theme Slug will tell the plugin, the filename, css targeting and customization settings.
• Font and Font Label will allow Styles Pro to find 4 different values separated by a /.
  • Font-size/Font-name/Font-color/Add Google if this Google font should be added when saving theme settings.

You’ll notice in the above example, even though Josefin Sans is a Google font. You may use Google Fonts as any of your default fonts, you will only need to add a new parameter of /Google at the end.