Joomla Templates Club 406,261 posts

[sbaldwin Friend sbaldwinJoin date: May 2008Posts: 342Downloads:0Uploads:65 Thanks: 119 Thanked: 15 times in 1 posts]

#166601

Hi, I would like to remove only the awning (canopy) in the header and leave the background intact. I would like to add in a logo over the background with another photo on the right.
How do I remove the canopy/awning only? Thanks for any help.

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#402741

Here is the CSS to look for, I’m guessing it might be in the template.css but I’m not sure because looking at the demo with Firebug, the css is all combined.


#ja-header {
background: url("/ja_bistro/templates/ja_bistro/images/header-bg.png") no-repeat scroll center top transparent;

}

1 user says Thank You to thatcomputerdude for this useful post

1. sbaldwin

[sbaldwin Friend sbaldwinJoin date: May 2008Posts: 342Downloads:0Uploads:65 Thanks: 119 Thanked: 15 times in 1 posts]

#402758

Thanks computerdude! I was able to open the .psd source file and turn-off the layer but after that I don’t know how to get that layer/section saved and into the template to replace the background header. I’ll try downloading that image “header-bg.png” and see if I can replace it.

If anyone out there knows how I can change this or an easy way please let us know!

Thanks again,
Sandy

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#402765

Since JoomlArt does not provide sliced PSD files – the better option is to just open the header-bg.png file and either erase it or change it to what you want it to look like, save it as a png file again and upload it to the images directory.

Otherwise you’d have to slice up the PSD source file to the exact dimension as what the image is suppose to be and save that slice.

3 users say Thank You to thatcomputerdude for this useful post

1. thangnn1510
2. sbaldwin
3. rfairman

[rfairman Friend rfairmanJoin date: March 2008Posts: 11Downloads:0Uploads:0 Thanks: 6]

#405467

I opted to open the psd and save the blank image, but I need to remove it completely, or reduce the padding somehow.
Is this done in template.css?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#405491

<em>@rfairman 258772 wrote:</em><blockquote>I opted to open the psd and save the blank image, but I need to remove it completely, or reduce the padding somehow.
Is this done in template.css?</blockquote>
Yes – and No – and Yes . . .

Yes, you can adjust margins and padding as CSS parameters . . .

. . . and No, it’s not the ONLY way to go about achieving the results you want – as you can design and “slice” the image with the desired “padding” as part of the image itself if you like . . .

. . . and Yes, you will need to modify the CSS for your new logo image – making sure that you adjust the height/width parameters according to your particular image’s dimensions and the aesthetics of your website.

make sense?

😎

[acsense Friend acsenseJoin date: November 2010Posts: 3Downloads:0Uploads:1]

#411419

GB: I removed the Awning to, but now there is a lot of padding between top of page and the logo, how do we make this smaller?

NL: Ook ik heb ik de boogjes verwijderd aan de bovenzijde, maar nu blijft die ruimte tussen de bovenkant en het logo erg hoog, hoe kan ik dit kleiner maken?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#411617

<em>@acsense 266161 wrote:</em><blockquote>GB: I removed the Awning to, but now there is a lot of padding between top of page and the logo, how do we make this smaller?

</blockquote>
Can you please provide the url of your site?

[acsense Friend acsenseJoin date: November 2010Posts: 3Downloads:0Uploads:1]

#411646

Hello Tom (and the rest),

The website is in development, the website is on localhost.

I would like the logo to start from 5 or 10 px from the top.

Image:

---

Attachments:

1. 

[acsense Friend acsenseJoin date: November 2010Posts: 3Downloads:0Uploads:1]

#412648

Almost a week ago I asked the following question, can anybody help?
<em>@acsense 266455 wrote:</em><blockquote>Hello Tom (and the rest),

The website is in development, the website is on localhost.

I would like the logo to start from 5 or 10 px from the top.

Image:
</blockquote>

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#412688

Go into your template.css file and find the following line . . .


#ja-header .main {
padding: 90px 0 0 60px;

}


Change the padding-top parameter from 90px to a lesser value (i.e. 10px).

[Author]

Posts