CSS Only FOUT Prevention

It is possible to use non-web safe fonts on a site without a third party service, no FOUT and IE7 support. For IE7, one must include the EOT & SVG files normally, then the Data-URI declaration. I’ve included an example of how this can be achieved.

Comments (4) | Trackback

Customizing the E-Junkie Shopping Cart: CSS

Preamble

It’s important to give your visitors a consistent experience across your site. A grossly different shopping cart can be jarring for potential customers. Part one of this guide will provide a usable overview of the techniques required to re-style the E-Junkie shopping cart with CSS.

I’ve been using E-Junkie to power my online store for many years, and it has always served me well. At US $5 a month, it’s one of the cheapest, has all the features I need, and has been extremely reliable. Until my recent site refresh however, attempting to restyle the E-Junkie cart hadn’t occurred to me. I blame the fact that when I started out on the web, I was a noob.

A noob no longer, I tackled the task of re-styling the E-Junkie cart with wonton abandon. This was the result:

Pages of Interest E-Junkie Cart

Pages of Interest E-Junkie Cart

I was successful! This section covers how I found which CSS selectors could be used, and a rather drastic technique required to replace with the default close text & header image.


Getting the Selectors

In an ideal situation, all styling is handled with CSS only. Styling a shopping cart that is instantiated and populated with an external JavaScript isn’t an ideal situation. Still, it’s preferable to do as much as possible with CSS.

To get started, I first needed a way to see the HTML structure, the ids and classes available for me to select with CSS. Enter Firebug. Firebug is likely the most useful tool available to a web developer / designer. Chrome has a similar tool, built in. I don’t like it. Use Firebug.

Inspecting an element with Firebug

Inspecting an element with Firebug

I used Firebug to view the HTML structure (DOM) and ids (there were no classes) required to style the shopping cart. I’ve included some screenshots showing how to use Firebug to select an element on the page and inspect it. Click on one of them to enlarge. Note the DOM tree visible in the second screenshot. The arrow in the second image points to the id of the element.

Using a combination of Firebug and guesswork, I gathered selectors necessary for my attempted restyling of the E-Junkie shopping cart. I’ve included the selectors and some basic CSS at the end of this. As anything I say about the basic CSS won’t be applicable to your site, I won’t cover that here.


Drastic Measures

Update: After reading Gerard’s comment below, I did some research into the possibility of translating the E-Junkie cart (). During this research I discovered that E-Junkie allows one to override the header image with JavaScript. I’m sticking with my method as I’d rather solve these particular issues with CSS.

I was able to achieve most of what I wanted with “normal” CSS, but replacing the default E-Junkie header image and close link required something special. Specifically, the “content before” trick.

CSS Tricks has an excellent description of this trick: CSS Tricks content before. For the E-Junkie cart header, I used this technique to insert some text and an image in place of the default header. The CSS snippet below hides the existing header image:

1
2
3
#EJEJC_window #tdHeader img {
  display: none!important;
}

Having cleared that away, I used the following snippet to insert more appropriate content in its place. See the comments for more details:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#EJEJC_window #tdHeader:before {
  /* Ensure this pretend element is displayed */
  display: block;
  /* Insert some textual content */
  content: "Your Shopping Cart";
  /* Add two background images - one for the left cart image, and one for that beautiful logo you see */
  background-image: url("/images/cart.png"), url("/images/logo.png");
  /* Position the images */
  background-position: left center, right center;
  background-repeat: no-repeat;
  /* You'll likely want to change these - font & general layout */
  font-size: 1.4em;
  margin-left: 20px;
  padding-left: 20px;
  height: 63px;
  line-height: 63px;
}

This enabled me to remove the old header and replace it with content much more integrated with this site’s overall appearance. Click the thumbnail and gaze in wonder at the brilliance of a customized header.

Replacing the E-Junkie Cart Header

Replacing the E-Junkie Cart Header

I used a similar method to swap out the standard “close” text for a much nicer grey “×”. Again with the content before:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#EJEJC_closeWindowButton {
  visibility: hidden;
}
 
