Adding extra styling and styles for themes

xScape themes due to complexity of the framework can’t support child themes. This is the case with most themes that are framework based. But, there are several way to add your own styles without loosing the base theme due to some advanced features xScape framework has to offer.

Extra CSS styling
Extra CSS styling

Extra styling

If you need only some minor things to change, or even to add big blocks of new CSS elements, I don’t reccomend changing main theme style file. Changing that file will cause problems with upgrade, and that is one of the reason child themes are used. But, for xScape themes there is a simpler way. On the theme settings panel, there is Advanced tab, and on that tab Extra CSS Styles group (as on the image on the right). Add whatever CSS you need there.

This styles will be added to the HTML after the main style.css is loaded and will override anything in the main style you add here. This is saved as a part of settings and it will be saved when you upgrade theme theme. This is used on Dev4Press website also (screenshot is from this website theme setttings, using lightScape theme).

Theme Styles
Theme Styles

Additional styles

Other method you can use is also used here on Dev4Press: adding full new styles. Each theme has many stlyes built in, and you can change them from theme settings panel, General tab, Color Scheme. As you see on the image, there are many default styles (for all themes, they have Default in it’s name), and there are 3 styles at the bottom I have added.

Each style is actually CSS file. All are located in styles folder. But, naming the file is not enough. If you open any style CSS file, you will see that there is a line with a comment, and that it’s a very first line. This comment is actually the name of the style used to display styles in the list as on the image. Name should be descriptive.

Also, for most themes there are number of folders (usually have same names as styles CSS files) where images for specific styles are located. You own styles can use images from any of the folder, you can stick to one of them only, or mix them, or make your own folder and add own images.

Best way to make new style is to make a copy of one of the existing styles. So, if the original style is called default_blue.css, make a copy of that file and name it as my_own_style.css. Open that new file and line 1 need to have a new style name/description like this:

[css]/* My Own Style */

body { background: #…..
[/css]

Once you do that, reload theme settings panel, and your style file will appear on the list as My Own Style. Feel free to change whatever you want inside it, to add more things to… It’s always included after main style.css, and overrides styles from it. If you need own images in it, make a new folder in the styles folder, it’s good idea to name it the same as the file (without extension): my_own_style.

Theme upgrade

Adding style file is one thing, but after the theme is auto upgraded through Dev4Press Updated plugin, it can be removed by that. Here is where theme upgrade support kicks in. Open theme upgrade folder, and add your style file and folder there. Also, third image shows settings for the upgrade, where you need to activate it for this to work.

Upgrade Files
Upgrade Files

Upgrade Folders
Upgrade Folders

Upgrade Settings
Upgrade Settings

Folder added to the list will backup whole folder, no matter what is in it. Also, xScape Tools panel have backup options where you can make backup if you want to be extra sure with the changes you made. You can further check out tutorials on themes upgrade:

http://www.dev4press.com/category/tutorials/xscape-framework/theme-upgrade/

Comments

Leave a Reply