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>

Customize Thumbnail Spacing For A Single Gallery

Example: Customize the space between picture gallery thumbnails for single gallery display formats.

#modulePage1234567 .thumbnail {

margin-top: 20px;

margin-right: 20px;

}

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>

Create A Full Height Window Body Border

Example: Stretch the window body border to the full height of the page. 

Note: This modification stretches the window body border you set within the fonts, colors and styles editor to full page height.

body { height: auto; }

Center the Window Body Background Image

Example: Set the window body background image so that it centers in the browser window.

Note: When using this modification do not include the background image within the window body border element of the fonts, colors and styles editor.

body {
background-image: url(/storage/YOUR_IMAGE.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
}

Create A Full Width Layout

Example: You want the width of your pages to span the width of the browser.

Note: Some elements for example: #pageHeaderWrapper, #pageBodyWrapper and #pageFooterWrapper — do not exist by default within the native style editor. These elements can still be customized either by adding them to the editor manually within advanced settings, or by writing Custom CSS to style them. Both of these methods are overviewed in the CSS guide here.

#canvasWrapper, #canvas, #pageHeaderWrapper, #pageBodyWrapper, #pageFooterWrapper {
    width:100%;
    min-width:$CanvasWidth$;
    margin:0;
    padding:0;
    overflow:visible;
}

#pageBodyWrapper { float:left; }

#pageHeader, #pageBody, #pageFooter {
    width:$CanvasWidth$;
    margin:0 auto;
}

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.  */

Position A Sidebar Column

Example: Move an entire sidebar column farther down the page.

#sidebar1Wrapper {margin-top: 50px;}

/* Use #sidebar1Wrapper, #sidebar2Wrapper or both. To move a column farther up a page instead, use a negative pixel amount in your code */

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>

Remove Background Images In Flont Tempate

Example: Remove the white corner background images above page content and sidebar sections within Flont template.

Delete the following 2 lines of code from your Custom CSS area:

#contentWrapper { background: transparent url(/layout/images/cornerR.png) no-repeat right top; padding-top: 30px; }

.verticalNavigationBar .sectionWrapper { background: transparent url(/layout/images/cornerL.png) no-repeat top left; padding-top: 30px; }

Remove the Link "My Response Is On My Own Website" From Journal Entries

Example: Prevent the link "my response is on my own website" from displaying in journal entries.

#modulePage1234567 .caption-text a {
display:none;
}