remove or decrease space between top & header sections

[Michael]

Evening everyone!

I just started working on a new site.  Fresh install of Joomla 3.2.2 and Gantry Framework template bundle 4.1.20.
I have successfully managed to remove the space between the custom HTML module I created for a custom banner and the top of the page.
What I am having difficulty doing is removing, or at the very least, further decreasing the space between the bottom of the banner in the top section and the built in gantry menu in the header section.
I have used firebug to try and figure it out but no matter what I seem to add or remove, padding and margin wise, I can't seem to find the right section to edit.  If you guys could help me out here I would greatly appreciate it.

So far the only thing up on the site is the custom html module with the banner, that's how new this project is.  Thanks in advance for your help.

http://kolovos.n8solutions.org

regards,

Michael

[Miguel Barjum]

Try using the themes admin panel, go to themes then click on edit, since its a framework you probably will find a good admin panel for the theme, if no luck just let me know

> --
> --
> You received this message because you are subscribed to the Google
> Groups "Gantry Framework for Joomla Users" group.
> To post to this group, send email to
> gantry-framework...@googlegroups.com
> To unsubscribe from this group, send email to
> gantry-framework-for-j...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
>  
> Gantry Framework Homepage: http://www.gantry-framework.org
>  
> ---
> You received this message because you are subscribed to the Google Groups "Gantry Framework for Joomla Users" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to gantry-framework-for-j...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.

[Michael]

Hello Miguel,

Thank you for the reply but I'm not sure I understand.  Please clarify your statement a little more please.  To clarify what it is that I am interested in doing I've attached a picture of the site http://kolovos.n8solutions.org.

regards,

Michael

On Monday, February 24, 2014 1:58:51 AM UTC+2, Miguel Barjum wrote:

Try using the themes admin panel, go to themes then click on edit, since its a framework you probably will find a good admin panel for the theme, if no luck just let me know
On Feb 23, 2014 3:55 PM, "Michael" <mdko...@gmail.com> wrote:
>
> Evening everyone!

> I just started working on a new site.  Fresh install of Joomla 3.2.2 and Gantry Framework template bundle 4.1.20.
> I have successfully managed to remove the space between the custom HTML module I created for a custom banner and the top of the page.
> What I am having difficulty doing is removing, or at the very least, further decreasing the space between the bottom of the banner in the top section and the built in gantry menu in the header section.
> I have used firebug to try and figure it out but no matter what I seem to add or remove, padding and margin wise, I can't seem to find the right section to edit.  If you guys could help me out here I would greatly appreciate it.
>
> So far the only thing up on the site is the custom html module with the banner, that's how new this project is.  Thanks in advance for your help.
>
> http://kolovos.n8solutions.org
>
> regards,
>
> Michael
>
> --
> --
> You received this message because you are subscribed to the Google
> Groups "Gantry Framework for Joomla Users" group.
> To post to this group, send email to

> gantry-framework-for-joomla-us...@googlegroups.com

> To unsubscribe from this group, send email to

> gantry-framework-for-joomla-users+unsubscribe@googlegroups.com

> For more options, visit this group at
> http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
>  
> Gantry Framework Homepage: http://www.gantry-framework.org
>  
> ---
> You received this message because you are subscribed to the Google Groups "Gantry Framework for Joomla Users" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to gantry-framework-for-joomla-users+unsubscribe@googlegroups.com.

[Michael]

Thanks to any of you who looked at this.  I was able to find a solution.

[Paul Blackburn]

Congratulations on sorting the problems out Michael.
Could you share the solutions to both removing the space at the top of the Header and below it please

Thanks

Paul

[Michael]

Hello Paul,

Here is the code I added to my gantry-custom.css file to achieve what I did.  Hope it helps!  Maybe someone else can recommend a better way to do it but that's how I was able to accomplish it.

#rt-top .rt-block{padding: 0px; margin: 0px;}
#rt-top-surround, #rt-header .rt-container{margin:0px; padding:0px;}
#rt-top .module-content p {margin: 0;}
#rt-header .gf-menu {margin: 0px auto;}

regards,

Michael

[Paul Blackburn]

Thanks for posting your solution Michael, I really appreciated the time you've taken to do that.

In Joomla 2.5 there seems to be a clear point in the index.php where the link to the gantry-custom.css is made.

The site I'm trying to do the same thing in a site that uses Joomla 3.2 and I can't work out where/how to connect the gantry-custom.css in the index.php.

Could you explain what you changed in index.php to pick up the gantry-custom.css please.


Regards

Paul

[Michael]

Hello Paul,

I didn't change anything in the index.php.  All I did was place the code I gave you in to the gantry-custom.css file for my Joomla 3.2 site.

regards,

Michael

[Michael]

Paul,

I wanted to add one last thing for you after re-reading your post.  You don't tell gantry to pick up the gantry-custom.css file.  All you have to do is create the file and place it here:
yourdomain.com/templates/gantry/css
Just remember that gantry in the above example refers to the folder for the template which you want to modify with the gantry-custom.css file.
After you place it there clear all your caches, i.e. the gantry cache, joomla cache and your browser cache.  Then the changes should be picked up by the template.  If you make more changes to the gantry-custom.css file and don't see the changes reflected on the site be sure to repeat a clean of all the cache's before you assume the changes you made were incorrect.

regards,

Michael

