The portal applications included with Adxstudio Portals are built using the Bootstrap front-end framework. By taking advantage of the Bootstrap ecosystem, you can quickly and easily theme these applications to suit your brand. This article will describe how to do so.

What is Bootstrap?

Bootstrap is a front-end framework that includes CSS and Javascript components for common web application interface elements. It includes styles for navigation elements, forms, buttons, and a responsive grid layout system, which allows site layouts to dynamically adjust to devices with different screen sizes, such as phones and tablets. By using Bootstrap's layout system, it's possible to develop a single site that presents an appropriate interface to all devices your customers might use.

Bootstrap + Adxstudio Portals

The portal application templates included with Adxstudio Portals are implemented using standard Bootstrap components, with minimal additional custom styles. This means that they can take advantage of the customization options provided by Bootstrap – they can have their theme (fonts, colors, etc.) quickly and easily customized, in a way that applies consistently to the entire application.

Customizing Bootstrap

Bootstrap supports customization, through the use of a set of variables. You can set any or all of these variables to custom values, and then download a custom version of Bootstrap compiled based on these values.

The power of Bootstrap's variables is that they do not simply dicate the style of a single element – all styles in the framework are then based on and derived from these values. For example, consider the variable @font-size-base. This dictates the size Bootstrap assigns to normal body text. However, Bootstrap also uses this variable to dicate the font size for headings and other elements – the size for an h1 element may be defined as 300% the size of @font-size-base. So by setting this one variable, you control the entire typographic scale of your application, in a consistent way. Similarly, the @link-color variable controls the color of hyperlinks. For whatever color you assign to this value, Bootstrap will define the hover color for links as 15% darker than your custom value.

The standard way to create a custom version of Bootstrap is through the official Bootstrap site. However, due to Bootstrap's popularity, a number of 3rd-party sites have also been created for this purpose. These sites may simply provide an easier-to-use interface for Bootstrap customization, or may provide pre-designed versions of Bootstrap for you to download. Some of sites offering Bootstrap customization include:

  • The official Bootstrap customizer – This will always be the most up-to-date, but currently doesn't include such UI niceties as color pickers and live preview.
  • BootSwatchr – Provides a customizer that includes color pickers and live preview.
  • BootTheme – Provides a customizer that includes color pickers and live preview, as well as a custom page layout builder.
  • Bootswatch – Provides a number of free themed versions of Bootstrap.

Applying a Custom Version of Bootstrap to Your Application

When you download a customized version of Bootstrap, it wil contain the following directory structure:

css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png |-- glyphicons-halflings.png js/ |-- bootstrap.min.js

Or, depending on the customizer application used, it may only contain bootstrap.min.css. Regardless, bootstrap.min.css is the file that contains your customizations – the other files are the same for all custom versions of Bootstrap, and so are already included in your Adxstudio Portals application.

Once you have your custom bootstrap.min.css, you can apply it to your application in one of two ways. If you are a developer and prefer to work directly with the source code of your application, you can simply overwrite the version of bootstrap.min.css included in your application source with your custom version. In most cases, however, it's recommended to apply your custom Bootstrap theme without modifying your site code – by uploading it as a Web File in the Adxstudio Portals content management system.

To do this, sign in to your application as a user with content management permissions. Then, navigate to the Home page of your application. On that page, select New > Child file from the content editing toolbar (found in the upper-right corner of your browser window).

Select your custom bootstrap.min.css file, using the File Upload field on the New Web File dialog that appears. Ensure that the Partial URL field on this dialog is set to bootstrap.min.css, exactly. It is this value that indicates to the Adxstudio Portals framework that it should use your custom version of Bootstrap instead of the default version included. You may also wish to check the Hidden from Sitemap checkbox, so that this file does not appear to users in any navigation elements on the site.

Uploading a custom version of Bootstrap

Once you Save this new file, you can refresh your page, and your customized styles will appear immediately. If you later wish to modify your customized Bootstrap version, you can do so by editing this Web File, uploading a new version of the bootstrap.min.css file to overwrite the old one.

Here, we can see a customized version of Bootstrap applied to the Community Portal application:

A custom theme, applied to the Community Portal

Additional Portal Theming Options

In addition to a custom version of Bootstrap, Adxstudio Portals also support uploading of your own custom CSS files into the content management system. This lets you apply additional styling to your portal, without having to deploy a new version of its code. To do this, simply follow the procedure described above for uploading custom Bootstrap CSS – except, use a file containing your own CSS, and choose a new Partial URL for this Web File. As long as the Partial URL ends in .css, Adxstudio Portals will recognize it and apply it to your site.

Along with a customized version of Bootstrap, you can use the content-editing system to add a custom logo and brand to the header of your Portals application. With these simple but powerful options, you're only a few minutes away from having your Adxstudio Portals application reflect your brand.