Swapping module positions

Hey guys!

I would like to change the following module positions:

The TOP NAV should be displayed right aligned at the CART position.
And the LOGO position should be displayed at the original TOP NAV-position.

Any suggestions how I can get this issues fixed?

Thank you very much for your help in advance!

Greetings
Ingo

I'm not sure whether swapping module positions is the best way, maybe you just should add the new ones according to this tutorial » How to add a new module position ? – GavickPro Documentation

Thank you for the tutorial.
I figured it out to set up these 2 new module positions - but somehow the positioning doesnot work as I expected.

Check: http://www.cool-o-mat.com/zentrum/cms/

The Logo module at the top left is cool so far - but I need the navigation beneath to start below the logo - not overlapping.

That's the code I put into default.php:

Code: Select all

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


I have implemented these lines of code to the custom.css:

Code: Select all

.logo {
   float: right;
   padding-left: 0;
        margin-bottom:100px;
}

But the margin doesnot affect anything at all

Then I wanted to set the topnav from its original position to the cart position.
So I set up topnav2 in the default.php like this:

Code: Select all

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


And added this code to the custom.cc:

Code: Select all

.topnav2 {
   float: right;
   height: 38px;
   line-height: 38px;
}

But the topnav still appears at the left side under the logo :-/

Bildschirmfoto 2014-07-03 um 10.03.09.png

Hey guys!

After setting up the new module position, I am running into the following two issues:

1. The main-menu-links do not work anymore if the logo is visible
2. the main-menu runs UNDER the logo - should be below the logo, I think...

See the screenshot for details.
It seems that the logo-position is going from left to right over the whole page.

So if we can manage the main-menu to flow down about 10-20 px there must be no overlayaing and the links should work again.

Any suggestions?

Your new module position is called 'kontakt' ? If yes probably the code is not added properly because instead of generated HTML code I see just <jdoc> declaration in your website source. I see that you add position with different name but in your code there is also 'kontakt' code which probably cause problems - please remove this part.

these are the adjustments made to the code - wich one of them should I delete?

gk.const.php:

Code: Select all

   'breadcrumb' => 'none',
   'lang' => 'none',
   'login' => 'none',
   'footer_nav' => 'none',
   'header' => 'none',
   'cart' => 'none',
   'search' => 'none',
   'article_inset' => 'none',
   'topnav' => 'none',
   'usermenu' => 'none',
    'kontakt' => 'gk_style',

   
   'mainbody' => 'gk_style',
   'mainbody_top' => 'gk_style',
   'mainbody_bottom' => 'gk_style',
   
   'sidebar' => 'gk_style',
   'inset' => 'gk_style',
   'top1' => 'gk_style',
   'top2' => 'gk_style',
   'bottom1' => 'gk_style',
   'bottom2' => 'gk_style',
   'bottom3' => 'gk_style',
   'bottom4' => 'gk_style',
   'bottom5' => 'gk_style'

default.php:

Code: Select all

 <header id="gkHeader"<?php if(!$this->API->modules('breadcrumb')) : ?> class="nobreadcrumb"<?php endif; ?>>
       <div id="gkHeaderTop">
          <div class="gkPage">
            <?php if($this->API->modules('topnav')) : ?>
            <div id="gkTopMenu">
               <jdoc:include type="modules" name="topnav" style="<?php echo $this->module_styles['topnav']; ?>" />
            </div>
            <?php endif; ?>
                 
            <?php if($this->API->modules('cart')) : ?>
            <div class="newstyle">
            <jdoc:include type="modules" name="myposition"
            style="<?php echo $this->module_styles['newstyle']; ?>" />
            </div>
            <?php endif; ?>

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


                <?php if($this->API->modules('search')) : ?>
                <i class="gk-icon-search" id="gkSearchBtn"></i>
                <?php endif; ?>
         </div>
      </div>   
      

template-details.xml:

Code: Select all

          <!-- Template specific Module Positions -->
                    <position>breadcrumb</position>
                    <position>login</position>
                    <position>footer_nav</position>
                    <position>topnav</position>
                    <position>cart</position>
                    <position>header</position>
                    <position>kontakt</position>

                   

