jarmstrong
Modular Merchant: Development
Joined: 28 Aug 2005
Posts: 1
|
 Posted: Mar 06, 2006 02:20pm Post subject: Using CSS with Skins |
 |
|
In addition to Modular Merchant's built-in design tools, such as the Colors and Tables tool under the design menu, advanced users may be interested to know that Modular Merchant skins also support Cascading Style Sheets (CSS). This article provides a brief introduction to using CSS with Modular Merchant skins, and some links for further reading on CSS topics.
Why CSS?
In the "old days" of web design, all design elements such as fonts, background colors, link colors, etc. were specified in the HTML, which was fine until sites got really large. Then when you wanted to update the look of your site, it was a tedious and time-consuming process to update all of your design elements on every page. CSS lets you specify many of the design elements of your site in a single file, making minor design changes relatively easy.
If you have a separate website that has a stylesheet, in addition to your Modular Merchant store, you can also link to the stylesheet from that site in your store skin, thus allowing you to easily borrow design elements from your existing site.
Adding a Stylesheet to your Skin
There are a couple of different ways to add a stylesheet to your store skin.
1) External Stylesheet. This is the most powerful method. It allows you to share a single stylesheet between all of your store pages, and even an external website if you choose. In order to use this method, you need to have a hosting account where you can upload your stylesheet. Modular Merchant offers an eCommerce Hosting Package which works with our Marketplace software allowing your store to be hosted on your own domain, along with a dedicated IP address, FTP access, 20 email accounts, a SSL security certificate, and extra disk space and bandwidth.
To link to an external stylesheet, somewhere within the head element of your skin page header, add the following:
| Code: |
<head>
...
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
...
</head>
|
Replace stylesheet.css with the name and location of your actual stylesheet. If your stylesheet is on the same domain as your store (recommended, to avoid browser security warnings), you do not need to specify http://www.yourdomain.com.
2) Internal Stylesheet. This technique allows you to add CSS without the need for a separate stylesheet file. However, if you want to change the CSS on all of your store pages, you will need to edit each page's stylesheet.
To link to an internal stylesheet, somewhere within the head element of your skin page header, add the following:
| Code: |
<head>
...
<style type="text/css">
<!##
##>
</style>
...
</head>
|
Within the <!## ##> tags, add your CSS in the same way as you would to an external stylesheet.
CSS Drawbacks
As with any technology, there is no such thing as a free lunch. CSS does have a few disadvantages. From the Modular Merchant side of things, CSS overrides the built-in design settings from the Colors and Tables tool, which may cause confusion if you have people working on your site design who don't know you are using a stylesheet.
It is important to note that CSS support is totally dependent on the browser you are using, which may cause your site to look different in different browsers. Generally, it is a good idea to test your site design in several different browsers. Prior to version 4 of Netscape and Internet Explorer, CSS is not supported. From then on, CSS support varies, with newer browsers offering better support. CSS1 is generally well supported by any version 4 browser or above, while CSS2 support varies a bit more, with most browsers released in the last four or five years offering pretty good support of most features. CSS3 is still not widely supported and should probably be avoided for the time being.
Conclusion
Now you know how to add Cascading Style Sheets to your Modular Merchant store. With a little extra effort in the beginning, using CSS should make maintenance of your site's design easier down the road.
Let me know what you think of this article. Though CSS is outside of Modular Merchant's official "spheres of support", if anything in this article is unclear, please post a reply so it can be fixed. And if you found this article useful, I always like hearing that, too!
CSS References
An exhaustive review of CSS, browser compatibility, and CSS bugs are outside the scope of this article. However, below is a listing of some of the CSS websites we use.
W3Schools CSS Tutorials - A good learning site with examples and tutorials and an excellent CSS compatibility chart.
The Web Design Group's CSS Reference - A site with some good CSS articles which, ironically, doesn't use a lot of CSS in its own design.
A List Apart - A site covering more advanced web design issues, containing many good articles on CSS.
CSS Zen Garden - Many examples of CSS-based designs, to provide inspiration for your own site.
W3C CSS Specification - The World Wide Web Consortium's CSS reference. These are the official creators of the CSS standard. Their site can be pretty technical, but they are the ultimate authority on CSS.
W3C CSS Validator - This can be a valuable tool for debugging problems with your CSS syntax. |
|
Advanced Search
Register
Profile
FAQ
Memberlist
Log in
