Joomla Templates Club 406,261 posts

[khalva Friend khalvaJoin date: July 2008Posts: 112Downloads:167Uploads:3 Thanks: 7]

#975682

Hello, could you assist me in adding new module position here: http://prntscr.com/csp083
So I can place an image there?

xiv5 demo website.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#975716

Hi

Edit this file /templates/ja_megastore/tpls/blocks/header.php and add new position block next to head-search position in this way

change :

<?php if ($headright): ?>
            <div class="col-xs-12 col-sm-8 col-md-9">
                <?php if ($this->countModules('head-search')) : ?>
                    <!-- HEAD SEARCH -->
                    <div class="head-search pull-left <?php $this->_c('head-search') ?>">
                        <jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
                    </div>
                    <!-- //HEAD SEARCH -->
                <?php if ($this->countModules('top-cart')) : ?>
                    <!-- TOPCART -->
                    <div class="top-cart pull-right">
                        <jdoc:include type="modules" name="<?php $this->_p('top-cart') ?>" style="raw" />
                    </div>
                    <!-- //TOPCART -->
                <?php endif ?>
            </div>
        <?php endif ?>

TO :

<?php if ($headright): ?>
            <div class="col-xs-12 col-sm-8 col-md-9">
                <?php if ($this->countModules('head-search')) : ?>
                    <!-- HEAD SEARCH -->
                    <div class="head-search pull-left <?php $this->_c('head-search') ?>">
                        <jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
                    </div>
                    <!-- //HEAD SEARCH -->
                <?php endif ?>
              <?php if ($this->countModules('midheader')) : ?>
                    <!-- TOPCART -->
                    <div class="midheader">
                        <jdoc:include type="modules" name="<?php $this->_p('midheader') ?>" style="raw" />
                    </div>
                    <!-- //TOPCART -->
                <?php endif ?>

                <?php if ($this->countModules('top-cart')) : ?>
                    <!-- TOPCART -->
                    <div class="top-cart pull-right">
                        <jdoc:include type="modules" name="<?php $this->_p('top-cart') ?>" style="raw" />
                    </div>
                    <!-- //TOPCART -->
                <?php endif ?>
            </div>
        <?php endif ?>

Edit this file /templates/ja_megastore/templateDetails.xml and add new position name into block

<position>midheader</position>

Then edit this file /templates/ja_megastore/css/custom.css ( if you do not have it create a new one )

and add style for your new position

.midheader {
margin-left:valueinpx;
margin-top:valueinpx:
}

Regards

---

Attachments:

1. 
2. 

[khalva Friend khalvaJoin date: July 2008Posts: 112Downloads:167Uploads:3 Thanks: 7]

#975785

Hello @pavit, thank you for your help.
The position is there now but it’s not responsive. Could you be so kind to take a look at this video that I have created so you can see the issue?

https://youtu.be/dVE2NAw0DwE

Regards,
Kiko

[khalva Friend khalvaJoin date: July 2008Posts: 112Downloads:167Uploads:3 Thanks: 7]

#976358

Hello, one more thing – after we make it responsive, how should we enable the option to enable and disable it via t3 layout options?

Regards,
Kiko

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#976428

Hi

Use the class head-search pull-left

<?php if ($this->countModules('midheader')) : ?>
                    <!-- HEAD SEARCH -->
                    <div class="head-search pull-left <?php $this->_c('midheader') ?>">
                        <jdoc:include type="modules" name="<?php $this->_p('midheader') ?>" style="raw" />
                    </div>
              <?php endif ?>

[khalva Friend khalvaJoin date: July 2008Posts: 112Downloads:167Uploads:3 Thanks: 7]

#976436

http://prntscr.com/ctu6ww
Here I’ve added the class.

Where should I add the code above?
Which is the file?

Thank you for your help 🙂

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#976445

Hi

You should change the class i suggested in my previous post with the new one i posted above
in this file /templates/ja_megastore/tpls/blocks/header.php

<?php if ($headright): ?>
            <div class="col-xs-12 col-sm-8 col-md-9">
                <?php if ($this->countModules('head-search')) : ?>
                    <!-- HEAD SEARCH -->
                    <div class="head-search pull-left <?php $this->_c('head-search') ?>">
                        <jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
                    </div>
                    <!-- //HEAD SEARCH -->
                <?php endif ?>
            <?php if ($this->countModules('midheader')) : ?>
                    <!-- HEAD SEARCH -->
                    <div class="head-search pull-left <?php $this->_c('midheader') ?>">
                        <jdoc:include type="modules" name="<?php $this->_p('midheader') ?>" style="raw" />
                    </div>
              <?php endif ?>
                <?php if ($this->countModules('top-cart')) : ?>
                    <!-- TOPCART -->
                    <div class="top-cart pull-right">
                        <jdoc:include type="modules" name="<?php $this->_p('top-cart') ?>" style="raw" />
                    </div>
                    <!-- //TOPCART -->
                <?php endif ?>
            </div>
        <?php endif ?>

[khalva Friend khalvaJoin date: July 2008Posts: 112Downloads:167Uploads:3 Thanks: 7]

#976447

Thank you but it’s worse now…

http://outletsportzona.com/xiv5/

http://prntscr.com/ctut2x

Mobile, responsive (issues):
https://youtu.be/iyDql_-ukEg

Regards,
Kiko

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#977557

@khalva: thought that the width / space in mobile layout is not enough for 3 modules display. I have disabled midheader position as my screenshot.

Hope it helps

---

Attachments:

1. 
2. 

[khalva Friend khalvaJoin date: July 2008Posts: 112Downloads:167Uploads:3 Thanks: 7]

#982511

This reply has been marked as private.

[khalva Friend khalvaJoin date: July 2008Posts: 112Downloads:167Uploads:3 Thanks: 7]

#982711

Hello 🙂

Kindly ignore all issues above and take a look only at:

" November 1, 2016 at 7:23 pm #982511"

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#982826

I fixed the problem on your site and you can see the solution from templates/ja_megastore/css/custom.css file

@media  (min-width: 1200px) {
    .head-search.pull-left-center {
        float: left;
        margin-left: 130px;
    }
}
@media  (max-width: 767px) {
    .top-cart.pull-right {
        right: 0px;
        position: absolute;
        top: 0px;
    }   
}

[khalva Friend khalvaJoin date: July 2008Posts: 112Downloads:167Uploads:3 Thanks: 7]

#982949

Hello Ninja, thank you for your help 🙂
Could you be so kind to assist me in fixing the mobile version of the website?
Kindly take a look at the screenshot:
http://prntscr.com/d2andz

Can you help me in centering this item, and also in putting some space above the item, because right now it is… sticked to the other item…

🙂

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#983135

Hi,

The width size on mobile is not enough for 3 modules display. I disabled midheader position on mobile layout: http://prntscr.com/d2ia7p

Regards

[khalva Friend khalvaJoin date: July 2008Posts: 112Downloads:167Uploads:3 Thanks: 7]

#983214

Hello, how did you change it? What exactly did you change in the code? I would like to disable midheader positon on tablet layout.

[Author]

Posts