I have attached all necessary files to this post to make it easier...

The "Kontakt" position should not be deleted as I want it to be exactly where the "cart" position is to display a little envelope-icon for contact-function.

Code: Select all

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

I can't understand this part…

What is the name of position which you are trying to add? You've mixed here mypositions with mystyle and kontakt so please decide on one name then it will be much easier to help you.

I wanted to create the module position KONTAKT at the same position as the original CART position was located.

In this new position I just want to display custom HTML-modules - as at the standard-config every module changes to the shopping cart, when published to cart-position.

Now I have set up everything new from scratch.
Both new positions "contact" and "logo" are visible - but they are not at the position needed.

I have used these css-infos at "template.css" (should be the same like topNav and Cart - because "logo" should appear at the "topNav" and "contact" at the "card"-position):

for "kontakt":

Code: Select all

/* Kontakt */
#kontakt {
   float: right;
   height: 38px;
   line-height: 38px;
     margin: 0 24px 0 0;
}

for "logo"

Code: Select all

/* Logo neu */
#logo {
   float: left;
   margin: 0 24px 0 0;
   padding: 0;
   text-indent: -999em;
   text-shadow: none;
}
#logo img {
   display: block;
   margin: 0;

But in the end nothing at all helps - the modules actually look up at the slideshow position and kill the whole header-layout.

Maybe I can send you the logins to the backend via PM?

The best way is jus to copy original code from cart and just replace 'cart' word with 'kontakt' - this will add the regular position instead of cart.

That's what I did

If you only change name the content should be visible on your website. There is only necessary to add proper styles to show this area in right way. I think the best that you can do is revert your previous changes and only modify this cart area. Right now it is impossible to find our where is the problem.

Okay - I have reverted everything - again...

Now the positions are cool - and the solution for everything might be, just to change the "cart" module-code in default.php

I have replaced this code:

Code: Select all

 <?php if($this->API->modules('cart')) : ?>
            <div id="gkCart">
               <span id="gkCartCounter"><?php echo JText::_('GK_TPL_LOADING'); ?></span><i class="gk-icon-cart-add"></i>
            </div>
            
             <?php $this->layout->loadBlock('tools/cart'); ?>
            <?php endif; ?>

With this code:

Code: Select all

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

I am okay with the result - there is only ONE thing left to be fixed:

How can I put the navigation bar down by 30 px so that Logo and the Envelope in the Top-Positions do not overlay the navigation?
Here's the link again: http://cool-o-mat.com/zentrum/cms/

Please add this code to override.css file in root/templates/gk_template_name/css directory :

Code: Select all

#gkHeaderNav { top: 60px }


and then just remember to enable "Use override CSS" option in template advanced settings tab.

Brilliant!
That moved the nav totally correct.

But now there's another little issue facing up:
Richt above the navigation there seems to be a transparent part (visible if you scroll down the page). The contents scrolled show up for about 50% of the free white space above the nav - then there is a white area where the contents are not visible (see screenshot).

Bildschirmfoto 2014-07-19 um 16.04.35.png

I need this white space to go down until the upper border of the nav.

Thank you so much!

Please also use this code :

Code: Select all

#gkHeaderTop{ height: 60px }

Hey there!
Happily ever after this project seems to come to an end now.

Shortly prior finish I was running in one little last issue:

If you are zooming the windowsize smaller, there is that certain point, when the normal navi collapses to the mobile version. At exactly this point the blue bar behind the navigation gets thicker.

How can I get the bar to be fixed to the exact height like with the normal navigation?

Looking forward to your reply & thank you in advance!!!!

I tried this code in custom.css - but did not have any effect at all...

Code: Select all

.gkMobileMenu{
   height: 38px;
   line-height: 38px;
}


Please add this code to override.css file in root/templates/gk_template_name/css directory :

Code: Select all

#gkHeaderNav { min-height: [value]px }


This should force minimum height for menu bar.