Page 1 of 7

[HOW TO] Change your logo in 3.2.x

Posted: Sun Jan 08, 2017 9:05 pm
by stevemaury
Note: There is an extension to achieve this: Site Logo BUT for the moment, it is a Release Candidate.
  1. Getting Started
  2. Uploading your Logo
  3. Configuring your Logo
  4. Troubleshooting
  5. Notes
This explains how to change the default logo on your phpBB 3.2.x board.

1. Getting Started
If you have not uploaded files before, or do not know how to use FTP or SSH, you will need to be able to do that. The Knowledge Base has a short guide FTP. See Tools needed to set up and customise phpBB for some client suggestions..

2. Uploading Your Logo
Using your FTP or SSH client, you need to upload the image to: /styles/prosilver/theme/images/. You can name your image the same as the default logo site_logo.gif or give it a different name.

You need to find yourself a logo to be uploaded which you are allowed to use or else create your own. Be aware that no browser will be able to display all image types, therefore, it is best to limit the image to one of the commonly supported types: png, jpg, or gif.

3. Configuring your logo
Download, backup, and open the file /styles/prosilver/theme/colours.css in a text editor (see Tools needed to set up and customise phpBB for some suggestions) and find:
colours.css wrote:.site_logo {
background-image: url("./images/site_logo.gif");
}
Edit the file name to match your new logo.

Download, backup, and open the file /styles/prosilver/theme/common.css in a text editor and find:
common.css wrote:.site_logo {
display: inline-block;
width: 149px;
height: 52px;
}
Edit the width, and height to match your new logo.

Save and upload the colours.css and the common.css files, to the same location on your server, using your FTP client (overwriting the existing files).

From the ACP, Purge the board cache. The button to do that is on the right side of the main screen.

Your new logo should now be displaying in the forums.

4. Troubleshooting
If the logo is not displaying properly:
  1. Try refreshing your browser. A normal browser refresh reloads the page from the browser cache, you will need to reload the page from the server, also known as a hard refresh. Browsers vary but it can usually be accomplished:
    • For Windows and Linux using: Ctrl + F5 or Shift + Reload
    • For Mac using: (Cmd) + F5 or Shift + Reload
  2. Check all the edits again. A single mistyped character in the image name could prevent it from displaying.
  3. If part of the image is not showing then you likely have not adjusted the padding settings correctly.
  4. Double check that you've followed all the steps, and made the changes to the style you're using and not a different one.
5. Notes (optional stuff)
The background-image: url is the path to the image is relative to the /styles/prosilver/theme/ directory. So, if your new board logo was called fish_heads.png and for some reason you put the image in to root of your board the path would be ../../../fish_heads.png.

If your image needs to be resized it is best to use an image editing application to resize it because that will, generally, result in a better quality image display. However, you can use a CSS property. On a new line below the background-image: property add the line:

background-size: 298px 104px; (width in pixels; height in pixels.) The width and height properties in common.css would also need to be similarly adjusted.
-----------------------------------------
Credit to P_I for pointing out the css changes.

Re: [HOW TO] Change your logo in 3.2.x

Posted: Tue Jan 10, 2017 9:13 pm
by johnnytype2
thanks for the tut.

does this logo sit in the background as in this forums header or is it displayed in front within a table cell?

Re: [HOW TO] Change your logo in 3.2.x

Posted: Mon Jan 16, 2017 8:02 am
by Calman
After all the years of zapping out the "Default Logo" and building my own coded header, I feel it should be a standard option in the ACP by this point, as it's one of the first things forum admins look to change - just a friendly suggestion/observation.

Also, it would be nice to see the 24 hour activity extension as a standard feature down in the statistics panel.

All the best,
Cal :)

Re: [HOW TO] Change your logo in 3.2.x

Posted: Mon Jan 16, 2017 8:37 am
by janus_zonstraal
Also, it would be nice to see the 24 hour activity extension as a standard feature down in the statistics panel.
Why? to slow down you board?

Re: [HOW TO] Change your logo in 3.2.x

Posted: Mon Jan 16, 2017 9:08 am
by Mick
Calman wrote:
Mon Jan 16, 2017 8:02 am
After all the years of zapping out the "Default Logo" I feel it should be a standard option in the ACP . . . Also, it would be nice to see the 24 hour activity extension as a standard feature down in the statistics panel
All these years zapping? It's a five minute job, no zapping required.

It's no good just wishing for such things, they won't happen. If you want extensions or feature requests you have to make them yourself in the respective areas.

