Joomla Templates Club 406,261 posts

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

#145090

I want to make the header-bg.gif higher than the current 80px
When I made a higher image and overwrote the default image the bottom of the new (higher did not show in the header.
+ + + + + + + + + + + ++ + + + + + + + ++ + + + +
/* HEADER
——————————————————— */
#ja-header {
background: url(../images/header-bg.gif) repeat-x top left #1D1D1D;
border-bottom: 1px solid #101010;
position: relative;
z-index: 100;
}

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

h1.logo, div.logo-text h1 {
font-size: 200%;
line-height: 1;
}

h1.logo, div.logo-text {
float: left;
}

div.logo-text {
padding-top: 4px;
}

/* Logo Image —*/
h1.logo {
height: 48px;
margin: 0;
width: 188px;
}

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

h1.logo a span {
position: absolute;
top: -1000px;
}

/* Logo Text —*/
div.logo-text h1 a {
color: #FFF;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}

p.site-slogan {
color: #454545;
display: block;
font-size: 93%;
margin: 0;
padding: 0 5px;
text-align: center;
}

/* Topbar —*/
.ja-topbar {
font-size: 92%;
position: absolute;
top: 0;
width: 100%;
}

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

#320604

I am bumping this post ….

Where do I enter the height of the header-bg.gif

I want to make the header-bg.gif higher than the current 80px
When I made a higher image and overwrote the default image the bottom of the new (higher did not show in the header.

Where do I enter the height of the header-bg.gif
Thanks,
cnd

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

#320612

While waiting to hear from the folks here I tried something different….

Rather than changing the image named header-bg.gif
I changed the logo.png image
I altered the template.css and entered the height and width of the new logo.png
It is 1300px wide and I’m having problems with the left alignment and the repeat but will work on that.
cnd

[mihirc Friend mihircJoin date: December 2008Posts: 597Downloads:0Uploads:3 Thanks: 62 Thanked: 95 times in 39 posts]

#320613

Hello,

Can you please post a live link so that we can suggest you a quick edit to do the necessary changes?

Regards,
Mihir Chhatre.

1 user says Thank You to mihirc for this useful post

1. cndglobal

[bennitos Friend bennitosJoin date: May 2008Posts: 1717Downloads:0Uploads:39 Thanks: 39 Thanked: 474 times in 407 posts]

#320614

And i would not recommend using a 1300px wide logo, most of the users have a screen resolution wich is smaller and they wont be able to see your site properly.

1 user says Thank You to bennitos for this useful post

1. cndglobal

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

#320621

Thanks for taking a look at this.
http://www.apartmentsphiladelphia.com/cms/
I am working with joomla in a sub-directory of another site. This gives me the freedom to experiment.

The reason I had a 1300 wide image is so the header would expand no matter what screen size you had.

————————————————————————
Here is the Header portion of JA Halite Template CSS
/* HEADER
——————————————————— */
#ja-header {
background: url(../images/header-bg.gif) repeat-x top left #1D1D1D;
border-bottom: 1px solid #101010;
position: relative;
z-index: 100;
}

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

h1.logo, div.logo-text h1 {
font-size: 200%;
line-height: 1;
}

h1.logo, div.logo-text {
float: left;
}

div.logo-text {
padding-top: 4px;
}

/* Logo Image —*/
h1.logo {
height: 48px;
margin: 0;
width: 188px;
}

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

h1.logo a span {
position: absolute;
top: -1000px;
}

/* Logo Text —*/
div.logo-text h1 a {
color: #FFF;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}

p.site-slogan {
color: #454545;
display: block;
font-size: 93%;
margin: 0;
padding: 0 5px;
text-align: center;
}

/* Topbar —*/
.ja-topbar {
font-size: 92%;
position: absolute;
top: 0;
width: 100%;
}

/* NAVIGATION
——————————————————— */

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

#320623

The header portion of the template.css is the original …….

I edited the code that is displaying on the site now …I have the logo.png set to
1300 wide and 122 high

[bennitos Friend bennitosJoin date: May 2008Posts: 1717Downloads:0Uploads:39 Thanks: 39 Thanked: 474 times in 407 posts]

#320627

If you use a 1300px logo it will not expand to the resolution the vistitor has it will show the complete picture no matter wich screen resolution you use and it will show sliding horizontal navigation bars instead.

If you really insist doing it like this i can assist you but i would strongly advise you not to do so. If i would visit a site wich has horizontal navigation bars i would personally close it again.

1 user says Thank You to bennitos for this useful post

1. cndglobal

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

#320628

I am NOT saying the header image must be 1300 pixels wide….It can be whatever width that works best in the template.

I do want to have the horizontal menu rather than the left menu.
I don’t know how to edit the template.css to display the header image aligned to the left.
The way it is now has a lot of space on the left which should not be there.

Thanks,
cnd

[bennitos Friend bennitosJoin date: May 2008Posts: 1717Downloads:0Uploads:39 Thanks: 39 Thanked: 474 times in 407 posts]

#320630

Just to check we are both thinking the same.

This is how you would like it? see screenshot.

This is at a 1600*1200

---

Attachments:

1. 

1 user says Thank You to bennitos for this useful post

1. cndglobal

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

#320632

http://mattdelapena.com/
Here is a site that will show you what my final goal is.

I would like to have the header image with the horozional menu below.
Below that I want the slide show on the right and some content on the left.
I would like to have the three blocks below that to place additional content.
= = = = = = = = = = = == = = = = = = = = = = = = = = = =

The problem with the site now (and your screenshot) is all the dead space on the left and right.

I hope I explained it clearly.
cnd

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

#320639

The layout I am trying to achieve
see attached image

---

Attachments:

1. 

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

#320640

I made my comp fast and now that I look at it I see…………

The menu should be aligned left
I will disable the bread crumbs on the home page too so that will not be there

cnd

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

#320726

http://apartmentsphiladelphia.com/cms/
What I want is a front page that does not have any columns on the left or right.

I thought if I did not have any content in the left or right position(s) the columns would collapse.
This does not seem to be happening in my example posted above.
cnd

[Author]

Posts