Theme Builder and Custom Themes together

SmartIQ provides a powerful set of tools that allow a Designer to configure an experience which looks and feels like a part of the customer's own brand. Due to the breadth of what is possible, not all techniques will work together in a seamless fashion.

This article highlights some key areas to be aware of when designing the look and feel of a SmartIQ interface, particularly when pairing Theme Builder with Custom Themes.

Theme Builder is the preferred method to create and maintain a corporate brand on top of SmartIQ, while Custom Themes provide a web development path for engineering specific overrides to the frontend CSS when requirements demand that level of detailed control.

Because these techniques can both introduce overrides to CSS elements, conflicting CSS might generate unexpected results.

Login Page Experience

The login page when overriden by Theme Builder is mutually exclusive to any Custom Theme, and in fact SmartIQ will not load any custom CSS for the login page when the 'Apply theme to login' option is enabled. In this case, any Custom Theme will be loaded only after login.

Headers and Logos

Theme Builder allows a custom logo, including a small version, and also allows logos to be resized to suit. The header area has a dynamic height based on the size of the logo, with a minimum and maximum set to prevent an over or undersized header.

If overriding the logo or header area in a Custom Theme you should be careful to avoid conflicts such as overlaying two different images, or introducing size issues such as the logo being clipped.

Content Width

Theme Builder provides several standard Content Width selections - full (100%), wide or narrow. If you need a different width configuration be aware that both wide and narrow options have staged width constraints across different screen sizes, while the full width setting is fixed regardless of screen size.

Relative Sizing

In IQ15 SmartIQ introduced a significant change to how sizing works, generally adopting a more relative size approach using em and rem units rather than px. While you might still find px used in some areas, most places such as the default font size on the body element uses a relative unit.

This was implemented to provide greater user accessibility because relative units respect user's browser configuration for font size, while px effectively hard codes the size.

When creating a Custom Theme you should be aware of the impact of sizing, especially when introducing fixed sized or positioned elements, and test carefully on a range of screen sizes.

CSS Custom Properties

SmartIQ uses CSS Custom Properties (aka CSS Variables) to define a base set of values. In many cases, Theme Builder provides control over the values of those properties without making actual CSS element overrides. This includes the colours, corner style and typography.

Be aware when creating custom themes that override these properties that Theme Builder overrides are generally loaded after Custom Theme CSS, making it take precedence.

CSS Precedence

The order that CSS is loaded by SmartIQ can become very important to determining precedence. That is, when you have two CSS files overriding the same element with the same level of specificity, the one referenced last by the HTML document order will take precedence.

The load order is as follows:

1. Base product CSS
2. Custom Theme CSS
3. Theme Builder "Skin" CSS

Based on this order, lets say all three update the "body" element's background-color attribute. In this case the Theme Builder version will take precedence over any other.

In reality, however, its more likely that Theme Builder "Skin" CSS is simply overriding a CSS Custom Property that is already set by the Base product CSS to impact the background-color of body. In this case, if the Custom Theme sets this body attribute directly it will take precedence regardless of what value comes from Theme Builder.