EW Resource

Expression Web V4 Add-Ins

I have the following free add-ins downloadable below (and also available on the MSDN Archive, having been moved from the Expression Gallery).

See the free V4 Snippet collections too.

If this is the first time you've installed an add-in in Expression Web V4, this page will help you get started.

 

Show Hide

This add-in lets you show and hide blocks of text with 'More' and 'Less' links. A typical example would in a FAQ page where you show a brief description with a link to show more detailed information. Like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae risus cursus dui pulvinar rhoncus at et velit. Cras nulla velit, pellentesque ut ultricies eget, sodales eget arcu. Morbi sed nunc quis urna condimentum imperdiet. Ut nec justo sed ligula interdum egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam non est vel odio hendrerit dignissim at quis dui. Fusce laoreet erat non urna lacinia porta. Maecenas ac metus lacus, nec convallis ligula. Cras in eros in felis rutrum varius vel eu dolor. Nunc lorem erat, adipiscing non aliquam elementum, accumsan sed mi. Mauris urna eros, suscipit sit amet tristique rhoncus, venenatis a nunc. Cras eget nunc quam, a mattis libero. Etiam sit amet auctor dolor. Vivamus pretium iaculis justo vitae faucibus. Nulla orci nisi, accumsan sed semper ac, bibendum id erat.

It adds an icon to the Standard Toolbar and an entry in the Help menu.

Show / Hide

Three files are added to your site: jQuery 1.7.min, xpand.js, which controls the show/hide action (and can be modified to alter the effects if you are familiar with or want to experiment with jQuery) and xpand.css, which defines styles for the initially hidden text and the 'more' and 'less' links. These styles can be changed to suit your own needs.

Note that if you want the 'More' link to display as shown above, rather than on a new line, the <div> holding the 'More' link AND the preceding paragraph should both be styled to display 'inline'.

Download the ShowHide add-in  Total downloads: 1755

HTML5 Placeholder Add-In

HTML5 adds the 'placeholder' attribute to <input> tags, allowing you to display a watermark prompt. This can be useful for form input in small spaces, where you can still have labels for accessibility hidden outside the viewport. Most HTML5 browsers support this but if the page is viewed in an older browser, the watermark is lost.

This simple add-in adds the 'placeholder' attribute to input tags but importantly uses a JQuery 'shim' to enable browsers that don't support it to show the placeholder. Forms do not submit the placeholder data and browsers that do support 'placeholder' don't use the 'shim'.

HTML5 Placeholder add-in

Download the HTML5 Placeholder Add-In  (Now updated for SP2 and earlier) Total downloads: 2426

WinPop Add-In

WinPop add-in dialog

The WinPop add-in creates accessible pop-up windows. By accessible I mean that they can be read by screen readers and that they still work (in full browser size) when the user has JavaScript support turned off.

It has the normal options for pop-up windows and allows them to be created from text, existing links or images.

Download the WinPop Add-In Total downloads: 2308

WordPaste Add-In

Word Paste Add-In

[Note: V1.6 released June 2011. This resolves the issues raised by users to date and makes some chnages needed for EW V4 SP2. If you are using another version please upgrade to this new one. Uninstall the old one first via 'Tools - Add-Ins'].

A question that's often asked is "how do I paste text into Expression Web from a MS Word™ document, without bring all the proprietary html tags with it?"

The simplest way is to paste the text into NotePad first and then into EW, but this doesn't bring over any html, just plain text. The 'Paste Text' option in EW isn't much better.

