Adjust YouTube Video Wmode

Example: Adjust YouTube embed code to prevent videos from overlaying and hiding the display of drop down folders or navigation elements in your site. 

/* For standard iFrame embed code, append the YouTube source link with ?wmode=transparent */

<iframe width="560" height="345" src="http://www.youtube.com/embed/XXXXX?wmode=transparent" frameborder="0" allowfullscreen></iframe>

/* For HD iFrame embed code, append the YouTube source link with &wmode=transparent */

<iframe width="1280" height="750" src="http://www.youtube.com/embed/XXXXX?hd=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>

/* For object embed code, add <param name="wmode" value="transparent" /> within the object tag */

<object width="560" height="315"><param name="wmode" value="transparent" /><param name="movie" value="http://www.youtube.com/v/XXXXX?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XXXXX?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Align Images In Journal Entry Excerpts

Example:  Align images to appear left or right of summary content within journal entry excerpts.

Note: You can use the word "left" or "right" in the code below to align images in excerpts to your preference.

In HTML put:

<p><span class="full-image-float-left"><span><img src="/storage/yourimage.jpg" alt="" title=""/></span></span>Your journal excerpt text here.</p>

Create Custom Borders

Example: Use a custom border to separate content or around specific blocks of content.

In HTML put:

<div class="myBorder">Your content here.</div>

In CSS put:

/* Creates a single border (top, bottom, left, right // dotted, dashed, solid) */

.myBorder { padding-bottom: 20px; border-bottom: 1px dotted #cccccc; }

/* Creates a full border */

.myBorder { padding: 20px; border: 1px dotted #cccccc; }

Add A Dynamic Hover Tool-Tip

Example: Add a custom tool-tip to text and image link hovers within your site.

Note: This script allows you to create more visually distinct tool-tips for link and image hovers within your site. You must first download the author's script (choose the production version of the file under the download section on this page). Then, upload the script file to your storage prior to implementing this code. You can style the tool-tip to your preference by editing the CSS within the Custom CSS pane of the style editor. You can see a live demonstration of this tool-tip in the Javascript Guide. 

In Extra Header Code Injection put:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script  type="text/javascript" src="/storage/jquery.tinyTips.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.tTip').tinyTips('light', 'title');
});
</script>

In HTML put:

<a class="tTip" title="Text content for your hover tool-tip here." href="#">Your link text here.</a>

In Custom CSS put:

/* Javascript Tooltip */

