The Joomla! Forum ™






Post new topic Reply to topic  [ 23 posts ] 
Author Message
PostPosted: Tue May 04, 2010 8:56 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Aug 26, 2009 9:33 pm
Posts: 7
Hello Joomla Users,

Here is a recap of some useful info about changing the logo size with the Rhuk MilkyWay Template for Joomla 1.5. *Please note - this works specifically if you choose not to use the Top menu.

In my experience, I found that changing the logo size itself was relatively easy to do. The problem that came up was background distortion (i.e.- the logo didn't fit quite right, there were funny white `tabs' protruding strangely from the borders,etc..) Understandably, many people seem frustrated by these issues but be assured there are answers - all of which I have discovered on this forum. Just remember to make backups of any original files and folders that you may need to alter and you'll be fine if things get too weird.

Lastly, extremely useful programs I used were the GIMP 2.6 (Image Program) and Firebug for the Firefox Browser.

OK, here is some great info about logos and relevant background images ( :) Many thanks to the joomla users who originally posted this !!! sorry, I can't remember their names)

1) The location of the default header image - templates\rhuk_milkyway\images\mw_joomla_logo.png

2) You need to create /alter your new logo with a graphics program then upload it to your site with either a FTP program or other means. It is important that you upload the image to the template image directory, not the Joomla images directory.

3)You can then go to Extensions | Template Manager and select the Milkyway template. Then select the Edit the template.css file.

Once you are viewing the template.css file, scroll down until you find the logo div.

div#logo {
position: absolute;
left: 0;
top: 0;
float: left;
width: 298px;
height: 75px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;

