How to increase the size of the shopping cart icon in WooCommerce

I found the default size of the WooCommerce shopping cart icon (in the Storefront theme) was a bit on the small size.

The icon is textual and comes from Font Awesome. Normally, this would be an easy change by adding fa-2x or something similar to the style declaration. Inspecting the CSS in Chrome didn’t offer me such an option (I’m new to Font Awesome) so I added this CSS to the custom CSS in my Storefront child theme:

/* Increase size of shopping cart icon */
    .site-header-cart .cart-contents:after
    {
        font-size: 1.25em !important;
    }

The 1.25em increased the size of the cart icon to better reflect the size of the menu text and stand out better.

CSS background-position not applied

Had a weird issue with a CSS sprite this morning where both IE8 and Firefox ignoring the background-position style. After stripping the component back to bare bones, the style started working as expected; I was momentarily stumped until a co-worker spotted the fact I didn't have any units specified for the x and y coordinates. Adding px to each coordinate resolved the issue.

.addLeg
{
    background-image: url(Buttons.png);
    background-position: -10px -70px;
    width: 143px;
    height: 30px;
}

Doh! That's what I get for copying code from the internet! Maybe something to do with the nesting or inherited styles? Who knows…

In related news, I also noticed the IE Dev Toolbar in IE8 is inclined to display additional styles seemingly appended to the background-image style. This is a minor annoyance in terms of being able to manipulate the appended style but it seems to be a bug with the toolbar, not IE as the styles are applied correctly.

How to Clear Your Browser Cache 101

If you're a web developer you should really know how to do this by now; if not, I'll let you off the hook...

Quick and easy--always try this first: CTRL-F5 (note, I didn't say SHIFT-F5 and I didn't say F5 all by all itself). If this doesn't work, proceed.

Internet Explorer 7 & 8

1. Tools -> Internet Options
   
2. General tab, Browsing history section, Delete... button
   
3. Temporary Internet Files button or Delete all... button
   

While you're in here, you may also want to consider changing your browser's caching behaviour. To do so, progress to step 2, above, but instead of clicking the Delete... button, click the Settings button. Change the 'Check for newer versions of stored pages' to 'Every time I visit the web page'. Note this may affect the time it takes to load web pages initially.

Clearing your cache this way clears content for all sites you've visited, which can be a hassle if you're only having problems with a site in development or a single site and you use this browser for day-to-day browsing. If you want a more refined, more accessible mechanism for clearing your browser cache, install the free IE Developer Toolbar. Last I heard, the next version will be built in to IE8 but, meanwhile, it Firebug's poor, uneducated, inbred third cousin for IE6/7 and it generally does the trick. High, high hopes for the IE8 version...

To clear your cache using the IE Developer Toolbar, follow these steps:

1. Install the toolbar and make it visible using the little arrow icon
2. Browse to the site you're struggling with
3. From the toolbar menu, select Cache -> Clear Browser Cache for This Domain... and say yes

You can also toggle the Always Refresh from Server option from this menu and clear session cookies for the current domain.

Firefox

1. Tools -> Options
2. Network tab, cache section, Clear Now button

Alternatively, install the free Firefox Web Developer Toolbar and follow these steps:

1. Make sure the toolbar is displayed (View -> Toolbars -> Web Developer Toolbar)
2. Click the Miscellaneous button
3. Clear Private Data -> Cache

Or, after completing step 2, select Clear Private Data -> All Private Data and include cookies and authenticated sessions (session cookies).

