[CUSTOM] Add link side-by-side Register and Login

Hi guys

I will show you how to add a custom link to work side-by-side with the Register and Login buttons. This example is demonstrated on Corporate 2 template, but can be easily done with other GK template that have this feature.

For the example, i will add link to Joomla! Contact Component page. So, the first step is to create the link on source file. Open this file ../gk_corporate2/layouts/blocks/toolbar.php and find this line:

Code: Select all

<a href="<?php echo $this->baseurl(); ?>index.php?option=com_user&view=login" id="btn_login"><?php echo ($userID > 0) ? JText::_('GK_LOGOUT') : JText::_('GK_LOGIN'); ?></a>
            <?php endif; ?>

replace it with:

Code: Select all

<a href="<?php echo $this->baseurl(); ?>index.php?option=com_user&view=login" id="btn_login"><?php echo ($userID > 0) ? JText::_('GK_LOGOUT') : JText::_('GK_LOGIN'); ?></a>
            <?php endif; ?>
            <a href="<?php echo $this->baseurl(); ?>index.php?option=com_contact&view=contact&id=1&Itemid=78" id="btn_contact"><?php echo JText::_('Contact Us!'); ?></a>

On frontend, this would be the result:



It look good but not the best result, because if you click on tools button, the "Contact Us!" will be always there. Not a very good effect... So how to we change this and add the same fade effect to "Register" and "Login" button?

Open this file ../gk_corporate2/js/gk.script.js and find this line:

Code: Select all

var link_reg_fx = null;

replace it with

Code: Select all

var link_reg_fx = null;
var link_contact_fx = null;

Then find this line:

Code: Select all

if($('btn_register')) link_reg_fx = new Fx.Opacity($('btn_register'),{duration:300});

replace it with

Code: Select all

if($('btn_register')) link_reg_fx = new Fx.Opacity($('btn_register'),{duration:300});
if($('btn_contact')) link_contact_fx = new Fx.Opacity($('btn_contact'),{duration:300});


Finally, find this line:

Code: Select all

if($('btn_register')) link_reg_fx.toggle();

replace it with:

Code: Select all

if($('btn_register')) link_reg_fx.toggle();
if($('btn_contact')) link_contact_fx.toggle();


That's it!
Hope this may be useful for you guys.

Cheers

Thanks, Seichinha!

Cheers!

Maybe I'm a dummie, but I couldn't find the last line

if($('btn_register')) link_reg_fx.toggle();

!!!

The line that looks the most like mentioned says:

if($('btn_register')) link_reg_fx.start(opened ? 1 : 0);

Actually, the link "contact us!" works without this last step. Allthough it brings you to the first contact in contact list, not to the entire contact list. How to change that? And what does the last step (which I can't find) give as a result? Thank you for reply!

Nice one

I would appricate if you could show how to add a language switcher module in this place

I ran across this post while trying to add a menu in between tools and search. I could be mistaken, but I do not believe that the instructions listed in this forum are for the newer 2.5 templates. I wanted to post a quick followup to update how to add things to this area.

In the 2.5 template, the "tools" module position is not available for assignment. You can assign modules to the "search" position, but since the width of the "search" module position is fixed, it's a huge pain in the butt. I wanted put a new menu in this top area immediately to the left of the search menu. You have to make some small code modifications, but it's super easy.

First, locate navigate to the following file: templates/gk_corporate2/layouts/blocks/nav.php. Open this file and locate the following chunk of code:

Code: Select all

 <?php if( $this->modules('search') ): ?>
   <div id="gkSearch">
                  <jdoc:include type="modules" name="search" style="<?php echo $this->module_styles['search']; ?>" />
   </div>
   <?php endif; ?>   

Add the following line of code directly below this chunk of code

Code: Select all

    <jdoc:include type="modules" name="tools" />   

Second, navigate to the following file: templates/gk_corporate2/templateDetails.xml Open this file and add the following code to the area with the heading "<!-- Template specific Module Positions -->"

Code: Select all

<position>tools</position>

That's it! You should now be able to assign a menu to the "tools" position, and it will display to the immediate left of the search bar.

Hope this helps.

-Tommy