4) Here , you can increase the height and width of your logo. Also, you can change the logo filename to what ever you want it to called . The default is `mw_joomla_logo.png'. For simplicity, keep the file type as .png because" the current default image is a PNG which has ALPHA channels (which gives it transparancy in the "white" bits)"

5a)At this point I proceeded to simply change the values in the div#header_r . This is located just
above the previous div#logo code.
E.g.,

Code:
div#header_r {
height: 90px; <---Here I increased the height value.
padding-left: 600px;
padding-right: 30px;
padding-top: 25px;
overflow: hidden;
text-align: left;
}

5b) Amongst other things, a major problem was those strange protruding white tabs . Fortunately, this is where I discovered there are several images that make up the background of the header area that need to be modified. (Thanks again, to the original user who posted this!!)

"Example-
If logo size is 450X112
Open up the following image files from the corresponding background color folder in a graphics program (eg- use Firefox or Gimp 2.6) and modify the size as indicated:
mw_header_t.png
from 36x129 to 36x167 --- > increase of 11 or 12 %
mw_header_t_l.png
from 37x115 to 37x150
mw_header_t_r.png
from 37x115 to 37x150

Upload the modified images to the site.
Open and edit the CSS file for your template color (i.e. blue_bg.css)
Add a line for height to each of the header tags as follows:

div#header {
background: url(../images/blue/mw_header_t.png) 100% 0 repeat-x;
height: 150px;
}

div#header_l {
background: url(../images/blue/mw_header_t_l.png) 0 0 no-repeat;
height: 150px;
}

div#header_r {
background: url(../images/blue/mw_header_t_r.png) 100% 0 no-repeat;
height: 150px;
}
Of course, you can modify all these dimensions as necessary to fit with your logo, but it should do the trick."
*I noticed following these changes will override the height info value of the div_header_r section of /rhuk_milkyway/css/template.css but I matched the value to the mw_header_t.png file.

6)To make my logo fit better . I used the firebug tool in Firefox. I opened the inspect element tool and clicked on my logo. On the bottom right there is div#logo info . I clicked and experimented with the px values of margin-left and margin top till I was happy with my logo position. I then changed these values in the div_#logo code of the css template file. Please note, these changes may affect the Newsflash area but using the firebug inspect tool will point you in the right direction if you need to make further changes.

Hope this helps....


Last edited by grain_of_sand on Tue May 11, 2010 9:30 am, edited 4 times in total.

Top
 Profile  
 
PostPosted: Fri May 07, 2010 8:04 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue May 04, 2010 5:31 pm
Posts: 8
Location: Fredericia, Denmark
It helps a bit :)

However, I'm a bit confused on how you get the heights for mw_header_t.png, mw_header_t_l.png and mw_header_t_r.png? My logo has the size 330x175. What should I change the height of the 3 files to?

I look forward to hear from you ;)

_________________
/Tommy


Top
 Profile  
 
PostPosted: Sat May 08, 2010 5:59 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Dec 01, 2008 12:54 am
Posts: 31
Hello
Is it possible to put a swf file in the logo position?? I've upploded it to my directory and changed the css to mw_intercoolant_logo.swf No succes. I hope somebody can help me. Thanks


Top
 Profile  
 
PostPosted: Sat May 08, 2010 7:17 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue May 04, 2010 5:31 pm
Posts: 8
Location: Fredericia, Denmark
Svenanders wrote:
Hello
Is it possible to put a swf file in the logo position?? I've upploded it to my directory and changed the css to mw_intercoolant_logo.swf No succes. I hope somebody can help me. Thanks

A quick search gave me this. Maybe this can help you? :)

_________________
/Tommy


Top
 Profile  
 
PostPosted: Sat May 08, 2010 10:34 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Aug 26, 2009 9:33 pm
Posts: 7
TommyV wrote:
It helps a bit :)

However, I'm a bit confused on how you get the heights for mw_header_t.png, mw_header_t_l.png and mw_header_t_r.png? My logo has the size 330x175. What should I change the height of the 3 files to?

I look forward to hear from you ;)



Hi there,

I know what you mean, I was confused at first about this too (i.e.- this original example was smaller than the logo size I wanted as well). You will have to experiment a bit to find what works best for you aesthetically but just remember that your mw_header_t.png file has to be roughly 11 or 12% larger than the mw_header_t_l and mw_header t_r files respectively - as per the original template files . So whatever you decide to use as your height value remember to keep the mw_header_t_l and and mw_header_t_r files the same height and increase the mw_header_t file by roughly 11 or 12 % percent of that value ( for example; if logo height is 175 then mw_header_t_l and mw_header_t_r are 225 , then mw_header_t file should be around 250 (i.e. -roughly 11% larger than 225)).

Hope this helps!


Top
 Profile  
 
PostPosted: Sun May 09, 2010 9:10 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue May 04, 2010 5:31 pm
Posts: 8
Location: Fredericia, Denmark
grain_of_sand wrote:
TommyV wrote:
It helps a bit :)

However, I'm a bit confused on how you get the heights for mw_header_t.png, mw_header_t_l.png and mw_header_t_r.png? My logo has the size 330x175. What should I change the height of the 3 files to?

I look forward to hear from you ;)



Hi there,

I know what you mean, I was confused at first about this too (i.e.- this original example was smaller than the logo size I wanted as well). You will have to experiment a bit to find what works best for you aesthetically but just remember that your mw_header_t.png file has to be roughly 11 or 12% larger than the mw_header_t_l and mw_header t_r files respectively - as per the original template files . So whatever you decide to use as your height value remember to keep the mw_header_t_l and and mw_header_t_r files the same height and increase the mw_header_t file by roughly 11 or 12 % percent of that value ( for example; if logo height is 175 then mw_header_t_l and mw_header_t_r are 225 , then mw_header_t file should be around 250 (i.e. -roughly 11% larger than 225)).

Hope this helps!

I got at little bit further ;) I made an error in my previous post, though, and that confuses me now ;) The height of my logo is only 150 and not 175, so I have problems calculating the height of the right and left files. :( I have tried changing the size of the files, but I can't get it to work correctly. And I'm not absolutely sure, that I'm doing it right... So can you help me in calculating the right height of these files? As you can see on my site I have a problem with the bottom border in the header. I suspect this has something to do with the height of these files...

I'm sorry for being such a bother, and hope you can help me :)

_________________
/Tommy


Top
 Profile  
 
PostPosted: Sun May 09, 2010 7:34 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Aug 26, 2009 9:33 pm
Posts: 7
TommyV wrote:
grain_of_sand wrote:
TommyV wrote:
It helps a bit :)

However, I'm a bit confused on how you get the heights for mw_header_t.png, mw_header_t_l.png and mw_header_t_r.png? My logo has the size 330x175. What should I change the height of the 3 files to?

I look forward to hear from you ;)



Hi there,

I know what you mean, I was confused at first about this too (i.e.- this original example was smaller than the logo size I wanted as well). You will have to experiment a bit to find what works best for you aesthetically but just remember that your mw_header_t.png file has to be roughly 11 or 12% larger than the mw_header_t_l and mw_header t_r files respectively - as per the original template files . So whatever you decide to use as your height value remember to keep the mw_header_t_l and and mw_header_t_r files the same height and increase the mw_header_t file by roughly 11 or 12 % percent of that value ( for example; if logo height is 175 then mw_header_t_l and mw_header_t_r are 225 , then mw_header_t file should be around 250 (i.e. -roughly 11% larger than 225)).

Hope this helps!

I got at little bit further ;) I made an error in my previous post, though, and that confuses me now ;) The height of my logo is only 150 and not 175, so I have problems calculating the height of the right and left files. :( I have tried changing the size of the files, but I can't get it to work correctly. And I'm not absolutely sure, that I'm doing it right... So can you help me in calculating the right height of these files? As you can see on my site I have a problem with the bottom border in the header. I suspect this has something to do with the height of these files...

I'm sorry for being such a bother, and hope you can help me :)



Hello,

No bother, happy to help if I can.
I noticed from your site that the width of these all these files has also been altered. From my experience I'm pretty sure it is important to keep the width of all these files at all there original default values to prevent further distortions . When you are scaling/altering these images make sure you are only altering the heights (i.e.- with GIMP 2.6 you can unlink the `chain link' icon by clicking on it to make sure that the width and height dimensions are altered independently). The original width for the mw_header_t file is 36 , and for the mw_header_l and mw_header_r it should be 37. Try changing the width values back to their default values and keep the the heights values the same as you have now and hopefully this will work.
If it does, you may want to adjust the placement of your logo (see #6) of my original post.

Best of luck.


Top
 Profile  
 
PostPosted: Mon May 10, 2010 5:19 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue May 04, 2010 5:31 pm
Posts: 8
Location: Fredericia, Denmark
grain_of_sand wrote:


Hello,

No bother, happy to help if I can.
I noticed from your site that the width of these all these files has also been altered. From my experience I'm pretty sure it is important to keep the width of all these files at all there original default values to prevent further distortions . When you are scaling/altering these images make sure you are only altering the heights (i.e.- with GIMP 2.6 you can unlink the `chain link' icon by clicking on it to make sure that the width and height dimensions are altered independently). The original width for the mw_header_t file is 36 , and for the mw_header_l and mw_header_r it should be 37. Try changing the width values back to their default values and keep the the heights values the same as you have now and hopefully this will work.
If it does, you may want to adjust the placement of your logo (see #6) of my original post.

Best of luck.


It was exactly what was wrong :) ;D Now it looks just the way I want it to. Thank you very much for your help.

