My Banner In Milky Way »  Show posts from    to     

Icy Phoenix


phpBB 3 MODS And Styles (Not Compatible With phpBB 3.1) - My Banner In Milky Way



sulpra2002 [ Fri 15 Aug, 2008 00:45 ]
Post subject: My Banner In Milky Way
Hi! :mryellow:
First of all: Milky Way is the nicest Style ever! :wink:

But I have some trouble editing some things in it. I want to put my own banner in the header, but I don’t know how. I want to replace both, the orange background and the Milky Way logo, with my own banner. How can I do that? :roll:

dibujo

Thanks for the help :wink:


TheSteffen [ Sat 16 Aug, 2008 01:01 ]
Post subject: Re: My Banner In Milky Way
Hi sulpra2002,

for the background there are two ways.
First you can overload your own background into milky_waythemeimagestop_header.png

Or you can change this in stylesheet.css
Code: [Hide] [Select]
#top_logo{
border-width: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: url('./images/top_header.png') repeat;
height: 150px;
}


For the header logo, just replace the styles/milky_way/imageset/sitelogo_small.png file with yours.


sulpra2002 [ Sat 16 Aug, 2008 01:21 ]
Post subject: Re: My Banner In Milky Way
Oh thanks! :D
Just one more thing: what do I have to change so that when someone clics the Banner, it links to the index page?
Thanks :mryellow:


TheSteffen [ Sat 16 Aug, 2008 09:39 ]
Post subject: Re: My Banner In Milky Way
Hm, I only use IcyPhoenix, so I am not sure about phpbb3

But in overall_header.html you will find this:
Code: [Hide] [Select]
<div id="top_logo">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="150" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
<td align="center" valign="middle"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
<td align="right" valign="top">&nbsp;</td>
</tr>
</table>
</div>


This part means that it is linked <a href="{U_INDEX}"> to INDEX
So it should work like you want.
If You want to link to another page you can change it into <a href="http://www.yourwebsite.com">

Hope its help you.


sulpra2002 [ Sat 16 Aug, 2008 16:06 ]
Post subject: Re: My Banner In Milky Way
Ok, I did that :D

Now it's too small. Take a look: http://www.keane-argentina.com.ar/Forum/index.php

How do I make it fit the entire header space?


TheSteffen [ Sat 16 Aug, 2008 16:32 ]
Post subject: Re: My Banner In Milky Way
OPEN overall_header.html
FIND
Code: [Hide] [Select]
<td height="150" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>

REPLACE WITH
Code: [Hide] [Select]
<td width="750" height="200" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>


This should work.

Your header Logo is quite big 288 kb :shock:


sulpra2002 [ Sat 16 Aug, 2008 17:02 ]
Post subject: Re: My Banner In Milky Way
Stills small :(


TheSteffen [ Sat 16 Aug, 2008 17:31 ]
Post subject: Re: My Banner In Milky Way
I am sorry,

Can you please try this

OPEN milky_wayimagesetimageset.cfg
FIND
Code: [Hide] [Select]
<td height="150" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>

REPLACE WITH
Code: [Hide] [Select]
<td align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>


OPEN milky_waytemplateoverall_header.html
FIND
Code: [Hide] [Select]
img_site_logo = sitelogo_small.png*100*300

REPLACE WITH
Code: [Hide] [Select]
img_site_logo = sitelogo_small.png*200*750


Maybe you should also change sitelogo_small.png to sitelogo_small.jpg because than your logo would be smaller.

But there should be a better way if you would take you logo into the background in stylesheet.css
background: url('./images/yourlogo.jpg') no-repeat;
height: 200px;

Maybe I should install phpbb3 to test it :mricy:


sulpra2002 [ Sat 16 Aug, 2008 17:50 ]
Post subject: Re: My Banner In Milky Way
TheSteffen wrote: [View Post]
I am sorry,

Can you please try this

OPEN milky_wayimagesetimageset.cfg
FIND
Code: [Hide] [Select]
<td height="150" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>

REPLACE WITH
Code: [Hide] [Select]
<td align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>


OPEN milky_waytemplateoverall_header.html
FIND
Code: [Hide] [Select]
img_site_logo = sitelogo_small.png*100*300

REPLACE WITH
Code: [Hide] [Select]
img_site_logo = sitelogo_small.png*200*750


Maybe you should also change sitelogo_small.png to sitelogo_small.jpg because than your logo would be smaller.

This didn't work


TheSteffen wrote: [View Post]
But there should be a better way if you would take you logo into the background in stylesheet.css
background: url('./images/yourlogo.jpg') no-repeat;
height: 200px;

Maybe I should install phpbb3 to test it :mricy:

This made top_header.png my banner, but sitelogo_small.png still there. I should erase it then. But I want top_header.png to link to my index page


TheSteffen [ Sat 16 Aug, 2008 18:06 ]
Post subject: Re: My Banner In Milky Way
Give me a second, I will install phpbb3 and test and write the solution


TheSteffen [ Sat 16 Aug, 2008 18:54 ]
Post subject: Re: My Banner In Milky Way
You got PN.

I will write the solution tomorrow


sulpra2002 [ Sat 16 Aug, 2008 19:57 ]
Post subject: Re: My Banner In Milky Way
Ok, thanks :D


TheSteffen [ Sun 17 Aug, 2008 12:09 ]
Post subject: Re: My Banner In Milky Way
OK, now I found it :mricy:

First of all, use the attachment. Is you sitelogo in 200x950 and a transparent gif in 200x400

To change the background image:

OPEN theme/stylesheet.css
FIND
Code: [Hide] [Select]
#top_logo{
border-width: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: url('./images/top_header.png') repeat;
height: 150px;
}

