How do I customize the Allure Blesta Theme?
One of the most powerful features of any SwiftModders Blesta Theme is that you can customize many different aspects of your theme. The Allure Blesta Theme is no different and offers many ways to make your installation unique to your brand. This guide will walk you through the various settings you can customize.
Editing the General Settings
These settings are general theme options that will impact multiple areas of the theme. Of course, some will have more impact than others, but this is the first step in making your theme unique.
- Header Date Format - The header of the Allure Blesta Theme displays the date in the format you provide here. It's important that you follow the PHP date formatting.
- Rounded Edges - When enabled, the theme will apply rounded edges to a number of elements throughout the theme. You can also set the base, small, and large variants. When disabled, all rounded edges will be removed.
- Shadows - Enable or disable the user of box-shadow throughout the theme. This provides a level of depth to the theme, but if you're going for a flat look then disabling this option will help.
- Gravatar Support - Enable or disable the use of Gravatar images throughout the theme. Keep in mind that Gravatars are not used everywhere on the theme.
- RTL Support - The theme by default will reverse orientation on specific languages that support right-to-left (RTL) formatting. Disabling this option will stop that from happening.
- Preloader Animation - When enabled, an animation sequence will be displayed while the page fully loads. If disabled, the page will be shown immediately. This is recommended for slower servers.
Dark Theme Options
- Light Switch - When enabled, an option will be displayed near the navigation menu that allows your clients to turn the lights on or off. If disabled, this option will not appear.
- Default to Dark Theme - When enabled, the dark theme will be the default look for any new clients. This will not impact anyone who has already changed their light switch preference.
- SwiftModders Footer Copyright - When enabled, a link will be displayed in the footer that promotes SwiftModders. This is not required, but it does help us grow! We appreciate you keeping this on.
- Affiliates URL - You add your Affiliates Program URL to the "SwiftModders Footer Copyright" option to earn 25% on each referred sale.
Adding your company logo
Most organizations will want to use their company branding on the theme instead of the default SwiftModders logo. I highly recommend that you give your site a better professional feel and avoid branding confusion when your customers need support for your products. Let's walk through the best way to change this.
- Logo Support - When enabled, you will be able to adjust the various logo formats supported throughout the theme. If disabled, a text version of your company name will be used.
- Color Logo - The colorized version of your full logo.
- Color Logo Icon - The colorized icon version of your logo.
- White Logo - The knockout white version of your full logo.
- White Logo Icon - The knockout white icon version of the logo.
Editing the theme typography
The Allure Blesta Theme supports Google Fonts out of the box and allows you to choose different font families for different text formats.
- Enable Google Fonts - When enabled, the theme will leverage the Google Fonts API to apply your desired font families. If disabled, you will have to set a custom Font CDN URL or use local web fonts.
- Font CDN URL - When Google Fonts is disabled and this option is set, the provided CDN will be used.
- Font Family - This is the base font family used on all elements throughout the theme.
- Heading Font Family - This is the font family used on all heading elements like (h1, h2, h3, h4, h5. h6).
- Font Weight - This is the base font-weight used on all elements throughout the theme.
- Heading Font Weight - This is the font-weight used on all heading elements like (h1, h2, h3, h4, h5, h6).
- Base Font Size - This is the base font size used throughout the theme to generate relative sizes for other elements. By default, this is set to 16. We recommend leaving this option alone, but you can adjust it to 14 if smaller font size is needed.
Editing the theme colors
By default, the Allure Blesta Theme will be using the branding colors of the SwiftModders website. While we enjoy those colors, you might not! If your company or organization features its color palette, this section will be the best place to display it.
As you can see, the theme has many color options you can change to make your installation unique quickly. The "Brand Colors" are the primary colors used throughout the theme. The "Theme Colors" are default color sets that Blesta uses throughout various areas of the theme. I would always keep these colors in the same color family as they are described. The "Gray Colors" are shades of gray that scale from lightest to darkest. It is recommended that you always keep the scale as close to the default as possible. You may end up with legibility issues on your theme otherwise. Lastly, the "Additional Colors" features the "Login Overlay Color" used on the login page. By default, it is a semi-transparent gray, but you can change it as you see fit using the color picker.
Editing the theme layout
In addition to editing essential branding elements of your theme installation, you can also edit general layout settings to help make your install feel more unique! Let's walk through the various options available to you.
- Sticky Header - When enabled, the header will follow you on scroll and stay fixed to the top of the browser.
- Header Style - You can select between two styles, "Dark" and "Light". This setting will be overwritten when the "Dark Theme" is enabled.
- Container Max Width - This is the maximum width, in pixels, for your content containers. I would leave this alone if you're not sure what it will do.
- Login Style - You can select between the "Split" and "Classic" login template styles. Split is a little more modern which has the login form and login image directly next to each other. Classic will have the login image in the background with the login form on top and in the middle of the page.
- Login Background Image - This is the background image displayed on the login template.
- Menu Location - You can change the location of the menu between the "Side" and "Top".
- Minimize Menu by Default - If the "Menu Location" is set to "Side" you can enable this option so the side menu is minimized by default.
- Menu Style - You can select between two styles, "Dark" and "Light". This setting will be overwritten when the "Dark Theme" is enabled.
- Ticket Style - You can select between the "Conversation" and "Classic" ticket template styles. "Conversation" will display a more modern texting-style layout for ticket conversations, while the "Classic" look is more traditional.
Setting up your theme favicon
The Allure Blesta Theme features support for your favicon icon, powered by RealFaviconGenerator.com. Real Favicon Generator (RFG) will do most of the work for you; the only thing you'll need is a large (min. 70×70) square version of your Favicon. To get started, you will head to the RFG site and click on the "Select Your Favicon Image." Once your image has been uploaded to RFG, it might stop you to say your image is not square. If so, click to continue, but if you would like, you can cancel and make it square using your favorite image editor.
You will see several preview images to adjust and modify to your needs based on your image. I will not go through all of these, but you can use the sliders provided by RFG to make your adjustments as needed. Once you're done and feel comfortable with your selected settings, you will click the "Generate your Favicons and HTML code" button to finalize everything.
It may take RFG a few minutes to prepare your download package, but once completed, you will see the "Favicon package" button next to "Download your package." This will be all you need from this page, and you can download the favicon package to your local machine. Next, unzip the Favicon package on your local machine and upload the contents to the folder path presented in the "Favicon" tab of your Allure Blesta Theme settings. You will replace the default files in the "favicon" folder with those you generated in the steps above. Once uploaded, you'll be all set!
Changing the Favicon Folder (Recommended)
You can set a custom favicon folder for the Allure Blesta Theme. In the "Favicon" tab, enter a custom folder name for your favicon files and save your settings. The theme will automatically pull the favicon data from this new location. Before changing, make sure that the folder exists.
Notice: You do not have to utilize the Favicon support if you do not wish to. Disabling this option will remove all of the Favicon code from the theme files.
Editing the menu icons
The Allure Blesta Theme comes with a menu icon manager to set FontAwesome 5 icons to your menu items.
You have the option, if you like, to altogether disable the menu icons. Please note that you will want to use the "Top" style "Menu Location" in "Layout" if that is the case. Without the icons, the "Side" menu's minified version will be broken with no link indicator. Those who wish to continue using the menu icons can easily edit the icons for the default menu items present in Blesta. The "Delete" button will remove the item from the list, so be careful not to delete a default menu item unless you've removed the navigation from your site.
Adding your own custom CSS/SCSS
For those who are a little more advanced and clearly understand how to use CSS or SASS/SCSS syntax, you can use the "Custom CSS" tab to insert your CSS into the theme directly. This is especially helpful for areas of the theme I do not provide an easy way to edit. However, be careful; adding incorrect CSS or SCSS syntax can break the CSS compilation library and result in your changes not being saved.
The Theme Installer provides an easy-to-use syntax formatter that should help make the editing process simpler. However, if you make a mistake, your changes will generate an error. Do not forget to consider any changes that impact the different devices and screen resolutions.
Notice: Due to the complex nature of this section, I cannot provide support for your custom CSS changes. If you have issues with your changes not applying, I'll try my best to deduce them, but it may require you to seek help from the web development community. A great resource would be StackOverflow, as you can ask many questions about your CSS/SCSS code.
Congrats! You've completed the guide on how to customize your Allure Blesta Theme! I hope this was helpful and provides greater insight into how powerful this theme can be. As always, if you have any issues during the installation process, please be sure to open a support request.
If you're looking for something a little more custom, do not forget to check out the Theme Customization service offered by SwiftModders.