.lightTip { width: 230px;  margin-left: 46px; font-size: .8em; line-height: 1.4em; }
.lightTip .content { width: 210px; padding: 20px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background:#222222; color: #f6f6f6; }

Add Inline Styles

Example: Create space around a specific image on page.

<img src="/storage/yourimage.jpg" style="margin-right:20px; margin-bottom:20px;">

Add Links To Your Site Footer

Example: Add links within the footer section of your site.

<a href="http://www.yourlink.com">Link Text</a>

Create Tables

Example: Display content on your site in a grid format.

A Simple Table:

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>30</td>
</tr>
</table>

Table with inline CSS:

<table>
<tr>
<th style="padding:5px; width:100px;">First Name</th>
<th style="padding:5px; width:100px;">Last Name</th>
<th style="padding:5px; width:100px;">Age</th>
</tr>
<tr>
<td style="border:solid 1px; padding:5px; width:100px;">John</td>
<td style="border:solid 1px; padding:5px; width:100px;">Doe</td>
<td style="border:solid 1px; padding:5px; width:100px;">25</td>
</tr>
<tr>
<td style="border:solid 1px; padding:5px; width:100px;">Jane</td>
<td style="border:solid 1px; padding:5px; width:100px;">Doe</td>
<td style="border:solid 1px; padding:5px; width:100px;">30</td>
</tr>
</table>

Image Rollover (Sprite Method)

Example: Have an image appear differently (rollover) to display another image on hover.

Background: An image "sprite" is a single image that includes two images of the same dimensions for use in image rollovers. Sprites can be laid out either side by side or, stacked on top of each other. When using the sprite method you are only displaying one section of the image on active state — then when the image is hovered, it seamlessly shifts to display the second part of the image.

In the following example, our sprite image will be set up side by side with the initial image section on the right.

in HTML:

<a href="http://www.yourdomain.com" id="spriteLink"> </a>

in CSS:

#spriteLink {width:191px; height:151px; text-decoration:none; display:block; background-image:url(/storage/YourImage.jpg);  background-position:191px 0; }

#spriteLink:hover, #spriteLink:active  { background-position:0 0; }

Set Per Page Code Injection

Example: Apply custom banner content to each page within your site (override Site Banner HTML code injection).

in HTML:

<div id="homePageBanner">Home page banner content</div>

<div id="aboutPageBanner">About page banner content</div>

<div id="contactPageBanner">Contact page banner content</div>

in CSS:

#homePageBanner, #aboutPageBanner, #contactPageBanner { display: none; }

#modulePage123456 #homePageBanner { display: block; }

#modulePage123457 #aboutPageBanner { display: block; }

#modulePage123458 #contactPageBanner { display: block; }

Add Text Next To Your Banner Logo

Example: Put a block of text next to your site's logo image.

Background: This customization requires the Unlimited Plan in order to access the Site Banner HTML Override code injection point indicated. It presumes a standard sized logo image (do not use an image spanning the full width of your canvas).

In the Site Banner HTML Override code injection point:

<div id="myBanner">

<div class="bannerLogo"><a href="/"><img src="/storage/YourSitesLogo.jpg"></a></div>

<div class="bannerText">You can enter text here to place it next to your banner image.</div>

</div>

In CSS:

#myBanner { width: 100% !important; padding: 0; margin: 0;}
.bannerLogo {float:left;}
.bannerText {float:right;}

Add Images To Your Site Footer

Example: Add images within the footer section of your site.

<img src="/storage/yourimage.jpg" />

Set Image Opacity On Hover

Example: Create an image link that fades on hover.

In HTML:

<div id="imgHover"><a href="http://www.YourLinkURL.com"><img src="/storage/YourImage.jpg" /></a></div>

In CSS:

#imgHover a:hover { opacity:0.4; filter:alpha(opacity=40); }

Split Content Into Basic Columns

Example: Create simple columns within an HTML page.

<div style="float:left;">Add left column content here</div>

<div style="float:right;">Add right column content here</div>

<div class="clearer"></div>

Create Anchor Links

Example: Link content within a page.

Use <a href="#anchor"> around the content you want to link from </a>.

<a name="anchor"> Put the 'a name' tag before the content you want the '#anchor' to link to </a>. 

Style Specific Text Using CSS

Example: Change the style of a particular word or paragraph using CSS that can be used throughout your site.

In HTML:

<span class="styleText">Your Text Here.</span>

In CSS:

.styleText {color:#a23333; font-size:12px; font-weight:bold; text-decoration:underline;}

Change the Color of Specific Text

Example: Change the color of a particular word or paragraph.

<span style="color:#0000ff;">word</span>

Horizontal Text Navigation

Example: Create a second level of horizontal text navigation at the top of your page.

In CSS:

#topNav { height: 30px; text-align: right; margin: 0px -20px; }
/*Negative margin used here to position and override default style setting*/

#topNav a { border-right: 1px solid #ffffff; color: #ffffff; font-family: Arial; font-size: 10px; padding: 0 15px; text-decoration: none;  }
/*Sets font, border, padding style around link text*/

#topNav a:last-child { border-right: none; }
/*Hides last border right*/

In HTML:

Note: Uses Pre-HTML Injection Point. Code injection requires Advanced Package or higher

<div id="topNav">
<a href="yourdomain.com/page">Home</a>
<a href="yourdomain.com/page">About</a>
<a href="yourdomain.com/page">Contact</a>
</div>

Create Three Columns On A Page

Example: Create three columns within the body of a journal entry or HTML page.

Note: You can add, edit or omit style declarations to your preference. Column widths including all margins set should be sized to fit within the page body width so that they align correctly.

CSS:

#column1 {color: #000; background: #fff; width: 200px; margin: 20px; padding: 10px; border: 1px solid #ccc; float: left;}

#column2 {color: #000; background: #fff; width: 200px; margin: 20px; padding: 10px; border: 1px solid #ccc; float: left;}

#column3 {color: #000; background: #fff; width: 200px; margin: 20px; padding: 10px; border: 1px solid #ccc; float: left;}

HTML:

<div id="column1"><p>Your content here.</p></div>

<div id="column2"><p>Your content here.</p></div>

<div id="column3"><p>Your content here.</p></div>

Open Images In A Lightbox

Examples: Open images in a lightbox using thumbnail or text links.

Note: This modification uses the built-in lightbox within Squarespace. It works for image formats but not for video, inline content or other media. Replace any image paths below with the actual url path(s) of the images uploaded to your own file storage.

<a rel="sslightbox" href="/storage/lightbox_image.jpg" title="Your Title" alt="Your Title"> Your Text Here.</a>

/* Uses a text link to prompt the lightbox. */

<a href="/storage/lightbox_image.jpg" rel="sslightbox"><img src="/storage/thumbnail_image.jpg" title="Your Title" alt="Your Title"></a>

/* Uses an image thumbnail to prompt the lightbox.  */

Put A Login Link In Your Site Footer

Example: Put the universal login to your website in your site's page footer.

<a href="/display/Login">Login</a>