Advanced Modifications

Creating Your Own Layout With Editable Templates

Administrator — Wed, 19 Mar 2008 02:00:01 +0000

If you have advanced experience with programming and editing code, this guide get you started with creating your own layout so that you may edit template files.

Scroll to the bottom the the layout page, and click Create a New Layout. You will then choose one of our layouts as your starting point. Activate your new layout.

Return to the Appearance page and click Edit Templates to access the core templates for your site. To modify any template, click Import Copy to create an editable version of the file.

If at any time you would like to return to a default file, click Destroy next to the copy you have created.

Unique Identifier Numbers

Administrator — Wed, 19 Mar 2008 02:00:00 +0000

Many of the modifications in our advanced user area refer to "unique identifier numbers." What exactly does this refer to? These are CSS elements that uniquely identify each of your Pages, Widgets and Sections. You can locate these numbers from a live page on your site by viewing the source code.

In your tag, you'll see something like:

And on the

tag of your section wrapper(s), you'll see something like:

With these codes, you can apply specific styles to specific pages and/or sidebar content.

Adding Twitter To Your Website

Administrator — Tue, 18 Mar 2008 21:53:13 +0000

I thought it'd be fun to add Twitter updates to my site, but rather than use one of Twitter's premade Flash badges, I wanted them on a page all of their own and styled to match the rest of my site. Here's what I did, if you'd like to do the same.

First, log in to your Twitter account and go here: http://twitter.com/badges/which_badge. Select the HTML/JavaScript option in the third column.

Choose your customization options and copy the code provided. (I selected 20 updates, since this is also the number of updates on your first Twitter page.) Paste the code into the page of your website where you'd like your Twitter updates to appear.

Next, update your CSS. To make it look like mine, use this code, or adjust it to match your site.

#twitter_update_list { padding: 0; margin: 0; }
#twitter_update_list li { list-style-type: none; padding: 0 0 10px 0; 
margin: 0 0 15px 0; border-bottom: 1px solid #D5D5D5; }

Finally, to make your first tweet stand out like it does on Twitter, replace this code:

With this:

And add the following to your CSS:

#twitter_update_list li:first-child { font-size: 16px; padding-top: 10px; 
height: 76px; }
#twitter_div img { float: left; padding: 5px; background-color: #CEDED7; 
margin-right: 20px; }

Viola! Your visitors can get Twitter update goodness without ever leaving your website. :)

Creating A Full Width Page

Administrator — Fri, 08 Feb 2008 18:26:41 +0000

Want to create a full width page (where your content expands the entire width of your canvas and your sidebar is hidden)?

Add the following code to your Custom CSS, replacing 123456 with the unique identifier number of the page. Need help with this? Follow these instructions.

#modulePage123456 #content { width: 620px; }
#modulePage123456 #sidebar { display: none; }

NOTE: This modification will not work with all templates. For example, there is an image in the background of Working Late that creates a gradient, and padding and/or margins shift it to the right, leaving the sidebar visible whether or not the content is hidden. We'd recommend avoiding templates with detailed graphical elements, and instead using a simpler layout such as Coffeehouse for this modification.

Creating a Splash Page

Administrator — Fri, 08 Feb 2008 18:22:15 +0000

To create a splash page or a completely empty shell, start with a Text/HTMLPage.

Add the following code to your Custom CSS, replacing 123456 with the actual module identifier (to find the unique identifier number of your new module, follow these instructions.) And of course adjust the width value to match your site's width.

#modulePage123456 #content { width: 620px; }
#modulePage123456 #sidebar { display: none; }
#modulePage123456 #pageHeaderWrapper { display: none; }
#modulePage123456 #pageFooterWrapper { display: none; }

Creating Three Column Layouts

Administrator — Fri, 08 Feb 2008 18:20:46 +0000

With some modification to your Custom CSS, you can create a third column on your site. In a nutshell, this is achieved by taking one of your sidebar sections and actually turning it into a third column. This is easiest to achieve with the instructions below and a basic template with a sidebar located on the left.

To start, add a new section to your site (and of course place at least one Page or Widget in it). Add the code below to your Custom CSS, replacing "123456" with the unique identifier number of the section you want to turn into a third column. (To find the unique identifier number, follow these instructions and look for the sectionContent identifier number on the

sectionWrapper.)

#sidebar { position: relative; overflow: visible; }
#canvas { width: 900px; }
#content { padding-right: 150px; }
#sectionContent123456 { position: absolute; left: 720px; top: 0px; }

Depending on your layout, you'll need to customize the numerical values to get the right fit. Basically what's happening here is that you're widening the width of the overall canvas (i.e. 900px), adding some padding (i.e. 150px) on the right to allow room for the new column, and finally positioning the column into place on the right side.

There is one limitation to this. Your normal sidebar column content height has to equal or exceed this new third column in height. Why? Because if it doesn't, the contents of the third column will overflow your layout at the bottom and overlap your footer area (your left navigational sidebar is what is setting the height of the page.)

Removing 'Comments Off'

Administrator — Fri, 08 Feb 2008 18:19:46 +0000

By default, the Journal module generates a Comments Off message when comments aren't enabled. If you prefer, you can remove this message by modifying your Journal - Entry Content template. Just locate the code below:

      $if( attr.allowComments )$
        $components/inlineIcon
(icon_file="comment.png",icon_title="Comments")$$localize(text="Post
a Comment")$
      $else$
        $localize(text="Comments Off")$
      $endif$

Remove the two bolded lines above so that it looks like the following instead:

      $if( attr.allowComments )$
        $components/inlineIcon
(icon_file="comment.png",icon_title="Comments")$$localize(text="Post 
a Comment")$
      $endif$

Library Format for Amazon Item List Module

Administrator — Fri, 08 Feb 2008 18:18:30 +0000

To create a "library format" in an Amazon Item List, paste the following code into the Page Header or Page Footer in Raw HTML mode:

Or you can apply it instead with Custom CSS using the unique identifier for the specific Amazon Item List and the code below.

#modulePage123456 .description { display: none; }
#modulePage123456 .clearer { display: none; }
#modulePage123456 .amazon-item-list li { float: left; }
#modulePage123456 .picture { height: 100px; width: 100px; text-align: center; }

Hiding Comments on Journal Entries

Administrator — Fri, 08 Feb 2008 18:16:43 +0000

Add the following code added to your Custom CSS to hide all comment links from all Journals throughout your site.

.postComments { display: none; }

Or you can hide it just for one specific Journal using the unique identifier number of the Journal.

#modulePage123456 .postComments { display: none; }

Creating A Header Horizontal Ad Banner

Administrator — Fri, 08 Feb 2008 18:15:11 +0000

To add a horizontal ad banner to your site, create a new section and within it a Text/HTML widget. Add the horizontal ad banner to this new area, and the code below to your Custom CSS. Change 123456 to the unique identifier of your new section.

#sidebarWrapper { position: relative; overflow: visible; }
#canvasWrapper { padding-top: 120px; }
#sectionContent123456 { position: absolute; left: -540px; top: -200px; width: 730px; }

To locate the unique identifier of your new section, follow these instructions and find the number applied to the sectionWrapper.

The code above assumes that the ad banner is of the larger 728 pixel format. If it's a smaller 468 pixel wide ad banner then change the width above to 470 pixels instead and reduce the left pixel amount. Depending upon background colors and/or images used in your layout, you may want to apply the canvasWrapper padding to the pageHeaderWrapper or pageHeader instead.