And who needs luck, when they have people like you to help them? ;)

_________________
/Tommy


Top
 Profile  
 
PostPosted: Mon May 10, 2010 4:29 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue May 04, 2010 5:31 pm
Posts: 8
Location: Fredericia, Denmark
I need a little bit more help :-[

I now have a problem with the topmenu. I can't click it :( I believe it has something to do with the images overlapping the menu. But which parameter do I have to change?

_________________
/Tommy


Top
 Profile  
 
PostPosted: Tue May 11, 2010 9:19 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Aug 26, 2009 9:33 pm
Posts: 7
TommyV wrote:
I need a little bit more help :-[

I now have a problem with the topmenu. I can't click it :( I believe it has something to do with the images overlapping the menu. But which parameter do I have to change?



Hello,

Apologies. I just updated my first post because I should have clarified that I did not use the top menu in my site(and thus never got into the info behind changing those necessary images ,etc ). I'm sure there is a similar image manipulation/ code editing answer out there! This template can be manipulated for pretty much anything but you have to have the time and patience to figure out how. If you try using Firebug with Firefox it may point you in the right direction.

Best of Luck.


Top
 Profile  
 
PostPosted: Tue May 11, 2010 4:50 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue May 04, 2010 5:31 pm
Posts: 8
Location: Fredericia, Denmark
No need to apologize ;)

I have gotten it to work now :D

I just deleted the "height"-lines you put into the template color-css. And now it seems to work (don't want to jinx it too much ;)) :D

_________________
/Tommy


Top
 Profile  
 
PostPosted: Tue May 11, 2010 7:05 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Dec 21, 2009 4:13 pm
Posts: 189
Can anyone help me with my issue on the header??
My templess.css looks like this:
div#header_r {
height: 160px;
padding-left: 370px;
padding-right: 30px;
padding-top: 25px;
overflow: hidden;
text-align: left;
}

div#logo {
position: absolute;
left: 0;
top: 0;
float: center;
width: 800px;
height: 120px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: 30px;
margin-top: 25px;

attached is a picture of how the header looks. Does anyone know the fix?


You do not have the required permissions to view the files attached to this post.


Top
 Profile  
 
PostPosted: Thu May 20, 2010 3:53 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Aug 26, 2009 9:33 pm
Posts: 7
pamcc wrote:
Can anyone help me with my issue on the header??
My templess.css looks like this:
div#header_r {
height: 160px;
padding-left: 370px;
padding-right: 30px;
padding-top: 25px;
overflow: hidden;
text-align: left;
}