#EJEJC_closeWindowButton:before {
  content: "×";
  color: #CCCCCC;
  cursor: pointer;
  font-family: verdana;
  font-size: 15px;
  font-weight: bold;
  line-height: 14px;
  margin: 0 3px;
  text-transform: uppercase;
  vertical-align: top;
  visibility: visible;
  float: right;
  display: block;
}

Success!


CSS Selectors

Finally, I’ve included the commented CSS selectors that I used to restyle my cart – if you need to style more or different elements, use the techniques above to find a method to select them. If you can’t then JavaScript might be the answer. I will cover this in the next section.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* E-Junkie overrides */
#EJEJC_window { 
  /* Change the border, maybe add some rounded corners here */
}
 
#EJEJC_window * {
  /* Use this one to reset the font for all E-Junkie elements */
}
 
#EJEJC_window table {
  /* Force removal of those nasty gaps between table cells */
  border-collapse: collapse;
}
 
/* Something drastic for the standard E-Junkie cart header */
#EJEJC_window #tdHeader img {
  /* First, hide the original image */
  display: none!important;
}
 
#EJEJC_window #tdHeader:before {
  /* Add some text & styling in place of the standard header */
  content: "Your Shopping Cart";
  font-size: 1.4em;
  margin-left: 20px;
  padding-left: 20px;
  visibility: visible;
  height: 63px;
  line-height: 63px;
  padding-left: 20px;
  display: block;
}
 
/* More hacking to alter the close link */
#EJEJC_closeWindowButton {
  /* Hide the standard header image */
  visibility: hidden;
}
 
#EJEJC_closeWindowButton:before {
  /* Use the good old content:before trick to pretend-up a better close button; */
  content: "×";
  color: #CCCCCC;
  cursor: pointer;
  font-family: verdana;
  font-size: 15px;
  font-weight: bold;
  line-height: 14px;
  margin: 0 3px;
  text-transform: uppercase;
  vertical-align: top;
  visibility: visible;
  float: right;
  display: block;
}
 
#EJEJC_window input[type="button"], #EJEJC_window input[type="submit"] { }
 
#EJEJC_window table tr td { }
 
#btnUpdtCart { }
 
#btnUpdtCart, #btnContShop { }
 
#ejejctable, #tdPmnt b { }
 
#tdPmnt b { }
 
#dscnt_cd, #discount2 { }

Share Your Customizations

Do you use E-Junkie for your online store? Have you customized it? Let us know in the comments below!

Comments (9) | Trackback

Float:Right Nuke for IE6

Lately I’ve been spending a lot of time debugging browser issues in our site ( ECPod – Blog to a Wider Audience ). I’m not going to kid with you here: it isn’t fun. On the scale of hate, 10 being most hated, my browser table would be something like this:

IE 8 – 4 ( It’s actually not too bad, even has so-so dev tools )
IE 7 – 6 ( Bad but not godawful )
IE 6 – One million

IE 6 is so bad it’s not funny. OK so it is funny, just not when you’re the one tasked with forcing it to render a site in a way that doesn’t make me want to vomit correctly.

The point of this particular rant against IE 6 is float:right and stepdown.

WTF is that, you ask? It’s when, instead of floating an element to the horizontal right of it’s siblings, IE 6 will float it right then push it down so that its topmost edge is flush with the bottommost edge of its tallest sibling. Fail!

Below is what I like to call the float:right nuke. Like a nuke, you should only use it in two situations:

  1. you don’t have the time or patience to work out a better solution for your particular issue
  2. nothing else has worked.

Behold, the IE 6 float:right nuke:

#parentElement{
	position:relative; /* prevent #offendingElement from shooting to the top-right */
}
#offendingElement{
	float:none; /* override any non-ie specific css */
	position:absolute;
	right:0px;
	top:0px;
}

Use with caution, and don’t forget your radiation pills.

No comments | Trackback

Vertically Centered Elements

If you’re looking for a way to vertically center an element of unknown height within another element of unknown height, this guide is for you.

Vertical Centering in CSS

It provides a solution that works in all major browsers – yes even IE6.

I’ve used it, it works.

No comments | Trackback