On Wednesday, February 26, 2014 12:53:25 PM UTC+2, Paul Blackburn wrote:

[Paul Blackburn]

Hi Michael,

OK, I now realise the custom css file has to be called gantry-custom.css for the system to pick it up - my fault.

However, there are still spaces at the top and bottom of the header on the site I'm working on unlike your site.

Here's the link: http://poetrymatrix.org/stanholt/

Any ideas?

Paul

[Michael]

One last thing, if you're going to work on building your own site you're going to want to install something like Firebug for Firefox so that you can view and modify the code on your site to see what works and what doesn't.

https://getfirebug.com/enable

regards,

Michael

[Michael]

Hello Paul,

I had posted this for you last night but just saw my response didn't get posted for one reason or another.  In any case, when looking over your site I made a few observations.  I saw you have copied my gantry-custom.css file verbatim to try and get the changes you wanted on your site. I also noticed that you used the Gantry Rocket Launcher to setup your Joomla site.  While both of those things are just fine you need to realize that because of the way the Gantry Framework works my gantry-custom.css file won't have the same effect on your site as it does on mine because I may have assigned different positions to the modules on my site.  You will need to tailor the gantry-custom.css file to fit your site.

I did a standard installation of Joomla 3.2 and then installed the Gantry Template bundle so it was more like a blank slate.  An installation done using the Gantry Rocket Launcher has much more custom code there than a basic installation of Joomla that you may not understand and modifying that can be troublesome if you don't understand how it all works and fits together.

What I wrote above is why my gantry-custom.css file isn't giving you the same changes I have on my site.  With that in mind I have two suggestions for you.  First, for the Menu, go in to the Gantry Template (Extensions --> Template Manager) Click on "Gantry - default".  Once that opens click on the Menu tab and for position select header-b.  Next click on the Layout tab and for header positions set it to 3 and force positions to "on".  This should give you the desired effect for the menu item using the code you copied from me for the gantry-custom.css file.  Next, for your the banner section, add this code
#rt-top-surround, #rt-header .rt-block{padding: 0px; margin: 0px;}
to the gantry-custom.css file and see if it gives you the desired effect.  Let me know how this works out for you.

regards,

Michael

 

On Wednesday, February 26, 2014 1:58:04 PM UTC+2, Paul Blackburn wrote:

[Paul Blackburn]

Hi Michael,

Thank you very much for your comprehensive reply and I'll certainly try the stuff you suggested. As you have guessed, I am new to gantry though I have experience of Joomla and have used Artisteer in the past for the other sites I have made and support. This is my first experimentation with another template builder.

Now here's a funny thing, a few hours ago, I went on that site and I found the header working the way I wanted it to but I've just been on a few minutes ago and it seems to have reverted back to where it was before.

Any idea why?

Also any idea why the header seems to start way to the left of the menu and body?

Paul

[Michael]

Hello Paul,

The position of the modules is dependent on the parameters you set in the "layout" section inside the Gantry template found in the template manager.  You'll need to play around with the number of module positons and the width's given to each in there to get what you want.  As far as why it reverted back to it's former position temporarily, that's hard to say.

regards,

Michael

[Paul Blackburn]

Hi Michael,

Adding the code below to the custom css file did the trick i.e. got rid of space above and below header.

#rt-top-surround, #rt-header .rt-block{padding: 0px; margin: 0px;}

By the way, I didn't use Gantry Rocket Launcher to set up this Joomla site. I set up the site with a standard Joomla implementation using softaculous and then installed the Gantry Template bundle.

Thnaks for all your time and work

Regards

Paul

[Michael]

Hello Paul,

Glad that did the trick!  If you try what I suggested above regarding the header I think you'll find the space surrounding the menu will change, that is of course if you want to remove it entirely.

regards,

Michael

[Michael]

Hello Paul,

I've been looking over your site and mine comparing the differences and I've figured out why your header shifts to the left.  Your banner is placed in the header section while mine is placed in the top section.  My menu is in the header section and yours is in the showcase section.  Due to these variations the code I was using in my gantry-custom.css file won't work the same way on your site.  To get your banner centered on the page simply remove or comment out the following section in the gantry-custom.css file.

/* REMOVE EXTRA SPACE BELLOW BANNER */

#rt-top-surround, #rt-header .rt-container{
    margin:0px;
    padding:0px;
}

Once you do that you'll see that your banner will center on the page.
Here's a link to the Gantry Framework Joomla Demo showing the available module positions:
http://demo.gantry-framework.org/features/module-positions

regards,

Michael

[Paul Blackburn]

Michael,

It suddenly struck me that we were using different positions and I was just going to do something about it when I saw your last mail.

Taking out the code as you suggested did centre the Header - thank you once again.

Regards

Paul

[unik...@gmail.com]

So far the only thing up on the site is the custom html module with the banner, that's how new this project is.  Thanks in advance for your help.ilit

 

 

 

hello Michael

 

I have a similar issue and maybe you could guide me. I am using the "utility" position. I have 2 images side by side. there is a spacing of about 1/2 inch. where can I adjust this spacing to "0". which file must I edit and which section to reduce the spacing to zero.

 

would really appreciate guidance.

 

thanks

http://kolovos.n8solutions.org

regards,

Michael

[Michael]

In order for myself or anyone else to help you we need more information such as your versions of Joomla and Gantry and a link to the site you are working on.

regards,

Michael