Standard/Responsive HTML - Navigation buttons

Compose Enterprise is going through a design update. The illustrations on this page might be of the old design, but the information is up to date. Thank you for your patience during this update!

Norsk

If you’re creating a design with a responsiveHTML or standardHTML framework, then the CSS code in this user guide can be used to customize the navigation buttons in your service.

The navigation buttons are created from images and wrapped inside a <button> tag. This allows you to e.g. have rounded corners and gradients. The structure of the <button> tag is displayed underneath:

<button class="endUSerNavButton iconRight arrowRight blue disableOnFormSubmit" value="true" name="showNext" type="submit">
     <span class="left"></span>
     <span class="center"></span>
     <span class="right"></span>
</button>
spans: "left", "center" and "right" holds the 3 images needed to create a rounded button

Usually the button design is pulled from a sprite image (an image containing many icons). Replace the sprite image that contains all the button parts with a background image (added in this case in the img folder in the design zip file):

.endUSerNavButton .left, .endUSerNavButton .right, .endUSerNavButton .center {
    background-image: url("img/buttonsSpriteOrangeClockwork.gif") !important;
}

Icon

There is a span with the class="justText" inside the class="center" span. Here you can control the text (font, color, style) and the icon:

<span class="center">
     <span class="justText">Next </span>
</span>

In the main tag, the <button> tag, you control the icons by adding them inside the class attribute:

"iconRight” --> opens the place at the right of the text inside "justText"
"arrowRight" --> tells what icon to call

In the same class you can call different icons:

"arrowLeft"
"pause"

"arrowRight"

"downloadIcon"

You add your own button images inside a folder in the design file (traditionally in the img folder available when downloading sample designs from the Upload Design menu).

Buttons without rounded corners

Start by hiding the left and right elements containing the rounded corners:

.endUSerNavButton .left,
.endUSerNavButton .right {
    display: none !important
}

Then customize font, colors etc. in the center class:

 .endUSerNavButton .center,
.endUSerNavButton.blue .center {
    background: #007ABF !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 1px 10px !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
}

Add a specific color to the button when end-users hover over the button with the cursor:

 .endUSerNavButton:hover .center,
.endUSerNavButton.blue:hover .center {
    background: #005580 !important;
}

Style the text inside the button:

 .endUSerNavButton.blue .center .justText,
.endUSerNavButton .center .justText {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
}

You’ll find few relevant user guides in this documentation space if your service uses standardHTML or responsiveHTML framework. We highly advice converting your Compose services to bootstrap framework as it delivers a better fundament to support responsive design. The future user guides will mainly be centered around responsive design. See the Bootstrap theme user guide for more information.