
Contained in the package are four folders, "TF_Paragon PSDs", "tf_paragon", "Style XMLs", and "Stand-alone Style XMLs". There are also five individual files called "TF_Paragon_CMS.xml", "TF_Paragon_Blog.xml" "TF_Paragon_Plugins.xml", "TF_Paragon_Grids.xml" and "tf_paragon_scripts.js".
- Upload the "tf_paragon_scripts.js" file to your vBulletin's "/clientscript" directory located at the root of your vBulletin installation.
- Upload the "tf_paragon" folder to your forum's "/images" directory, maintaining the file structure.
The "TF_Paragon PSDs" folder contains the Photoshop files used in the creation of the graphics of the theme and is not to be uploaded.
The following explains how to import the XML style files. It is important to do these steps as instructed in order to maintain the parent/child hierarchy of the sub-themes. This makes editing the theme's templates at a later date much easier. If you want to install only one of the theme's styles, skip this part and begin with the "Single Style Installation" intructions immediately follow.
All the XML files referenced below are contained in the "Style XMLs" folder.
- Log in to your forum's administration control panel and go to the "Styles & Templates" > "Download / Upload Styles" section.
- Under the "Import Style XML File" section, browse for the "TF_Paragon_Default.xml" file and upload it by clicking the "Import" button at the bottom, leaving the other settings at their defaults.
- Once that is done, return to the style uploading section, and browse for the "TF_Paragon_Red.xml" file. This time, under the "Parent Style" setting, select "TF_Paragon Blue" as the parent style from the drop-down menu, then click "Import".
- Repeat the above steps for the "TF_Paragon_Green.xml", "TF_Paragon_Amber.xml", and "TF_Paragon_Gray.xml" files.
Once the above is completed, go to "Styles & Templates" > "Style Manager". The style hierarchy for the Paragon themes should look like the picture below:
The child themes may be in a different order than shown above after importing. That is fine, so long as "TF_Paragon Blue" is the parent.
With the proper hierarchy, should you wish to do any future template edits, you will only need to edit the "TF_Paragon Blue" theme. All the sub-themes will inherit those changes.
Single Style Installation
If you'd like to install only one of the styles, import the style xml of your choosing contained in the "Stand-alone Style XMLs" folder. That's it!
Once you have completed the above, go to the "Plugins & Products" > "Download / Upload Plugins" section of your administration control panel. Scroll down to the bottom of the page where it says "Import Plugin Definitions XML File". Browse for the "TF_Paragon_Plugins.xml" file contained in the package, then click "Import". This will install the following plugins: "TF_Paragon Footer Columns" and "TF_Paragon Footer Columns Cache". These are required for the custom footer regions templates.
If you've customized any of the theme's templates, be sure to back up your code before beginning the update, as it will need to be reapplied after.
Go to the "Styles & Templates" > "Download / Upload Styles" section in the administration control panel. Browse for the file called "TF_Paragon_Default.xml" in the "Style XMLs" folder. In the drop-down box next to "Merge Into Style", choose the "TF_Paragon Blue" theme, then click "Import".
You only need to do the following step if you have the vB CMS and/or Blog installed. Those with forum-only installations can skip this.
Return to the "Styles & Templates" > "Download / Upload Styles" section in the administration control panel. Browse for the file called "TF_Paragon_CMS.xml". In the drop-down box next to "Merge Into Style", choose the "TF_Paragon Blue" theme, then click "Import". Do the same with the TF_Paragon_Blog.xml file if you're using the blog product.
Included are three custom grids, TF_Paragon Frontpage Sidebars Left, TF_Paragon Frontpage Sidebars Right, and TF_Paragon Landing Page. To install them, go to Download / Upload Grids > Import Grid XML File, then browse for and select the TF_Paragon_Grids.xml file included with the package and click "Import".
Please note: the slider seen at the demo installation is a modified version of the Nivo Slider Widget found at http://www.vbulletin.org/forum/showthread.php?t=267024. It is not included with this package. The theme has already been styled to work with it, however.
Below is the explanation for all the PSD files included with the theme:
- b_bg.psd - The background for the footer region.
- blockhead_bg.psd - The background for the various header regions.
- body_bg.psd - The dark gradient used for the body background behind the main content, below the header and above the footer.
- collapse.psd - The "+" and "-" collapse buttons seen in various areas around the forum.
- doc_bg.psd - The overall background. In the default theme installation, it appears as the gray light-to-dark gradient at the very top.
- doc_header.psd - The background for the very top of the theme where the logo is located.
- lastpost.psd - The "Last Post" arrow. This also doubles as the "View Post" arrow seen in quotes in posts.
- logo.psd - The logo.
- navbar_wrap_bg.psd - The dark bars behind the navigation bar which runs the full width of the theme.
- navbit-arrow.psd - The arrow background which separates elements in the breadcrumb.
- navtab_selected.psd - The glowing animated arrow for the navbar.
- navtab_bg.psd - The background for the navigation tabs at the top of the page.
- page_title_bg.psd - The repeating gradient background for the page title div.
- page_title_inner_bg.psd - The wave background for the page title div.
- statusicon.psd - Used to created the folder graphics for the status icons on the forum home page.
- statusicon-16.psd - Used to created the graphics for the small status icons on the forum home page icon legend.
- tab-collapsed.psd - Used to create the collapse buttons for the forum sidebar.
- threadicon.psd - Used to created the folder graphics for the thread icons on the thread listings page.
- threadicon-16.psd - Used to created the graphics for the small thread icons for the icon legend at the bottom of the thread listings page.
Some of these files are also contained in the Red, Green, Amber, and Gray subfolders. The explanations for these are the same. They've been styled to match their respective themes.
At the bottom of the theme is the footer region. In the default theme installation, there are four columns. The first two columns contain a list of links. The third column contains an example "About Us" section. The fourth column contains the "Connect With Us" social icons. The names for these templates in the Style Manager are "footer_column_1", "footer_column_2", "footer_column_3", and "footer_column_4". These are the templates that must be edited to customize the footer region. The CSS for the elements in the footer region can be found in the "additional.css" template. The names of the CSS IDs corresponds to the name of each column; for instance, the ID for "footer_column_1" is "#footer_column_1".
You can see all the included social icon images in the "tf_paragon/social" folder.
Remember, if the themes were imported maintaining the proper hierarchy, you need only edit the footer column templates for the "TF_Paragon Blue" parent theme. All the subsequent child themes will inherit the edits.
The logos for each individual theme (logo.png) are contained in their respective /misc folders. (i.e. the logo for the red version of the theme is contained in the tf_paragon/red/misc folder). To replace these logos with your own, create a logo with the same file name, including the .png extension, and upload it to the above locations, overwriting the old files. Alternately, you can point the logo url to another location in the theme's StyleVars. The StyleVar for this is "ImagePaths" > "titleimage". This must be changed for each individual theme.
The following is an example of one way in which you might customize the footer region to your liking.
Let's say you only want one column of links instead of the two included in the default theme installation. First, go to "Styles & Templates" > "Style Manager" and expand the template listings for the "TF_Paragon Blue" theme by clicking the "» «" button. Double click the "footer_column_2" template to open up its edit box. Remove all the code in the "Template" box and click "Save".
Once that is done, while still in the Style Manager, scroll down the template listings until you see the "CSS Templates »" listing. Double click it to expand it, then double click "additional.css" to open up its edit box. Scroll down until you find the "#footer_column_1" declaration block. It will look like this:
#footer_column_1 {
float: left;
width: 20%;
text-align: left;
}
Change the width to 40% as shown below:
#footer_column_1 {
float: left;
width: 40%;
text-align: left;
}
This will allow the first column to expand to fill the space left by the deleted second column. Alternately, you can expand the third column which contains the sample "About Us" section to expand to fill the space, while leaving the first column at its original width. To do this, leave the "#footer_column_1" width at 20% and change the width of "#footer_column_3" from 35% to 55%.
While the theme comes at fixed width, it has been designed to work at fluid (variable) widths. You can easily make it fluid. To do so, complete the following steps:
- Log in to your forum's administration control panel and go to "Styles & Templates" > "Style Variable Editor" for the theme you wish to make fluid.
- Find the "doc_margin" stylevar. Change "Units" to "px", then set the margins to top: 0, right: 30, bottom: 0, left 30 (the left and right margins can be set to a number of your choice.) Click "Save".
- Find the "doc_width" stylevar. Change "Units" to blank, then "Size" to "auto". Click "Save".
Eight different @font-family fonts have been included. To change the font for all the regions, all you need to do is change the stylevar blockhead_font's "Font Family" entry to one of the font names below (LeagueGothicRegular is the default):
- LeagueGothicRegular
- BebasNeueRegular
- BoycottRegular
- ZeroIsRegular
- SnicklesRegular
- QlassikRegular
- GoodDogRegular
- TendernessRegular
Thanks for purchasing my theme! I hope you get as much joy out of using it as I had in creating it. If you have any questions about the theme not covered in this documentation, contact me via my profile at themeforest.net: http://themeforest.net/user/ThemeTempest, or email me at themeforest@themetempest.com. I'm also available for freelance work.
- Mark Lambert (Theme Tempest)