Responsive Elements: “Supplemental Navigation”

Share

Element Information

Supplemental Navigation is a page level navigation element. Intended to be used in combination with the primary navigation element.

Tutorial

  1. Insert the custom element “Navigation – Supplemental”
  2. Define the element

Detailed Tutorial

Step 1: From your template insert a new element as “Navigation – Supplemental” found under “1 – Responsive Elements”

Navigation(Supplemental) - Select Element

Step 2: Define the element by clicking the gear icon where you placed the element in the previous step.

Define-Custom-Element-SS

Style
After selecting a header and orientation there are many styles to choice from. Classic is a black font on a white background, while default is purple on white. Home page is the same as default, except it makes the purple text bold. Gold 1 and Purple 1 give their color respectively to the background and have a black font. The rest of the color styles only appear as backgrounds when hovered over by the mouse.

Links
To mange the links you can click the add link button to add another link to the list. The text field is the text that will show up for the link, while the url field is the url that the text will link to when clicked by the user.

Navigation-Supplemental-Full-Setup

Responsive Elements: “Word Mark”

Share

Element Information

An approved word mark image or text will be displayed.

Tutorial

  1. Insert the custom element “Word Mark”
  2. Define the element
    • Department/Organization
    • URL

Detailed Tutorial

Step 1: From your template insert a new element as “Word Mark” found under “1 – Responsive Elements”

Word Mark - Select Element

Step 2: Define the element by clicking the gear icon where you placed the element in the previous step.

Define-Custom-Element-SS

Here you can add a department and/or organization name that will link to the given URL and customize it accordingly.

Word Mark - Full Setup

Responsive Elements: “Multiple Column”

Share

Element Information

Provides multiple column layouts. Each column can have a container in it. Pick the layout suits your needs. Can be nested.

Tutorial

  1. Insert the custom element “Multiple Column”
  2. Define the element layout type
    • 4 columns; Equal Width
    • 3 columns; Equal Width (Default)
    • 2 columns; Equal Width
    • 2 columns; Left Column 75% width; Right Column 25% width
    • 2 columns; Left Column 25% width; Right Column 75% width
    • 2 columns; Left Column 70% width; Right Column 30% width
    • 2 columns; Left Column 30% width; Right Column 70% width

Detailed Tutorial

Step 1: From you template insert a new element as “Multiple Column” found under “1 – Responsive Elements”

Multiple Column - Select Element

Step 2: Define the element by clicking the gear icon where you placed the element in the previous step.

Define-Custom-Element-SS

Click the drop down menu and select the multiple column layout that suites you best. From the options listed above you can see how many different ways the columns can be split. You can also nest more multiple columns inside of any column.

Multiple-Column-Full-Setup

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.