You can modify the Color Variation of our themes, by using the drop-down menu in your Theme Options Panel. So digging through the CSS files should not be needed in most cases. We have also provided you with a special section in your Theme Options Panel where you can add your own Custom Style Sheet, or even add some Custom JavaScript routines, without ever having to dig through the files that make up your theme.
All of that being said, our themes CAN be tweaked further by qualified web developers. If you'd like some intuitive assistance, please contact us for custom development quotes. If you're an aspiring web developer, and you just want to tweak things a little here and there; please check your WordPress® theme directory under: /colors. Depending on which Color Variation you are using, you will need to select a sub-folder from that directory and locate the CSS files for that specific Color Variation. I've provided a screenshot, special instructions for using custom/ files, and also a full breakdown on what each CSS file is responsible for.
Once you've selected a /color/sub-folder, you'll find a list of CSS files ( as shown above ), including even a few JavaScript files. Your theme uses ALL of these CSS files collectively, and ultimately, your theme will create one larger CSS file that is highly compressed, then serve that to the browser. In other words, we break your CSS files down into logical groups for you ( e.g. separate files ), so they're easier to understand & edit. But, in the end, your theme will combine them all into a single compressed version to reduce bandwidth and increase the speed of your site. All of that is handled programmatically, so all you do is edit the files individually.
Before I explain what each of these CSS files is for, I should go ahead and mention the /custom/ folder as depicted in the screenshot above. The contents of the /custom/ folder, consist of: custom-css-sample.css, custom-js-sample.js, custom-php-sample.php. Each Color Variation contains one of these custom/ folders. If you'd like to add your own custom styles, JavaScript routines, or PHP functions, please use the custom/ file samples. Inside each sample file, you'll find instructions.
Whenever possible, use a custom/ file. This way, when updates or security patches are released for our software, you'll be able to upgrade to the latest version without losing any of the customizations that you've added in. We realize this is not always possible, but when you can, please do so. When it is NOT possible, and you MUST edit one of the core files, please keep a log of the changes you're making. That way you'll be able to merge the latest version of our software when the time comes.
Now, for those of you who would like to dig into the core CSS files and make some adjustments, here is a breakdown of a typical /color directory, with descriptions listed for each file.
custom/ As discussed earlier, this folder contains some sample files with instructions on how to implement your own custom CSS, JS & PHP files into a particular Color Variation. What has not been discussed yet, is that you can also apply custom/ files to all Color Variations if you need to. For more information, check your theme directory, under: /includes/custom/.images/ The images folder contains all of the images used in this particular Color Variation. Along with each image, you will also find the original source files. Sometimes these consist of .FLA files, and sometimes .PSD files, depending on how we constructed the artwork.separates/ I mentioned earlier that all of these CSS files will ultimately be bundled into a single compressed version and served to the browser collectively. The /separates folder contains files that should NOT be bundled into the compressed version. For instance, @font-face rules are inserted into a separate CSS file. Files in the /separates directory will be loaded, you guessed it, separately.
backonly.css In this example, we're working on a theme that has a special Page Template that displays ONLY the background image for the site. The backonly.css file contains the CSS selectors for the Background Only Page Template.comments.css This file will be included with all of our themes. It is by far the most complex of all the CSS files, because it turns an ordinary list of items into a full-fledged commenting system that even supports nested ( e.g. threaded ) comments. Tweaking this file can be challenging.elements.css This file is responsible for styling the basic elements of the site. It includes selectors, such as: html, body, a, blockquote, form, input, etc. Modifying this CSS file will affect many, if not all parts of the site. This file is included with every theme we release.footbar.css In this example, we're working on a theme that has a widgetized Footbar, much like the traditional Sidebar, but this bar sits at the bottom ( e.g. the foot ) of the site. The footbar.css file contains the CSS selectors for the Footbar, and it is responsible for styling widgets that get placed into the Footbar as well. In some cases, our themes include a different kind of Footbar. Instead of being widgetized, we give you direct control over its content through your Theme Options Panel. In those cases, there will be no styling for widgets inside this file.fullpage.css In this example, we're working on a theme that has a special Page Template that displays content across the entire width of the layout. The fullpage.css file contains the CSS selectors for the Full Page Template. Whenever you create a new Page inside WordPress®, and you choose the Full Page Template, this file is what dictates its layout. If you configure WordPress® to use a static Full Page as your Home Page, instead of showing your most recent Posts, then this file will also be responsible for styling your Home Page. In other words, any Page that you create inside WordPress® that uses the Full Page Template, will be affected by the CSS in this file.headbar.css In this example, we're working on a theme that has a widgetized Headbar, much like the traditional Sidebar, but this bar sits at the top ( e.g. the head ) of the site. The headbar.css file contains the CSS selectors for the Headbar, and it is responsible for styling widgets that get placed into the Headbar as well. In some cases, our themes include a different kind of Headbar. Instead of being widgetized, we give you direct control over its content through your Theme Options Panel. In those cases, there will be no styling for widgets inside this file.index.css This file is responsible for styling everything produced by the index.php file in the main theme directory. The index.php file is responsible for generating the Home Page, Category Listings, Search Results, and other Archive pages, such as Tags, Authors and Dates. This file is included with every theme we release.inline.js This file contains some basic JavaScript routines, related to the layout and functionality of this particular Color Variation. It is named inline.js, because the routines inside this file are executed inline ( as a document is loading ), as opposed to being processed after an event such as onready or onload. All of our JavaScript files rely on jQuery.layout.css Thus far, you've seen that most of these CSS files are named according to the PHP file(s) they are responsible for styling. Well, the layout.css file is just a bit different. This file is one of the most important files, because its responsible for styling the overall layout of the site. In other words, everything that is built by header.php and footer.php. If you need to make changes to the header or footer of your site, this is the file to edit. This file is included with every theme we release.megafish.css This file is included with almost all of our themes, and there is never any reason to edit this file, because all it contains are some required fundamental CSS rules that allow our navigation menus to function. Our navigation menus are powered by the Megafish menu system, designed exclusively for PriMoThemes. Again, editing this file is NOT recommended.onload.js This file contains some basic JavaScript routines, related to the layout and functionality of this particular Color Variation. It is named onload.js, because the routines inside this file are processed after the entire window has finished loading. All of our JavaScript files rely on jQuery. e.g. $(window).load().onready.js This file contains some basic JavaScript routines, related to the layout and functionality of this particular Color Variation. It is named onready.js, because the routines inside this file are processed before the page has finished loading, as soon as the DOM is ready. All of our JavaScript files rely on jQuery. e.g. $(document).ready().page.css This file will be included with all of our themes. It is responsible for styling the default Page Template. Whenever you create a new Page inside WordPress®, and you choose the default Page Template, this file is what dictates its layout. If you configure WordPress® to use a static page as your Home Page, instead of showing your most recent Posts, then this file will also be responsible for styling your Home Page. In other words, any Page that you create inside WordPress® that uses the default Page Template, will be affected by the CSS in this file.sidebar.css In this example, we're working on a theme that has a widgetized Sidebar. The sidebar.css file contains the CSS selectors for the Sidebar, and it is responsible for styling widgets that get placed into the Sidebar as well. In some cases, our themes include a different kind of Sidebar. Instead of being widgetized, we give you direct control over its content through your Theme Options Panel. In those cases, there will be no styling for widgets inside this file.single.css This file will be included with all of our themes. It is responsible for styling Single file content for WordPress®. To clarify, Single file content includes: Posts, Images, and other media. Pages are styled by page.css, and Archive pages like your Home Page, Search Results, and Category Listings are styled by index.css. So Single file content consists of Posts, Images, and any single item in your Media Library.wordpress.css This file will be included with all of our themes. It has the job of assigning styles to the built-in classes that WordPress® generates in its editor. Things like: .alignright, .alignleft, .aligncenter, .wp-caption, .wp-caption-text, and .screen-reader-text. These special classes are generated automatically as a result of using WordPress® to manage your content, and this CSS file makes sure that the WordPress® editor & widgeting system achieve what they expect to.wpf.css This file will be included with all of our themes. It styles the WordPress® footer. Otherwise known as wp_footer(). This special area is down near the bottom of every theme, and many plugins will stick content into this area in order to activate tracking, styling, or insert some required JavaScript routines. There is not much to this file, and it is very unlikely that you will ever need to modify it.
