The design of the webshop can be customised with CSS code incase there is something that can not be done with the design tool. You can make changes to the CSS classes by adding the CSS code on the Settings > General settings > Advanced settings page. CSS changes for the mobile view are done on the Settings > General settings > Advanced settings for mobile view page (different CSS classes are used in the mobile view).
The elements of the web shop all have a CSS class that can be used to make changes or for example completely hide an element by using CSS code. There are good tools to find the name of the CSS class in the web browser's own developer tool that is available in the most important browsers (for example Chrome).
When making changes with CSS code, remember to test the design and function of the pages in different web browsers after each change. In some cases the same CSS class is used in different places on different pages.
Changes in the design should always primarily be made with the web shop's design tool. Use CSS code only if the change is not possible using the design tool. This makes it easier to handle the design and future updates.
With CSS code you can for example
- Change the element's colour, background colour and background picture
- Add frames and shadows to some elements
- Change the element's height, width, margin and padding
- Hide elements
Upload a simplified template
Some of ePages' newest design templates are more limited when it comes to CSS changes since they are already made more clean from a design point of view. If you want to use code to make a very tailored layout you can upload a simplified template that makes it easier to use your own code.
- Download the Plain.style file to your own computer.
- Upload the design template to your shop by clicking the "Import style" button on the Design > My styles page.
- The Plain template is then created as a new style in your shop. The old design templates will still be available without changes.
Exemples of CSS changes
The CSS code (in this example "h1 { text-transform: uppercase; }") is added between style tags, like this:
<style type="text/css">
/* Changes all h1 headers to UPPER CASE: */
h1 { text-transform: uppercase; }
</style>
The comment for the code starts with the mark /* and ends with */ The text between these marks does not affect the code, it only makes it easier when updating the code at a later date.
Common changes
In some design templates some page elements, for example the flags for choosing language or the link to the basket, are not in line with the other elements. This can be fixed by adding this CSS code:
div { vertical-align: top; }
The search element's "search" button can in some design templates jump down. This can be fixed with this code:
.SearchForm.vertical-search > input { max-width: 120px; }
To align the social media buttons on the product page you can use this code:
.SocialWeb { vertical-align: top; }
Centered background image:
body, html { background-position: center top;}
Static background image:
body, html { background-attachment: fixed; }
Floating background image (image does not follow when scrolling):
body, html { background-attachment: scroll; }
Only replicate the background image horizontally:
html, body { background-repeat: repeat-x; }
Background image as full screen:
html, body { background-size: 100%; }
Header background on full screen width:
.GeneralLayout { width: 100%; max-width: 100%; height: 100%; margin: 0px auto 0 auto; }
div.Header .PropertyContainer, div.NavBarTop .PropertyContainer, div.Middle, div.NavBarBottom .PropertyContainer, div.Footer .PropertyContainer { width: 990px; margin: auto; } /* Add the website width here */
Make the search path (breadcrumb) less visible:
a.BreadcrumbItem, span.BreadcrumbLastItem { font-size: 12px !important; font-weight: normal !important; color: #999 !important; }
Hide the frames of the product's additional information table:
table.UserAttributes, table.UserAttributes td { border: 0 !important; }
Bigger margin for the products in the product lists: (when the product layout is "Large boxes")
.HotDeal { margin: 6px 15px 5px 0; }
Shadow around the whole website:
div.GeneralLayout { box-shadow: 0 0 5px #888888; }
Navigation links in UPPER CASE:
.NavBarTop a { text-transform: uppercase; }
Hide left side bar on the front page:
.start-page .ContentArea { margin-left: 0px !important; }
.start-page .NavBarLeft { display: none !important; }
Hide the "Display per page" and "Sort by" menus at the top of the product lists:
.CategoryProducts .InputLabelling,
.CategoryProducts select.ep-uiInput.ep-uiInput-select { display: none; }
or alternatively hide the menus only on the front page product list by adding ".start-page" in the beginning:
.start-page .CategoryProducts .InputLabelling,
.start-page .CategoryProducts select.ep-uiInput.ep-uiInput-select { display: none; }