Text Only • 
    Home  •  Admin_Page_Builder_Form  •  Document
Admin Builder Form - Navigation Sidebar Tab
 Print

Links to Other Key Pages

Links in this Page:





Navigation Sidebar Tab Overview

Summary: The Navigation Sidebar tab of the RWD form contains the controls required to build an organized list of links on your web page.  The Navigation Sidebar can be situated on either the left side or the right side of the web page and can contain text or graphics.  If text is used, formatting can be different for headline text, list text, mouse-over hover, and visited links.  The number of links (or rows) possible on the Navigation Sidebar is limitless but best practices dictate that the Navigation Sidebar be fairly short with links that correspond either to sections of the existing page or pages related to the topic on the current page.

442009_91521_2.png





1) Navigation Sidebar Master Switch

Function: This drop-down menu lets you select whether to have a sidebar or not, and if you do, which side of the web page to have it on.  Note: If you set the Navigation Sidebar to appear on the right side of the web page and you are using the Information sidebar, the Information Sidebar will move from the right side of the page over to the left side.





*Tips and Tricks: The Navigation Sidebar is a good way to give your site structure; by using headlines you can effectively group links by subject or relevance.    Experiment with images and graphical lines to create page effects.








Content - SubTab A

Summary: This section of the Navigation Sidebar tab contains the table that is used to input all the links (text or graphical) into the Navigation Sidebar and to determine if links will be formatted as Headlines or Regular list links.

442009_91645_3.jpg




2) Add New Row  /  Remove Selected Row  /  Insert New Row

Function: These buttons allow you to manage the links that will appear in this section.

Add New Row:  Creates a blank row after the last existing row
Remove Selected Row:  Deletes the rows that is currently selected
Insert New Row: Creates a new row above the currently selected row.  To Insert a row, click in the row below where you want the inserted row to appear and then click on the Insert New Row button.

Note: It may appear that the feature is functioning properly at when you insert rows at first but once you click into the other rows or close the RWD form and re-open it, the rows will appear properly.





3) Collapse Non-Headlines

Function: This feature sets all links that are not headlines to be invisible until the web user clicks on, or hovers their mouse cursor over the related headline.  Doing this will expand the list in the Navigation Sidebar so that links are visible.





4) Headline

Function: If this checkbox is checked, then the link will become a Headline in the Navigation Sidebar.  If left unchecked, the text will take on the format of Regular links.  The difference in the format of these two options is set in the Modify Colors and Fonts Tab




5) Display Text

Function: This field contains the text that the web user sees on the web page for a given link (as defined in the Link To field below).  The text in this field is not a link itself, only a description of the link to make it easier for the web user to understand.




6) Use Image

Function: This checkbox determines whether RWD should use an image or text for a specified link in the Navigation Sidebar.  If checked, you must supply a valid path and file name for the image.




6a) Image Path/File Name

Function: Used in conjunction with the the Use Image Checkbox, this field contains the path and file name of a valid graphical image that will replace the text in this row.  It is important to clear any text in a particular row if you are going to use an image because if text is present along with a graphic, the graphic will be improperly displayed as the row will not expand to fit the graphic as it is supposed to do but rather will only be as high as the text in the row.




7) Link To

Function: This field contains the actual URL of the link. The URL can be a place on the same page, another RWD page (or any other document in your site), or another internet site entirely.  If using a web URL (as opposed to an internal relative path to a marker or document), make sure to use the entire http protocol syntax:  http://www.yourURL.com




8) Open in New Window

Function: This option will determine whether the page specified in the link will open in a new browser window or if the link will open in the current window.  We recommend that links to other sites open in new windows (so that you don't lose the web user to another site), and links that are internal (to places in the existing page or other site pages) open in the same browser window to avoid too many windows opening up.




9) Special Format3112008_103832_0.png

Function: This feature allows you to call a variety of other types of content to display in your web page without having to use any special syntax.  Using the Special Formats available, you can display FirstClass containers (conferences, folders and calendars) without having to use the special parameters that are required for these objects.  With this feature, you simply type the name of the folder, conference or calendar you want to open (preceded by the path to that object if it is not in the same container as the page containing the link).  You can show Calendars in any of three default views - Month view, Week View or Current Day View.  Conferences and Folders can be viewed
If you want to allow users to log right in to FirstClass via the web but would like them to be able to keep their web page navigation elements as well as the graphical layout you have built in RWD, you can use another new template that will do just that called FC Templates






Select the appropriate item from the list to set the link to open the way you want:

