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.

Subsite Tools: “Manage CustomCF” – Uploading Files

Share

Tutorial At A Glance

Many elements in CommonSpot require a group of files such as pictures to properly function. Your CustomCF is a folder located on the server from where you can link files to your pages and elements. There are endless uses for this folder, but some of the most common are:

  1. Easily link photos and files to elements on your website (e.g., Content Slider, Include HTML, Include JavaScript, Cycle Images…)
  2. Upload a CSS style sheet for advanced format editing.
  3. Store files that you often link to text or images.

Uploading content on to your CustomCF is simple and requires three (3) steps.

  1. Open “Manage CustomCF”
  2. Browse and select your files
  3. Upload your files

Detailed Tutorial – PDF

After using CommonSpot for a while you have probably noticed an option below “Preview” and “Submit” that looks something like this:

Subsite Tools

This option will open your subsite tools page where you will see various options to the left. You may have used these tools when editing your footer or submitting a service ticket for your site. Another tool–and maybe the most important–is the option to “Manage CustomCF.”

Subsite Tools Panel

As mentioned in the Tutorial At A Glance, your CustomCF is a folder located on the server from where you can link files to your pages and elements. Again, here some of the most common uses:

  1. Easily link photos and files to elements on your website (e.g., Content Slider, Include HTML, Include JavaScript, Cycle Images…)
  2. Upload a CSS style sheet for advanced format editing.
  3. Store files that you often link to text or images.

Here is how it’s done!

Step 1: Open your CustomCF folder by selecting the menu option as seen in the image below.

open customcf

Step 2: Browse your computer and select the file(s) you wish to upload.

browse your computer

Step 3: After selecting your file(s) click upload.

upload your file

And that’s it! Now you can upload files whenever you want and easily access them while editing your site.

Tips & Tricks

Many elements such as “Content Slide” use multiple image files in their setup. For these image elements to work you will need to create a folder inside you CustomCF that you will later link to these elements. If you are creating a banner at the top of your page you may want to create a folder named “BannerImages” and upload your images into this folder.

Have Questions? Leave a Comment.

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

Enable Common Spot copy/paste in Google Chrome

Share

Chrome Users: if you want to use the copy/paste operation in Chrome to edit your commonspot pages, install the cs_paste_extension.

Go to the Google Chrome Store
https://chrome.google.com/webstore/category/home?hl=en-US&utm_source=chrome-ntp-launcher

Search for paperthin chrome extension

PaperThinStore

Install cs_paste_extension by Fred Kingsbury

AddCopyPasteExt

Click the menu button and choose Tools, Manage Extensions. Verify that the cs_paste_extension is Enabled.

VerifyExtension

Using Common Spot’s Redirect Feature

Share

A “redirect” is when a visitor is automatically forwarded from one page to another page. Common Spot provides a an easy way to setup a page to page redirect. You can use this feature if you have a page that is being replaced by a new page or may have been moved to another part of your website. Note that this is a page-to-page redirect and only affects this single page. (There are options available to redirect a site to another site, but you will need to fill out a Help Ticket and have the web team handle that for you.)
 
To do the page to page redirect in Common Spot, you must first make the original page expire. To do this login to that page and click on Properties Menu >> choose Standard Properties >> on the Main tab >> look for Expiration date. Set the Expiration date for the day you want your old page to begin redirecting to the new page.

Below the Expiration date, there’s an Action drop-down where you choose the Redirect Action. A text box will open for you to type in the URL of the new page or use the Choose option to find the new page. Click OK and that’s it. Do not delete the original page or this feature will no work!
 
Redirects are a very standard way to retire an outdated page but direct any visitors who may have it bookmarked to the updated page.