eCompomnent and eShop CSS Customisation
eComponents and the eShop can have their appearance customised by supplying the URL of an override stylesheet, allowing you to better harmonise them with the rest of your site. In this way you can match fonts, colours, and so on, so eComponents and/or the eShop fit your brand.
Getting started: using the CSS Restyling Demo
The Resources Showcase contains a CSS Restyling Demo, and some downloadable stylesheets to help you to get started.
To reach the resources showcase go to dmAdmin by clicking your dealership's icon in your clubhouse.
Click Resources (1), then See our resource showcase (2)
Once you in the resources showcase use the menu that drops down from Choose a showcase site to access the CSS Restyling Demo.
The CSS Restyling Demo
The CSS Restyling Demo allows you to see the effects of an override stylesheet on all the eComponents, including those that make up the eShop, at the click of a button.
To use it put the URL of your CSS file in the form at the top and click the RESTYLE! button. Some sample CSS URLs are provided.
Create your own eCompoenent stylesheet
Making an override stylesheet
From the CSS Restyling Demo:
- Download the ZIP file containing the default CSS file, dealer_dmclub.css, and the other examples (dealer_dmclub.css can be found in THEMES/dmclub/ )
- Use dealer_dmclub.css as your starting point
- Make your modifications
- Upload it (and any images it references) to some webspace. This is usually best achieved by uploading the entire 'dmclub' directory, which you can rename if you like
- Go directly to your stylesheet's URL in your web browser, to verify it's accessible
- Paste it's URL into the CSS Restyling Demo
- Click RESTYLE! to see the effects on the eComponents (put an item in your trolley using the NumberChooser to see the full effects on all of the eComponents.
- When you are happy with your modifications proceed to section 3 below: Supplying the URL of an override CSS file.
Limitations
- Some elements of the eComponents (e.g. many icons) can't be modified using CSS overrides, as they are not controlled by stylesheets. If you have a particular need to modify these elements contact your account manager.
- Please note: this is only a brief introduction.
An example of what can be achieved
Supplying the URL of an override CSS file
How you specify the URL of your custom stylesheet depends on which of the web marketing options you are using.
Affiliate site users
Watch the Web Marketing Options video
@ 4m 55s to 7m 0s
Go to 'Branding All' in dmAdmin and enter the URL in the field labelled eCom Stylesheet URL.
eShop users
Regenerate your eShop placement code DMR Wizard, adding the URL of your stylesheet in the field Custom CSS URL. Copy-and-paste the resulting code into your website.
eComponent users
In the eCom placement code, to the string of parameters in the ecom_src attribute of the iframe tag, add:
&v.css_link=<Url-of-Override-CSS>
- You must host the CSS file on webspace that you control
- Replace <Url-of-Override-CSS> with the full URL of your CSS file, beginning http://
- Make sure that <Url-of-Override-CSS> is URL encoded