Author Archives: byrumc11

Custom Elements: “Dropdown Menu (Multilevel)

Share

Tutorial At A Glance

The drop-down menu can be very beneficial for anyone creating a website. It can save space on your web page and keep the page looking clean and simple to navigate. You can add a drop-down menu to your CommonSpot page simply by following this tutorial.

To insert the “Drop-down Menu” element follow these three (3) steps:

  1. Insert the custom element “Dropdown Menu (Multilevel)”
  2. Choose the titles for the levels in your drop-down menu
  3. Adjust the settings

Detailed Tutorial – pdf

To create a drop-down menu insert the element “Dropdown Menu (Multilevel) ” and 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. 

tutorials- Dropdown Menu

Step 2: Now click on the gear icon to define the titles of the levels in your drop-down menu. You can add a sub-level of a title by adding in a “+” sign directly underneath of the desired sub-level followed by the text you would like to include.

tutorials- Dropdown Menu1

Step 3: Now click on the “Advanced Settings” tab. Here you can change the text alignment, width of submenus, background color, font color, and a customized border. Checking the box at the top of the advanced settings menu will assign the default styles to your element.

tutorials- Dropdown Menu2

Click save and that’s it! You’re drop down menu will look something like this:

http://www.ecu.edu/cs-training/Dalton/tabbarnav.cfm

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.

Miscellaneous Elements: “Date/Time”

Share

Tutorial At A Glance

This element is quite simple and can be very beneficial to your web page. This element will render a selected date/time in the container you place it in.

Steps:

  1. Insert the custom element “Date/Time”.
  2. Choose the input source.

Detailed Tutorial

Step 1: After selecting “Click to insert new element” proceed to click “Miscellaneous Elements” and then select “Date/Time”

tutorials- DateTime

Step 2: After selecting the gear icon, choose the input source you wish to display. (Current date/time, Manual Input, Date created, Date of last major revision, Date last modified, Date published, or Date of Last User Login)

tutorials- DateTime1

Click “Save” and the date/time will appear on your page.

Custom Elements: “Plus Share”

Share

Tutorial At A Glance

We have added a new custom element, Plus-Share, that will create a sharing element similar to that which is on the university’s second level pages (e.g. About ECU http://www.ecu.edu/ecu/about.php).  Using this element, users can email the page’s URL, share it on Facebook or Twitter or add it to their MyLinks bookmark list.

Steps:

  1. Insert the custom element “Plus Share”

Detailed Tutorial

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

tutorials- Plus Share

The section will appear on your page.

When placed on a page, it will automatically take up 100% of the available width.  There are no options to set for the element, so to use it, you just place on on the page where you want it to appear.

Text Elements: “Simple Text Block”

Share

Tutorial At A Glance

Including text to your web page is simple and easy with CommonSpot. Here is a short tutorial on how you would go about adding a simple text block to your page.

To insert the “Simple Text Block” element follow these two (2) steps:

  1. Insert the text element “Simple Text Block”
  2. Add the text you choose to display on your web page.

Detailed Tutorial

To create text using the “Simple Text Block” element follow these two (2) steps:

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

tutorials- Simple Textblock

Step 2: Now click on the gear icon to add a header and text to this element.

tutorials- Simple Textblock1

Tips & Tricks

If you wish to add a text block with rich formatting options, including font, color, alignment, and hyper-linking, consider using the “Formatted Text Block” element.

Image Elements: “Single Image”

Share

Tutorial At A Glance

Images on your website are very important to keep your viewer interested. Adding an image is simple through CommonSpot.

To insert an image using the “Single Image” element follow these two (2) steps:

  1. Insert the custom element “Single Image”
  2. Choose & Adjust your image

Detailed Tutorial

To add a single image to your web page use the “Single Image” element and follow these two (2) steps:

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

tutorials- Insert Single Image

Step 2: Now click on the gear icon to choose your image, adjust your image size, add a rollover image, or add a flyover text. 

tutorials- Insert Image w Surrounding Text1

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

tutorials- Insert Single Image1

Tips & Tricks

You can add a rollover image that will appear if you hover your mouse over the current image. You can add a caption to your element by clicking the “+” sign in the top left of your elements container.

Image Elements: “Text Around an Image”

Share

Tutorial At A Glance

Having a website is a great tool to direct traffic to your department, organization or facility. The most important aspects of your site is making sure your content is accurate and useful. But even with the most useful and up-to-date information, you may want to add some images to your page. This image element allows you to add images surrounded by text that can serve for your choice of purpose.

To insert the “Text Around an Image” element follow these three (3) steps:

  1. Insert the custom element “Text Around an Image”
  2. Choose & Adjust your image
  3. Add the surrounding text

Detailed Tutorial

To insert an image with text around it use the element “Text Around an Image” and 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 highlighted icon. 

tutorials- Insert Image w Surrounding Text

Step 2: Now click on the gear icon to choose your image, adjust your image size, add a rollover image, or add a flyover text. 

tutorials- Insert Image w Surrounding Text1

Step 3: After you’ve saved these changes, your image should appear on your page. Now select the + sign in the top left of your image to edit the surrounding text of your image. Here you can add text in the text block and the header text if you wish. You can add a style to your text here in this element.

tutorials- Insert Image w Surrounding Text2

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

tutorials- Insert Image w Surrounding Text3

Tips & Tricks

You can add a rollover image that will appear if you hover your mouse over the current image. While editing the element’s text, you can position the text however you want by using a style sheet or using html code.

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.