Hide Elements Within Your Site

Example: Hide the default icons in journal entries.

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

Add Inline Styles

Example: Create space around a specific image on page.

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

Hide Journal Entry Navigation

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

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

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>

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;

}

Add Images To Your Site Footer

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

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

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

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>

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

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