Setting
Purpose /Effect
none
The default value which is used for all links that are NOT FirstClass container objects (calendars, folders, conferences, etc) unless the conference or folder being opened contains a web page.  Links to other pages in the site, markers in pages, or other, external websites should be set to none.  This is BY FAR the most common setting
FirstClass Object
Use FirstClass Object to open folders or conferences in a list view.  DO NOT use this setting to open a web page itself because this setting causes a frame to be created that is meant to be filled with FirstClass documents of messages.  You could use this setting if you wanted to display an external website in the Page Body area of your RWD page however.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Calendar Monthly View
Use this setting to open a calendar in a Month view inside a frame that will replace the page body content of the current page. Users can switch between views when viewing the calendar on the web.   DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Calendar Weekly View
Use this setting to open a calendar in a Week view inside a frame that will replace the page body content of the current page.  DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Calendar Daily View
Use this setting to open a calendar in a Month view inside a frame that will replace the page body content of the current page.  DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
RWD Nav Left
Almost exactly the same as the FirstClass Object setting, use this to open folders or conferences in a list view.  The difference with this setting is that any subconferences or subfolders in the container being opened up will appear down the left side of the frame as opposed to at the top of the frame.

Again, DO NOT use this setting to open a web page itself because this setting causes a frame to be created that is meant to be filled with FirstClass documents of messages.  You could use this setting if you wanted to display an external website in the Page Body area of your RWD page however.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
RWD Nav Top
This setting currently functions exactly in the same way as the FirstClass Object setting but may change a little in a future release of RWD.  Essentially it is only slightly different than the RWD Nav Left setting because in the RWD Nav Top setting, subfolders and conferences and calendars are all listed horizontally above the list view of the conference being opened
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
FC Templates
These templates access the full FirstClass templates.  This link is generally only used with the '/login' link to enable you to allow users to log in to FirstClass without leaving your RWD site.  Instead of opening a new browser window and effectively 'leaving' the RWD site, using this template produces the result that whatever object you open (folder, conference, calendar, or your FirstClass desktop) will open with the full FirstClass templates in a frame on the current page.  
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
FC Templates (600 px height)
This setting may be required in some circumstances when the FirstClass Template being called contains active content (for example, a chat room) where some browsers will not display the window with appropriate height.  Using this setting instead of FC Templates will force the framed window displaying the called template (or template set) to render at 600 pixels high - which is appropriate in most browsers for a good user experience.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Message Blog
This setting displays the contents of a folder or conference in a Blog view.  The container being opened must have the Preview feature activated to operate fully.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Fixed Height
Similar to the FC Templates and RWD Nav left and Top settings, this setting  forces the framed area to remain 600 pixels high, regardless of how many or how few items are in the conference or folder that you are opening.  This rectifies a problem faced when a list of documents was opened with only a few items in the list.  It also fixes the problem some users experienced when opening PDF or Word files inside the frame where the document would open in a very short window.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Podcast
FirstClass Podcasts have been added to the pickers in RWD and if you wish to have a link to a Podcast, use this setting as the special format for the link.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Embed Today's Events
New in RWD version 3 is the ability to embed calendars and conferences or folders right in the Navigation Sidebar.  This setting embeds a list view of a specific calendar (must be named in the Link To field) for today's events only. Clicking on the event will open the named calendar to that specific event.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Embed Monthly Calendar
This setting embeds a Month view of a specific calendar (must be named in the Link To field) which will show days with events in them as bold.  Hovering a mouse over any day with events in it will pop up a window showing the events for that day listed. Clicking on a specific event opens the calendar to that event and clicking anywhere other than on a specific event opens the calendar to that specific day.  The Month Name and year will display as a Headline.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Embed Container
The content of conferences and folders can be displayed in the Navigation Sidebar as a list.  The list will show up to the 6 most recent items (most recent at the top) but the Headline will indicate how many items are in the container. Hoving the mouse over any item will pop up a window with a preview of the underlying content and clicking on an item in the will open that item to display the whole contents of the document / message.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Embed Container Scrolling
This is the same format as the Embed Container above except that it displays all items (not just the first 6) in the conference in a scrolling format.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Embed Custom Object
This setting allows advanced users to build their own plugin templates and have that content embedded in the Navigation Sidebar.   See the section below for more on this setting
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Insert a blank Row
This creates a blank row in the Navigation Sidebar ONLY.  The height of the blank row can be changed by putting the pixel size you want the space to be in the Display Text field of the form.  If no value is entered, a regular return will be generated at the font size as dictated in the page builder form or the .sitepref form.  Click on image at right for an example: 9222009_53802_2.jpg

Super Important Feature!:  Release 4.5 of RWD has a feature that is very useful.  