REPLACE WITH
Code: [Hide] [Select]
#top_logo{
border-width: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: url('./images/top_header.jpg') no-repeat;
height: 200px;
}


And for the Link I have done a transparent gif

OPEN imageset/imageset.cfg
FIND
Code: [Hide] [Select]
img_site_logo = sitelogo_small.png*100*300

REPLACE WITH
Code: [Hide] [Select]
img_site_logo = sitelogo_small.gif*200*400


Now the last one:
OPEN template/overall_header.html
FIND
Code: [Hide] [Select]
<div id="top_logo">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="150" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
<td align="center" valign="middle"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
<td align="right" valign="top">&nbsp;</td>
</tr>
</table>
</div>

REPLACE WITH
Code: [Hide] [Select]
<div id="top_logo">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="200" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
<td align="center" valign="middle"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
<td align="right" valign="top">&nbsp;</td>
</tr>
</table>
</div>


And now the thing why my first solution doesn't work

You have to refresh your template after that
( acp -> styles -> template -> refresh ) and ( acp -> styles -> imageset -> refresh )


alphatran [ Mon 18 Aug, 2008 11:27 ]
Post subject: Re: My Banner In Milky Way
TheSteffen wrote: [View Post]
Hi sulpra2002,

for the background there are two ways.
First you can overload your own background into milky_waythemeimagestop_header.png

Or you can change this in stylesheet.css
Code: [Hide] [Select]
#top_logo{
border-width: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: url('./images/top_header.png') repeat;
height: 150px;
}


For the header logo, just replace the styles/milky_way/imageset/sitelogo_small.png file with yours.


I did this before to replace the top_header.png with white color. The code is:

Code: [Hide]
  1. #top_logo{  
  2. border-width: 0px 0px 0px 0px;  
  3. margin: 0px 0px 0px 0px;  
  4. padding: 0px 0px 0px 0px;  
  5. background-color: #FFFFFF;  
  6. height: 150px;  
  7.  


Now, I want to change it back to the top_header.png. The code's changed to:

Code: [Hide]
  1. #top_logo{  
  2. border-width: 0px 0px 0px 0px;  
  3. margin: 0px 0px 0px 0px;  
  4. padding: 0px 0px 0px 0px;  
  5. background: url('./images/top_header.png') repeat;  
  6. height: 150px;  
  7.  


Then I refreshed the template, cleared cache but it is still white (it can not be changed back to top_header.png)

Please help me !


sulpra2002 [ Mon 18 Aug, 2008 16:58 ]
Post subject: Re: My Banner In Milky Way
It worked, but there are some troubles :oops:

First of all, I should tell you that I changed the Template width to 750px (I've edited _mg_config.html). I have some trouble with that too (you can read it here: http://www.icyphoenix.com/viewtopic...&p=30739#p30739 ). But that's an other problem. I tell you this, because this made me change the width of the Banner I've made.

However, I did what you told me to. The only thing I've changed was the new "width of 750px". I made my Banner in 200x750 and a Transparent Gif in 200x750

TheSteffen wrote: [View Post]
To change the background image:

OPEN theme/stylesheet.css
FIND
Code: [Hide] [Select]
#top_logo{
border-width: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: url('./images/top_header.png') repeat;
height: 150px;
}

