EverWeb Codebox

Introduction to EverWeb Codebox

HTML Snippet


EverWeb is a very intuitive application for designing websites in the tradition of Apple's now defunct iWeb.

One major difference is that EverWeb uses true code injection which makes it possible to create just about any web site feature that you can think of.

This website is NOT about how to use EverWeb. The application's tutorials and videos cover all that stuff.

EverWeb Codebox is for the more advanced user, and ambitious beginner, who wants to take advantage of the powerful features available through using the code entry boxes and the HTML Snippet.

Code can be injected into three places in the HTML document for any page of the site.

1. The document head just before the closing head tag </head> via the Head Code box

2. The <body> via an HTML Snippet

3. Just before the closing body tag - </body> - using the Footer Code box

Before you attempt to inject code, make sure you read through the CODE section of this site to gain an understanding of the various types of code and what goes where.


The HTML Snippet can be found by clicking the "Widgets" tab in the right column of the application window as shown to the right.

Drag this onto the design canvas area. A box will appear on the design canvas where the Widget will be created and the Widget Inspector panel will open with a box for pasting the code into.

After pasting in the code and clicking the "Apply" button, the object should appear on the design canvas and it's boundaries can be adjusted using the drag handles or, more precisely, the Metrics inspector.

The HTML Snippet can contain inline CSS and javascript as well as HTML if necessary.

Note: Some objects - particularly those which use javascript - may only appear when using the "Preview" button and some may not work until the site is published to the server.

Note to ex-iWeb users...

The iWeb HTML Snippet does NOT use code injection. It is really important that you do not copy over the contents of iWeb Snippets to the EverWeb version without knowing what you are doing!

Rather than injecting code into the page HTML doc, the iWeb snippet actually creates a separate HTML doc. This means that an iWeb Snippet code can include the doctype declaration, head code and internal CSS which you must NOT insert into the body of the HTML doc in EverWeb. Doing so can invalidate your code, create problems in the browser and make you look very foolish in the eyes of those of us who know about this kind of stuff!

The Widget

widget panel

The figure to the left shows the Widgets inspector panel along with the HTML code box with some HTML code in it and the "Apply" button

widget panel

This particular code is for an <h2> heading and the result can be seen to the right.

The widget can be resized by dragging the handles or, more precisely, by using the height and width settings in the Metrics inspector. Check the box next to "Constrain Proportions" if you need to maintain the original aspect ratio as the box is dragged around and/or resized.

Since an element like a heading is used on every page of the site, the associated styles would normally be set in the site wide Head Code Box.

Custom styles can also be set by using an inline style in the HTML Snippet. More about this on the CSS page in the Code section of this website.

Head/Footer Code

Code is inserted into the head or the footer using the code boxes in the Site Publishing Settings page or the Page inspector.

Site Wide Code

Code that is required on every page of the site should be pasted into the site wide code boxes in the the Site Publishing Settings page. This would include...

    Meta data such as a link to a favicon

    Styles relating to items that appear on every page such as navigation menu, header and footer content and headings

    Links to external stylesheets

    Links to external javascript such as jQuery

    Analytics code such as Google Analytics

widget panel

Page Specific Code

widget panel

Code relating to items that appear on only one or two pages should go into the page code boxes. These would include...

    Link to an external stylesheet required for an item like a slideshow

    Link to a javascript for the above

    Styles for HTML elements peculiar to that page

    Setup javascript for an item only on that page

The page Head Code and Footer Code boxes are shown to the right along with some typical content.

Note that styles pasted into the Head Code box need to be contained in style tags like this...

<style type="text/css"></style>

Styles can included in an HTML snippet. In this case they need to use an inline style. Here's an example for a paragraph...

<p> style="font:15px 'verdana', helvetica, sans-serif;color:#eee">Paragraph Text</p>

Javascript can be inserted into the Head Code, the Footer Code or an HTML Snippet depending on the situation. The script needs to be contained in tags like this...

<style type="text/javascipt"></style>

The pages about HTML, CSS, Javascript and Code Injection are essential reading. They are a simple overview of what you need to know to become a successful Code Injector. Find them in the Code section.


Website by Roddy McKay