Metro for XenForo

documentation

1. Package

“Metro” style has ten color schemes: Blue, Teal, Green, Lime, Golden, Orange, Red, Violet Red, Purple and Black & White.

The package contains the following five folders: “Documentation”, “Metro Addon”, “Metro PSDs & AIs”, “Metro XMLs v.1.3”, “Metro XMLs v.1.4” and “upload”:

  • “Documentation” contains the style documentation
  • “Metro Addon” contains an XML file necessary for the style management, adding custom prefooter blocks and social icons;
  • “Metro PSDs & AIs” contains the Adobe Photoshop and Adobe Illustrator files used for creation of the style (not for uploading);
  • “Metro XMLs v.1.3” and “Metro XMLs v.1.4” contain XML files to import the style for your XenForo version;
  • “upload” contains the main style image directory and style core files (for uploading);

2. Installation

The style contains ten color schemes and to install any of them you must follow these steps. It is very important to install the style as written bellow.

  1. (DO NOT SKIP THIS STEP!) Upload the contents of the directory “upload” to your forum root directory using an FTP client (e.g. FileZilla or WinSCP).
  2. (DO NOT SKIP THIS STEP!) Log in to your forum administrator control panel, go to the Home tab — Add-ons — Install add-on. Under the Install from uploaded file section, press “Browse”, find your main style XML-file metro_theme_management_addon.xml and import it by pressing “Install Add-on” button. This will add style management, additional prefooter blocks and social links necessary for proper style work.

  3. Go the Appearance tab — Styles & Templates — Import a Style.
  4. Under the Import from uploaded XML File section, press “Browse”, find your main style XML-file Metro-Blue.xml for your XenForo version (1.3.* or 1.4.*) and import it by pressing “Import” button at the bottom without changing any other settings.
    Metro-Blue.xml is the core style file. You must install this file prior to installing any other color schemes

  5. (OPTIONAL) To install other color schemes make sure you have installed the core style file Metro-Blue.xml as described in step 3. Then go to the Appearance tab — Styles & Templates — Import a Style section again. Press “Browse” and find your desired color style XML-file Metro-COLOR.xml. Choose “Metro Blue” as the parent style in the “Child of style” section and press “Import” button.

    When you complete importing you will see style hierarchy like that in Appearance tab — Styles & Templates — Styles -

3. Update

To update the style you must follow these steps.

  1. Upload the contents of the directory “upload” to your root forum directory using an FTP client overwriting the existing files.
  2. Log in to your forum administrator control panel and go the Appearance tab — Styles & Templates — Import a Style.
  3. Under the Import from uploaded XML File section, press “Browse”, find your main style XML-file Metro-Blue.xml, set “Import as” option to “Overwrite style” and choose the default Metro style “Metro blue” in the dropdown menu.

4. Metro style Management

After you install metro_theme_management_addon.xml (Step 1 of the installation section), you will be able to manage the style settings (choose preferred header style), add up to three additional blocks to the prefooter and social links.

4.1 Metro header style

Metro style for XenForo allows you to choose between two header styles. You can use either the modern metro-like style or the classic one:

  1. Metro:


  2. Classic:



To switch between them follow these steps:

  1. Go to AdminCP — Home tab – Options — Metro Theme Options — Header style tab
  2. Choose which header style you want to use:

    Metro-like style is enabled by default


4.2 Prefooter blocks

Here are the available areas/blocks:


Blocks 1, 2, 4 allow you to publish any kind of information (it’s possible to use html here) and Block 3 can be used to publish links to your social accounts.

You can manage these blocks via “Metro Theme Options” page that can be found in admin control panel under AdminCP — Home tab – Options — Metro Theme Options.

Blocks 1, 2, 4 can be turned on via “Prefooter blocks” tab and the social links can be turned on and managed via “Social Links” tab.


4.3 How to turn on and edit the prefooter info blocks?

  1. Go to AdminCP — Home tab – Options — Metro Theme Options — Prefooter blocks tab.
  2. (DO NOT SKIP THIS STEP IF YOU WANT TO ENABLE THE PREFOOTER BLOCKS!) Turn on the prefooter blocks by enabling the “Enable prefooter blocks?” checkbox:

  3. (Optional) Enable Block 01 and fill in its title and content (html allowed)

  4. (Optional) Enable Block 02 and fill in its title and content (html allowed)

  5. (Optional) Enable Block 04 and fill in its title and content (html allowed)


4.4 How to turn on and edit the social links block?

  1. Go to AdminCP — Home tab — Options — Metro Theme Options — Social Links tab.
  2. (DO NOT SKIP THIS STEP IF YOU WANT TO ENABLE THE SOCIAL LINK BLOCKS!) Turn on the prefooter blocks by enabling the “Enable Social Link Block?” checkbox and fill in its title:

  3. Enable and add your social links.

You can set up to 17 links to the following social networks:

  1. Facebook
  2. Youtube
  3. Twitter
  4. Instagram
  5. Pinterest
  6. Flickr
  7. Google+
  8. Tumblr
  9. Linkedin
  10. VK
  11. Weibo
  12. Xing
  13. Vimeo
  14. Github
  15. Dribbble
  16. Behance
  17. deviantART

6. PSD and AI Files Description

All icons are in vector format. So they can be easily customized for any color scheme.

  • chooser-icons.ai, chooser-icons.psd — style and language choose icons;
  • close.ai, close.psd — close icon;
  • lightbox-sprite.ai, lightbox-sprite.psd — lightbox controls icons;
  • logo.ai, logo.psd — Metro logo;
  • node-sprite.ai, node-sprite.psd — node icons;
  • xenforo-ui-sprite.ai, xenforo-ui-sprite.psd — UI sprite icons.
PSD-files can be edited with Adobe Photoshop. AI-files can be edited with both Adobe Illustrator and Inkscape.

7. How to change font?

The font used in the style is Open Sans. Only “Light 300”, “Normal 400” and “Semi-Bold 600” styles of the font are used with Latin character set.

If you want to change the font, you can use any web-font for that – free Google Fonts for example.


7.1 How to use other font?

  1. Choose the font you like to use. Check the styles and character sets you prefer and copy the font link. For the Open Sans the link looks like:

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
  2. Go to AdminCP — Home tab — Options — Metro Theme Options — Font tab, paste the link into the “Font Link” field and save the settings.
  3. Go to Appearance tab — Styles & Templates — Style Properties — Metro Blue — General — Body, and set your new font name inside the “Font Family” field and save the style property.

7.2 How to get Latin extended and non-Latin font-symbols?

By default, the “Open Sans” font only supports Latin symbols. If your language is non-Latin or uses extended Latin character set, you need to modify the font link.

  1. Go to the Open Sans font page at Google Fonts
  2. Under the “Choose the character sets you want” section check the character sets you want to use.
  3. Copy the generated link from the “Add this code to your website” section, go to AdminCP — Home tab — Options — Metro Theme Options — Font tab, paste the link into the “Font Link” field and save the settings.

8. Style version

If you want to know what version of “Metro” style you are using, follow these steps:

  1. Open any page of your forum in your browser.
  2. Press Ctrl+U or open context menu and choose “View page source” to view the page code.
  3. Press Ctrl+F and look for the following line – “Theme for XenForo”. You will see the style version next to this line.

10. Support

If you have any questions that are not answered in this documentation, feel free to contact us via our profile at themeforest.net, or by email – support@pixelgoose.com

PixelGoose Studio

PixelGoose

Thank you for purchasing Metro for XenForo! Please do not forget to rate our product.
If you’re about to rate it with less than 5 stars, please let us know what we should improve in the style.