So your style is all installed and ready to go? Next, you'll want to customize it, here's a quick little setup guide on some of the more common things you may want to do upon installing. There are hundreds of options inside our framework but these are just the common things you'll need to know.

Best practices

  • Make sure all your edits go inside your child style. Never edit the parent style or you'll lose your changes when upgrading.
  • Avoid editing templates as much as you can, for instance, there's really never a need to edit a CSS/LESS template directly, instead just use the template extra.less for all of your changes.
  • If you need to add JS/CSS to the header/body area just use our built-in templates: xb_head and xb_body. These are blank templates that never change so they'll never show as outdated.
  • You can take advantage of the advertising system for a lot of things. Just because it's called "Advertising" doesn't mean it's just for ads. There are plenty of locations pre-set that you can use to add in custom HTML of whatever you'd like, these never get reset upon upgrading.
  • You can also take advantage of the widget system, like the Advertising these also don't get reset upon upgrading nor do the edits show as outdated.

Design Mode

Design mode is a unique feature to our styles that lets you browse the front-end and view what options are available on select elements. We don't cover every element or option but it's a nice way of getting familiar with properties and elements.

To enable it, go to your XenForo Admin control panel, expand the Appearance menu on the left and click Style Properties. Next click [XB] XenBase Framework and enable the "Design Mode" property. With it enabled admins will now be shown tooltips like these that will link you directly to the related properties:

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 -> Basic options. By default, the location we use is: styles/your-style/xenforo/style-logo.png, you can replace style-logo.png with logo.png or 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 xbLogoText

Setting an Open Graph Logo

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 style properties found here: Style Properties -> Page setup: Maximum page width
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%.

Footer Setup

To start customizing the footer go to: Style Properties -> Footer
First, you'll want to check: Enable custom footer if it's not already.
Next, you want to determine how many blocks you want to show and the width of each one. In this setup we'll be using 4 blocks, all at 25%.
Note!
To disable a block you simply put a value of 0 without the px/%. Ideally, you'll want the remaining block totaling up to 100% or as close as possible to it (33%/33%/33%).
In the below image you can see how the footer is set by default.

In XenBase 2.0 we have provided some default widgets to choose from for each block or you may choose to use the custom HTML block content option.

If you have an idea for a more advanced footer setup just let us know, you can hire us or we can guide you on how to achieve it.