The following documentation is geared towards our XenForo 1 product line. We don't document every feature but we did want to cover some of the basics for you.

Installation

  1. Download your style here  (you may need to activate your license first) and extract the zip
  2. Upload contents of the /upload/styles/ folder to your /styles/ folder by using your FTP or control panel
  3. Go to your control panel, Appearance -> Styles -> Import a Style, import the XenBase XML found inside your XML folder
  4. Next click -> Styles -> Import a Style again, import the XML of the style that you purchased found inside your XML folder
  5. Now click the Create new style button and fill in as followed:
    1. Important! Parent style: Set the style you imported on step 4 as the parent style
    2. Title: Name Your Style
    3. .Description: Give a brief description of the style (optional)
    4. You can set the style to the default forum style by choosing the radio button (highlighted in red below)

Upgrading

You'll get email notifications of style updates when they're ready. We typically upgrade along with XenForo so if they release 1.5.25, if necessary we'll push out our 1.5.25 version of the style. Sometimes style updates are not required when XenForo pushes out a new version.

1.) Backup your style first

Backing up your style prior to upgrading is always a good practice. In case something does go wrong you can simply re-import your backed up style going back to how it was before the upgrade.

Go to your XenForo Admin control panel, expand the Appearance menu on the left side then click Styles.

On the right side of each style, you'll see some dots, this is the menu that has the export feature.


Click the Export link to bring up the export overlay

Do not check the "Export as independent style" box that appears in the overlay.

Clicking export on the overlay will download your style to your computer

You'll want to export all your styles (XenBase framework, the purchased style and your child style)

2.) Update your XenForo

To make sure your templates are updated properly you need to update your XenForo to the latest version before updating the style. Upgrading the style before upgrading XenForo will cause issues with outdated templates usually.

3.) Import and overwrite XenBase and your purchased style

  1. Go to your Styles screen in the XenForo Admin control panel
  2. Click the "Import a style" button
  3. Click Choose file and browse to your folder you extracted in step one. Select the style XenBase XML
  4. Import as: choose Overwrite style and select your current XenBase style
  5. Next you'll want to import your purchased style and overwrite your existing
  6. All updates we push out trickle down to your child style automatically

If you run into any outdated templates we have an entire section dedicated to that. It's based on XF2 but it still applies for the most part to XF1 styles.

These are just a few items to get you started on your style. We don't cover most options but we've organized our properties the best we can. If you're looking for something related to the header it'll be in the Header and Navigation area and so forth.

Setting a logo

Setting your own custom logo is an easy task. If you're using an image-based logo we suggest naming it "logo.png". You'll need to upload the logo to your style folder, specifically: styles/your-style-folder/xenforo/logo.png.

Next set the logo path by going to Style Properties -> Header and Navigation. By default, the location we use is: @imagePath/xenforo/logo.png, you can replace logo.png whatever name you choose to use for your logo.

We also have a text-based logo option built into the framework, search the ACP (top right) for xb_logoastext

Changing the width, fonts, border-radius

An Open Graph Logo is used in various places on external websites when your site is linked. Sharing your site on facebook, twitter or other third party sites will call your Open Graph Logo image. By default, it uses a XenForo icon which you may want to replace. You can upload your custom image and overwrite: styles/your-style-folder/xenforo/logo.og.png. The image must be at least 200x200 and should be square.

Changing the width

You can easily change these settings in a single place using our framework properties found here: Style Properties -> [XB] General Setup


You can change the Page Width to a fluid style if you'd like by simply changing the ####px value to a % such as: 95%.

Node Icons

Placing custom Font Awesome icons on a per node basis is really easy and makes your forum look really nice!

You can enable Font Awesome Node Icons by going to Style Properties -> Node Icons, check "Enable Font Awesome Node Icons".

Once the Font Awesome icons are enabled you need to find your node ID's next. You can find the node ID easily by going to Applications -> Node Tree, click on the node you want a custom icon for and look for the # in the URL. This # is your node ID. Ex: ,code>admin.php?nodes/test.11/edit - 11 would be the node ID.

Next open the template: extra.css and paste this into it:

.node_# .nodeIcon .fa:before { content: '\f0e6'; }

Replace the # with your node ID number and the f0e6 is a custom icon which you can find the full list of codes here.

That's it, you can add as many as you want. If you grab the ID of a category it will trickle down to all of the nodes inside that category.

Footer Setup

To start customizing the footer go to: Style Properties -> [XB] Custom Footer. First, you'll want to check: Enable custom footer if it's not already.
You can use the blocks below to add whatever HTML you want. Additionally you may use our templates for a more advanced setup:

  • xb_footer_Block1Helper
  • xb_footer_Block2Helper
  • xb_footer_Block3Helper
  • xb_footer_Block4Helper