Re: [HOW TO] Change your logo in 3.2.x

Posted: Mon Jan 16, 2017 6:04 pm
by Calman
Thanks for the responses.

Regards.

Re: [HOW TO] Change your logo in 3.2.x

Posted: Mon Jan 16, 2017 9:19 pm
by br2600
To get it to work under the prosilver_se theme, I also had to change .site_logo in stylesheet.css

Re: [HOW TO] Change your logo in 3.2.x

Posted: Mon Jan 16, 2017 9:25 pm
by Lumpy Burgertushie
If you are using the correct 3.2 version of prosilver_se then that is the only css file you have so yes, you had to edit that file.


robert

Re: [HOW TO] Change your logo in 3.2.x

Posted: Tue Jan 17, 2017 10:44 am
by uphero
Who need that?
Who don`t know how change one image?!?

Re: [HOW TO] Change your logo in 3.2.x

Posted: Tue Jan 17, 2017 6:36 pm
by Lumpy Burgertushie
uphero wrote:
Tue Jan 17, 2017 10:44 am
Who need that?
Who don`t know how change one image?!?
you did not know how to change an image until you learned how.

just like everone else, you had to learn how to do it.


robert


robert

Re: [HOW TO] Change your logo in 3.2.x

Posted: Thu Jan 19, 2017 11:15 pm
by Derek T.
I have successfully changed my site logo using the instructions above. Thank you.

How do I change the url that is linked to when clicking on the site logo?

Re: [HOW TO] Change your logo in 3.2.x

Posted: Fri Jan 20, 2017 2:41 am
by Lumpy Burgertushie
in the prosilver_se/template/overall_header.html file.

find: {U_INDEX}
replace with: http://whatever.com
your link goes there.


ropbert

Re: [HOW TO] Change your logo in 3.2.x

Posted: Fri Jan 20, 2017 1:39 pm
by Derek T.
Lumpy Burgertushie wrote:
Fri Jan 20, 2017 2:41 am
in the prosilver_se/template/overall_header.html file.

find: {U_INDEX}
replace with: http://whatever.com
your link goes there.
Thanks.

I have just tried that and it didn't work. Here is the relevant code block from overall_header.html...

Code: Select all

<div id="site-description" class="site-description"><a id="logo" class="logo" href="<!-- IF U_SITE_HOME-->{U_SITE_HOME}<!-- ELSE -->http://wwww.theportforum.com<!-- ENDIF -->" title="<!-- IF U_SITE_HOME-->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a><h1>{SITENAME}</h1><p>{SITE_DESCRIPTION}</p><p class="skiplink"><a href="#start_here">{L_SKIP}</a></p></div>
Have I missed something?

Re: [HOW TO] Change your logo in 3.2.x

Posted: Fri Jan 20, 2017 11:33 pm
by Lumpy Burgertushie
Derek T. wrote:
Fri Jan 20, 2017 1:39 pm
Lumpy Burgertushie wrote:
Fri Jan 20, 2017 2:41 am
in the prosilver_se/template/overall_header.html file.

find: {U_INDEX}
replace with: http://whatever.com
your link goes there.
Thanks.

I have just tried that and it didn't work. Here is the relevant code block from overall_header.html...

Code: Select all

<div id="site-description" class="site-description"><a id="logo" class="logo" href="<!-- IF U_SITE_HOME-->{U_SITE_HOME}<!-- ELSE -->http://wwww.theportforum.com<!-- ENDIF -->" title="<!-- IF U_SITE_HOME-->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a><h1>{SITENAME}</h1><p>{SITE_DESCRIPTION}</p><p class="skiplink"><a href="#start_here">{L_SKIP}</a></p></div>
Have I missed something?
did you purge the cache after making the changes?

how about a link to your board so we can see what you are doing.

robert

Re: [HOW TO] Change your logo in 3.2.x

Posted: Sun Jan 22, 2017 6:52 am
by Derek T.
I just tried purging the cache and nothing changed.

This is the board: http://www.theportforum.com/

Some of the users wanted "Unread Posts" in the header so I put a link to that in the "Main website URL:" in General settings so that it appears in the lower part of the header. Since making that change clicking on the logo also takes you to Unread Posts rather than the main landing page of the forum. I either need a different way of making Unread Posts appear somewhere in the header or changing the link attached to the site logo so that both are available.

I am aware that my question has drifted away from the purpose of this thread so feel free to split off into a different topic.