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; }

Hide System Generated Page Titles

Example: Hide system generated page titles on pages like Gallery, Map, and Amazon.

.document-title { display: none; }

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; }

Put Sidebar Widgets Into Your Site Footer

Example: Move widgets added to Sidebar 2 into your site footer area.

Note: This script moves widgets within your second sidebar (sidebar 2) into your site footer so that they can appear below the page content.

Required Layout Settings:

1. Banner & Navigation: Choose a three-column layout preset.
2. Change Widths: Set the Sidebar2 width to 0.

In Extra Header Code Injection put:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
  google.load("jquery", "1");
  google.setOnLoadCallback(function() {
  $('#pageFooterWrapper').append($('#sidebar2Wrapper'));
  });
</script>

In Custom CSS put:

#pageFooter {  display: none; }
#sidebar2Wrapper { width: $CanvasWidth$; }

Hide Elements Within Your Site

Example: Hide the default icons in journal entries.

.journal-entry-tag .inline-icon { display: none; }

Hide Journal Entry Navigation

Example: Hide the journal entry navigation element within your blog.

.journal-entry-navigation { display: none; }

Auto Scale Image Widths

Example: Set a width of 500px for all journal images.

.journal-entry-text .body img { width: 500px; height:auto; }

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; }

Position Sidebar Sections

Example: Move a section containing a search widget to a new location within your site.

#sidebar1 { overflow: visible; }/* -- allows sections to move outside of sidebar 1 -- */

#sectionContent1234567 { position: relative; top: -200px; left: -100px; }

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;}

Customize Top Navigation Link Colors In Dropdown Folders

Example: Change the link color for folder dropdowns in top navigation.

Note: this customization applies to links in horizontal (top) navigational folder dropdowns only.

.horizontalNavigationBar .folder li a {

color: #ff0000;

}

Highlight Search Term Results

Example: Customize the appearance of search term results within your site.

/* Change search term text color. */

.hit-word-body { color:#cccccc; }

/* Change search term text background color. */

.hit-word-body { background-color:#cccccc; }

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); }

Add A Fixed Background Image

Example: Add a "fixed" background image to your site that doesn't scroll with the page.

Note: Use of this code assumes that a "background image" has already been added to the "Window Body" element within the Style Edit Mode > Fonts Colors and Sizes menu.

body { background-attachment: fixed; }

Style Excerpt Links As Buttons

Style the "click to read more" excerpt link to display as a button.

.journal-read-more-tag { float: right; border: 2px solid #ffffff; border-radius: 7px; -moz-border-radius:7px; -webkit-border-radius:7px; padding: 2px 6px; background-color: #333333;}

Hide Off-Site Link Icons

Example: Hide the off-site icon next to links that open in a new browser.

.offsite-link { background:none; }

Hide User Input Fields In Post Comments

Example: Hide the author e-mail and url fields within journal post comment forms.

#authorEmail_title, #authorEmail, #authorUrl_title, #authorUrl { display:none; }

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;}

Hide Journal Excerpt Links

Example: Hide journal excerpt links within entries.

.journal-read-more-tag {display:none;}