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.
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 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
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.
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%.
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%.
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.