[Update: don't forget to also clear your Flash local storage cache.]

---

Custom-Built Microsoft Office SharePoint Server 2007 Branded Sites and Webpart Development - info@mediawole.com

 

Stacking Windowed Elements and Flash Movies with z-index and wmode in IE

There exists a common misconception z-index will solve all of your DHTML stacking problems. While this is true for DHTML elements, the assumption falls down in the face of Internet Explorer and the way this browser treats "windowed" components like drop down lists based on the select tag. Flash objects aren't immune but for different reasons. Firefox will honour stacking orders for all elements but this is not the case when you're dealing with IE6/7. Windowed elements maintain a different stacking order than DHTML elements (they're added to a different plane than your windows elements) and therein lies the problem.

IE7 is better than IE6 when it comes to the select element but Flash requires some additional finessing, which I'll detail below. If you're still supporting IE6, consider using an IFrame (perhaps dynamically positioned) between your windowed component and your DHTML object to mask the underlying windowed component. The concept is generally referred to as an "IFrame shim". Don't forget, IFrames can be configured with a transparent background; either way, simply point the IFrame URL at nothing. The IFrame is no longer a windowed element as of IE5.5; although some people don't like IFrames for security and because they're frames, in this case the IFrame is your friend because it bridges the gap between windowed elements and windowless elements. The one main gotcha with this approach is how the user interacts with an IFrame: button clicks and mouse actions will be sent to the IFrame and the underlying content won't be interactive while the IFrame is visible.

Flash--being Flash and an ActiveX-wrapped plugin--is a different beast. IE places embedded content in a DHTML layer above all other layers by default and this is not always where you want your Flash content. On the westernaustralia.com home page, a fancy combination of DHTML and Flash elements known as the Tourism Australia overlay sits above the wa.com Flash banner (it's only visible to international site visitors); the DHTML-based navigation likewise has to sit above the central "experience panel" and the global site selector drop down in the right column.

To reign in your Flash objects and their stacking order you need to use an extra parameter named wmode:

<param name="wmode" value="opaque" />

By doing so the Flash object and surrounding DHTML elements will team up to honour z-index styles as you intend. It's also a good idea to add a corresponding wmode="opaque" attribute to your element tag. Opaque and transparent modes may compromise your animations and video--we haven't had any problem on our sites, however, and use both animations (the wipe) and video. 

Here are a few additional tips for dealing with Flash:

• Add Flash elements to a predefined placeholder element using JavaScript to ensure the object is activated automatically (otherwise users will have to click the Flash movie to run it and movies that should play automatically without user interaction may not start when the page loads). SWFObject will do this for you but it's really easy to write the JavaScript into your existing .js files, thereby avoiding the need to weigh down your page with yet another script library.
• Don't rely solely on the embed tag. Use the object tag for IE and nest an embed tag within it for Mozilla and everyone else.
• Always explicitly configure the wmode parameter as a child of the object tag and an attribute of the element tag.
• Avoid the wmode "transparent" setting unless your Flash movie actually has transparent sections. Use "opaque" in most cases to increase rendering performance. The default is "window".
• Consider a Flash alternative like Silverlight ;-)

Microsoft's windowless vs windowed summary:

http://support.microsoft.com/kb/177378

http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx

Adobe's semi-useful KB article about wmode:

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15523

How to create an IFrame shim:

http://www.dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx

---

Custom-Built Microsoft Office SharePoint Server 2007 Branded Sites and Webpart Development - info@mediawole.com

CSS Style Guide

For a brief but useful CSS style guide see http://www.phpied.com/css-coding-conventions/

The tip about cascading style names caught my eye in particular--it's incredible how much code I've seen that simply ignores this simple concept at the cost of breaking things.

---

Custom-Built Microsoft Office SharePoint Server 2007 Branded Sites and Webpart Development - info@mediawole.com

CSS Reset Fundamentals

I'm not much of a visual designer but this little CSS reset snippet from Karinne Legault's article on The Web Squeeze is easily added to an existing CSS file instead of referencing yet another style sheet (not that I don't trust Yahoo!). Karinne's article also discusses the construction of a full, floated HTML layout from mockup to markup to styling.

html, body { margin: 0; padding: 0; }

IE Renders Spurious '#text' Node as a Gap

I today had the misfortune of discovering IE6/7 doesn't like to display relatively "normal" HTML.

Take a look at this code and the bolded DIV in particular:

<html><body>
<style>
* { padding: 0px; margin: 0px; }
img { border-width: 0px; }
</style>
<div>
<img src="pic.gif" />
</div>
<div style="width: 285px; height: 100px; background-color: Green;">
<p>Other stuff</p>
</div>
</body></html>

This renders a lovely gap between the image in the top DIV and the bottom DIV:

Inspecting the DOM using the IE Developer Toolbar reveals IE is interpreting and rendering a spurious text node from the markup:

As you might expect, Firefox has no issues with this and renders the two DIVs one on top of the other with no gap between.

Despite average CSS skills, I was unable to style this into submission without completely mangling the existing code and CSS (simply adjusting the DIV's height had no effect); instead I managed to get around this by simply removing all whitespace between the opening and closing DIV tags:

<div><img src="pic.gif" /></div>

Since the image in this example is essentially functioning as background image for the DIV, I could have alternatively set its background-image to the URL of the image.

Basic CSS

1. Styles (classes and selectors) can be declared so they're relative to their physically enclosing block

#container .relativeClass
{
color: red;
}

<div id="container">
<span class="relativeClass">My red paragraph</span>
</div>

If relativeClass is assigned to an element that doesn't have the 'container' id, the style will have no effect.

The .reativeClass name can be safely reused/redefined within different scopes.

Elements can be specified to have a specific style within the scope of an enclosing block as well:

#divContainer p
{
color: red;
}

.classContainer p
{
color: red;
}

2. Styles (classes and selectors) can also be declared so they're relative to another class or selector

.containerClass .nestedClass
{
color: red;
}

#containerId #nestedId
{
color: green;
}

3. Classes and selectors can be constrained to apply only to a specific element

p.elementLimitClass
{
color: red;
}

p#elementLimitId
{
color: green;
}

<p class="elementLimitClass">My elemented limited class paragraph</p>

<p id="elementLimitId">My elemented limited id paragraph</p>

Centre Block CSS2

To centre a block item, set the margin-left and margin-right CSS properties to 'auto'; this sets the computed values of both margins equal. IE won't listen so set the text-align property of the containing element to center as well.

<div style="width: 500px; text-align: center;">
<div style="margin-left: auto; margin-right: auto; width: 100px;">My stuff</div>
</div>