div#logo {
position: absolute;
left: 0;
top: 0;
float: center;
width: 800px;
height: 120px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: 30px;
margin-top: 25px;

attached is a picture of how the header looks. Does anyone know the fix?



Yes, try following steps 5b) onwards from my original post - this info will help you change the background frame images behind your header. Note that I didn't use the top menu , so if you are planning to use it beware that changing the background image size/ header size will probably require some further tweaking .


Top
 Profile  
 
PostPosted: Thu May 20, 2010 5:13 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Mon Apr 23, 2007 11:59 pm
Posts: 419
Location: Apache Junction, AZ
Svenanders wrote:
Hello
Is it possible to put a swf file in the logo position?? I've upploded it to my directory and changed the css to mw_intercoolant_logo.swf No succes. I hope somebody can help me. Thanks


Here's the easiest way to do this. Install the fckeditor. That editor will upload swfs and make the code for them. Create a dummy content item and install your swf. You can even size it with the fckeditor. Go to html or source view and copy the swf code. Since the fckeditor uploaded the swf, you only have to put the code in the source html to access it. The path will be the same.

Go to admin and open the html editor.

Put your swf code right under the header div, like so, and it should work

It only works this way if your header is a css background image. If it's a real img tag, you'll have put the swf code Inside the header div, then to go into the swf code and make that absolutely positioned, then position accordingly with css. using z-index to put it on top if it's not appearing. And the header should be positioned. If it isn't, make it relative. If it's absolute, leave it alone.

<div class="Header">
<div class="Header-jpeg"></div>
<embed width="866" height="192" menu="true" wmode="transparent" loop="false" play="true" src="/images/stories/flash/sunrise3.swf" style="z-index:1000;" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" />
<div class="logo">

Here is a site where I put a small rising sun in the header. Look at the source code:

http://jkmsites.com

_________________
If only one man knows the truth, it is still the truth.


Top
 Profile  
 
PostPosted: Sun Aug 08, 2010 3:39 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Jul 15, 2009 8:32 pm
Posts: 10
TommyV wrote:
No need to apologize ;)

I have gotten it to work now :D

