UI.X 2

UI.X 2 Helpers and Variables

Used for the style property “uix_mobileActiveNav” in Basic options. Sets a title in the navigation when navigation is collapsed into off canvas. Uses “page_title” by default. Use this in a content template to override:

• <xf:page option="uix_hideExtendedFooter" value="1" /> <xf:page option="uix_mobileActiveNav">{{ phrase('forum') }}</xf:page>

This allows you to hide notices when adding it to a page/template:

• <xf:page option="uix_hideNotices">1</xf:page>

This allows you to hide the page title:

• <xf:page option="uix_hidePageTitle">1</xf:page>

This allows you to remove the breadcrumb on pages you add the helper:

• <xf:page option="xf:page option=$uix_hideBreadcrumb" />

This allows you to hide navigation, tablinks, visitor tabs, and search:

• <xf:page option="$uix_hideNavigation"></xf:page>

Adding this class allows you to any elements inside the .p-body sticky:

• .uix_stickyBodyElement

.m-uix_whiteText(@color); - This LESS mixin is useful for determining whether or not white text should be used instead of default text (which is dark on a light theme.) By passing the background color (that the text displays on) to the mixin will add white text only if there is a legibility concern.

Example:

Copy.textOnDarkBackground {
       background-color: black;
       color: black;
       .m-uix_whiteText(#000);
   }

$uix_headerExtra - This page option can be used to add additional markup to the bottom of the header per any individual content template. The markup specifically is inserted at the bottom of <div class="uix_headerContainer"></div>. The following is an example use case:

Copy<xf:page option="uix_headerExtra">
	            <div class="myExtraHeaderBar">
	                This bar will inset extra content into the bottom of the header.	            </div>
        </xf:page>