1. Start
  2. Getting Started
  3. Installation
  4. Updating
  5. Setting Up
  6. vBSEO Plugin
  7. HTML & CSS
  8. Credits

Electron - vBulletin 4.2.0 Forum Skin

http://themeforest.net/user/crosailes


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Getting Started


To install this style you must have a working version of vBulletin 4.2.0 Forum already installed. For more information regarding installing the vBulletin Forum, please see the vBulletin Manual - https://www.vbulletin.com/docs/html/.

When you are ready to install a style, you must first upload the image files and then import the XML style files. All the necessary files are located in "files to upload" folder. Installation of the plugin at step 3 is optional and provides some style settings.

Installation


Step 1

Upload, maintaining the file structure, the "electron_style" folder to standart images directory of your forum, which is located within the forum-root directory.

http://.../forum-root-directory/images/electron_style/

Step 2

Log in to your forum's Admin Control Panel (http://example.com/forum/admincp/) and go to the "Styles & Templates" > "Download / Upload Styles" section. Under the "Import Style XML File" section, browse for the "electron_style.xml" file and upload it by clicking the "Import" button at the bottom, leaving the other settings at their defaults. Now the Electron Style is available for use on the your forum.

If you are using vBulletin Blogs (vBulletin 4.2.0 Publishing Suite), additionally install blog.xml. Go to the "Styles & Templates" > "Download / Upload Styles" section in the Admin Control Panel. Browse for the "blog.xml" in the "Import Style XML File" section. In the drop-down box next to "Merge Into Style", choose the "Electron Style", then click "Import".

For more information about importing style please visit to https://www.vbulletin.com/docs/html/style_upload.

Step 3

In Admin Control Panel navigate to the "Plugins & Products" > "Manage Products" and click the link labelled "[Add/Import Product]". In the "Import Product" form browse for the "options_plugin.xml" file and upload it by clicking the "Import" button.

For more information about installing a product please visit to https://www.vbulletin.com/docs/html/import_product.

Updating


If you've customized any of the templates, be sure to back up your code before beginning the update.

Step 1

Update image files in the "electron_style" folder.

Step 2

Go to the "Styles & Templates" > "Download / Upload Styles" section in the Admin Control Panel. Browse for the "electron-style.xml" in the "Import Style XML File" section. In the drop-down box next to "Merge Into Style", choose the "Electron Style", then click "Import". Repeat procedure for other XML style files.

Step 3

Navigate to the "Plugins & Products" > "Manage Products" and click the "[Add/Import Product]" link. Choose the "options_plugin.xml" file, set "Allow Overwrite" to "Yes" and click the "Import" button.

Setting Up


Select the Default Style for Your Forum

Login in your Admin Control Panel and select the "Settings" > "Options" > "Style & Language Settings". Click on the drop-down menu in the "Default Style" section to open it. Select the name of the style you want to set as the default. Click the "Save" button to set this style.

Fixed Layout

In the Admin Control Panel go to the "Settings" > "Options" > "Electron Style Options" and set "Use Fixed Layout" option to "Yes".

Navigate to "Styles & Templates" > "Style Manager" > "Style Variable Editor". In the search field type in doc_width, to quickly find it. Now set the "doc_width" stylevar as per your requirement and save.

Note: The options plugin must be installed. See step 3 of the installation section.

How to Change Logo

To replace logo with your own, create a logo with the "logo.png" file name, and upload it to the "logos" folder, overwriting the old file.

http://.../forum-root-directory/images/electron_style/logos/logo.png

Or in the Admin Control Panel, go to "Styles & Templates" > "Style Manager" > "Style Variable Editor" and edit "ImagePaths" > "titleimage" StyleVar.

You can also add padding of the logo editing "titleimage_padding" StyleVar.

Custom Icons and Smilies

The "extra files" folder contains the set of post icons, bookmark icons and smilies. You can set them manually, read the instructions below. Note that this is global settings for all styles.

Style Override for Old Browsers

You can redirect users with old and not supported browsers on the other style. To do this in the Admin CP go to the "Settings" > "Options" > "Electron Style Options" > "Style Override for Old Browsers" and choose style for old browsers.

Note: The options plugin must be installed. See step 3 of the installation section.

Post Control Icons

You can adjust the color of the post control icons, using the following code:

div.postfoot .icon {
	background-color: #adadad;
}

div.postfoot .icon:hover {
	background-color: #dadada;
}

You can adjust in the Style Variable Editor:

Other StyleVar are not used in this style, so changing them will not give any results.

vBSEO Plugin


If you are using vBSEO Plugin on your forum, additionally install vbseo.xml in order to adapt vBSEO templates.

Installation

Go to the "Styles & Templates" > "Download / Upload Styles" section in the Admin Control Panel. Browse for the "vbseo.xml" in the "Import Style XML File" section. In the drop-down box next to "Merge Into Style", choose the "Electron Style", then click "Import".

Check this vBSEO setting "Guest Only Enhancements" > "Remove Last Post Links Options" > "Keep Default Last Post Settings".

Sidebar-Blocks on Forum Home for Like Feature

You can create those blocks in Admin Control Panel. Navigate to the "Forum Blocks Manager", then add new "Custom HTML/PHP" block, "Content Type" set to "PHP", "Template to Use" set to "block_html" and the "Content" code for "Top Liked Threads" block:

if(VBSEO_ENABLED)
{
    vbseo_extra_inc('ui');
    return vBSEO_UI::likes_block('topthread');
} 

and for "Recent Likes" block:

if(VBSEO_ENABLED)
{
    vbseo_extra_inc('ui');
    return vBSEO_UI::likes_block('latest');
} 

For more information about vBSEO plugin visit to http://www.vbseo.com/.

HTML & CSS


You can add the template name at the beginning and end of every template rendered. This is useful for debugging and analyzing the HTML code. Go to the Admin Control Panel, next "Settings" > "Options" > "General Settings" and select "Yes" for the "Add Template Name in HTML Comments".

To edit CSS files do the following. Log in to the vBulletin Admin Control Panel. Go to "Styles and Templates", then click "Style Manager". Click the drop-down menu next to the "Electron Style" and select "Edit Templates". Double-click "CSS Templates", then double-click the template you want to edit. Click "Save and Reload" when finished editing.

You can use the special template "additional.css" which is located below the others, to add your own css.

Credits


I've used the following images, icons or other files as listed.

 


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Evgenii Makarov