New Module Position in mainmenu Position.

Advanced and professional portal news Joomla template with community features and various content display layouts.
GK User
Wed Jun 05, 2013 4:19 pm
I followed the steps in the tutorial to create a new module position in the template.

The problem is that I can not locate the position where I want.

05-06-2013 17-13-31.jpg


My default.php code is:

Code: Select all
<?php

/**

 *

 * Default view

 *

 * @version             1.0.0

 * @package             Gavern Framework

 * @copyright         Copyright (C) 2010 - 2011 GavickPro. All rights reserved.

 *               

 */

 

// No direct access.

defined('_JEXEC') or die;

if($this->getParam("cwidth_position", 'head') == 'head') {

$this->generateColumnsWidth();

}

$allWidth = (int)$this->getParam('template_width','1240px') + 260;

$this->addCSSRule('.gkWrap { width: ' . $this->getParam('template_width','1240px') . '!important; }');

$this->addCSSRule('html { min-width: ' . $this->getParam('template_width','1240px') . '!important; }');

$this->addCSSRule('#all { width: ' . $allWidth . 'px !important; }');



$tpl_page_suffix = '';

if($this->page_suffix != '') {

   $tpl_page_suffix = ' class="'.$this->page_suffix.'"';

}

$tpl_name = str_replace(' ', '_', JText::_('TPL_GK_LANG_NAME'));

$user = JFactory::getUser();

// getting User ID

$userID = $user->get('id');

// getting params

$option = JRequest::getCmd('option', '');

$view = JRequest::getCmd('view', '');

// defines if register is active

define('GK_REGISTER', ($this->modules('register') ? $userID == 0 : false));

// defines if login is active

define('GK_LOGIN', $this->modules('login'));

// defines if com_users

define('GK_COM_USERS', $option == 'com_users' && ($view == 'login' || $view == 'registration'));

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

     xmlns:og="http://ogp.me/ns#"

     xmlns:fb="http://ogp.me/ns/fb#"

     xml:lang="<?php echo $this->API->language; ?>" lang="<?php echo $this->API->language; ?>">

<head>

       

    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

    <jdoc:include type="head" />

    <?php $this->loadBlock('head'); ?>

    <?php $this->loadBlock('cookielaw'); ?>

</head>