This add-in pastes the text and the outline HTML, giving a very much better result. (Note that it won't paste images from a document).

It's been tested with MS Word™ 2003, 2007, 2010 and 2013.

Comment from one user:

"Just thought I’d pass on a word of thanks once again for your little Word insert utility for EW. We use it so much here that it’s in danger of being worn out! We don’t know where we’d be without it."

Notes:

One thing that I've noticed is that Word doesn't always use <ul> or <ol> for lists, and sometimes uses a combination of symbol fonts and padding to achieve the same effect. At present the add-in does not handle this and you may need to add lists manually after copying.

Feedback:

Although I've tested it with a variety of document types I'm sure there will be things you'll find it won't handle, so please use the feedback link in the add-in to report these.

TIP: When you've pasted the Word content, use 'Reformat HTML' from the right-click menu in EW to tidy the html layout up.

Download the WordPaste Add-In from the MSDN Gallery (Now updated for SP2, and earlier)

AddFeed Add-In

Important: Because of changes to the Twitter API, which now requires authentication for all requests, the Twitter Feed part of this add-in no longer works.  I hope to release a revised version soon. March 2013


Do you want to display a Twitter or RSS feed on your site? This V4 add-in lets you do that, with configurable display options.

The new entry on the Insert Menu launches a dialog to select the type of feed you want,

AddFeed

And then further dialogs allowing you to set the options.

TwitterFeed   RSS Feed

It enables you to preview the feed before applying it to the page, so that the effect of displaying the various options can be seen.

This is a beta version with the limitation that it will only add one feed per page, and one feed style per site, although both of these can be overcome with a few manual changes to the web page.

Note: This add-in effectively supersedes the previous TwitterFeed.

Download the AddFeed Add-In (now updated for SP2, and earlier)  Total downloads: 3848

'Close All' Add-In

This simple add-in allows you to close all open pages in EW with one click. It puts the following icon on both the Standard and Common toolbars

'Close All' add-in

As you'd expect, it gives the normal dialog asking whether you want to save any pages that have unsaved changes.

Download the Close-All Add-In Total downloads: 2075

Copyright Notice Add-In

Most web sites need a copyright notice. If the site is ASP.Net or PHP based, you can create this notice server-side and have the date automatically updated, but if it's an HTML site you may just have a static notice that needs updating every year. And how many sites do you see with an out-of-date notice? Lots of them!

This add-in creates a JavaScript based copyright notice that always updates to the current year and also creates a static notice, without the year, for the very small percentage of users that don't have JavaScript enabled.

A new entry is created in the "Insert" menu to use the add-in.

Revised Insert Menu

Clicking the entry brings up the following dialog:

Copyright Add-In for Expression Web V4

Be aware that the copyright text will not show in EW's design view, only in a browser, because it's generated by JavaScript.

The <div> that is created has an ID of "ewCopy" which can be used to style the Copyright Notice; perhaps to give it a small font size, or different colour.

Download the Copyright Notice Add-In from the MSDN Gallery

 

Sub / Sup Text Add-In

If you frequently need to add <sub> or <sup> tags to your page content, you may miss the ability to do that from a toolbar in Expression Web V4 (or V3). The add-in restores this functionality by putting two new buttons on the "Standard" toolbar. You may need to use "View - Toolbars" to enable this toolbar if you don't already use it.

Sub text icon on toolbar

Select text in either Design, Split or Code view and click the icon to create the <sub> or <sup> text. Select the same text and click again to return the text to normal case.

The selection of text needs to be accurate and undoing the action may fail if the selection is not exactly on the relevant text.

Download the Sup/Sup Text Add-in Total downloads: 1711

Add-In Model

EW V4 has an add-in model which allows developers and users to build add-ins using XML, HTML and JavaScript. This is a powerful feature which will enable a rich variety of add-ins to be created.

For a semi-tutorial showing how a 'Bing Map' add-in was created see this post on the Expression Web Team Blog

The documentation for the Add-In Model is available on line at Expression Web SDK

There's also an 'Add-In Builder' add-in and a blog post showing how to use it.

If you need to use managed code for your add-in, this blog post will get you started.

Commercial Add-Ins

Ajatix have two CSS Menu add-ins, one for pure css menus and the second for JavaScript enhanced menus. They also have add-ins that creates a Lightbox Gallery and an Image/Banner Rotator. (These work in FP2003 and all versions of Expression Web).