Author Archives: Brian Hall

New Custom Element: Include HTML

Share

We have created a new Custom Element: Include HTML file.  This element takes HTML that is stored in a separate file and includes it in a CommonSpot page.

To use this element, first take the HTML that you want to use and store it in a separate file.  Because the HTML code in this file will be included in a larger HTML document, you do not want to include the HTML tags <html>, <head>, <body> or any tags that may only be used within the <head> tag (e.g. <link>).  You may include <script> and <style> tags.  Then upload that file via your tools page.

Next, include a Include HTML file custom element.  The only field to complete is the HTML file location.  By default, the field is prepopulated with the path to your tools page, so you would only need to put the name of the file at the end.  For example, if I have a file named ‘myFile.html’ and uploaded it my training site tools page (http://author.ecu.edu/cs-training/hallwa), then the field would already have “/cs-training/hallwa/customcf/” in it and I would just need to add “myFile.html” to the end of that.  When I click finish, the text in myFile.html will be on the page.

tutorials- Include html

The element will not process any ColdFusion tags, so you cannot use it to process any dynamic content.  The big advantage that this element has is that to update the page (or pages) that have the element, you only have to upload a new version of the HTML file and the content of the page will be updated without having to change any pages to read mode.

Google Analytics Tips

Share

If you have your own Analytics account that you are using in a Custom Footer, here are two quick tips for making the results easier to interpret.:

1.  Set a default page.

If you don’t have a default page set, then you probably have noticed some pages show up twice in your results.  For example, the ITCS home page can be accessed via http://www.ecu.edu/cs-itcs/ and http://www.ecu.edu/cs-itcs/index.cfm.  By default, Analytics tracks those as separate pages, but we would like them to show in the results as one page.  We do this by setting “index.cfm” as the default page.  Then when any page is accessed without an explicit filename, “index.cfm” is added to the end.  So http://www.ecu.edu/cs-bus/ is converted into http://www.ecu.edu/cs-bus/index.cfm.

To set the default page, click on “edit” in the account that you want to add the default page to.

Then click on Edit on the settings page

Finally, type in “index.cfm” (without the quotes) in the Default page field.  Click Save Changes.

The changes should begin showing up in the report the next day.  It does not do this retroactively.

2. Add a filter to merge short URLs.

Many of you have a short URL that has been set up to access your pages.  For example, the library’s home page can be accessed via http://www.ecu.edu/cs-lib/ or just http://www.ecu.edu/lib/.  Once again, Analytics considers these as two separate pages.  But with the Filter Manager, we change that.

First, click on the link to the Filter Manager.

Then click the link to Add Filter

You can name your filter whatever you want.  Pick “Custom Filter”, then “Search and Replace”.  Use “Request URI” as the filter field.  In the Search String, put what you want to remove from the URL, and in the Replace String put what you want to replace that with.  In our library example, we want to replace all the “cs-lib” strings with just “lib”.   Make sure that Case Sensitive is set to No.  Click on the website profile you want to use this filter on and then the Add button.  Then click Save Changes to finish.

You can apply more than one filter to a site if you wish.

Doing these two simple steps will combine all your pages that have more than one address into one record in Analytics, giving you a more accurate report.

New CommonSpot Templates

Share

Overview

Starting Monday, 25 October, we changed the base template that all CommonSpot pages are built from.  The biggest aspect of this change is that all new pages will no longer use a table as the layout framework.  Instead the pages are using CSS to determine the display.  This will give us all much more flexibility and control over the appearance of our pages.

This change will not require any changes to any current pages or templates or any pages you make from current templates.  The only problem that should occur when you are making pages is that now when you specify a width for the left column, any images that are wider than column will be truncated, like this:

Layout

The basic layout of the page is divided into divs, most of which have ids that you can use in styling your pages.  This is a rundown of the divs.  In each image, the div under consideration has been given a red border to show its location.

1. #contentArea

This is the div in which all the other page content that you control goes into.

2.  #topRow

This is the area that the header images usually go into.

3. #barDiv

This contains the two bars after the header image.

4. #printerFriendly

This contains the printer friendly link

5. #bottomRow

This contains everything else above the footer.  No content goes directly into this div, but into the one or two child divs that it contains.  It will always contain at least one div within it (#bottomRight, more on it in a minute).  If the Full Body option isn’t checked in the Custom Metadata, will also contain a #bottomLeft  div as well.

6.  #bottomLeft

This div has the width that is specified in the left column specification in the Custom Metadata.

7. #bottomRight

This div has a width of 770 – the width of the left column.

An interactive demo of these divs can be seen at http://www.ecu.edu/cs-training/hallwa/Template-Demo.cfm.  When you mouse over each of the three main divs, you will see the background change and the id of the div will appear at the top.

Custom Elements: “Google Search”

Share

The Google Search Custom Element lets you take advantage of the power of our Google Mini search appliance, the same index that we use on all our ECU pages, but limit the search to your desired subsite.

To use it, just use the “Click to insert new element” link on any CommonSpot page.  Pick Google Search, listed under Custom Elements.  Use the “Click here to define the custom element data” link to bring up the popup window that will let you define the details.

tutorials- Google Search

The only required field is “Subsite to Search”.  By default the element inserts the URL of the current subsite, but you can change it anything that you want.  As the text says, only put the part of the URL after “www.ecu.edu”.

The Search Field Size tells the long to make the search box on the page.  It does not limit what the user can type in, only what will appear on the screen.

The Search Field Default Text lets you put a text hint in the search box.  When the user clicks on the search box, whatever you typed in there will be erased.

The Search Button lets you decide what text will appear on the submit button.

The Search Button Image lets you pick an image to use as the submit button instead of using a button.

Two search forms, one using a button and one using an image can be seen here: http://www.ecu.edu/cs-training/hallwa/Google-Search.cfm

Custom Footer Tutorial

Share

Today let’s examine the Custom Footer feature built into your tools page.  When you log into your tools page, you should see “Edit Custom Footer” listed as the first link in the Subsite Management group.

custom_footer_1

When you click on this, it will show you the current settings for you subsite’s footer and allow you to customize it.

If you have not yet specified a custom footer, then your display will look something like this:

custom_footer_2

As you can see, the inherited footer is active, which means that your subsite is inheriting the footer of its parent site.  The footer that the site inherits may not be the exact one listed here, but the “(active)” lets you know that inheritance is taking place.  To begin the process of creating a new footer, just click the “Create New Footer” button.

If your subsite has already specified a custom footer, then the display will instead look more like this:

custom_footer_3

In this case, the page still displays the inherited footer, but it also shows that it is inactive.  You can delete your current custom footer and use the inherited footer at any time by clicking the “Use This Footer” button.

Whether you are creating new footer or editing an existing one, just fill in the appropriate fields in the form.  A footer is made up of three lines, and each line can have one hyperlink.  To make any of your text a hyper link, repeat that text in the hyperlink field and then put the URL in the address field.  In this next example, in the first line the words “Training Site” link to /cs-training/hallwa and in the third line, the words “Contact Me” link to my email address.

custom_footer_4

Last, if you have a Google Analytics account, you can put the SiteID in the last field, and the custom footer will automatically put all the Google Analytics tracking  JavaScript on the page for you.  For more information how to set up a Google Analytics account, see the ITCS Learning Center, which should always be your first place to look for CommonSpot (and other IT) tutorials.

Rotating Images with the Cycle Element Tutorial

Share

The newest Custom Element is Cycle Images.  This element uses the Jquery Cycle plugin to create a rotating images effect.  The element has 12 different transition effects.  Several examples of the effects that this element can perform can be seen here: http://www.ecu.edu/cs-training/hallwa/Rotating-Images.cfm.

To use the element, you just need a collection of identically sized images.  The element takes all those images, lets you specify a duration and effect and then creates all the JavaScript and HTML for you.

First, log into your tools page and create a new folder.  For this example, I named my folder rotatingImages.  Then upload as many identically sized images as you want into that folder.  The images can be different types (jpegs, gifs and pngs are all allowed) but for the element to display the images properly, they must all be the same size.  For my examples, I used images 770 pixels wide and 170 high.

Next, add a Cycle Images Custom Element (listed under Custom Elements) to your page.  Then click the “Click here to define the custom element data” link.  A popup window will launch.  Fill in the appropriate fields, like so:

  • Image Directory – the folder name where you uploaded the file.  Required.
  • Time to display – the the length of time in seconds to display each image before the transition effect takes place.  Required.  Must be a number, and  decimals are valid, so you can put 3.5 to display each image for three and a half seconds.
  • Change Duration – The length of time in seconds that the transition should take.  Required.  Must be a number, decimals are valid.  In my opinion, all the effects except the Fade effect look best with short (i.e. less than one second) durations.  The fade effect looks very nice with relatively long (5 seconds or more) durations.
  • Transition Effect – the visual effect that you want as the images change.  The option are:
    • Fade – The current image fades out and the next image fades in at the same time.
    • Cover – The current image remains in place and the next image moves in from the left to cover it.
    • ScrollDown – The current image moves down and at the same time the next image moves down to replace it.
    • ScrollUp – The same as ScrollDown but upward instead of downward.
    • ScrollLeft – The same as ScrollDown but the direction is to the left.
    • ScrollRight – The same as ScrollDown but the direction is to the right.
    • SlideX – The current image appears to fold in to the left and the next image folds out to the right.
    • Turndown – Simulates somewhat the effect of turning a photocube downward.
    • CurtainY – The current image folds in toward the middle and the next folds out from the middle.
    • Wipe – The current image remains in place and the next image is revealed from the top left diagonally to the bottom right.
    • Toss – The current image moves off screen to the right, revealing the next image beneath.
    • Shuffle – The current image moves off to the left and then moves behind the next image.
  • Height – The height of the images in pixels.  Required.
  • Width – The width of the images in pixels.  Required.
  • Margin – The CSS margin desired for the element.  Optional, by default is set to 0.  When using the element as a replacement for the header image, then 0 is what you want.  If you are using the element anywhere else on a page and want to have the image use all the width of the page, you need to set this to -10 (negative 10) to compensate for the inherited properties.

cycledImages

Two final caveats:

  1. If you try to put two of these on a page, only the first will work.  This is because the JavaScript works by identifying the element by its id, and these must be unique.
  2. If you copy a page that this element is on, then if you change anything in this element, it will be changed on both pages, since those pages will be sharing one instance of the element.  You can copy the page and then remove the element and add a new one however to prevent this from happening.

As always, if you have questions, comments or suggestions, please let me know.  And be sure to check out the ITCS Learning Center for lots more information about how to use CommonSpot more effectively.

Style Sheets Tutorial

Share

Today we are going to use last week’s tutorial, the Twitter feed custom element, to demonstrate how you can use stylesheets to modify the appearance of elements on your page.

Last week we left the element with its default appearance: http://www.ecu.edu/cs-training/hallwa/Twitter-Feed.cfm.  Today we are going to use a stylesheet to transform it to this: http://www.ecu.edu/cs-training/hallwa/Twitter-Feed-styled.cfm.

First, create a empty text file in DreamWeaver, Expressions Web, notepad or any other plain text editor.  (Do not use Word.)  Save it as myStyles.css.  Then upload it to your tools page.  I put mine in a subfolder called tweetStyles, but you can put yours in the tools root if you want.

Let’s see how to include that style sheet into a page.  While in Author mode, click on the Properties and Actions option from the submenu. A popup window will appear.  Make sure that “Use Style Sheet and prevent element style override” is checked.  Click Next.  The Style Sheet Sets window will appear.

If you have never edit the style sheets for your page, then the default set should be the only one listed.  At this point, you have two options:

  1. You can create a new set containing your style sheet.  This will have the affect of removing the default styles, as defined in the default.css file, from your page.  It will not remove the general default ECU styles, which are defined else where.
  2. You can add your stylesheet to the default set.  This is probably the better option.

When you add your style sheet to a set, the style sheet listed at the bottom is the one that will take precedence. So if a style is set in both default.css and myStyles.css, and myStyles.css is listed after default.css, then the style set in myStyles.css will override the one set in defaults.css.

styles

To insert a style into the set, click the pencil icon next to the set name and select Style Sheets… from the submenu.  Use the “Click here to add a new style sheet” link to insert the sheet.  Check the “Explicit File” option and type the location of your file into the “Logical Path” box.  It should be something like “/cs-[siteName]/[subfolder]/customcf/myStyles.css.  Click Finish.  You should see your file listed after default.css.  Click Close.  Click Finish.  You page should reload, and if you view the source, you will see you CSS file listed near the top.

code

Now that our style sheet is referenced in our HTML code, we can change the way the page displays just by editing that file, without using any of the CommonSpot authoring tools.

First, let’s add a thin black border around the entire element.  If you remember from the image that shows diagrams the layout, the element is in a div with a class of “tweetContainer”.  So, open your myStyles.css file and add this CSS code:
.tweetContainer{
border: solid thin #000000;
}

The “.” denotes a CSS class (“#” is used to denoted an id).  Classes can be reused, but ids need to be unique on a page.  Upload myStyles.css to your tools page and then reload your CS page that has your Twitter feed on it.  It should now have a border around it.

Next, let’s get rid of the the default horizontal line separating the individual tweets and replace it with a dotted ECU purple line.  Add this code to myStyles:

hr.tweetSeparator {
display: none;
}
p.tweet {
border-top: dashed thin #592a8a;
}

First, by setting display to “none” the browser will stop displaying the hr tag, even though it is still in the HTML code.  Next, we are adding a dotted purple top border to each paragraph.  Upload the file and reload the page to see the results.

Now, both the border around the whole element and top border on the paragraphs are too close to the text, so let’s add some padding to both:

.tweetContainer {
border: thin solid #000000;
padding: 10px;
}
.tweet {
border-top: dashed thin #592a8a;
padding-top: 10px;
}

OK, last let’s make the “Latest tweets from…” text appear all to the right of the Twitter image.  Add this code, upload, and reload:

.twitterImage {
float: left;
padding: 0 10px 5px 10px;
}
.tweets {
clear: both;
}

With just these few lines of code, we changed the appearance rather substantially.  You can learn more about CSS many places.  One of my favorite CSS reference/tutorial sites is the W3Schools (http://w3schools.com/css/).  The site covers HTML, CSS, XML, JavaScript, and many other web technologies.

Lightbox Slide Show Element Tutorial

Share

Today’s tutorial is about the new Slide Show custom element.  This element lets you quickly and easily make a JavaScript lightbox slide show, like the one here: http://www.ecu.edu/cs-training/hallwa/Emirati-Money.cfm (opens in a new window). To make a slideshow like this, just follow these few steps:

  1. Login to your tools page and create a new folder that will contain your slide show images.  This folder must be directly within your tools page (i.e. it cannot be a subfolder of another folder).
  2. Upload your images to the folder.  The images do not have to be the same type or size, so it is fine if you want to have a 1000×500 JPG, 200×400 GIF , and a 250×250 PNG all in the same show.
  3. Add a Slide Show Custom Element (listed under the Custom Elements) to a CommonSpot page.
  4. Use the “Click here to define custom element data” link.
  5. Fill in the appropriate boxes in the form.
    1. Show Name is the display name that will appear on the page. Required.
    2. Image Folder is the name of the folder that contains your slide show images. Required.
    3. Description is free space to put whatever information you want.  This will appear above the thumbnails of your slides.  Optional.
    4. Advance Photos Automatically.  If checked, then the slides will change automatically, though the user will still be allowed to pause the show as well as move forward or back manually.
    5. Duration is the number of second to pause between slides if the “Advance Photos Automatically” option is picked.
  6. Click Finish.

ss_sc_01

The element will automatically create 60 pixel high thumbnails for you and write all the CSS and JavaScript to render the slide show.  The thumbnails are located in a subfolder of your image folder named “tn”, so do not delete this folder or the images within without reason.

At any time you can delete or add photos to your image folder.  If you add photos, be sure to view the page on author to generate thumbnails for the new images.   If you delete photos, you probably also want to delete the associated thumbnails, though this is not strictly necessary.

The order in which the images appear is alphabetical based on the file names, so you can determine the order of the images by renaming the files.

Another option to enhance your slide show is to have each slide have individual text associated with it.  For example, the sample show linked to above has a short paragraph describing each note.

To do this, go to your tools page.  You should have a link named “Slide Show Text Editor”.  Click that.

ss_sc_02

A pull down will appear with a list of all the folder sin your tools page.  Pick the folder that contains your images.  The page will create a web form, load the images and give you a text box next to each.  Enter the text to accompany each image. (If you have already created text for your show, then the boxes should contain that text so that you can edit it).  Simple HTML for formatting is ok (BR, HR, STRONG, EM, etc) but more advanced  tags like links or styles can break the JavaScript that displays your show.

ss_sc_03

When you submit the form, it will create a text file in your image directory named “content.ini” that the show will use to include your text.  Do not delete this file from your tools page unless you want to remove your text from the slide show.

Lastly, the element has applied CSS classes to many of the elements so that you can add some custom styles by including a style sheet if you wish:

  • The entire element is contained in a div with a class named “slideShowDiv”.
  • The show title has a class named “slideShowTitle”.
  • The show description has a class named “slideShowDescription”.
  • The photos are contained in a div with a class named “slideShowPhotosContainer”.

I hope that this element will be useful.  As always, if you have any questions or suggestions, please let me know.

Inaugural Edition – Remote Script Tutorial

Share

Every Tuesday, I will post a new tutorial that I hope will help you get more out of CommonSpot.

Remote Script

We have created a new Custom Element called Remote Script.  The element lets you do two things:

  1. Upload your own CFM files without having to wait for ITCS to approve them and move them to the live server.
  2. Upload raw HTML snippet files and have them imported directly into a CommonSpot page.

Let me explain case #2 first:

CommonSpot has always had a built in element for including HTML.  However, maintaining these elements has been somewhat difficult for many users.  With this new element, the process is simplified, and updating the file is easier than ever.

First, create your HTML snippet in DreamWeaver, Microsoft Expression Web (free for download at the Download Center for all faculty and staff), or your favorite editor.  Since this snippet will end up in a larger HTML file, do not include the html, head, body or other like tags.  Then upload your document via your tools file.  The URL, which you will need in a later step, will be http://www.ecu.edu/cs-[site]/[subsite]/customcf/[filename.html].  Go ahead and open it to make sure that it works and everything looks ok.

Then add a Remote Script element (listed under Custom Elements) to the CommonSpot page.  Then paste the URL, except for the “http://”, in the Remote URL text box.  Click Finish, and you are done.

Anytime you want to update your file, just overwrite the existing HTML file and the CommonSpot page will change automatically.


Uploading your own ColdFusion scripts

If you want to upload CFM files, first you need to send an email to hallwa at ecu.edu so that we grant you the file permissions that you will need.  The place where you will load the files is actually on a different web server than the CommonSpot server.  You would then be allowed to freely upload CFM files, and then you can use the Remote Script element, in the same way as above, to import the output of those files into your CommonSpot site.

If you have any questions or comments about this element or any elements that you would like to see developed in the future, please leave a comment.