Public Forums 71,145 posts

[mister1031 Friend mister1031Join date: July 2010Posts: 3Downloads:0Uploads:0]

#152536

Dear Fellow Forum Members:

Can somebody help me?
I was modifying the JA Purity template so as to accomplish the following:
1. Include my own custom logo (which I’m sure many of you have done before!)
2. Increase the default header from its current 80px to a more generous 150px.

What I thought was going to be a simple task now has me talking to myself in not so positive terms. The problem is that after 50+ resizing attempts, I still get a band running top to bottom down the entire left side of my logo (which replaced the Joomla Logo in the same position, although re-sized).

I have re-sized the logo by putting the appropriate entries into both logo.png and logo.gif where I specified the logo at 230×152). Additionally, I re-sized all 3 default headers from 600×80 to 600×150 and the header mask also to 600×150. Lastly, I modified the template.css to reflect the new header 150px height in the following 4 sections:

/* HEADER
——————————————————— */
#ja-headerwrap {
background: #333333;
color: #CCCCCC;
line-height: normal;
height: 150px;
}

#ja-header {
position: relative;
height: 150px;
}

.ja-headermask {
width: 602px;
display: block;
background: url(../images/header-mask.png) repeat-yes top right;
height: 150px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #CCCCCC;
}

h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 230px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 150px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}

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

Lastly, I’ve tried resizing the logo in small increments so many times I stopped counting. No matter what I do, I can’t get rid of the left hand “buffer” which stops my logo from going all the way over to the left edge and covering up the visible header behind it. Its probably a positioning or buffering parameter but I can’t figure it out or find it mentioned anywhere. Anyone care to take a stab at this one?

[aaronfarias Friend aaronfariasJoin date: July 2010Posts: 132Downloads:0Uploads:0 Thanks: 3 Thanked: 12 times in 12 posts]

#349830

Can you post a link to better understand the problem? It seems your css edits were done correctly.

[mister1031 Friend mister1031Join date: July 2010Posts: 3Downloads:0Uploads:0]

#349838

I could but its a localhost situation until I finish the site. How can I get you what you need to see?

[mister1031 Friend mister1031Join date: July 2010Posts: 3Downloads:0Uploads:0]

#349953

<em>@mister1031 186397 wrote:</em><blockquote>I could but its a localhost situation until I finish the site. How can I get you what you need to see?</blockquote>

I took a screen shot and will send if you’re willing to take a look at it. Thanks

[pelenko Friend pelenkoJoin date: August 2010Posts: 3Downloads:0Uploads:0]

#351893

If I understood right, you want your logo to be on left side with no “empty” space. Anyway, since I’m not sure I’ll offer you solution in two steps:

1. step – check if you site cover all screen. Go to Template Manager, edit JA_purity and in right panel change “Template Width” to “specified in percentage (fliud)” and “Specified width” to “100%”.
2. If your template is 100% width of screen, then change margin in h1.logo, h1.logo-text { to all “0” or delete it.

<em>@mister1031 186373 wrote:</em><blockquote>Dear Fellow Forum Members:

Can somebody help me?
I was modifying the JA Purity template so as to accomplish the following:
1. Include my own custom logo (which I’m sure many of you have done before!)
2. Increase the default header from its current 80px to a more generous 150px.

What I thought was going to be a simple task now has me talking to myself in not so positive terms. The problem is that after 50+ resizing attempts, I still get a band running top to bottom down the entire left side of my logo (which replaced the Joomla Logo in the same position, although re-sized).

I have re-sized the logo by putting the appropriate entries into both logo.png and logo.gif where I specified the logo at 230×152). Additionally, I re-sized all 3 default headers from 600×80 to 600×150 and the header mask also to 600×150. Lastly, I modified the template.css to reflect the new header 150px height in the following 4 sections:

/* HEADER
——————————————————— */
#ja-headerwrap {
background: #333333;
color: #CCCCCC;
line-height: normal;
height: 150px;
}

#ja-header {
position: relative;
height: 150px;
}

.ja-headermask {
width: 602px;
display: block;
background: url(../images/header-mask.png) repeat-yes top right;
height: 150px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #CCCCCC;
}

h1.logo, h1.logo-text {
margin: 0 0 0 0px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 230px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 150px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}

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

Lastly, I’ve tried resizing the logo in small increments so many times I stopped counting. No matter what I do, I can’t get rid of the left hand “buffer” which stops my logo from going all the way over to the left edge and covering up the visible header behind it. Its probably a positioning or buffering parameter but I can’t figure it out or find it mentioned anywhere. Anyone care to take a stab at this one?</blockquote>

If this doesn’t work then maybe I didn’t undersand it well. Or you can just make Logo with transparent background so you dont have to worry about this. 🙂
Hope this helps…

[Author]

Posts