Add CSS to the CMS

Cascading Style Sheets (CSS) is a style sheet language used to describe how HTML elements (color, layout, font, and so on) are displayed on a webpage.

CSS can be used in Optimizely Configured Commerce to modify the design of the website without making changes to the base code. CSS may be entered at the page or the widget level.

Page level

Modify the CSS at the page level to change the page design and store references for style/class changes made to widgets.

Modify page level CSS

1. Click Edit in the upper left corner.

2. Using the left hand navigation, select a page to modify.

3. Click Edit Page.

4. Add the CSS to the CSS field- it may be necessary to scroll down.

   

5. Click Save.

Widget level

Modify CSS at the widget level to differentiate two of the same widgets from each other, change the style of widgets, add styling across multiple pages, and add hardcoded images.

Header

When designing the site header, learn what CSS rules currently exist for that element. Use the Inspector tool in any web browser to copy any appropriate Class IDs into the header's CSS section, then use those IDs to edit and modify the header.

📘

Note

The header element is consistent across all site pages. If there is CSS that should exist on multiple pages, include it in the header; the system pulls the CSS from the header first, regardless of which site page you are on.

Many of the CMS' CSS rules are duplicated multiple times within the base CSS file. If the rule is changed in one place, it will not change other places. Additionally, if !important is added to a CSS rule in one location, it still may not execute first if the rule exists in other locations. The Insite Support Team is aware of this issue.

Differentiate widgets using CSS class rules

A user adds two of the same Carousel widgets to a page, but wants one of the widgets to be styled differently. Use CSS Class rules to differentiate one widget's style from the other.

1. Edit the widget that should be styled differently. Add a custom CSS Class (ex. cssrule).

2. Click Save.

   📘

   Note

   Configured Commerce automatically adds a "." (period) before any CSS Classes, so there is no need to include one in the rule name.

3. Next, edit the page the widget is on, and add the custom Class to the CSS, plus any changes (height, width, and so on).

4. Click Save.

Add a Container widget

Use the Container widget to add equal columns to a webpage, create a sidebar, or create an interesting webpage layout.

Follow these steps to add a Container widget:

1. Hover over the CMS button in the upper left corner and click Show CMS.

2. Click Edit CMS in the upper left corner.

3. Click Add Content to add a widget.

4. Using the left hand navigation, click the page that will host the widget.

5. Select the desired Container widget from the Item Type drop down menu, and select the Standard template.

   

6. Choose the CSS class, or use the default by leaving the CSS class field blank and then choose the width for each column.

   The total of all columns must equal 12, in accordance with the basic grid system.

7. Click Save.

   The following images show Two and Three Column widgets added using the process above:

   

   

Add a hardcoded image to the Commerce site

Use CSS to add a hardcoded background image to the Commerce site.

First, upload a file to the Admin Console's File Manager:

1. Go to Admin Console > Library > Media.
2. In the Folders Pane of the File Manager, select the upload destination folder.
3. In the top toolbar, click Upload.
4. Select the desired files and click Open.

Second, copy the image address:

1. Double-click the image in the File Manager, or right-click the image and select View.
2. Right-click the image, and select Copy Image Address.

Third, add the image address to a widget on the CMS:

1. Click View Website in the Primary Toolbar and select a website.

2. Hover over the CMS button in the upper left corner of the site and select Show CMS.

3. Click Edit CMS in the upper left corner.

4. Using the left navigation, choose the page that will host the widget.

5. Click Edit Page to add a widget.

6. Select the CSS field.

7. Add the correct CSS to the CSS field. Below is a sample of the CSS

   CSS

   <style>
   [role="panel-wrap"] {
   background-image: url('http://kurld.com/images/wine-wallpaper/wine-wallpaper-11.jpg');
   background=repeat: 1-repeat;
   width: 100%;
   }
   </style>
   

8. Click Save