Author Archives: perkinsonw12

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.