I just deleted the "height"-lines you put into the template color-css. And now it seems to work (don't want to jinx it too much ;)) :D



Hi, just wondering if you managed to understand how to make the top menu work without deleting the "height" lines? When I delete these lines, the lower part of my logo has disappeared. :(

Many thanks in advance for any help!


Top
 Profile  
 
PostPosted: Thu Sep 30, 2010 7:48 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Sep 19, 2010 2:51 pm
Posts: 12
bonger wrote:
TommyV wrote:
No need to apologize ;)

I have gotten it to work now :D

I just deleted the "height"-lines you put into the template color-css. And now it seems to work (don't want to jinx it too much ;)) :D



Hi, just wondering if you managed to understand how to make the top menu work without deleting the "height" lines? When I delete these lines, the lower part of my logo has disappeared. :(

Many thanks in advance for any help!



Hi, did anyone manage to make the TOP MENU work?

Thanks in advance.


Top
 Profile  
 
PostPosted: Thu Sep 30, 2010 7:32 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Jul 15, 2009 8:32 pm
Posts: 10
jeremiahdaniel wrote:
bonger wrote:
TommyV wrote:
No need to apologize ;)

I have gotten it to work now :D

I just deleted the "height"-lines you put into the template color-css. And now it seems to work (don't want to jinx it too much ;)) :D



Hi, just wondering if you managed to understand how to make the top menu work without deleting the "height" lines? When I delete these lines, the lower part of my logo has disappeared. :(

Many thanks in advance for any help!



Hi, did anyone manage to make the TOP MENU work?

Thanks in advance.


Yep, I got it to work. Sorry, should really have come back here and posted my solution....

Instead of deleting the "height" lines, I just changed the height of "header_r" to 130 instead of 150.

Hope this helps!!

Code:
div#header {
   background: url(../images/blue/mw_header_t.png) 0 0 repeat-x;
height: 150px;
}

div#header_l {
   background: url(../images/blue/mw_header_t_l.png) 0 0 no-repeat;
height: 150px;
}

div#header_r {
   background: url(../images/blue/mw_header_t_r.png) 100% 0 no-repeat;
height: 130px;
}


Top
 Profile  
 
PostPosted: Tue Oct 05, 2010 8:07 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Sep 19, 2010 2:51 pm
Posts: 12
Hi Bonger, your solution does not work with my site. my header size is 258px.

thanks anyway


Top
 Profile  
 
PostPosted: Tue Oct 05, 2010 8:14 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Jul 15, 2009 8:32 pm
Posts: 10
jeremiahdaniel wrote:
Hi Bonger, your solution does not work with my site. my header size is 258px.

thanks anyway


It should work if you change the 150 in my code to some larger number... e.g. 260


Top
 Profile  
 
PostPosted: Fri Oct 08, 2010 6:34 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Oct 05, 2010 7:18 am
Posts: 10
I was wanting to increase only the horizontal size of my logo from the default value of 298px to 650px to let it stretch across most of the header while leaving the default height at 75px. This thread seems to give a straight forward answer so I tried to edit my template.css file like so:

Code:
div#logo {
   position: absolute;
   left: 0;
   top: 0;
   float: left;
   width: 650px;
   height: 75px;
   background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
   margin-left: 30px;
   margin-top: 25px;
}


Problem is when I try to save the edited file in CPanel with the new value I keep receiving a "fatal error or timeout occured" message and and the template.css file remains unchanged. I even tried editing the file offline and uploading it to the /css directory and received the same fatal error. Anyone know wtf is up with that?


Top
 Profile  
 
PostPosted: Fri Oct 08, 2010 6:35 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Fri Oct 08, 2010 6:28 am
Posts: 2
hım

_________________
www.cafealem.com


Top
 Profile  
 
PostPosted: Thu Oct 21, 2010 1:14 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Oct 20, 2010 11:03 pm
Posts: 42
I am having the same issue where the top menu you cant click any of the links. It seams to be that the mw_header_t.png is overlapping the menu somehow. Does anyone know where mw_header_t.png is defined because there is nothing in template.css

As someone else mentioned removed the height fixed their issue, all that did was make the header section completely gone. I tried different combination of taking heights out of some areas and doesnt help any.

Any Ideas?


EDIT

I fixed my problem by changing my div#header_r smaller by 20px


Top
 Profile  
 
PostPosted: Wed Oct 27, 2010 6:21 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 02, 2010 5:30 pm
Posts: 15
Hi, I read the instructions posted by grain_of_sand. Great instructions!. however, when I changed my logo I did the following:
I edit the template.css file and changed the width and height.
div#logo {
position: absolute;
left: 0;
top: 0;
float: left;
width: 860px; <--increased the width
height: 140px; <--increased the height
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: 30px;
margin-top: 25px;
then I made my logo with a transparent canvas 477px x 95 px with micromedia fireworks and uploaded to my host company. I didn't edit any other file.
Since I increased the size of my logo the newsflash text was overlapping my logo, maybe somebody knows how to decrease the space the newsflash takes?(right now the newsflash module is disable), also I removed the top menu by remarking out the code in template.css
It seems to be working ok.
My question is: is this the right way to change a logo? ( I am new to joomla). Do I have to edit the other files? Please help me understand this.
thanks


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 23 posts ] 



Who is online

Users browsing this forum: No registered users and 6 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group