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;

}

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;

}

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> 

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

Change Submit Button Text In Forms

Example: Change the default "submit" button text in forms pages to text of your own choice.

Note: This script allows you to replace the system 'submit' button text in forms pages to text of your choice. You will need to include the specific form submit button ID number to implement this for each instance (replace XXXXX in the code below). You can find the unique ID number for your form submit button using these instructions for targeting and modifying selectors. Also, replace the 'your text here' with the text you want to display for your form button.

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

$(document).ready(function(){
$('#formSubmitButtonXXXXXX').val("Your text here.");
$('#formSubmitButtonXXXXXX').val("Your text here.");
$('#formSubmitButtonXXXXXX').val("Your text here.");
});</script>

Replace the "Entries In" Category Overview Page Text

Example: Change the "Entries in" text on category overview pages to display text of your own choice.

Note: This script allows you to overwrite the default 'entries in' text appearing on journal category overview pages to text of your own choice. 

In Extra Header Code Injection put:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$(".journal-filter-header").html("YOUR TEXT HERE");
});
</script>

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

Change the Site Banner Link URL

Example: Change the default site banner link from your home page url to any other link. 

Note: This script redirects the banner image link within the header area of your site to a page you choose — instead of to the default home page you may have set. Using the per page modification you can redirect the banner link on specific pages within your site to a link of your choice.

/* Change the site banner url for every page on your site. */

In Extra Header Code Injection put:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#bannerWrapper a').attr({href:"http://www.your_link.com"});
});
</script>

/* Change the site banner link url per page using module page ID. */

In Extra Header Code Injection put:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#modulePage1234567 #bannerWrapper a').attr({href:"http://www.your_link.com"});
});
</script>



Change the Site Title Link URL

Example: Change the default site title link from your home page url to any other link.

Note: This script redirects the h1 site title link within your site to a page you choose — instead of to the default home page you may have set. Using the per page modification you can redirect the site title link on specific pages within your site to a link of your choice.

/* Change the site title url for every page on your site. */

In Extra Header Code Injection put:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#siteTitleWrapper a').attr({href:"http://www.your_link.com"});
});
</script>

/* Change the site title link url per page using module page ID. */

In Extra Header Code Injection put:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#modulePage1234567 #siteTitleWrapper a').attr({href:"http://www.your_link.com"});
});
</script>

Redirect the Member Profile Link In Journal Entry Comments

Example: Redirect the member profile link in journal entry comments to another page on your site or to a custom member profile page you created.

Note: This script redirects the member profile links in journal entry comments to a page of your choice, for example, a custom member profile page. You can create custom profiles using a blog or html page module that can be styled to your own preference — then apply this script to redirect the member name link (that appears in journal comments) to the page you created. 

In Extra Header Code Injection put:

/* Replace "Member Login Name" with the actual login name of the member. Replace  "Your Link" with the actual link url you wish to redirect the member's profile to. */

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$('.journal-entry-wrapper.authored-by-MEMBER_LOGIN_NAME .posted-by a').attr({href:"http://www.your_link.com"});
});
</script>

Customize Journal Entry Comments Text

Example: Replace the default text within the comment area of journal entries.

Note: This script allows you to replace the generic system text within single journal entry comments such as the: 'comment form title', 'add new comment', 'there are no comments' and the 'reader comments' text defaults to specific text of your own choice. 

In Extra Header Code Injection put:

/* Replace the default "Reader Comments" text within the quotaton marks with your own text */

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$("#comments .caption").html("Reader Comments");
});
</script>

Additional changes you can make:

$("#comments .text").html("REPLACE There are no comments");

$("#add-comment-area .caption").html("REPLACE Comment form title");

$("#add-comment-area .caption-text").html("REPLACE Enter your information below to add a new comment");

Customize Your "Page Not Found" (404 Error Page)

Example: Redirect the system generated "Page Not Found" error page to a custom page of your own.

Note: This script allows you to redirect the generic 404 error page to a page of your choice. You can use an html page module to create a custom 'page not found' and then apply this script to redirect to the page you created.

In Extra Header Code Injection put:

/* Replace the "Redirect url" with the url to your own custom page. Replace the "Your Website Title" text with the title of your own website. */

<script type="text/javascript">
var redirectURL = "http://REDIRECT_URL_TO_YOUR_NEW_404_PAGE";
if(document.title == "YOUR WEBSITE TITLE - Page Not Found"){
location = redirectURL;
};
</script>

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

Redirect the Author Profile Link In Journal Entry Posts

Example: Redirect the author (editor)  profile link in journal entry posts to another page on your site or to a custom member profile page you created.

Note: This script redirects the author profile links in journal entry posts to a page of your choice, for example, a custom member profile page. You can create custom profiles using a blog or html page module that can be styled to your own preference — then apply this script to redirect the author name link (that appears in journal entries) to the page you created. 

In Extra Header Code Injection put:

/* Replace the "Editor Login Name" with the login name for your member editor. Replace  "Your Link" with the actual link url you wish to redirect the author 's profile to. */

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$('.journal-entry-wrapper.authored-by-EDITOR_LOGIN_NAME .posted-by a').attr({href:"http://your_link.com"});
});
</script>

Change the "Click Here To Read More" Excerpt Link Text

Example: Change the text of the journal excerpt link "Click Here To Read More" to text of your own choice.

Note: This script allows you to overwrite the default 'click here to read more' link text appearing in journal entries (when journal excerpts are enabled ) to text of your own choice. 

In Extra Header Code Injection put:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$(".journal-read-more-tag a").html("PUT YOUR OWN TEXT HERE");
});
</script>

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

Change Gallery Navigation Scrollbars

Example: Change the default gray scrollbar in Picture gallery thumbnail navigation.

Change the scrollbar color:

#sslightbox_scrollleftimg {

background: #000000;

}

#sslightbox_scrollrightimg {

background: #000000;

}

Use a background image:

#sslightbox_scrollleftimg {
background-color: #ffffff;
background: url(/storage/Left_Scroll.jpg);
background-repeat: no-repeat;
width: 15px;
height: 55px;
}

#sslightbox_scrollrightimg {
background-color: #ffffff;
background: url(/storage/Right_Scroll.jpg);
background-repeat: no-repeat;
width: 15px;
height:55px;
}