Public Forums 71,145 posts

[agoh Friend agohJoin date: October 2014Posts: 11Downloads:3Uploads:3 Thanks: 4]

#201825

Is there an option to reduce the navbar width to fit with the main page’s layout? Is there also an otpion to reduce the footer width?

We were very happy with “purity ii”‘s fixed width layout, where the header fitted with the main page. But we have to jump to purity iii now while updating to joomla 3.3. I would be thankful for any hints.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#551816

Hi
yes you can change the width of main nav as well as footer size .
To change in footer
you need to edit footer.php file

purity_iiitemplatespurity_iiitplsblocksfooter.php

see this >>>> http://prntscr.com/4t04ql

Find the codes

<div class="<?php echo $this->countModules('newsletter') ? 'col-xs-12 col-md-8 col-lg-9' : 'col-xs-12' ?> copyright <?php $this->_c('footer') ?>">
<?php if ($this->getParam('t3-rmvlogo', 1)): ?>
<div class="poweredby text-hide">
<a class="t3-logo t3-logo-small t3-logo-light" href="http://t3-framework.org" title="<?php echo JText::_('T3_POWER_BY_TEXT') ?>"
target="_blank" <?php echo method_exists('T3', 'isHome') && T3::isHome() ? '' : 'rel="nofollow"' ?>><?php echo JText::_('T3_POWER_BY_HTML') ?></a>
</div>
<?php endif; ?>
<jdoc:include type="modules" name="<?php $this->_p('footer') ?>" />
</div>
<?php if ($this->countModules('newsletter')) : ?>
<div class="col-xs-12 col-md-4 col-lg-3 pull-right">
<jdoc:include type="modules" name="<?php $this->_p('newsletter') ?>" style="raw" />
</div>

Change the size of (copyrights >>)
col-xs-12 col-md-8 col-lg-9
and (newsletter >>)
col-xs-12 col-md-4 col-lg-3

Make sure the total width is 12 . so if one side col-lg-8 then on the 2nd side its should be col-lg-4 .

To change the width of main nav please add a screenshot and add your details in it , so that i can help you .
currently there no menu present on your site

Hope it helps you

[agoh Friend agohJoin date: October 2014Posts: 11Downloads:3Uploads:3 Thanks: 4]

#551844

Here are two screenshots. The first represents our old website, which used joomla 2.5 with purity ii. The second represents the current joomla 3.3. installation for testing purposes. This one should be like the old template with joomla 2.5. At least, the mainnav and footer should fit with the main page.

As far as I understood your advice and tested it, it only concerns the position of footer text, not the width of the whole footer. Am I right?

Thanks for your help!!

---

Attachments:

1. 
2. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#551847

<blockquote>As far as I understood your advice and tested it, it only concerns the position of footer text, not the width of the whole footer. Am I right? </blockquote>

Its for the width .
you can find everything in it . as i mentioned in my previous post you need to change the value of col to change width as per your need ,.

Now for the main nav the width is auto . because ita responsive layout and if you define a fixed width for it it will effect the layout in different devices . If you want to make it same like old template you need to modify files your self , such kind of work are not under JA Support T&C.

[agoh Friend agohJoin date: October 2014Posts: 11Downloads:3Uploads:3 Thanks: 4]

#551857

<em>@pankajsharma 448695 wrote:</em><blockquote>Its for the width .
you can find everything in it . as i mentioned in my previous post you need to change the value of col to change width as per your need</blockquote>

I have tried this, really! The only thing that was changing is the position of the text within the footer, not the footer itself.

<em>@pankajsharma 448695 wrote:</em><blockquote>
Now for the main nav the width is auto . because ita responsive layout and if you define a fixed width for it it will effect the layout in different devices . If you want to make it same like old template you need to modify files your self , such kind of work are not under JA Support T&C.</blockquote>

I have used the development tools from my chromium browser and detected that there is a div.container within the main nav, which exactly fits the margins of main page. Is there an option to give a different background color to this div.container, which overwrites or overlays the background color of the main nav? This would be a solution, because the main nav could remain in auto mode, if its color would be the same as the general background color, but the background color of the div.container would differ and converge with the logo color.

Thanks for your valuable help!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#551858

Hi
if you want to change the color of the main nav
add this css code into your custom.css file

/css/customl.css
if there is no custom.css file , create a file with name custom.css

.navbar-default {
background-color: #00669b
border-color: #005582
}

change the color code as per you need .
For the issue related to footer ,
Yes you can change the value to of the col of the position .
Template footer container has auto width same like the main nav .,

Both main nav and footer using same class .

add these css code in your custom.css file


.wrap {
margin-right: auto;
margin-left: auto;
padding-left: 20px;
padding-right: 20px;
} @media (min-width: 768px) {
.wrap {
width: 760px;
}
} @media (min-width: 992px) {
.wrap {
width: 980px;
}
} @media (min-width: 1200px) {
.wrap {
width: 1180px;
}
}

Clear cache and check main nav and footer width .

Let me know if it helps

1 user says Thank You to Pankaj Sharma for this useful post

1. agoh

[agoh Friend agohJoin date: October 2014Posts: 11Downloads:3Uploads:3 Thanks: 4]

#551868

The second code was the solution. Thank you so much. Nevertheless, there is a little new problem. See yourself: test.agoh.de The upper part of the body background has a black part, which seemingly was covered by the main navbar. Any idea, how to get rid of it or make it unseen?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#551885

Hello @agoh
this is the color of the body
you need to define body color for it .
like in this code

body {
background-color: #333333
}


For custom work help , Please upgrade your membership license so that i can assist you better .

1 user says Thank You to Pankaj Sharma for this useful post

1. agoh

[agoh Friend agohJoin date: October 2014Posts: 11Downloads:3Uploads:3 Thanks: 4]

#551951

Now the template looks great and similar to the old version. Thank you so much for your assistance.

[Author]

Posts