Category Archives: Custom Elements

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.

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.

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.

Custom Elements: “Cycle Images”

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 cycling images for a dynamic effect. Our “Cycle Images” custom element is a good option to use to automatically display a gallery of images. View example here: Cycle Images

cycleimagessample

Creating a gallery using “Cycle Images” can be done in three (3) steps:

  1. Upload your images to your CustomCF
  2. Insert the custom element “Cycle Images”
  3. Define the element data fields

Detailed Tutorial – PDF

We have had the Content Slider custom element for a couple of years now and most recently we have created a render handler that allows you to cycle captioned images without the thumbnails (see examples above).

To create a banner using “Content Slider” follow these 3 (3) steps:

Step 1: Upload your images to your CustomCF folder found in your Subsite Tools. Make sure you create a separate folder only for these images. In the image below the folder is named “testslider.” All photos in this folder will be used in the element. If you get stuck try our tutorial on uploading files to your CustomCF.

uploadsliderimages

Step 2: From your template insert a new element and define this element as “Cycle Images” found under “Custom Elements.”

cycleimagesaddelement

Step 3: Define the data fields for the element by clicking on the gear icon, selecting “New Data” and completing the data parameters. The first field is the location of images you are displaying. This refers to the folder inside your CustomCF that contains the images you wish to display. You must enter this properly with the full extension location for that folder. This is all that appears after ecu.edu (e.g, /cs-training/dalton/customCF/testslider). Another important field is the “Width” of the images. These numbers are the width in pixels (what is a pixel?). CommonSpot will use the width by default for the size of your images. If you are trying to trim your photos to a certain dimension it will not work in CommonSpot. The safest option is trimming the images before you upload them to your CustomCF. of each part of the element. The “Margin” gives you a border around the images. This is helpful if you want to center the images. All you must do is subtract the image width from the page width and divide the answer by two. This number when placed into the “Margin” field will center the element.

dataforcycleimages

And that’s it! Now you can display an image galley on your page.

Tips & Tricks

If you ever would like to change the transition effect or any of the data in the element you can do this easily by clicking on the “gear icon” and clicking “Data” instead of “New Data.” Keep in mind the “fade” effect is what we recommend. It is least distraction to users and offers a more clean and streamline environment on your website.

If you are trying to create a banner using this try our “Content Slider” instead. It’s much more efficient for this use.

You’ve heard the saying a picture is worth a thousand words, right? While an image can be one of the most impacting additions to your website, there are some things to keep in mind when working with web images. Images that appear in a banner should be of high resolution and quality. The clearer your images the more professional your site will become. It may not be a bad idea to review this helpful post on web images. Image Resolution and how it effects your webpage.

Custom Elements: “Content Slider”

Share

Tutorial At A Glance

When building your website you may want to consider having a concurrent banner at the top of all your pages. This gives all your pages a feeling of unity and assures viewers that they are still on your site while navigating. Within CommonSpot as a custom element exists an element named “Content Slider.” While there are may ways to achieve creating a banner for your website, our “Content Slider” element offers a more user-friendly approach. The “Content Slider” features captioned images that cycle at the top of your pages (see images and links below). Make sure you add this element to your site’s template for it to appear on all your pages.

With thumbnails:   http://www.ecu.edu/cs-training/hallwa/Content-Slider.cfm

sliderwithnails

Without thumbnails: http://www.ecu.edu/cs-training/hallwa/content-slider-new-renderhandler.cfm

sliderwithoutnails

Creating a banner using “Content Slider” can be done in five (5) steps:

  1. Upload your images to your CustomCF
  2. Insert the custom element “Content Slider”
  3. Define the element data fields
  4. Caption your images
  5. Choose your preferred handler

Detailed Tutorial – Content Slider PDF

We have had the Content Slider custom element for a couple of years now and most recently we have created a render handler that allows you to cycle captioned images without the thumbnails (see examples above).

To create a banner using “Content Slider” follow these five (5) steps:

Step 1: Upload your images to your CustomCF folder found in your Subsite Tools. Make sure you create a separate folder only for these images. In the image below the folder is named “testslider.” All photos in this folder will be used in the element. If you get stuck try our tutorial on uploading files to your CustomCF.

uploadsliderimages

Step 2: From your template insert a new element and define this element as “Content Slider” found under “Custom Elements.”

choosecontentslider

Step 3: Define the data fields for the element by clicking on the gear icon, selecting “New Data” and completing the data parameters. The first field is the number of images you are displaying. Next you will type the name of the folder you uploaded to CustomCF. To produce the banner without thumbnails set “Left Width” to 960 (or full page width) and “Right Width” to 0. These numbers are the width in pixels (what is a pixel?) of each part of the element. By setting “Right Width” to 0 you are telling CommonSpot you do not want the right side–which contains the thumbnails. Set the border to 0 and set the number of second you want each picture to display. If you want the thumbnails to appear try setting each width to half the full page width (e.g., “Left Width” and “Right Width” both 480 pixels and the boarder at 0)

definedataslider

