Elvesocial - new menu

Can someone point me in the right direction?

Trying to change the header to reflect the attached.

Many thanks

J

Hi

It's considerate customization, but here's a good start:

Open this file ../templates/gk_elvesocial/layouts/blocks/mainnav.php

find this code:

Code: Select all

<div id="top-nav" class="clearfix">

   <?php
      $siteName = $this->sitename();
      if ($this->getParam('logoType')=='image'):
   ?>
   
   <h1 class="logo">
      <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
   </h1>
   
   <?php else : ?>
      
      <?php
         $logoText = (trim($this->getParam('logoType-text-logoText'))=='') ? $config->sitename : $this->getParam('logoType-text-logoText');
         $sloganText = (trim($this->getParam('logoType-text-sloganText'))=='') ? JText::_('SITE SLOGAN') : $this->getParam('logoType-text-sloganText');
      ?>
   
   <div class="logo-text">
      <h1><a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a></h1>
      <p class="site-slogan"><?php echo $sloganText;?></p>
   </div>
         
   <?php endif; ?>
   
   
    <?php if( $this->countModules('login') || $register_bool || ($this->_tpl->params->get('tools_button') == 1) ) : ?>
      <div id="gk-tools">
         <div>
            <?php if($this->countModules('login')) : ?>
            <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; ?>
   
            <?php if($register_bool) : ?>
            <a href="<?php echo $this->baseurl(); ?>index.php?option=com_user&view=register" id="btn_register"><?php echo JText::_('GK_REGISTER'); ?></a>
            <?php endif; ?>

            <?php if($this->_tpl->params->get('tools_button') == 1) : ?>
            <a href="#" id="btn_tools"><?php echo JText::_('GK_TOOLS'); ?></a>
            
            <div class="gk_hide">
               <div class="gk_popup-hide" id="popup_tools">
                  <?php $this->loadBlock('usertools/tools') ?>
               </div>
            </div>
            <?php endif; ?>
         </div>
      </div>
      <?php endif; ?>
   
   
      <!-- POPUPS -->
      <?php $this->loadBlock('usertools/login'); ?>
      <?php $this->loadBlock('usertools/register'); ?> 
      <!-- //POPUPS -->

   
   <div id="gk-mainnav" class="clearfix">
   <?php if (($gkmenu = $this->loadMenu())) $gkmenu->genMenu ($this->getParam('startlevel',0), $this->getParam('endlevel',-1)); ?>
   </div>
   
   <?php if ($this->hasSubmenu() && ($gkmenu = $this->loadMenu())) : ?>
   <div id="gk-subnav" class="clearfix">
      <?php $gkmenu->genMenu (1); ?>
   </div>
   <?php endif;?>




replace it with

Code: Select all

<div id="top-nav" class="clearfix">
   <div id="topchild">
   <?php
      $siteName = $this->sitename();
      if ($this->getParam('logoType')=='image'):
   ?>
   
   <h1 class="logo">
      <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
   </h1>
   
   <?php else : ?>
      
      <?php
         $logoText = (trim($this->getParam('logoType-text-logoText'))=='') ? $config->sitename : $this->getParam('logoType-text-logoText');
         $sloganText = (trim($this->getParam('logoType-text-sloganText'))=='') ? JText::_('SITE SLOGAN') : $this->getParam('logoType-text-sloganText');
      ?>
   
   <div class="logo-text">
      <h1><a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a></h1>
      <p class="site-slogan"><?php echo $sloganText;?></p>
   </div>
         
   <?php endif; ?>
   
   
    <?php if( $this->countModules('login') || $register_bool || ($this->_tpl->params->get('tools_button') == 1) ) : ?>
      <div id="gk-tools">
         <div>
            <?php if($this->countModules('login')) : ?>
            <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; ?>
   
            <?php if($register_bool) : ?>
            <a href="<?php echo $this->baseurl(); ?>index.php?option=com_user&view=register" id="btn_register"><?php echo JText::_('GK_REGISTER'); ?></a>
            <?php endif; ?>

            <?php if($this->_tpl->params->get('tools_button') == 1) : ?>
            <a href="#" id="btn_tools"><?php echo JText::_('GK_TOOLS'); ?></a>
            
            <div class="gk_hide">
               <div class="gk_popup-hide" id="popup_tools">
                  <?php $this->loadBlock('usertools/tools') ?>
               </div>
            </div>
            <?php endif; ?>
         </div>
      </div>
      <?php endif; ?>
   
   
      <!-- POPUPS -->
      <?php $this->loadBlock('usertools/login'); ?>
      <?php $this->loadBlock('usertools/register'); ?> 
      <!-- //POPUPS -->

   
   <div id="gk-mainnav" class="clearfix">
   <?php if (($gkmenu = $this->loadMenu())) $gkmenu->genMenu ($this->getParam('startlevel',0), $this->getParam('endlevel',-1)); ?>
   </div>
   
   <?php if ($this->hasSubmenu() && ($gkmenu = $this->loadMenu())) : ?>
   <div id="gk-subnav" class="clearfix">
      <?php $gkmenu->genMenu (1); ?>
   </div>
   <?php endif;?>
</div>


Them add this classes on template.css file:

Code: Select all

#topchild {background: #03304f;width:100%;height:90px;margin-top: 20px;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding: 0 20px}
#top-nav {height: 160px!important}
#gk-mainnav {margin-top: 55px!important;}
#gk-mainnav div {float:right}


So it should be something like this:



But be ware that border radius attribute it's CSS3 and IE doesn't support it.

Hope this can help you.

Cheers

Thanks so much for that Paulo!

I'll give it a try.

What will happen in IE?

Thanks

J

It will not show round corners.
If you want to insure it on IE, you need to use image bg and div structure similar to this:

Code: Select all

<div id="topchild-wrapper">
   <div id="topchild-top">
        <span class="bg-left"></span>
    </div>
   <div id="topchild-middle">
...
   </div>
   <div id="topchild-bottom">
        <span class="bg-left"></span>
   </div>
</div>



Cheers

Thanks for that. WHere would I place that code?

Do I need to create a background image?

Thanks again for your help.

J