<body<?php echo $tpl_page_suffix; ?>>

   <!--[if IE 6]>

   <div id="gkInfobar"><a href="http://browsehappy.com"><?php echo JText::_('TPL_GK_LANG_IE6_BAR'); ?></a></div>

   <![endif]-->

   <?php $this->messages('message-position-1'); ?>

   <div id="all" class="gkMain gkWrap">

   <?php if($this->modules('banner_left')) : ?>

            <div id="leftBanner">

                <jdoc:include type="modules" name="banner_left" style="<?php echo $this->module_styles['banner_left']; ?>" />

            </div>

        <?php endif; ?>

        <?php if($this->modules('banner_right')) : ?>

            <div id="rightBanner">

                <jdoc:include type="modules" name="banner_right" style="<?php echo $this->module_styles['banner_right']; ?>" />

            </div>

        <?php endif; ?>      

   <div id="gkPage" class="gkMain gkWrap">

        <?php if(isset($_COOKIE['gkGavernMobile'.$tpl_name]) &&

              $_COOKIE['gkGavernMobile'.$tpl_name] == 'desktop') : ?>

              <div class="mobileSwitch">

            <a href="javascript:setCookie('gkGavernMobile<?php echo $tpl_name; ?>', 'mobile', 365);window.location.reload();"><?php echo JText::_('TPL_GK_LANG_SWITCH_TO_MOBILE'); ?></a>

             </div>

    <?php endif; ?> 

   

   

        <?php $this->loadBlock('logo'); ?>

       

        <div id="gkMenuWrap" class="clear">   

              <?php if($this->modules('topmenu1 or search') ) : ?>

              <div id="gkTopMenu">

                 <?php if($this->modules('topmenu1')) : ?>

                 <div id="gkTopMenu1">

                    <jdoc:include type="modules" name="topmenu1" style="<?php echo $this->module_styles['topmenu1']; ?>" />

                 </div>

                 <?php endif; ?>

                 

                 <?php if($this->modules('search')) : ?>

                 <div id="gkSearch">

                    <jdoc:include type="modules" name="search" style="<?php echo $this->module_styles['search']; ?>" />

                 </div>

                 <?php endif; ?>   

              </div>

            <?php endif; ?>

           <?php if($this->getParam('show_menu', 1)) : ?>

             <div id="gkMainMenu" class="clear">

               <?php

                  $this->menu->loadMenu($this->getParam('menu_name','mainmenu'));

                   $this->menu->genMenu($this->getParam('startlevel', 0), $this->getParam('endlevel',-1));

               ?>

             </div>

             <?php endif; ?>

             <?php if($this->generateSubmenu && $this->menu->genMenu($this->getParam('startlevel', 0)+1, $this->getParam('endlevel',-1), true)): ?>

             <?php if($this->getParam('show_menu', 1)) : ?>

            <div id="gkSubmenu" class="clear">

                <?php $this->menu->genMenu($this->getParam('startlevel', 0)+1, $this->getParam('endlevel',-1));?>

             </div>

             <?php endif; ?>

         <?php else: ?>

             

                <?php if($this->modules('middlemenu')) : ?>

                <div id="gkMiddleMenu" class="clear">

                   <jdoc:include type="modules" name="middlemenu" style="<?php echo $this->module_styles['middlemenu']; ?>" />

                </div>

                <?php endif; ?>

             

             <?php endif;?>

             

             <?php if($this->modules('breadcrumb or topmenu2')) : ?>               

             <div id="gkBottomMenu" class="clear">

                <?php if($this->modules('breadcrumb')) : ?>

                <div id="gkBreadcrumb">

                   <jdoc:include type="modules" name="breadcrumb" style="<?php echo $this->module_styles['breadcrumb']; ?>" />

                </div>

                <?php endif; ?>   

                

                <?php if($this->modules('topmenu2')) : ?>

                <div id="gkTopMenu2">

                   <jdoc:include type="modules" name="topmenu2" style="<?php echo $this->module_styles['topmenu2']; ?>" />

                </div>

                <?php endif; ?>

             </div>

             <?php endif; ?>

        </div>   

             

       <?php $this->messages('message-position-2'); ?>

       <div id="mainContent" class="gkWrap clear">

          <?php $this->loadBlock('header'); ?>

          

          <?php $this->loadBlock('top'); ?>

          

          <?php $this->loadBlock('main'); ?>

          

          <?php $this->loadBlock('user'); ?>

       </div>

    </div>

   

    <div id="gkBottomWrap" class="gkWrap clear">

        <?php $this->loadBlock('bottom'); ?>

    </div>

   

    <div id="gkFooter" class="gkWrap">

       <?php $this->loadBlock('footer'); ?>

    </div>

    </div>

   

   <?php if(GK_LOGIN && !GK_COM_USERS) : ?>   

   <div id="gkPopupLogin">   

      <div class="gkPopupWrap">

           <?php $this->loadBlock('tools/login'); ?>

      </div>

      </div>

   <?php endif; ?>

   

   <?php if(GK_REGISTER && !GK_COM_USERS) : ?>

   <div id="gkPopupRegister">   

      <div class="gkPopupWrap">

         <?php $this->loadBlock('tools/register'); ?>

      </div>

   </div>

   <?php endif; ?>

   

   <?php if((GK_REGISTER || GK_LOGIN) && !GK_COM_USERS) : ?>

   <div id="gkPopupOverlay"></div>

   <?php endif; ?>

   

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

</body>

</html>


Where should I put the following code??

