Hide the Link Group Title In Links Page

Example: Hide the link group title from the Links page module so it doesn't display.

#linkGroup123456 .title {display:none;}
#linkGroup123456 li .title {display:block;}

Change the Style of Bullets Within Lists

Example: Change the style of bullets within lists from disc to square.

Note: other possible list style types you can use: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none.

.link-group-list li ul li { list-style-type: square; }

Create Image Borders

Example: Put borders around images using colors and styles of your choice.

Note: You can use dotted, dashed or solid borders and change pixel size and border color to your preference. 

/*Put a border around every image in your site including sidebar images. */

img {border: 5px solid #cccccc;}

/*Put a border around images within the page body content only */

.body img {border: 5px solid #333333;}

/* Put a border around images only on specific pages */

#modulePage1234567 .body img {border: 5px solid #666666;} 

Style Image Captions On Pages and Journal Posts

Example: Change the font style of captions for images inserted into pages and journal posts. 

.thumbnail-caption {
font-family: Georgia,'Times New Roman',serif;
font-size: 10px;
text-align: center;
color: #000000;
background: #cccccc;
padding: 5px 0;
}

Style Unregistered Comments

Example: Add a generic icon to unregistered comments.

/* UNREGISTERED COMMENTER */

.comment-wrapper.authored-by-none { background: url(/storage/icon-unreg50.png) no-repeat 0 8px; padding: 0 0 0 75px; }

Style Comments By Author

Example: Place an image of Tyler next to his Journal comments.

/* TYLER */

.comment-wrapper.authored-by-tyler { background: url(/storage/layout/icon-tyler50.png) no-repeat 0 8px; padding: 0 0 0 75px; }

Add Drop Shadows to Text

Example: Add drop shadows to text — for example, journal entry titles.

Values: x-coordinate of shadow, y-coordinate of shadow, blur radius of shadow, shadow color (#hex)

Note: This modification uses CSS3 and is supported only in Firefox, Safari and Chrome browsers. You will not see CSS3 based modifications in Internet Explorer.

h2.title a:link {
text-shadow:1px 1px 3px #DDDDDD;
}

Add Drop Shadows To Box Elements

Example: Add a drop shadow to columns — for example, the content area of your site.

Values: x-coordinate of shadow, y-coordinate of shadow, blur radius of shadow, shadow color (#hex)

Note: This modification uses CSS3 and is supported only in Firefox, Safari and Chrome browsers. You will not see CSS3 based modifications in Internet Explorer.

#content {
box-shadow: 0px 0px 10px #ccc;
-moz-box-shadow: 0px 0px 10px #ccc;
-webkit-box-shadow: 0px 0px 10px #ccc;
}

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>

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