Fixing Shopify template bugs - “Rare 1″
A couple of weeks ago, I helped my family set up a website with Shopify. (The website is www.bridgeswalkingsticks.com.) Because they wanted to get the site up and running as quickly as possible they elected to go with one of Shopify’s rather nice-looking templates, “Rare 1,” rather than create a new design.
Although it looked excellent, it did have some layout issues, mostly with Internet Explorer.
- The rounded corners at the top did not display correctly in IE6 or IE7.
- The content section of the website would always be forced below the menu section in IE6.
- One additional issue is that on a page whose content section was shorter than the menu, the bottom right corner graphic would not actually be at the corner of the layout.
Fortunately, Shopify is very open in giving its users access to their site’s code. With some minor modifications I was able to resolve these issues. The changes are listed below for the benefit of anyone else using “Rare 1″. Only the code directly related is included.
#header {
/*padding: 15px;*/
padding: 0 15px; /*Reduce header height to compensate for adding padding in IE fix*/
margin-top: -15px; /*see above*/
}
.clipped-tr {
padding-top: 27px; /*Make top rounded corners work in IE*/
}
contentcenter {
width:495px;
_width: 494px; /* Prevent content from dropping below menu in IE6 */
padding: 0 0 50px 10px;
_padding: 0 0 50px 0; /* Fix problem with bottom right corner introduced by fix above */
min-height: 650px; /* Make sure height of content section is longer than menu */
}
The properties preceded with an underscore above are only visible to IE6, and thought it is a bit of a hack, it is technically valid CSS.
Update: Since the time of this writing, I have begun offering design and coding for custom Shopify themes.
Popularity: 14% [?]
If you're new here, you may want to subscribe to my RSS feed or subscribe via email. Thanks for visiting!