Code: Select all
 <?php if($this->modules('social')) : ?>

                 <div>

                    <jdoc:include type="modules" name="social" style="<?php echo $this->module_styles['social']; ?>" />

                 </div>

                 <?php endif; ?>


I need CSS?
User avatar
Expert Boarder

GK User
Wed Jun 05, 2013 4:32 pm
You would need to place it just after the:
Code: Select all
<div id="gkMainMenu" class="clear">
               <?php
                  $this->menu->loadMenu($this->getParam('menu_name','mainmenu'));
                   $this->menu->genMenu($this->getParam('startlevel', 0), $this->getParam('endlevel',-1));
               ?>
             </div>

part, but then You need some css to make it work well, as gkMainMenu fills entire width. You would need to float it left, float new element right (with use of override.css). But this will mess with background element of menu in second row, so to fix that, You sholud move background defined in template.css:
Code: Select all
#gkMainMenu {

   height: 40px;

   overflow: hidden;

   background: transparent url('../images/style1/menu_item.png') repeat-x 0 0;

   border-bottom: 3px solid #dc2a0b;

}

to #gkMenuWrap element and position it correctly - a lot of custom css work.

Or, If You dont care about respinsive behavior, You could make #gkMenuWrap position relative, and then use css to position your new element absolute coresponding to bottom right corner of #gkMenuWrap.
User avatar
Moderator

GK User
Wed Jun 05, 2013 4:51 pm
Not much CSS.

I added in default.php el 'id'.

Code: Select all
<?php if($this->modules('social')) : ?>

                 <div id="gkSocial">

                    <jdoc:include type="modules" name="social" style="<?php echo $this->module_styles['social']; ?>" />

                 </div>

                 <?php endif; ?>


I added in template.css, the following


Code: Select all
#gkSocial {

   float: right;

   padding: 7px;
   
   background: transparent url('../images/style1/menu_item.png') repeat-x 0 0;

}


I can not take him to his position.

05-06-2013 17-50-03.jpg
User avatar
Expert Boarder

GK User
Wed Jun 05, 2013 9:00 pm
Almost what I have but I need a bit of background, any suggestions??

This is the code I have done.

Code: Select all
#gkMainMenu {

   height: 40px;

   overflow: hidden;

   background: transparent url('../images/style1/menu_item.png') repeat-x 0 0;

   border-bottom: 3px solid #dc2a0b;
   
   float: left;
   
}



/* Posicion Social */
    #gkSocial {

       float: right;

       padding: 7px;
       
       background: transparent url('../images/style1/menu_item.png') repeat-x 0 0;
      
      background-image: url('../images/style2/menu_item.png');

    }


Attached a screenshot

05-06-2013 21-58-20.jpg
User avatar
Expert Boarder

GK User
Wed Jun 05, 2013 10:22 pm
Now it looks better, but I still missing middle blue background

Code: Select all
#gkMainMenu {

   height: 40px;

   overflow: hidden;

   background: transparent url('../images/style1/menu_item.png') repeat-x 0 0;

   border-bottom: 3px solid #dc2a0b;
   
   float: left;

}

#gkSocial {

   height: 40px;

   overflow: hidden;

   background: transparent url('../images/style1/menu_item.png') repeat-x 0 0;

   border-bottom: 3px solid #dc2a0b;
   
   float: right;
   
   padding-right:10px;

}

#gkSocial > div {

   border-bottom: 1px solid #ff583b;

   height: 39px;

}


#gkMainMenu > div {

   border-bottom: 1px solid #ff583b;

   height: 39px;

}


http://sdp2014.sabiosdelpc.net/
User avatar
Expert Boarder

GK User
Thu Jun 06, 2013 8:41 am
Code: Select all
#gkMenuWrap {
overflow: hidden; background: transparent url('../images/style2/menu_item.png') 0 39px repeat-x;
}


should be close enough. If not, please write back :)
User avatar
Moderator

GK User
Thu Jun 06, 2013 1:54 pm
Perfect.
User avatar
Expert Boarder


cron