Joomla Templates Club 406,261 posts

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#190992

How do I create full page width modules (header & footer) to extend the entire width of my JA Argo website, like this:

http://joomlart.com/documentation/joomla-templates/

With the following specifications:
– full width header with background color module
– full width footer with background color module
– breadrumbs
– change T3 logo to my logo (linking to my designated URL)

I also noticed that the breadcrumbs is hidden on mobile/tablet view and the logo moves under footer text. I would like the option for both keep & hide on mobile/tablet view.

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

#507516

We have defined wrap css class to show full width, if you want it to show full width you can add it into header and footer php source code in templates/ja_argo/tpls/blocks

If you want to hidden position in devices you can use my way on the screenshot below

---

Attachments:

1. 

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#507875

Please provide more details…

I want two full page width module positions (masthead and footer) exactly like the ones on the T3 Typography page:
http://t3-framework.org/typography.html

JA Argo does not have either. I would like both features on my website.
Please help by providing details instructions. Thanks in Advance.

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

#507911

My below solution will help you to do that

1) Add masthead position

Open templates/ja_argo/tpls/default-content-left.php file

From


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


Change to


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

<?php $this->loadBlock ('masthead') ?>


2) Create masthead.php file templates/ja_argo/tpls/blocks/ folder

<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;
?>

<?php if($this->countModules('new_header')): ?>
<section class="container">
<jdoc:include type="modules" name="<?php $this->_p('new_header') ?>" style="T3Xhtml" />
</section>
<?php endif; ?>

3) Create new module and appear with masthead position

You can continue that with footer positon

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#508248

I was able to get both the masthead and footer to display full width.

The problem is only the footer remains full width on mobile devices. The masthead does not retain its full width.

here’s a preview:
http://www.imagebam.com/image/33a2c1280156398

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

#508264

Right now its difficult to guess the issue and give solution to you. It would be great if you can include url of your site, it would help to understand the issue and give you specific answers.

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#508297

I will send you a private message

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

#508319

<em>@joomdude808 392705 wrote:</em><blockquote>I will send you a private message</blockquote>

You can fix this problem by css as below

Open templates/ja_argo/css/bootstrap-responsive.css file

Add new script

@media (max-width: 767px) {
.t3-module .custom {
margin-left: -20px !important;
margin-right: -20px !important;
}
.custom .container {
margin-left: 5px !important;
margin-right: 5px !important;
}
}

[Author]

Posts