Joomla Templates Club 406,261 posts

[Colin Sherlock Friend Colin SherlockJoin date: September 2014Posts: 36Downloads:3Uploads:6 Thanks: 7]

#153955

Pardon me if this is a silly question, but I wish to reduce the height of the header area in my droid template, usually I can do this in template.css or in the index.php itself, but can’t quite figure out how to do it with this template.
Can anyone advise?

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#354257

<em>@colinjoomlart 192339 wrote:</em><blockquote>Pardon me if this is a silly question, but I wish to reduce the height of the header area in my droid template, usually I can do this in template.css or in the index.php itself, but can’t quite figure out how to do it with this template.
Can anyone advise?</blockquote>

look at template.css line 354 for the link to the header image which is 298px by 298px edit the image height to suit, remember if you are using different colour the image will probably be in a different folder to match the colour choice

#ja-header {
background:url(“../images/header-bg.jpg”) repeat-x scroll left top transparent;

}

Cheers Shannon

1 user says Thank You to uniquebiz for this useful post

1. Colin Sherlock

[Colin Sherlock Friend Colin SherlockJoin date: September 2014Posts: 36Downloads:3Uploads:6 Thanks: 7]

#354265

Thanks for that, I have tried reducing the image size as suggested and allthough it reduces the width of the colour, it does not reduce the height of the header area itself. Cant quite but my finger on whats keeping this height

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#354274

Try this :

Open the your_site/templates/ja_droid/css/template.css

around line 361

/* Logo Image ---*/
h1.logo { float: none; margin: 40px auto 20px; width: 302px; height: 93px; }

h1.logo a {
background: url(../images/logo.png) no-repeat left;
display: block;
width: 302px;
height: 93px;

Change the height variable at both the above positions. That should get the header height shortened.

Arvind
}

2 users say Thank You to Arvind Chauhan for this useful post

1. Colin Sherlock
2. relaisluynes

[tphmedia Friend tphmediaJoin date: July 2009Posts: 139Downloads:0Uploads:27 Thanks: 17 Thanked: 2 times in 1 posts]

#356751

<em>@drarvindc 192367 wrote:</em><blockquote>Try this :

Open the your_site/templates/ja_droid/css/template.css

around line 361

/* Logo Image ---*/
h1.logo { float: none; margin: 40px auto 20px; width: 302px; height: 93px; }

h1.logo a {
background: url(../images/logo.png) no-repeat left;
display: block;
width: 302px;
height: 93px;

Change the height variable at both the above positions. That should get the header height shortened.

Arvind
}</blockquote>

This changes the available size of the LOGO, not the entire header. Frankly, I’d like a logo that is 200px HIGH and the area around it not much bigger! HELP!!!!

If I reduce the size of the image, the image is smaller, but there is a big white space where the image was!

Here’s the link to the site — mgpools

Note the background just dwarfs the logo. No, we’re NOT changing the logo .. in fact would like to make it BIGGER

[tphmedia Friend tphmediaJoin date: July 2009Posts: 139Downloads:0Uploads:27 Thanks: 17 Thanked: 2 times in 1 posts]

#356858

Anything!!!!!

[davebau Friend davebauJoin date: June 2006Posts: 14Downloads:0Uploads:3 Thanks: 5]

#361659

Here’s your answer:

Template.css
line 354
#ja-header { background: url(../images/header-bg.jpg) repeat-x left top;height:125px;}
(this adjusts the height of the header)

line 361
h1.logo { float: none; margin: 0px auto 0px; width: 700px; height: 100px; }
(this will center your logo)

see example @ http://www.theprudentwife.com

Hope this answered your question.

-DaveB!

[silver007a Friend silver007aJoin date: May 2010Posts: 11Downloads:0Uploads:2]

#363077

You can change the gap between the logo and the top of the page/header by changing the margins in ja_droid/css/template.css line 361

h1.logo { float: none; margin: 40px auto 20px; width: 302px; height: 129px; }

Change to:

h1.logo { float: none; margin: 20px auto 20px; width: 302px; height: 129px; }

There are also the padding settings you can change in plugins/system/jat3/base-themes/default/css/template.css

#ja-header .main { padding: 30px 0 15px; }

change to:

#ja-header .main { padding: 5px 0 5px; }

Hope that helps

🙂

[cndglobal Friend cndglobalJoin date: March 2009Posts: 170Downloads:31Uploads:13 Thanks: 52 Thanked: 16 times in 1 posts]

#495237

<em>@davebau 201969 wrote:</em><blockquote>Here’s your answer:

Template.css
line 354
#ja-header { background: url(../images/header-bg.jpg) repeat-x left top;height:125px; (this adjusts the height of the header)see example @ http://www.theprudentwife.com
!</blockquote>
This only changed the header height on the “Home” page…all other pages still have the old header height.
How do I change the header height site wide?
Thanks,
cndglobal

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#495292

Hi cndglobal,

So that I can try to best assist you, please provide the url of the site you’re working on and screenshot of how you want to accomplish.

Regards

[cndglobal Friend cndglobalJoin date: March 2009Posts: 170Downloads:31Uploads:13 Thanks: 52 Thanked: 16 times in 1 posts]

#496101

Saguaros
I sent the credentials in a private message.
cndglobal

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#496103

Hi Mike,

Your 2 attached images are so different from the site you sent me. Is that correct link? Is so send me screenshot again of how you want to achieve.

Regards

[cndglobal Friend cndglobalJoin date: March 2009Posts: 170Downloads:31Uploads:13 Thanks: 52 Thanked: 16 times in 1 posts]

#496105

Saguaros
I have a temp page up while I’m working on the site. (index.html)
To see the joomla template homepage use…… (index.php)
thanks,
cndg

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#496138

Hi,

You can open file: /templates/ja_droid/css/template.css

– Around line 436:


#ja-header {
background: url("../images/header-bg.jpg");
height: 150px; <<<<< add this line and change to your desired value
}


– Add this css rule in this template.css file:


#ja-header .main {
padding: 1px;
}

Remember to clean JAT3 cache in backend after changing.

Hope this helps.

1 user says Thank You to Saguaros for this useful post

1. cndglobal

[cndglobal Friend cndglobalJoin date: March 2009Posts: 170Downloads:31Uploads:13 Thanks: 52 Thanked: 16 times in 1 posts]

#496168

Saguaros
Thanks for your help. That worked good for the index.php homepage but all the interior pages still show the larger header.
I have cleared the cache and also tested in a browser that I had not opened the site in before.
Still large header in inside pages.
cnd

[Author]

Posts