Button to scroll to the top of the page.

This is a guide to making pre-filtered directory links. The official Colbalt documentation can be found here.

Creating the url

In this example we will make a link that automatically show the Faculty from the Astronomy department. Here is what our final url will be.

http://wdev2.cns.utexas.edu/directory/everyone?option=com_cobalt&task=records.filter&ion_id=1&item_id=289&filter_name[0]=filter_cat&filter_val[0]=11&filter_name[1]=filter_k68066ab13794c412a4f4964d72492ee9&filter_val[1]=Faculty

Lets break this down into parts to better see what each piece does.

http://wdev2.cns.utexas.edu/directory/everyone
    ?option=com_cobalt
    &task=records.clean
    &ion_id=1
    &item_id=298
    &task=records.filter
    &ion_id=1
    &item_id=289
    &filter_name[0]=filter_cat
    &filter_val[0]=11
    &filter_name[1]=filter_k68066ab13794c412a4f4964d72492ee9
    &filter_val[1]=Faculty


Always include everything that isn't in bold. This is the base url that tells Cobalt we are going to make a filtered link. The parts in bold are our variables we want to sort by.

Creating a filter

After entering the base url we need to add filters to sort by. The first filter(filter[0]) will be the category. A filter always contains 2 parts, a filter type and filter value.

&filter_name[0]=filter_cat - This line tells Cobalt this filter type will be a category filter.
&filter_val[0]=11 - This line is the value of the category we want to sort by. In this case Astronomy is category 11. The category number can be found in the Cobalt backend.

Additional Filters

If we want to add more filters we can just keep extending the url and incrementing the filter number. (filter[1], filter[2], etc...) In this case we are already sorting by category Astronomy and we need to add the Faculty filter next. To do this we will use the field key value for the field Employee Type. The key value can be found in the cobalt backend.

&filter_name[1]=filter_k68066ab13794c412a4f4964d72492ee9 - This is the key value for the Employee Type field.
&filter_val[1]=Faculty - This is the value we want to filter by.

Final URL

Putting everything together in one line we get our final url...

http://wdev2.cns.utexas.edu/directory/everyone?option=com_cobalt&task=records.filter&ion_id=1&item_id=289&filter_name[0]=filter_cat&filter_val[0]=11&filter_name[1]=filter_k68066ab13794c412a4f4964d72492ee9&filter_val[1]=Faculty

To use this make a Joomla Menu item of 'External URL' and enter the url you've created.

 

 

Creating well links(Explore Bars). There are six different colors to choose from. You want to go into HTML mode and enter the following code.

<div class="well well-large COLOR">
<h2>Your Text Here »</h2>
</div>

grey »

foam »

orange »

green »

tan »

blue »

 

Adding Captions 

 

Untitled-5Classes:overlay-foam

1. To add a caption overlay to a sidebar image, or any image for that matter, click the small button with a green plus on it located in the bottom right portion of the WYSIWYG.

2. A pop-up will appear and in the last available input field labeled "Classes", enter the desired overlay class. They can be accessed using the six following classes:

  • overlay-grey
  • overlay-foam
  • overlay-orange
  • overlay-green
  • overlay-tan
  • overlay-blue

The image below should clarify where caption classes are set.

 overlay-guideClasses: overlay-blue

The document will cover the proper way to create links on your pages.

Linking to Internal Pages

Many times you will want to link to other pages on the cns.utexas.edu website. In these cases it is bad practice to "hard code" urls. Instead we want to create a link to a specific menu item. That way if pages get moved or changes names, the link won't break.

Linking to a Menu Item

  1. Highlight the text you would like to link and click the Insert/Edit link button. link
  2. Do not insert a url by hand. This is "hard coding" and will cause broken links. Instead we want to Navigate through the Menu tree and find the Menu Item of the page we are looking for. Ignore any menu items that have 'Mega' in the name.

    menutree
  3. Once you find the menu item you are looking for click it and hit 'Insert'. The text you originally highlighted should now be linked to the page you selected.

 

Linking to External Pages

When linking to pages not a part of the cns.utexas.edu website we have no choice but to hard code links.

  1. Highlight the text you would like to link and click the Insert/Edit link button. link
  2. Copy and paste the url of the desired link into the Url field at the top of the screen.
    urlfield
  3. Click 'Insert', the highlighted text should now link to the external site.

Tip

You should check your external links on a regular basis to make sure they still work.

 

Anchor Links

Anchor links are links to place on the current page. They typically used when a page in long and has multiple sections. When users click on anchor links they will be taken down the page to the anchor.

Making an Anchor

First we need to make anchors to link to, these are typically section titles. For this example I will link to the Internal Links section above.

  1. Highlight the text you want the user to get taken to.(Just a single line, typically a section title.)
  2. Click the Anchor icon. anchor Enter the name of the anchor you would like to make, keep it simple and dont use spaces. (For this example I used 'internal-links' as my anchor name)

Linking to an Anchor

  1. Now that the anchor has been made we need to make our link, click on the link button.link We want to select our anchor from the dropdown list called 'Article Anchors'
    anchor-example
  2. Once you've selected your anchor hit Insert and you're done. Now you should have an achor that takes you to the section of your choice.

Subcategories