Hide the Author Link In Journal Entries

Example: Prevent the default author link from appearing in journal entries. 

Note: Replace the LOGIN-NAME portion for the author specific code below with the login name of the member whose author link you want to hide from display.  

/* Hide A Specific Author Link */ 

.authored-by-LOGIN-NAME .posted-by { display: none; }

/* Hide All Author Links */

.posted-by { display: none; }

Remove the Site Title Link

Example: Remove the link from your site title text. 

Note: This script removes the 'a href' link from the h1 site title; the text itself will appear but without being linked.

In Extra Header Code Injection put: 

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"> </script>

<script type="text/javascript">

$(document).ready(function() {

$('#siteTitle a').removeAttr("onclick");

})</script>

 In Custom CSS put: 

#siteTitle a { cursor: text; }

Style Text In Form Pages and Widgets

Example: Style text in form pages or widgets to your preference. 

Note: The following CSS will style text in all form pages or widgets throughout your site. To target specific pages or widgets you will need to predicate your code with the module page or section content ID number. To learn more about setting specific rules and targeting or modifying selectors, refer to the CSS Guide.  

/* Customize Form Field Title Text */

.form-body .fieldTitle {

    color: #000000;

    font-size: 20px;

    padding: 10px 0;

}

/* Customize Form Data Text */

.form-body .text {

    color: #666666;

    font-size: 14px;

    padding: 5px 0;

}

/* Customize Form Help Text */

.form-body .fieldHelp {

    color: #333333;

    font-family: Georgia,'Times New Roman',serif;

    font-size: 10px;

    font-style: italic;

}

Style Podcast Enclosure Links

Example: Customize and style the podcast enclosure element in journal entries to your preference. 

Note: the below examples demonstrate ways to style both the podcast enclosure area and podcast link element in journal entries using Custom CSS. You can add, edit or omit CSS style attributes to your preference.  

/* Style the enclosure wrapper and font face */

.enclosureWrapper {

    background: #fff;

    padding: 20px;

    border: 2px dotted #ff0000;

    font-family: 'Coda','sans-serif';

    font-size: 22px;

}

/* Style the podcast link and link hover colors */

.journal-entry .enclosureWrapper a:link {

    color: #666666;

}

.journal-entry .enclosureWrapper a:hover {

    color: #333333;

}

Customize Search Fields and Text

Example: Customize the Search field size and text style for search pages and widgets.  

/* To Customize Search Pages */

.search-form .queryField {

    height: 2.0em !important;

    color: #ff0000 !important;

    font-weight: bold;

}

/* To Customize Sidebar Search Widgets */

.search-form-pt .queryField {

    height: 2.0em !important;

    color: #0000ff !important;

    font-weight: bold;

}

Hide or Display Counts In Journal Archive Widgets

Example: Hide or display count numbers in journal index (journal archive) widgets. 

/* Hide Counts In Journal Archives Lists */

.section ul.archive-item-list-pt li .entry-count {

display: none; }

/* Display Counts in Journal Archives Lists */ 

.section ul.archive-item-list-pt li .entry-count {

display: block;

float: right; }

Hide the "Entries In" Journal Filter Overview Text

Example: Hide the "Entries In" system text that displays in category and tag overview pages within your journals. 

In Custom CSS put either of the following: 

/* To hide this on all journal overview pages */

.journal-filter-header {display: none;}

 /* To hide this on only specific journal pages */

#modulePage1234567 .journal-filter-header {display: none;}

Hide Reader Comments Dialog

Example: Prevent "Reader Comments" and post comment fields from displaying after commenting options have been disabled in journal modules. 

In Custom CSS put:

.journal-comment-area-wrapper, .journal-add-comment-area-wrapper { display: none;}

Replace Comment Field Titles In Journal Entries

Example: Replace comment field title text in journal entries with text of your own preference.

Note: This script allows you to replace the default title text for the 'Author', 'Author Email', 'Author URL', and 'Post' field titles in journal comments to text of your own choice. 

In Header Code Injection put: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script type="text/javascript">

