Tag Archives: Custom Elements

Custom Elements: “Tabbed Page Interface”

Share

Tutorial at a Glance

This tutorial will discuss how to use the custom element “Tabbed Page Interface”.  This element lets you easily make a multiple tab display on any of your CommonSpot pages.  An example of the element can be seen here: http://www.ecu.edu/cs-training/corey/Tutorials.cfm

Creating a banner using “Tabbed Paged Interface” can be done in three (3) steps:

  1. Insert the custom element “Tabbed Page Interface”
  2. Choose the number of tabs and the colors of the elements
  3. Define tabs and add content

Detailed Tutorial - PDF

To create a banner using “Tabbed Paged Interface” follow these three (3) steps:

Step 1: To put the element on a page, click the “Click to insert new element” link on your page, then choose “Tabbed Paged Interface” listed under Custom Elements.  Then click the “Click here to defined the custom element data” link to open the popup window that will let you put your content in the element.

tutorials- Tabbed Interface Element

Step 2: Choose how many tabs you want to have, 2, 3, or 4.  Pick the background color for the active and inactive tabs.  With a purple background, the text will be gold, with a gold or white background, the text will be purple and with a gray background, the text will be white.

tutorials- Tabbed Interface Element1

Step 3: Then click on the “Tab One” tab to define the content of your first tab.  You must have a Tab Label (the text that will appear on the tab) and content.  Then do the same for each of the other tabs.  You only have to complete as many tabs as you specified that you wanted.  You can put content in more tabs than you specified in the first step, but the element will only display the content in the number that you specified.

Click Finish when all your desired tabs are populated.  The element will write all the CSS and JavaScript for you to display your content.  And if the user has a browser that does not use JavaScript, the element will still display all the content in your element, displaying them down the page in order.

As always, check out the ITCS Learning Center for more information about CommonSpot and other computer topics.

Custom Elements: “YouTube Video”

Share

Tutorial At A Glance

Adding a video to your web page will add a visual to the viewer which is quite important on web pages today. This custom element lets you add a YouTube video to your element.

To insert the “YouTube Video” element follow these three (3) steps:

  1. Insert the custom element “YouTube Video”
  2. Choose the video URL
  3. Include related videos/borders/purple skin/hd player (if you choose to)

Detailed Tutorial

To add a video on your web page using the “YouTube Video” element follow these three (3) steps:

Step 1: After clicking the “Click to Insert Custom Element” icon, select “YouTube Video” under Custom Elements.

tutorials- YouTube Video

Step 2: Insert the URL of the YouTube video you want to display on your page.

tutorials- YouTube Video 2

Step 3: You can change the size of the video on your web page dramatically by adjusting the video size in the drop down menu while entering in the element data. You can include borders to your video by selecting “Include Border.” “Include related videos” will show related videos when the Youtube video has finished. Also selecting “Play in HD” will allow you to play the video in HD if applicable. 

Custom Elements: “Multi-Column Layout”

Share

Tutorial At A Glance

If you’re creating navigation links for you’re page the “Multi-Column Layout” is a custom element that can help you structure your web page. This custom element lets you create column containers for your element–this lets you put elements next to each other rather than on top of one another. An example can be seen on the ITCS home page: http://www.ecu.edu/itcs/

To insert the “Multi-Column Layout” element follow these three (3) steps:

  1. Insert the custom element “Multi-Column Layout”
  2. Choose the number of columns
  3. Set your prefered column widths

Detailed Tutorial - PDF

To create column containers using “Multi-Column Layout” follow these three (3) steps:

Step 1: Insert the custom element on your page where you want it to be displayed by clicking on this icon. 

multicol

Step 2: Now click on the gear icon to define the number of columns you would like. 

colnumb

Step 3: Now click on the “Advanced Settings” tab and select your preferred width of the columns. If you do not specify a width they will be equally spit and displayed on your page. If you are putting navigation links in your first column you may consider a width of 200px. Separate your width in pixels with a common. Example: “200px, 960px”  (total 960) would give you two columns the one on the let narrower than the one on the right (Like our home page http://www.ecu.edu/itcs/)

width

And that’s it! You’re containers will now look something like this:

colums

Tips & Tricks

Make sure if you want custom widths to uncheck “Equal Width Columns” on the “Advanced Settings” tab. The new width for CommonSpot pages is 960. If you are going to have navigation links to the left 180px wide set your second column or the sum of your addition columns (if you have more than two total) to add up to 960. Never exceed 960 as a total width otherwise your content my be cut off.

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.

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.