Step 4: Now it is time to caption your images. Choose the tabs at the top of the element data box to caption each image. Tab one should be used for the first image in the file, tab two for image two and so on. It may be helpful to write down to order the images appear in your CustomCF folder to properly label each image. Once completed click “Save.”

captionimagesslider

Step 5: Now for the last, but most important step. If you are creating a banner without thumbnails you will need to change the render handler from default to “Thumbnailless.” If you are keeping the thumbnails, you do not have to change the handler, however you must make sure your element doesn’t exceed the page width. You can change the handler by clicking on the “gear icon” from earlier, selecting more and clicking “Custom Render Handlers.” The menu will appear with the “Thumbnailless” option.

And that’s it! Now you can make a clean-cut and powerful banner for your pages.

Tips & Tricks

If you ever would like to change the captions or any of the data in the element you can do this easily by clicking on the “gear icon” and clicking “Data” instead of “New Data.”

You’ve heard the saying a picture is worth a thousand words, right? While an image can be one of the most impacting additions to your website, there are some things to keep in mind when working with web images. Images that appear in a banner should be of high resolution and quality. The clearer your images the more professional your site will become. It may not be a bad idea to review this helpful post on web images. Image Resolution and how it effects your webpage.

Twitter Feed Custom Element

Share

Adding the Twitter Feed to a Common Spot page requires three steps.

  1. Embed the Profile
  2. Create the Widget
  3. Add the Widget to your page

*You must have a Twitter account to execute this element

Embedding the Profile

Once you log on to Twitter, go to the account whose tweets you want to add to your page. Next, click on the drop down menu that looks like a head and shoulders and click “Embed this Profile”.
Creating Twitter embed code

Creating the Widget

The Create a User Widget dialog box appears (see image below). For username, use the name of the Twitter account you want to follow. In the image below, I’ve added East Carolina. Click the Create Widget button at the bottom. All the other properties are optional or can be left blank.

Widget2

After creating the widget, a line of code will appear in the box to the right. Copy and paste the code into a text editor like Notepad. In the copied code, there is a line that says “data-widget-id” followed by numbers, copy the numbers. This is the id you will use when putting the widget onto your page.

CopyCode

Here’s an example of what the code you would need to copy looks like:

Code

Adding the Widget to your Page

Under the Custom Elements dropdown menu in CommonSpot, click Twitter Feed. An error will appear that says “There was an error with the Twitter Feed. Please make sure all setting values are correct.” This is normal, click the link the link that says “Click here to define the custom element data”. A box will appear that requires the Twitter User Name, Number of Tweets to be Imported, and Data Widget ID to be entered. When entering the user name make sure to remember to put “@”. The Widget ID is the number that you have copied from Notepad. To show East Carolina’s twitter feed, it would look like this:

TwitterFeed


Once you click save the widget will appear as follows:

TweetFeed

Adding a Calendar Widget to Common Spot

Share

The University has begun rolling out a new calendaring application called Localist. The new application will replace all the current Common Spot calendar options. ITCS has worked to move all the calendar events stored in the old systems to the new Localist calendar application. You can visit the new calendar at http://calendar.ecu.edu.

If you would like to add the calendar events to your Common Spot page, the following tutorial will help you do that.

Localist Widget Builder

https://calendar.ecu.edu/help/widget

To add a calendar of events to your Common Spot website, you will need to create a “Widget”. You are not required to login to this site. For now, you should leave the defaults in place and the only choice you should make is to choose Event Type = University. Once you do that, scroll to the bottom of the page and click the “Generate Widget Code” button.

WidgetBuilder

Now that you have generated your Widget Code, click in the box called “Widget JavaScript”, highlight all the text in that box (you can use Ctrl A). Copy the text and paste into a text editor (Notepad works well.).

Edit the text to remove everything except for the actual URL. For example if I paste the JavaScript as follows:

<script type=”text/javascript” src=”https://calendar.ecu.edu/widget/view?schools=ecu&days=31&num=50&types=20000″></script>

I will want to edit out everything but the URL as shown below (including the quotes (“”) at the beginning and end): Your URL should look similar to this.

https://calendar.ecu.edu/widget/view?schools=ecu&days=31&num=50&types=20000

Now to add the JavaScript, go to the Common Spot page where you want your Calendar of events to reside and insert the “Include Javascript” element from the Custom Elements in the Element Gallery.

When you are back at the page where your element resides, click on the gear icon  so that the dropout menu appears. Choose “New Data” or “Data”. (If you want to edit the javascript that is already there, you will need to choose “Data” as the “New Data” link will generate another occurrence of the calendar.) In the dialog box that appears paste the URL that you created from your Widget JavaScript code into the text box nest to “External Source”. Leave the “Script Input” blank. See screenshot below. Click Save to close the dialog box and your calendar should appear on the web page.

EnterCustomElementData

 

 

 

 

 

 

Example of Calendar on a web page (image 1). The width of your calendar depends on the size of the container where you insert the javascript element. If you use a two or three column layout, the calendar of events will wrap to fit the width of the column where it is added. (image.2)

Image 1:

CalenderFullPage

 

 

 

 

 

Image 2:

CalendarColumnOnly