$(function(){

$("#authorName_title").html("AUTHOR Text");

$("#authorEmail_title").html("AUTHOR EMAIL Text");

$("#authorUrl_title").html("AUTHOR URL Text");

$("#body_title").html("POST Text");

});

</script> 

Hide Content Tags In Search Results

Example: Prevent tags such as the content author, content date or content type from displaying in the search results returned within your site.

/* To Hide ALL Content Tags */

.search-result .search-result-tag { display: none; }

/* To Hide the Content TYPE Tag Only */

.search-result .search-result-type { display: none; }

/* To Hide the Content AUTHOR Tag Only */

.search-result .search-result-author { display: none; }

/* To Hide the Content DATE Tag Only */

.search-result .search-result-date { display: none; }

Create A Custom Border

Example: You want to add a custom border (horizontal rule) to separate content in your site. 

In Custom CSS put: 

.myBorder { border-bottom: 1px solid #666; padding-bottom: 10px; margin-bottom: 10px;}

In HTML put: 

<div class="myBorder">Your Content Here</div>

Display Bullets In Sidebar Sections

Example: Display bullets in unordered lists within sidebar sections.

Note: You can specify circle, disc or square bullets in the code below and adjust or omit margins to your preference. 

In Custom CSS put:

.section ul li {
list-style-type: square;
list-style-position: inside;
margin: 10px 0px;
}

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>

Change the Slideshow Background Color

Example: Change the default gray background color in Squarespace slideshows to the color of your choice.

/* To use a specific color */

.squarespace-slideshow { background-color: #ffffff !important; }

/* To set as transparent */

.squarespace-slideshow { background-color: transparent !important; }

Disable Right Click

Example: Disable "right click" to visitors of your site.  

In  Header Code Injection put: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery

/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">

$(function () {

$(this).bind("contextmenu", function (e) {

 e.preventDefault();

});

});

</script>

Adding Custom Google Fonts

Example: Apply a Google font of your choice to specific elements in your site.

Note: All fonts where you want to apply this modification must first be set to 'inherited' in the style editor. You'll also need the CSS selector name in order to modify that using Custom CSS. The site title selector element is used in this example to demonstrate.

To apply your custom font, replace the font name text in the code example below with the actual name of the Google Font that you've chosen. 

In Extra Header Code Injection put:

<link href="http://fonts.googleapis.com/css?family=FONT NAME" rel="stylesheet" type="text/css" />

In Custom CSS put:

#siteTitle a { font-family: 'FONT NAME' ;}

Disable the Picture Gallery Lightbox

Example: Disable the picture gallery lightbox.

Note: To apply this modification, your Picture Gallery must be configured to display text or image navigation as the Full Image Display Format. Do not apply this modification if you're using the "Show large images using a Lightbox animation" display option.  

In Header Code Injection put:

<script style="text/javascript">
SSLightbox.showFullImage = function() { }
</script> 

In Custom CSS put:

.picture-full { cursor: default !important; }

Set Specific Widths On Gallery Thumbnail Columns

Example: You want to specify the widths between thumbnail images in picture galleries.

Note: Your picture gallery must be configured as a single or multiple image gallery that displays thumbnail images. This modification will not work if you've set the gallery to "auto display" the first full image or are using text or image navigation.

In Custom CSS:

/* You can adjust the margin settings to your preference */

.thumbnail-container-tiled  {
margin-top: 20px;
margin-bottom: 30px;
margin-left: 30px;
}

Add A Background Color To Sidebar Columns

Example: You want the sidebars in your site to appear with one continuous background color.

In Custom CSS:

/* You may need to add/edit or adjust margins and padding to your preference. */

#sidebar1Wrapper {background: #333333; padding: 0px 10px; margin: 0px;}

#sidebar2Wrapper {background: #666666; padding: 0px 10px; margin: 0px;}

Set Line Height Space On List Elements

Example: Set the line height spacing on ordered or unordered lists to your preference.

Note: You can change the below em measure to use pixels — and increase or decrease the line height to your preference.

/ * For unordered lists (bullets) */

ul li{

line-height:1.0em;

}

/ * For ordered lists (numerical) */

ol li{

line-height:1.0em;

}