REPLACE WITH
Code: [Hide] [Select]
#top_logo{
border-width: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: url('./images/top_header.jpg') no-repeat;
height: 200px;
}

I did this. But when I refresh the Template to see the changes, I noticed that there was a blank space after the Banner. Just like if the Banner wasn't width enough. But that couldn’t be, because the Banner is 750px width, and the Template is 750px width. :shock:

TheSteffen wrote: [View Post]
And for the Link I have done a transparent gif

OPEN imageset/imageset.cfg
FIND
Code: [Hide] [Select]
img_site_logo = sitelogo_small.png*100*300

REPLACE WITH
Code: [Hide] [Select]
img_site_logo = sitelogo_small.gif*200*400

I did this too. Only that the sitelogo_small.gif is 200x750. This worked fine: the Banner links to the index page. However, the blank space continued there.

TheSteffen wrote: [View Post]
Now the last one:
OPEN template/overall_header.html
FIND
Code: [Hide] [Select]
<div id="top_logo">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="150" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
<td align="center" valign="middle"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
<td align="right" valign="top">&nbsp;</td>
</tr>
</table>
</div>

REPLACE WITH
Code: [Hide] [Select]
<div id="top_logo">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="200" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
<td align="center" valign="middle"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
<td align="right" valign="top">&nbsp;</td>
</tr>
</table>
</div>

I did this too. It worked fine.

However it look wired :oops:
In Internet Explorer it looks like this: http://img365.imageshack.us/img365/4817/iehl2.jpg
The width of the Template is fine, but there is a blank space in the right side and in the bottom of the Banner.

In Firefox it looks like this: http://img292.imageshack.us/img292/7318/47095905xc1.jpg
The width of the Template is not fine. The template is not centered: there is more blank space in the left side than in the right side. And there is a blank space in the right side of the Banner, but not in the bottom of it.

It's all kind of wired, isn't it?


TheSteffen [ Wed 20 Aug, 2008 18:01 ]
Post subject: Re: My Banner In Milky Way
OK, no problem, I haven't seen that you want to use a 750px width.

I like a linkable logo only on the left site, therefore I use 200x400 PX for sitelogo_small.gif

But anyway.

OPEN template/_mg_config.html
FIND
Code: [Hide] [Select]
<!-- DEFINE $MG_GLOBAL_WIDTH = '960px' -->

REPLACE WITH
Code: [Hide] [Select]
<!-- DEFINE $MG_GLOBAL_WIDTH = '750px' -->


OPEN template/overall_header.html
FIND
Code: [Hide] [Select]
<div id="top_logo">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="200" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
<td align="center" valign="middle"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
<td align="right" valign="top">&nbsp;</td>
</tr>
</table>
</div>

REPLACE WITH
Code: [Hide] [Select]
<div id="top_logo">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="200" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
</tr>
</table>
</div>


OPEN stylesheet.css
FIND
Code: [Hide] [Select]
#top_logo{
border-width: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 200px;
background-image: url(./images/top_header.jpg);
background-repeat: no-repeat;
}

REPLACE WITH
Code: [Hide] [Select]
#top_logo{
border-width: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 200px;
background-image: url(./images/top_header.jpg);
background-repeat: no-repeat;
background-position: center;
}


OPEN imageset/imageset.cfg
FIND
Code: [Hide] [Select]
img_site_logo = sitelogo_small.png*100*300

REPLACE WITH
Code: [Hide] [Select]
img_site_logo = sitelogo_small.gif*200*750


You have to refresh your template after that
( ACP -> styles -> template -> refresh ) and ( ACP -> styles -> imageset -> refresh )

You Logo as jpg and the transparent gif

For me is it working fine in IE7 and FF


sulpra2002 [ Thu 21 Aug, 2008 19:33 ]
Post subject: Re: My Banner In Milky Way
It's better, but there still some problems.

In Internet Explorer it worked: there is only a very very small white border arround the Banner. But it's not a big deal.

But in Firefox, as you can see ( http://www.keane-argentina.com.ar/Forum/index.php ), there still some blank spaces in both sides of the Banner, and something peculiar happens: the Tamplated doesen't look centered (this only happens in Firefox).

PS: I had to set the width of the Template in 800px, because 750px was too small.


sulpra2002 [ Sat 23 Aug, 2008 17:52 ]
Post subject: Re: My Banner In Milky Way
It's working now :mryellow: Thanks :mryellow: :mryellow: :mryellow:




Powered by Icy Phoenix