Standard Controls Stylesheet

You can find this section under Interface & Design > Standard Controls Stylesheet in the IRP Admin left navigation menu.

Using this page you can modify the styling of many of the controls that customers use on your website, including the checkout, header area, basket and wish list. There are also standard or 'base' controls from which all other controls are constructed.

Note: Extensive changes to the standard controls are discouraged as they can have system-wide effects. The editable CSS classes allow you to customise multiple elements without unanticipated effects. To maintain UX standards, style changes should ideally be limited to the CSS classes and variables exposed on this page.

The CssStylesStandardControls.aspx page appears as follows:

You can select any of the following stylesheets using the Stylesheet To Edit drop-down list:

• Standard Controls: This stylesheet is always rendered on every page so that the controls can be added anywhere; they are the 'base' controls from which all other controls are constructed. The standard controls include a standard button, check box, text box, dialog box, drop-down list, email text box, information icon, standard message, standard panel, password text box, radio button, radio option and radio option list. This stylesheet also includes the default font size (16px). All other font sizes in the new controls use 'rem' as the units, which means that the fonts are sized relative to that base value. Therefore if you want to increase font sizes across the entire site you only need to increase that one value. (The 'rem' unit represents the font-size of the 'root' element (the html element).)
• Checkout Controls: These styles are used for the all-new, high-converting IRP checkout. You can modify the CSS classes to change the appearance of several aspects of the checkout, including the progress bar that appears at the top of every checkout page. You can also style or hide specific parts of the OrderConfirmation.aspx page in checkout. You can find instructions for changing the progress bar and other aspects of the checkout in the IRP Checkout help topic.
• Header Controls: These styles are used for the IRP header area on the front end of your website. This is the area above the top navigation where the search bar, company logo, international settings, wish list, customer details, loyalty points and basket controls are located. You can use the stylesheet to update some basic styling around the controls in this area. For more details, see the IRP Header help topic.
• Basket Controls: These styles are used for several aspects of the customer basket. You can read more about the basket in the IRP Checkout help topic and in other places throughout the Knowledge Base.
• Wishlist Controls: These styles are used for modifying various aspects of the IRP wish list. The wish list feature makes it easy for customers to define products on listings pages and scrollers that they want to purchase at a later date. For more details, see the IRP Wish List help topic.
• Models Controls: (More CSS code will be added here over time for use by Admin Users.) These styles will be used for modifying various aspects of models, overriding styles for the related standard controls and so forth. As with other standard control stylesheets, there will be CSS variables that Admin Users can change or some full CSS classes that they can customise.
• Blog Controls: These styles are used for modifying some elements of how blog articles are displayed. For more details, see the Blog Articles help topic.
• Live Chat Controls: These styles are used for modifying some elements of how Live Chat windows are displayed. For more details, see the Live Chat help topic.

The stylesheet you select is displayed in the Standard Controls Style Sheet window. This contains editable CSS styles and variables.

Note that CSS variables don't work in Microsoft Internet Explorer (IE), however fall-back styles are automatically generated and appended where required to maintain compatibility.

It is always a good idea to make a backup copy of the stylesheet before you make any changes. If you do make changes, click the Update Standard Controls Stylesheet button to save your work.

At the top of the page you can click the following buttons:

• Website Stylesheet: Click this button to go to the CssStyles.aspx page where you can set or change styles associated with all areas of your site. This section requires strong design skills and understanding of CSS stylesheets. In addition to the Main Style Sheet, you can also use the Tools Style Sheet and the Live Support Style Sheet. For more details, see the Website CSS Stylesheet help topic.
• Mobile Stylesheet: Click this button to go to the CssStylesMobile.aspx page where you can modify the stylesheet for the mobile version of your website, as held on the file system. This section must be enabled by your IRP Agency after they are confident that your design team have the necessary skills and understanding of CSS stylesheets. The CSS section is predominately a resource for both your Agency's graphic designers and your own. For more details, see the Mobile CSS Stylesheet help topic.