The situation up until this release was that if a builder made a link to a calendar or conference or folder (an object) using the special formats above, the object would open up in a frame in the current page. While this was not a significant problem for end node sites such as a teacher site, it could be very confusing if the link was put in the RWD Site Administrators Form (.sitepref) where the link would appear on all pages.   The confusing part is that a visitor to the website could be on a page that was called 'athletics' for example but if they clicked on a link to the district calendar or district news, these objects would just open up.  Unless the web visitor was aware of what had happened, they might believe that, because the page name and title was 'Athletics', that they were looking at the Athletics News or Athletics Calendar.

The remedy for this was some significantly complex code that had to be put in the Link field in the RWD form in order to take the web visitor to another page, say a page called 'Calendar' and then open the object.  

Now the good news:  

Using the new syntax, you can tell RWD to open an object (Calendar, Conference or folder) using any of the above special formats that are appropriate:

FirstClass Object
Calendar Monthly View
Calendar Weekly View
Calendar Daily View
RWD Nav Left
RWD Nav Top
FC Templates - use at your own risk - test lots
Message Blog
Fixed Height
Podcast

Syntax for opening an object on a different page than the current page:

Object path and name:Page path and name     (Set one of the appropriate special formats above in the special format field)

Example:  to open a monthly calendar called "District_Calendar", located in the root of the site in a special calendar title page called "Calendars", also in the root of the site, the syntax would be:

/District_Calendar:/Calendars    (and the special format would be set to 'Calendar Monthly View')

In the RWD form (.sitepref or the page builder form, Navigation Sidebar or Header Links Bar), the link above would look like:

9222009_53013_1.png
Navigation Sidebar Tab Shown in above example




Custom Plugin Embed Feature Explained

The following images (click to expand each image) demonstrate the use of the Embed Custom Object feature - the example below is a plugin we created for one of our portal sites in order to display the logged in user's name in the Navigation Sidebar.

1)     12112009_15146_0.jpg
2)     12112009_15316_5.jpg
3)     12112009_15327_6.jpg
4)     12112009_15244_4.jpg




*Tips and Tricks: If you wish to have a just a graphical bar with no links, links can be made that will only serve as graphics, by including a logo/bullet with no link included.

Not all rows have to be links, you can put in a row that simply uses a graphic to create a visual effect in the Navigation Sidebar.

When linking to another page in the same site, Open in New Window is not generally desired. However when creating a link to another site, a new window is often the best choice for the open behavior of the link.






Modify colors and Fonts - SubTab B

Summary: This section contains controls to alter the look of the different links of the Navigation Sidebar, as well as the navigation Sidebar section itself.

3112008_104337_2.png

Navigation Sidebar Global Style

Navigation Sidebar Links Style



Navigation Sidebar Global Style


1) Background Color

Function: This section determines the background color of the Navigation Sidebar.  The background color will be overridden if an image is used as a background (see item 3 and 4 below).




2) Use Background Image

Function: If you wish to use an image as a background instead of a color, check this box and make sure to enter a valid path and filename to the image you wish to use (see next item below)




3) Background Image path/Filename

Function: If the Use Image checkbox is checked, enter the path and file name of the image you wish to use for the background of the Navigation Sidebar.  You must upload the image to your website first and we suggest that you use and folder to store your local images.




4) Navigation Sidebar Width

Function: In previous versions of RWD, if you wanted the Navigation Sidebar to be a certain width, you had to use a graphic image to accomplish this.  The Navigation Sidebar Width Field allows you to set a specific width for the Navigation Sidebar irrespective of the content in it.





5) Padding
Function: In order that graphics may be used more predictably in RWD, the Padding control allows you to predetermine the amount of space between the Navigation Sidebar and the object above it (depending on the Object layout of the Header section, this object could be the Banner Image, the Header Title Section, The Scrolling Message, or the Header Links Bar).  If set to 0, the Navigation Sidebar will butt right up against the section above which will allow for graphics to appear to be continuous between these sections if desired.




6) Transparency Settings

Function: RWD allows for several options with regard to the formatting of the Navigation Sidebar.  The options allow you to set any combination of the Headlines and Links backgrounds to transparent.
11272005_51911_5.png
These settings allow you to set the entire object to transparent which will result in your Headlines and Links appearing over top of either the Navigation Sidebar background color (item 1 above) or on top of the background image (see items 2&3 above).  Alternatively, you may choose to make only one of either the Headlines or the Links backgrounds transparent.





Navigation Sidebar Global Style

This section determines what links will look like in your Navigation Sidebar. You can define the color of the Headlines and Links as well as their style. You can set bullets for both and you can specify what hover links and visited links look like.




