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;

}

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

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>

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>

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

Hide Follow Up Comments Notification Fields

Example: Hide "follow up comments via e-mail" notification fields in single journal entry posts.

In Custom CSS put:

#followOptIn, #followOptIn + span {

display:none;

}

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

Remove the New Browser Prompt On Links Pages

Example: Open links on the same page instead of prompting a new browser window in Links page modules.

Note: This script prevents the new browser prompt built into Links page modules so that your links open on the same page. You will need to replace the module page ID below with that of the page module ID for the links page within your own site. You can find this by viewing your page source. See: Targeting and Modifing Selectors.  

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() {
$('#modulePage1234567 a').removeAttr("onclick");
})
</script>

Remove the Banner Image Link

Example: Remove the link from your header banner. 

Note: This script removes the 'a href' link from your site header banner; the banner image will appear but without being linked.

/* Apply to all pages in your site. */

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">
$(function(){
$('#bannerWrapper').remove('a').append($('#banner'));
});</script>

/* Apply to a specific page in your site. */

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">
$(function(){
$('#modulePage1234567 #bannerWrapper').remove('a').append($('#banner'));
});</script>

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

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>

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;

}

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>

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

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