The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 10-05-2009, 08:25 AM
Olga's Avatar
Olga is offline
Ecwid Team
 
Join Date: Sep 2009
Posts: 10
Default

Ecwid Custom CSS. FAQ


1) How do I change the design ? What can be changed and what's not ?

Current version of Ecwid allows you to change CSS styles of customer front-end. HTML is not available for editing.
That's made to ensure that you are able to upgrade easily. We believe that most HTML changes people do are outside of Ecwid boundaries.
Ecwid does not need those "change header HTML / change footer HTML" functionality. The site owner can change the looks of the whole site.
CSS capabilities are more than enough to allow you to make Ecwid match the design of the rest of your site.
In most cases, you won't have to edit anything, not even the CSS. Just pick one of pre-defined schemes. Ecwid is designed to fit well in most sites.

So, what you can change are colors, fonts, margins and images. What you can't change is interface logic.

2) How do I change Ecwid CSS ?

Open Ecwid control panel and proceed to:

System Settings > Design > CSS Themes

You can pick from pre-defined schemes or create your custom version. You can find the list of all styles used by Ecwid at the gray "Base CSS Theme" window at the page bottom.
Any style you specify will override the default one.

In order to create your custom scheme:

- Click "New CSS Theme"
- Copy the classes you want to override from the bottom window to upper one.
- Change the classes as you wish.
- Name and activate your scheme.
- Save changes
- Reload customer interface page if it's open in your browser

Example: copy the ".ecwid-minicart-caption" class and change color from #4B5660 to #ff0000. "Shopping Bag" label inside Minicart Widget will turn red.

You can also create your own CSS styles and use them in HTML product descriptions.

3) How do I know CSS style name for the design element I want to change ?

If you use Firefox:


You can use Firebug add-on for Firefox browser. You can get it here: http://www.getfirebug.com/
There is a good video tutorial on Firebug: http://www.vimeo.com/3087755

If you use Internet Explorer:

1) Download and install IE Developer Toolbar: http://www.microsoft.com/downloadS/d...E-2D5E1DB91038
2) Launch IE
3) Press F12 to open the toolbar.
4) Press Ctrl-B to select element by click.
5) Click the element you want to look up.

If you use Chrome:


Right click on the design element and select "Inspect element"

If you use Safari:


First, enable Debug Menu to access Web Inspector.
This is how you can do it on Mac: http://www.youtube.com/watch?v=VNC4Giu3mYQ
This is how you can do it on Windows: http://lpetr.org/blog/archives/using...tor-on-windows .

When Debug Menu is activated, you can just right click any design element and select "Inspect element". There is a tutorial video on that. A little bit boring though: http://www.youtube.com/watch?v=rXdR5eIFZ8k

4) How do I change the images used in UI ?


You can do it by changing corresponding CSS style.

For example, in order to change the bag icon in Minicart Widget, you need to:

- Make sure your new icon is available on the Web. You can upload it to your web hosting or use image hosting like Flickr.
- Find the CSS class that defines the icon. You can easily do it with Firebug, try it! If you do everything right, you'll find out that style name for the bag image is .ecwid-minicart.
- Change the background URL to your image URL (from icons/minicart.png to http://yoursite.com/yourimage.png).
- Name and activate your scheme
- Save changes and hit "reload" to see the changes in your shop.

5) I want the same icons you use, but in different color.


Not a problem at all! Take any of these .PSD files and open them in Adobe Photoshop or GNU GIMP. You can alter any colors then save image as GIF/PNG/JPG.
These files are Copyright (c) 2009 Creative Development. But you are free to alter and use them as long as you do that for purposes of customizing your Ecwid store.

http://www.ecwid.com/wp-content/uplo...NewAddress.psd
http://www.ecwid.com/wp-content/uplo...rrow-south.psd
http://www.ecwid.com/wp-content/uplo...ories-menu.psd
http://www.ecwid.com/wp-content/uploads/design/bag.psd
http://www.ecwid.com/wp-content/uplo...utton_blue.psd
http://www.ecwid.com/wp-content/uplo...utton_grey.psd
http://www.ecwid.com/wp-content/uplo...tons_green.psd
http://www.ecwid.com/wp-content/uplo...ery_arrows.psd
http://www.ecwid.com/wp-content/uploads/design/lock.psd
http://www.ecwid.com/wp-content/uplo...n/minicart.psd
http://www.ecwid.com/wp-content/uplo.../msg_icons.psd
http://www.ecwid.com/wp-content/uplo...gn/noimage.psd
http://www.ecwid.com/wp-content/uplo...mage_small.psd
http://www.ecwid.com/wp-content/uplo...ign/points.psd
http://www.ecwid.com/wp-content/uplo..._encrypted.psd
http://www.ecwid.com/wp-content/uploads/design/tab.psd
http://www.ecwid.com/wp-content/uploads/design/tick.psd
http://www.ecwid.com/wp-content/uploads/design/x.psd

In one archive:

http://www.ecwid.com/wp-content/uplo...fault_skin.tgz

6) There are so many styles ! I want to make my custom color scheme quick, how do I pick a set of styles need changing?


There are several pre-defined CSS schemes in Ecwid. All schemes except the basic one are made as changes to the basic. So you can use them as a shortlist of styles need changing.

7) Oops. I did something wrong to CSS and messed up my store. How do I revert changes ?

Just activate the standard scheme. It's empty and that means it does not override the basic CSS.
The Following 11 Users Say Thank You to Olga For This Useful Post:
Anubha Saxena (08-27-2012), Carlijn van Roosmalen (03-02-2016), DOArodents (03-31-2012), Douglas ArnoldI (09-05-2012), fabswagnet (09-01-2013), frenzydiscounts.com.au (06-03-2015), Laura Thompson Brady (08-13-2012), Light ideas Studio 1590657 (08-28-2013), Golf Club of Houston (09-25-2012), sokolov (02-06-2012), squarescore (06-19-2012)
  #2  
Old 10-29-2009, 05:33 PM
Qetzal's Avatar
Qetzal Qetzal is offline
Ecwid Team
 
Join Date: Sep 2009
Posts: 10,847
Lightbulb

Knowledge Base
__________________
Eugene K.
Ecwid Team

@ecwid | Facebook | Ecwid Knowledge Base

Last edited by qetzal; 01-12-2010 at 04:29 PM.
The Following 4 Users Say Thank You to Qetzal For This Useful Post:
Anubha Saxena (08-27-2012), Douglas ArnoldI (09-05-2012), jike merry (07-23-2013), OculusMarket (04-28-2017)
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
faq

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:31 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.