Add a New module Position

Hello, I would like to add a new position module in my website that show a particular HTML code. That module should appear between LOGO and TOPNAV (see picture attached). I saw this post:

https://www.gavick.com/documentation/jo ... -position/

But how to tell the system that I want that position ?

Thanks in advance

I added this code to default.php

Code: Select all

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

Then I went into template.css and added this one:

Code: Select all

/* Chat Position */
#gkchat{ float: left; margin-top: 11px; margin-left: 30px; width: 193px; height: 53px;}

Then I changed the position of my Live Chat Module to chat ... but nothing appeared. What I am missing ?

Hi

Code looks ok. Please tell me Your site's url. Module is probably there but hidding behind something.

Here it is http://goo.gl/68vL5

Can you pls tell me what software to use to design a web position like this one ? I mean how to know where are pixel position excatly in a whole page ?

Hi

All I'm using is Firebug for Firefox. With this extension I'm able to add/modifie css live and observe changes.

About position. Please send me an ftp access, code is not displaying in the page. Are You sure there is a module placed in "chat" position ?

Check out your PM for credentials.

Yes, the module is in chat position, I checked it out. Like Fireburg but there is nothing much more user friendly ? I mean something that if I wrote a piece of whatever CSS it show me on the screen where exactly and how it is placed ? Something by pixel by pixel. Dreamweaver ?

Hi

I think Dreamweaver can make it, but I haven't been using that for ages so I cannot tell how to make it the best way. Anyway there were a reason why I've stopped using it There is nothing better than a Notebook and manual code writting.

Please check the ftp access You've send me. I cannot log in. Everything looks ok in configuration.

Hello, ftp credentials are ok, I need to eneble you current IP address. There's no other ways.

Code is ok, I know. But I need to spot where to put it in the default.php file. I mean after which DIV position so it can appear after the LOGO. Then I will set some CSS after.

Look the problem now are:

1. Do not understand how to code CSS correctly so the new module shows up.
2. If you open the home page with the /?tp=1 at the end you will see all positions even the GKchat (does not appear without the code just written - maybe hidden ?)
3. Where to put the DIV (choose the right div on DEFAULT PHP file)

TEMPLATE .css

Code: Select all

/* Logo  */
h1#gkLogo { margin: 0; padding: 0; width: 193px; height: 50px; float: left; }
h1#gkLogo a img { display: block; height: 50px; margin: 0; width:193px; top: 0; left:0; }
h1#gkLogo a.cssLogo { background: url('../images/logohome.png') no-repeat 0 0; display: block; height: 53px; margin: 0; text-indent: -999em; width:193px; top: 0; left:0; z-index: 1001; }

