Jamroom Logo Jamroom 5 Core
is now Open Source!
Follow Jamroom on Twitter!

This document applies to Jamroom 3 only!
For current Jamroom 4 Documentation, visit the main Jamroom Documentation section.

Converting a Jamroom 2.x template set to a Jamroom 3.x Skin Index Modifying the Cobalt Javascript Dropdown Menu

How do I add buttons to my Jamroom navigation bar (Skin)?

Adding an item to the navigation bar is a two step process.  Steps for creating a custom page template to be used with this guide can be found in these two guides:

Adding New Templates - http://www.jamroom.net/Jamroom3_Adding_New_Templates
Creating Custom Pages Quickly - http://www.jamroom.net/Creating_Custom_Templates_Quickly

Adding the "selected" variable

First, open up the template that you will be adding to your navigation bar, and add the following code at the top of the page:

{assign var="selected" value="page_variable"}


Change the value of "page_variable" to a word (without spaces) that describes your page.  For example, if you were adding a contact page, you could use "contact" or "contact_us."  Save your template.

Adding the navigation bar item

Next, open up the jr_index_menu.tpl template, found in the (jamroom)/skins/Cobalt directory.  Add the following code where desired among the already existing menu items.

{if $selected == 'page_variable'}
<li><a href="URL TO PAGE" class="current">BUTTON TEXT</a></li>
{else}
<li><a href="URL TO PAGE">BUTTON TEXT</a></li>
{/if}


In this template, "page_variable" needs to be EXACTLY the same as the value you entered in the template you are adding to the navigation bar.  This value is case sensitive, so it must be exactly the same.

The "URL TO PAGE" needs to be replaced with the actual URL to the page that is being added to the navigation bar.  If you are using a custom template, then you need to use a URL similar to this:

{$JAMROOM_URL}/index.php?t=(template_name)

where the (template_name) is replaced by the name of your custom template, without the ".tpl" extension.  You are, by no means, limited to using only custom tempates.  You can link to URL you wish.

Finally, "BUTTON TEXT" needs to be replaced with the text that you would like to appear on the button on the navigation bar.

Save your templates and upload them to your Jamroom site, and your new buttons will be added to the navigation bar.

How do I add buttons to my Jamroom navigation bar (Theme)?

You can add/change navigation bar buttons similarly for Jamroom themes.  In the default Jamroom theme, Cobalt, the artist/member theme menu is contained in the menu.tpl file inside the themes/Cobalt directory.  Modifying this navigation bar is slightly more advanced and in-depth, because it often requires checking for certain requirements in order to have a button display.  For instance, if a quota does not allow songs to be added (i.e. member quotas) then you typically do not want to add an Audio button to show in the member profile navigation bar.  It is recommended that you check out the other navigation bar buttons in the menu.tpl file to get an idea of how these requirements work and how you can implement them with your new button.  Generally, however, each button should be similar to this:

      {if $OUTPUT_FILENAME == "page_being_viewed.php" || $selected == 'page_variable'}
      <li><a href="URL TO PAGE" class="current">BUTTON TEXT</a></li>
      {else}
      <li><a href="URL TO PAGE">BUTTON TEXT</a></li>
      {/if}


Overall, each button is constructed similarly to the buttons in the skin template navigation bar.  You should note, however, the extra variable: "page_being_viewed.php".  This variable should be replaced with the filename of the page that the URL of the button refers to.  For instance, if the "URL TO PAGE" is "audio.php", then the "page_being_viewed" should also be "audio.php".  The $OUTPUT_FILENAME variable will output the filename of the current file being viewed.

Save your templates and upload them to your Jamroom site, regenerate your themes, and your new buttons will be added to the artist/member profile navigation bar.


Converting a Jamroom 2.x template set to a Jamroom 3.x Skin page 117 of 185 Modifying the Cobalt Javascript Dropdown Menu
Solutions Products Support Community Company
Social Media Platform
Social Networking Software
Musician Website Manager
Community Builder
Jamroom 5
Jamroom 5 Modules
Jamroom Marketplace
Support Forum
Documentation
Support Center
Contact Support
Community Forum
Member Sites
Developers
About Us
Contact Us
Privacy Policy
©2003 - 2024 The Jamroom Network