e-Business 6.0 UI Style Guide
Purpose of this document:
This document is a guide to quick-start working with styles for a new theme in e-business 6.0.
Using eBusiness 6.0 default UI theme
For any of the UI controls, such as form elements, header, footer etc. requires you to include the either of one from following styles.
eb6.css: This is a common (base) stylesheet. It applies styles related to element positioning and widget dimensions. It is a must for the widgets to look and function in a proper way.
ebControls.css: This is a common (base) stylesheet. It applies styles related to element positioning and widget dimensions. This will not contain the default theme colors. This can be used if you want to customize or add new theme CSS to the application.
The example below demonstrates how to include the default stylesheets to your project.
Example:
<html> <head> <link rel="stylesheet" href="[file path]/ eb6.css" /> <link rel="stylesheet" href="[file path]/ bootstrap.min.css" /> <link rel="stylesheet" href="[file path]/ responsive.css" /> </head> </html> |
|---|
The example below demonstrates how to include the custom theme to your project.
Example:
<html> <head> <link rel="stylesheet" href="[file path]/ ebControls.css" /> <link rel="stylesheet" href="[file path]/ bootstrap.min.css" /> /*use Bootstrap only if you want responsive site support*/ /* Create your theme file and add reference to html file */ <link rel="stylesheet" href="[file path]/ [your new theme].css" /> </head> </html> |
|---|
This is how e-Business 6.0 default theme is rendered.
Login page
.png?version=1&modificationDate=1557730189600&cacheVersion=1&api=v2&width=500&height=303)
Product Catalog page
Default theme explained
Main Header
Example:
.navbar {background: #0098cc } |
|---|
Top navigation Active Tab background and link color
The “color” refers to the color of the link text and the “text-decoration” here is set to none because we didn’t want any underlining. The “a:visited” refers to the fact that we want the links to appear the same after they’ve been clicked on.
Example:
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {color: #fff; background-color: #007ca9; } |
|---|
Global style
If you want to change how the body text on your entire site looks, your CSS should look similar to this
Example:
body { font-family: 'Roboto', sans-serif;}a:hover { color: #007ca9;} |
|---|
Icons
eBiz 6.0 used font awesome svg icons, svg provides high quality graphics. https://fontawesome.com/icons?d=gallery.
How to change color of icons?
Example shopping cart icon:
Open shopping-cart.svg image in editor, you find following xml code. Update <path fill="#f0f0f0".. etc.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path fill="#fff"/> </svg> |
|---|
Style form elements -
The example below applies to all <input> elements. If you only want to style a specific input type, you can use attribute selectors. Use the border property to change the border size and color and use the border-radius property to add rounded corners.
Use the background-color property to add a background color to the input, and the color property to change the text color. By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.
Use the focus selector to do something with the input field when it gets focus:
Example:
input {color: #333; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; } .form-control:focus {border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); } |
|---|
How To style Radio Buttons?
The example below applies to all radio buttons with the blue border. Once checked, radio button thickness changed to 5px.
Example:
input[type="checkbox"], input[type="radio"] {border: 1px solid #0098cc; } input[type="checkbox"]:checked {border: 5px solid #0098cc; background-color: #0098cc; } select {background: transparent; } |
|---|
Styling product catalog card view
Below is the example of card design, where you can change border, background and element style.
.btn-primary { background: #0098cc; color: #fff; border: #0098cc solid 1px; border-radius: 4px; outline: 0; } .btn-primary:hover { background: #007ca9; ; color: #fff; border: #007ca9; solid 1px;} .btn-primary.active.focus, .btn-primary.active: focus, .btn-primary.active:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover .btn-secondary, .btn-primary:active { background: #007ca9; color: #fff; border: #0098cc solid 1px; border-radius: 4px; outline: 0; } .btn-secondary:hover { background: #0098cc; color: #fff; border: #0098cc solid 1px; } .btn-secondary { background: #FFF; color: #0098cc; border: #0098cc solid 1px; border-radius: 4px; } .btn[disabled] { background: #0098cc !important; } |
|---|
Product card
.ebusiness-product-wrap { border: 1px solid #f0f0f0; box-shadow: 0 0 5px #fff1f1; background: #fff; } |
|---|
How to create a new theme
Create a new file with name theme.css. copy below classes to that file and modify as per your branding.
/*main Header Background color*/
.navbar {
background: #0098cc
}
/*Top navigation Active Tab background and link color*/
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
color: #fff;
background-color: #a60000
}
/*Generic Style*/
body {
font-family:'Century Gothic';
}
a,.ebusiness-view-switcher-btn, .ebusiness-view-switcher .icon-r-search, .isCollapseOpen, .isCollapseClosed {
color: #e00000;
}
a:hover {
color: #a60000;
}
ul li {
list-style: none;
}
input {
color: #333;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}
span.pull-right.shipToDiff {
font-size: 14px;
}
input[type="checkbox"], input[type="radio"] {
border: 1px solid #e00000;
}
input[type="checkbox"]:checked {
border: 1px solid #e00000;
background-color: #e00000;
}
input[type="radio"]:checked {
border: 5px solid #e00000;
}
select {
background: transparent;
}
.btn-primary {
background: #e00000;
color: #fff;
border: #e00000 solid 1px;
border-radius: 4px;
outline: 0;
}
.btn-primary:hover {
background: #a60000;
color: #fff;
border: #a60000 solid 1px;
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,.btn-primary.focus, .btn-primary:focus, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover .btn-secondary, .btn-primary:active {
background: #a60000;
color: #fff;
border: #e00000 solid 1px;
border-radius: 4px;
outline: 0;
}
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover{
color: #fff;
background-color: #a60000
}
.btn-secondary:hover {
background: #e00000;
color: #fff;
border: #e00000 solid 1px;
}
.ebusiness-product-wrap {
border: 1px solid #f0f0f0;
box-shadow: 0 0 5px #fff1f1;
background: #fff;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
.btn-secondary {
background: #FFF;
color: #e00000;
border: #e00000 solid 1px;
border-radius: 4px;
}
.btn[disabled] {
background: #e00000 !important;
}
.activeSteps a {
background: #e00000;
border: 2px solid #e00000;
}
.btn-primary {
background: #0098cc; color: #fff; border: #0098cc solid 1px;
border-radius: 4px; outline: 0;}
.btn-primary:hover {
background: #007ca9;; color: #fff;
border: #007ca9; solid 1px;}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,.btn-primary.focus, .btn-primary:focus, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover .btn-secondary, .btn-primary:active {
background: #007ca9;
color: #fff;
border: #0098cc solid 1px;
border-radius: 4px;
outline: 0;}
.btn-secondary:hover {
background: #0098cc;
color: #fff;
border: #0098cc solid 1px;}
.btn-secondary {
background: #FFF;
color: #0098cc;
border: #0098cc solid 1px;
border-radius: 4px;}
.btn[disabled] {
background: #0098cc !important;
}
Copyright © 2014-2019 Aptify - Confidential and Proprietary