Joomla Templates Club 406,261 posts

[jjsmulo Friend jjsmuloJoin date: March 2007Posts: 70Downloads:0Uploads:10 Thanks: 10]

#133379

I’m trying to edit the logo/header in JA Drimia for Joomla 1.5. I found the head-bg.psd source file. But I noticed there is also a logo.gif file and head-bg-n.gif file. They seem to have some of the same information on them.

Is it possible to get the source files for logo.gif and head-bg-n? I’ve never come across a logo/header that was so complicated on any template.

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#270718

you can find logo.gif in templates/ja_drimia/images folder

[jjsmulo Friend jjsmuloJoin date: March 2007Posts: 70Downloads:0Uploads:10 Thanks: 10]

#270719

Thanks. I had found all of the above in that folder. But they aren’t editable in .gif. I need the Photoshop files, which weren’t in the source please.

[artaddicted Friend artaddictedJoin date: June 2008Posts: 50Downloads:0Uploads:3 Thanked: 2 times in 1 posts]

#270964

There is the only psd of the logo and header. It is one image, no layers of the logo and head, together. I found it easier to edit the gif files (head-bg, head-bg-n and logo) from the template image file folder.

If you can not find the psd, I could e-mail it to you. This forum file size limit is to low to upload it here.

Edit: It should be here in download: http://www.joomlart.com/forums/downloads.php?do=file&id=249

At least that is where I got it. There is a file folder named: PSD –> header-bg

[jjsmulo Friend jjsmuloJoin date: March 2007Posts: 70Downloads:0Uploads:10 Thanks: 10]

#271051

artaddicted,

Thanks for the help. I tried updating this file, but it shows up strange as you can see here http://www.riovistaministry.org. I’ve tried playing around with the CSS to get it lined up right, but so far with no luck.

I still can’t figure out where there are apparently 3 different files for this section–head-bg.gif, head-bg-n.gif, and logo.gif. Yet there is only a head-bg.psd file in source.

If you or anyone can help me with what to do it would be greatly appreciated. This shouldn’t be so complicated for a simple header change.

[artaddicted Friend artaddictedJoin date: June 2008Posts: 50Downloads:0Uploads:3 Thanked: 2 times in 1 posts]

#271079

Make sure that you edit the correct css file. You should be able to locate it here:

root –> templated –> ja-dirmia –> css –> template css

The images are located at:

root –> templated –> ja-dirmia –> css –> template css

You can edit the template css while you are logged in you administrator account if you go to:

Extensions –> Template Manager –> ja_dirmia –> click on icon> Edit CSS –> template.css

Now you have to find the header section, which located about lines 1112-1151, on the original css file. This is where you will have to edit the size to match the size of the image you have created.


/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
position: relative;
z-index: 10;
}

#ja-header {
background: url(../images/head-bg.gif) no-repeat 0 60px;
height: 140px;
position: relative;
z-index: 999;
}

.narrow #ja-header {
background: url(../images/head-bg-n.gif) no-repeat 0 60px;
}

h1.logo {
font-size: 300%;
height: 45px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 60px;
width: 198px;
}

h1.logo a {
background: url(../images/logo.gif) no-repeat;
display: block;
float: left;
height: 45px;
outline: none;
text-indent: -5000px;
text-transform: uppercase;
width: 198px;
}


I still think it is easiest to edit the three gif files highlighted in green in the above css file. I used PhotoShop to modify the gif. Here are the steps that I I took.

1. I took the end cap all the way on the left of the logo and moved it over the the end of the nav bar. Did not require changing the css since I maintained the same image size.

2. I removed the JoomlArt.com below and placed my site name in its place. Did not require changing the css since I maintained the dame image size.

3. I took my logo image (made by a designer) and placed it in front of the nav bar. This did require me to edit the css (see red in logo). I specified the dimensions (height and width) of the logo to be exactly the same dimensions of the actual image. The image I used on the site was resized in PhotoShop. I also had to modify the top dimension for the logo to display properly.

If you want to take a look at my resulting logo, click: HERE. I still plan on changing the image to something that does not have as rough of an edge. But, I have been working on the content, and have not had time. I hope this is of some help.

[jjsmulo Friend jjsmuloJoin date: March 2007Posts: 70Downloads:0Uploads:10 Thanks: 10]

#271195

Thanks for letting me know how you did this. I taking a partially similar route.

1. I downloaded the 3 gif files to get their exact sizes.

2. Then I opened the one source file for this area that came in PSD in Photoshop.

3. I then edited each section how I wanted it.

4. I cropped and sized each area for re-uploading in the template images section.

I still have a problem when the website (http://www.riovistaministry.org/) is opened to ‘home’ in that the area under the top menu ‘home’ section isn’t a perfect square. I have a second problem when I click on any one of the other menu pages are opened in that ‘home’ shows up right, but then there’s a line on the left of it. I would have thought the latter is from the barcode, but I used the eraser tool in Photoshop to get rid of this. Anyone have an idea what the problem is with this?

I can’t believe how complicated this is and how little support there is with instructions. I’ve wasted far too many hours and things still don’t show up right.

[artaddicted Friend artaddictedJoin date: June 2008Posts: 50Downloads:0Uploads:3 Thanked: 2 times in 1 posts]

#271277

<blockquote>I have a second problem when I click on any one of the other menu pages are opened in that ‘home’ shows up right, but then there’s a line on the left of it. I would have thought the latter is from the barcode, but I used the eraser tool in Photoshop to get rid of this. Anyone have an idea what the problem is with this?</blockquote>

Did you also change head-bg-n.gif ? I think that is the image that creates the background of the bar So, if it is cropped a little short, then you end up missing part. Did you use the erase tool as a box to cut out the barcode? Were you attempting to make the bas shorter? That bar is created with two images, so they have to match exactly for it to work properly.

<blockquote>the area under the top menu ‘home’ section isn’t a perfect square</blockquote>
I did try to use the PSD and slice it up again but had similar problems. I wonder if this may be making thing more difficult for you. I would try to just use the gif images in the bar.

I am glad that I have this issue basically behind me at this point. This whole process would be much easier if JA could provide the Sliced up PSD files. If I think of something else, I will let you know.

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#272633

Can this be marked as solved?

[jjsmulo Friend jjsmuloJoin date: March 2007Posts: 70Downloads:0Uploads:10 Thanks: 10]

#272661

I don’t think this is solved. I still have the same problem. I’ve been very disappointed how little help I’ve gotten here. JA has the most expensive template club and the worst help.

[Author]

Posts