7) Headlines

Function: Headlines are used in the Navigation Sidebar to signify the beginning of a set of links related to the Headline. They are not mandatory, but usually make the site more appealing to the viewer as they act as a grouping mechanism for links. You can change the background color* of the headline, the font, the font color, the font size, the font style, and whether or not the Headline uses a bullet and where the bullet image is found (7a).  
*Note: Backgrounds only take effect when the area in question is not set to be transparent (see Transparency Settings above)




7a) Headlines Bullet

Function: Headline Bullets are small graphics that can accomplish several effects; They can act as vertical spacers to increase the space between the Headline and the Links below, and they can also serve to act as indents for the Headlines.  Finally, Bullets can simply be used to enhance the visual impact of the Navigation Sidebar and can be part of the overall graphical schema of the web page.  Bullets can be created in any file format that the web browser can display however we favor the .gif format so that the bullet doesn't have to be matched to the Headline Background color (when the background of the .gif file is transparent).




8) Links

Function: Links are the main substance of your Navigation Sidebar. If you use Headlines, then links will fall underneath the corresponding Headline. Like Headlines, Links can be formatted. You can change the background color*, the font, the font color, the font size, the font style, and whether or not the Link uses a bullet and the path to the bullet image (8a).
*Note: Backgrounds only take effect when the area in question is not set to be transparent (see Transparency Settings above)



8a) Links Bullet

Function: Links Bullets have all of the same properties that the Headline Bullets have but they associate themselves with the Links rows in the Navigation Sidebar.




9) Hover Links

Function: When a link or headline is below the mouse (when the mouse cursor 'hovers' over a link), the link or headline can change colors, font, or other indicators to show that it is click-able. As in the previous two sections, this section allows you to format the characteristics of the links when the web user hovers the mouse over top of them.  Both Links and Headlines can have their background color change when hovered over.  Note: Backgrounds only take effect when the area in question is not set to be transparent (see Transparency Settings above)




10) Visited Links

Function: If desired, you can format a link that has been visited by a given user differently than one that has not been clicked on.  These fields allow you to make visited links appear differently.




*Tips and Tricks: The Choose Preset Skin field on the Page Tab must be set to 'Custom'  for this section to function.
        
The Background Color may be a perfect replica of a color from another area by using a simple graphics editing program such as MS Paint to check the RGB values of that color, and then manually inputting them into the Define Custom Colors fields provided. If you choose to disable the Background Color by entering a valid path/filename to an image, then the specified image will be used. The image will be distorted to fit the sidebar, so you may have to use a graphics editing program to resize the image to suite the page when viewed at the resolution you consider optimal.

It is a good idea to keep to a general color scheme. If you use a certain set of colors for links in your header or even in your main body, it is a good idea to use the same colors for your sidebar to keep your site looking consistent and professional.  Also, it is a good idea to avoid using a background color that might make the link hard to see when you hover over it or once it has been visited.

Headlines make a Navigation Sidebar structured, neat, and visually appealing. They usually stand out more than normal Navigation Sidebar links and can separate different groups of related links.

Links are an important part of any website but remember that visitors to your website can feel overwhelmed by the number of links you put on your home page. If you have a deep site (one with lots of pages), consider using only a few links on the first page of the site that lead to other pages with links to more pages, etc. Don't try to link to every page in your site from your home page.

While changing the properties of a Hover Link, keep in mind what the properties you are choosing will look like against the background of the Headline and Links.

An interesting effect can be achieved if you alter the font size when the user holds their mouse cursor over a link (hovers). While this effect can be interesting, it may also be distracting if the size of the text when the user hovers is larger than the non-hover text, that Navigation Sidebar will jerk and jolt as the text resizes, which will affect the body content of the page.   To avoid this problem while still using larger hovered links, add a new row to the end of your links. Then, in a graphics editing program such as MS paint, create a thin horizontal bar of the same color as the background of your Navigation Sidebar, and alter the length of the bar such that it is as long as the longest link will be when viewed at the hover link font size.  Save and upload the image to your images folder, and enter the path/file name of the bar into the row that you just created. This will increase the width of the Navigation Sidebar to the length of the bar you created, but will appear not to have made any other changes to the Navigation Sidebar. Now, the body content will not be shifted when the link is hovered.


Visited links, like Hover Links, should suit the color scheme you've picked for your headlines and links. Make sure the color is visible and nice when a link is visited. Also, you can change the font itself or it's size for a neat effect. One idea is to make the font smaller, so it reduces the emphasis on the link.
















Last Modified: Dec 11, 2009
 

Copyright (c) 2009, FirstClass Depot