h1.gkLogo.text { width: auto; float: left; margin: 0; }
h1.gkLogo.text a { display: block; font-size: 24px; line-height: 35px; font-weight:normal; text-indent: 0; float: left; }
h1.gkLogo.text a { padding: 0; width: auto!important; }
h1.gkLogo.text a > span { color: #000; padding: 0 7px; display: block; font-size: 24px; line-height: 35px; float: left; }
h1.gkLogo.text .gkLogoSlogan { font-size: 11px!important; line-height: 35px; color: #111!important; margin: 0 0 0 8px; height: 45px; display: block; float:left; }

/* Chat Position */
h1#gkchat{ margin: 200px 0 0 0; padding: 0; display:block; width: 400px; height: 300px; float: left;  }


DEFAULT.PHP

Code: Select all

<body<?php echo $tpl_page_suffix; ?>>
   <?php if($this->browser->get('browser') == 'ie6' && $this->getParam('ie6bar', '1') == 1) : ?>
   <div id="gkInfobar"><a href="http://browsehappy.com"><?php echo JText::_('TPL_GK_LANG_IE6_BAR'); ?></a></div>
   <?php endif; ?>
           <?php if(isset($_COOKIE['gkGavernMobile'.JText::_('TPL_GK_LANG_NAME')]) &&
                  $_COOKIE['gkGavernMobile'.JText::_('TPL_GK_LANG_NAME')] == 'desktop') : ?>
                  <div class="mobileSwitch gkWrap">
                <a href="javascript:setCookie('gkGavernMobile<?php echo JText::_('TPL_GK_LANG_NAME'); ?>', 'mobile', 365);window.location.reload();"><?php echo JText::_('TPL_GK_LANG_SWITCH_TO_MOBILE'); ?></a>
                 </div>
            <?php endif; ?>        
   <div id="gkPage" class="gkWrap">
 
      <div id="gkPageWrap">
           <div id="gkPageTop" class="clearfix<?php if($this->getParam('top_color', 'dark') == 'dark') echo ' dark'; ?>">
              <?php $this->loadBlock('logo'); ?>
             
              <?php if($this->modules(‘chat’)) : ?>
              <div id="gkchat">
              <jdoc:include type="modules" name="chat" style="<?php echo $this->module_styles['chat']; ?>" />
              </div>
              <?php endif; ?>
             
              <div id="gkMainMenu">

Hi

Ok. Lets try with guiding You throught this than. I cannot tell css part Yet, becuase need to see module block to tell.

Please replace in default.php the entered code:

Code: Select all

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


to

Code: Select all

<div id="gkchat">
              <jdoc:include type="modules" name="chat" />
</div>


having it like that I'm certain we will be able to see layer at least.

Okay now it appear. I put the DIV code before the logo because after it comes under the first line (between the logo and search boxes and the main manu).

Now, how to put logo first and then the chat module ?

Code: Select all

<div id="gkPage" class="gkWrap">
 
      <div id="gkPageWrap">       
           <div id="gkPageTop" class="clearfix<?php if($this->getParam('top_color', 'dark') == 'dark') echo ' dark'; ?>">             
           <div id="gkchat"> <jdoc:include type="modules" name="chat" /> </div>
           <?php $this->loadBlock('logo'); ?>          
           <div id="gkMainMenu">
                 <?php
                    $this->menu->loadMenu($this->getParam('menu_name','mainmenu'));
                     $this->menu->genMenu($this->getParam('startlevel', 0), $this->getParam('endlevel',-1));
                 ?>

the template.css now is as follow

Code: Select all

#gkchat{ margin: 0 0 0 0; padding: 0px; display: visible; width: 140px; height: 53px; float: left;  }

Using Dreamwear was much more simple (than Firebug) to identify CSS style and act on it in Real Time. So I was able to to what you see now.

Unfortunatley the topnav position on the rigt goes down one line (instead in Dreamweaver I see everything in line).

So ?

Code: Select all

/* Chat Position */
#gkchat{float: left; margin: 0 -390px 0 230px; width: 100px; height: 53px;};

/* Logo  */
h1#gkLogo { margin: 0; padding: 0; width: 193px; height: 50px; float: left; }
h1#gkLogo a img { display: block; height: 50px; margin: 0; width:193px; top: 0; left:0; }
h1#gkLogo a.cssLogo { background: url('../images/logohome.png') no-repeat 0 0; display: block; height: 53px; margin: 0; text-indent: -999em; width:193px; top: 0; left:0; z-index: 1001; }

h1.gkLogo.text { width: auto; float: left; margin: 0; }
h1.gkLogo.text a { display: block; font-size: 24px; line-height: 35px; font-weight:normal; text-indent: 0; float: left; }
h1.gkLogo.text a { padding: 0; width: auto!important; }
h1.gkLogo.text a > span { color: #000; padding: 0 7px; display: block; font-size: 24px; line-height: 35px; float: left; }
h1.gkLogo.text .gkLogoSlogan { font-size: 11px!important; line-height: 35px; color: #111!important; margin: 0 0 0 8px; height: 45px; display: block; float:left; }

/* Page top - dark */
#gkPageTop.dark { margin: -39px -35px 0 -35px; padding: 39px 35px 0 35px; background: #151515; }
#gkPageTop.dark h1#gkLogo a.cssLogo { background-image: url('../images/logo_dark.png')!important; }
#gkPageTop.dark h1.gkLogo.text a > span { color: #fff; }
#gkPageTop.dark h1.gkLogo.text .gkLogoSlogan { color: #eee!important; }
#gkPageTop.dark #gkTopNav li,
#gkPageTop.dark #gkButtons a { border-left: 1px solid #343434; font-weight: bold; }
#gkPageTop.dark #gkTopNav li:first-child { border-left: none; }
#gkPageTop.dark #gkTopNav li a,
#gkPageTop.dark #gkButtons a { color: #999; }
#gkPageTop.dark #gkTopNav li a:hover,
#gkPageTop.dark #gkButtons a:hover { color: #eee; }
#gkPageTop.dark #gkMainMenu > div > ul > li > a { font-size: 14px; }
#gkPageTop.dark #gkMainMenu > div > ul > li:first-child > a { padding-left: 0px; }
#gkPageTop.dark #gkSearch #mod-search-searchword { border: 1px solid #151515; }


Hi

Please try use a different method to position this new module. Add this code and than play with top and right values to set it in a right place:

Code: Select all

#gkPageTop { position: relative; }

#gkchat { position: absolute; top: 0; right: 0; margin: 0; }


Got it!

I changed the code in your way then adding a left parameter (as below) and everything goes fine now.

Thank you very much, highly appreciated.

Code: Select all

#gkchat { position: absolute; top: 0; left: 230px; margin: 0; }

Hi

No problem. This is why I'm here for