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. 

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.

Custom Elements: “ECU Tabbar Element w/ Icon Control”

Share

Tutorial At A Glance

Part of having a successful website is your views being able to navigate your page with ease. We’ve developed some custom elements for you to easily create navigation panels and headers for your template. This tutorial explains how to use the “ECU Tabbar Element w/ Icon Control” custom element. Make sure you add this element to your sites template for it to appear on all your pages in your site. View example.

tabbarnav

Creating a navigation bar using “ECU Tabbar Element w/ Icon Control” can be done in three (3) steps:

  1. Insert the custom element “ECU Tabbar Element w/ Icon Control”
  2. Create your tabs with hyperlinks
  3. Choose your prefered icons

Detailed Tutorial - PDF

We have featured this element on the ECU home page in the past and it is the easiest means to add navigation links to your page. You also have the option to include icon links for easy access to other sites.

To create a navigation bar using “Content Slider” 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. 

insertelement

Step 2: Now click on the gear icon to define your navigation links. Type in the name and url link for each tab. There are also color option to match various types of webpage themes. Be sure to include “http://” with your url.

tabnavdata

Step 3: Now click on the “icons” tab and select which icons you would like to use as part of the navigation bar. 

tabbaricon

And that’s it! Now you can create a navigation bar for your sites template

Tips & Tricks

This element was created for the old 770 pixel width pages. The “Gold Gradient: option in colors therefor is created to extend and fade accordingly. If your page is the new page width (960 px) you will want to choose a solid color for your navigation bar.