[How to] Change your board logo 3.1.x

Get help with installation and running phpBB 3.1.x here. Please do not post bug reports, feature requests, or extension related questions here.
Suggested Hosts
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: phpBB 3.1.x is at its End of Life stage and support will NOT be provided after July 1st, 2018.
Locked
User avatar
Oyabun1
Former Team Member
Posts: 23162
Joined: Sun May 17, 2009 1:05 pm
Location: Australia
Name: Bill

[How to] Change your board logo 3.1.x

Post by Oyabun1 »

Note: There is now a validated extension to achieve this: Site Logo
  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.1.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.

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.

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.

3. Configuring your logo
Download, backup, and open the file /styles/prosilver/theme/[b]imageset.css[/b] in a text editor (see Tools needed to set up and customise phpBB for some suggestions) and find:
imageset.css wrote:.imageset.site_logo {
background-image: url("./images/site_logo.gif");
padding-left: 149px;
padding-top: 52px;
}
Legend: file name and type; width in pixels; height in pixels.

Edit the file name, width, and height to match your new logo.

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

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: [color=red]298px[/color] [color=blue]104px[/color]; (width in pixels; height in pixels.) The padding-left and padding-top properties would also need to be similarly adjusted.
Last edited by Oyabun1 on Sat Jul 18, 2015 11:59 pm, edited 1 time in total.
Reason: Reference to Site Logo extension added
                      Support Request Template
3.0.x: Knowledge Base Styles Support MOD Requests
3.1.x: Knowledge BaseStyles SupportExtension Requests
Swanny
Registered User
Posts: 486
Joined: Sun Apr 14, 2002 2:11 am
Location: Canada

Re: [How to] Change your board logo 3.1.x

Post by Swanny »

How about a "How to remove your board logo" for those of us who don't actually have a logo?
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How to] Change your board logo 3.1.x

Post by Lumpy Burgertushie »

remove the line from the css file that shows the path to the image.

you may want to remove the relevant code from the overall_header.html file as well depending on what you want that space to have in it etc.


robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
User avatar
M.O.B.
Registered User
Posts: 944
Joined: Tue Jan 04, 2005 1:07 am
Location: San Diego CA USA
Contact:

Re: [How to] Change your board logo 3.1.x

Post by M.O.B. »

I appreciate the above tute.

What about for us that use a wider logo that basically replaced the SITENAME property in HTML? In other words it would be redundant to keep the SITENAME property on the header.

On overall_header.html I did the following:

Code: Select all

<!-- <h1>{SITENAME}</h1> -->
On my PC the logo looks good, the way I want it to be.
mob_1.jpg
mob_1.jpg (38.63 KiB) Viewed 74077 times
I notice that when I view the site with a smartphone, the logo is omitted in the header. How can we keep the image or to automatically resize to fit the width of a smartphone?
mob_2.jpg
mob_2.jpg (11.57 KiB) Viewed 74077 times
Image
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How to] Change your board logo 3.1.x

Post by Lumpy Burgertushie »

you can't put an image in a place that is not big enough for it.

you would need to redo the image or use a different one for your responsive style etc.

robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
User avatar
Oyabun1
Former Team Member
Posts: 23162
Joined: Sun May 17, 2009 1:05 pm
Location: Australia
Name: Bill

Re: [How to] Change your board logo 3.1.x

Post by Oyabun1 »

M.O.B. wrote:On overall_header.html I did the following:

Code: Select all

<!-- <h1>{SITENAME}</h1> -->
Better to do it with CSS

Open /styles/prosilver/theme/responsive.cssFind

Code: Select all

#site-description h1, #site-description p {
After add

Code: Select all

	display: none;
M.O.B. wrote: How can we keep the image
In the same file find

Code: Select all

.logo {
	/* change display value to inline-block to show logo */
	display: none;
Replace none with inline-block

Don't know how to automatically resize the image and I'm not sure it is possible.
                      Support Request Template
3.0.x: Knowledge Base Styles Support MOD Requests
3.1.x: Knowledge BaseStyles SupportExtension Requests
User avatar
M.O.B.
Registered User
Posts: 944
Joined: Tue Jan 04, 2005 1:07 am
Location: San Diego CA USA
Contact:

Re: [How to] Change your board logo 3.1.x

Post by M.O.B. »

Oyabun1 wrote:Don't know how to automatically resize the image and I'm not sure it is possible.
Thanks, I will do the changes you suggested above.

How about be able to have it switch automatically to a smaller size logo (one that I will create) when it switches to smartphone view?
Image
User avatar
M.O.B.
Registered User
Posts: 944
Joined: Tue Jan 04, 2005 1:07 am
Location: San Diego CA USA
Contact:

Re: [How to] Change your board logo 3.1.x

Post by M.O.B. »

M.O.B. wrote:How about be able to have it switch automatically to a smaller size logo (one that I will create) when it switches to smartphone view?
I just wanted to share that I was able to figure this out.

Here are my changes so the smartphone view gets a smaller sized logo (for those that use a larger one than the default one from phpBB). Plus it also hides the SITENAME

Here are the screenshots:
PC site view
PC site view
mob_3.jpg (56.43 KiB) Viewed 73886 times
smartphone site view
smartphone site view
mob_4.jpg (26.64 KiB) Viewed 73886 times
COPY:
[copy your images to this directory]

Code: Select all

styles/prosilver/theme/images/
OPEN: styles/prosilver/theme/common.css
[This hides your SITENAME descriptions. Good for those sites that their custom logo provide the full name of their site.]

FIND:

Code: Select all

#site-description h1 {
	margin-right: 0;
}
REPLACE WITH:

Code: Select all

#site-description h1 {
	display: none;
	margin-right: 0;
}
OPEN: styles/prosilver/theme/imageset.css
[this changes your logo to the size you'd like it to be--make sure to adjust the padding adjustments to match the size of your logo.]

FIND:

Code: Select all

/* Global imageset items */
.imageset.site_logo {
	background-image: url("./images/site_logo.gif");
	padding-left: 149px;
	padding-top: 52px;
}
REPLACE WITH:

Code: Select all

/* Global imageset items */
.imageset.site_logo {
	background-image: url("./images/site_logo.gif");
	padding-left: 640px;
	padding-top: 104px;
/*	background-image: url("./images/site_logo.gif");
	padding-left: 149px;
	padding-top: 52px; */
}
OPEN: styles/prosilver/theme/responsive.css
[This allows for you to have another smaller custom logo for when the site is viewed by a smartphone it switches to the smaller logo. -- Make sure to adjust the padding sizes below to match your logo--or until it doesn't break the width of the site.]

FIND:

Code: Select all

#site-description {
BEFORE ADD:

Code: Select all

/* imageset.css changes */
.imageset.site_logo {
	background-image: url("./images/site_logo_2.gif");
	padding-left: 325px;
	padding-top: 53px;
}
FIND:

Code: Select all

.logo {
	/* change display value to inline-block to show logo */
	display: none;
	float: none;
	padding: 10px;
}
REPLACE WITH:

Code: Select all

.logo {
	/* change display value to inline-block to show logo */
	display: inline-block;
	/* display: none; */
	float: none;
	padding: 10px;
}
FIND:

Code: Select all

#site-description h1, #site-description p {
	text-align: inherit;
	float: none;
	margin: 5px;
	line-height: 1.2em;
	overflow: hidden;
	text-overflow: ellipsis;
}
REPLACE WITH:

Code: Select all

#site-description h1, #site-description p {
	display: none;
	text-align: inherit;
	float: none;
	margin: 5px;
	line-height: 1.2em;
	overflow: hidden;
	text-overflow: ellipsis;
}

IF you use another theme that inherits from prosilver, you may have to do this also:

COPY:
[copy your images to this directory]

Code: Select all

styles/[other_theme]/theme/images/
OPEN: styles/[other_theme]/theme/stylesheet.css
[this changes your logo to the size you'd like it to be--make sure to adjust the padding adjustments to match the size of your logo.]

FIND:

Code: Select all

/* imageset.css changes */
.imageset.site_logo {
	background-image: url("./images/site_logo.gif");
	padding-left: 149px;
	padding-top: 52px;
}
REPLACE WITH:

Code: Select all

/* imageset.css changes */
.imageset.site_logo {
	background-image: url("./images/site_logo.gif");
	padding-left: 640px;
	padding-top: 104px;
/*	background-image: url("./images/site_logo.gif");
	padding-left: 149px;
	padding-top: 52px; */
}
Image
teacherph
Registered User
Posts: 3
Joined: Sun Nov 02, 2014 1:06 pm

Re: [How to] Change your board logo 3.1.x

Post by teacherph »

Thank you! but one question how can I make it look like the wide header/logo of the phpbb?
..777..
Registered User
Posts: 150
Joined: Tue Oct 28, 2014 5:43 pm

Re: [How to] Change your board logo 3.1.x

Post by ..777.. »

I am trying to remove the logo until I can get one made. I have removed the lines below, and purged the cache but the logo is still showing. I am trying to remove it from prosilver and prosilver_se.

imageset.css

Code: Select all

.imageset.site_logo {
	background-image: url("./images/site_logo.gif");
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How to] Change your board logo 3.1.x

Post by Lumpy Burgertushie »

you should be working in the colours.css file not the imageset.css file.


robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
..777..
Registered User
Posts: 150
Joined: Tue Oct 28, 2014 5:43 pm

Re: [How to] Change your board logo 3.1.x

Post by ..777.. »

Robert, I have no clue which line to remove in colours.css. Can you let me know what it is?
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How to] Change your board logo 3.1.x

Post by Lumpy Burgertushie »

well , apparently I was wrong. it is the imageset.css file.

you can do this several different ways.

imageset.css, find :

Code: Select all

.imageset.site_logo {
	background-image: url("./images/site_logo.gif");
	padding-left: 149px;
	padding-top: 52px;
}
remove:

Code: Select all

background-image: url("./images/site_logo.gif");
or, open overall_header.html

find and remove:

Code: Select all

{SITE_LOGO_IMG}
and probably a couple of other ways to.

be sure to refresh your browser after you make the changes and upload the files back to the server.


robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
User avatar
mamba
Registered User
Posts: 603
Joined: Thu Jan 16, 2003 7:59 pm
Location: Australia

Re: [How to] Change your board logo 3.1.x

Post by mamba »

It's better not to remove the SITENAME and description for SEO reasons.
Using latest version of PHPBB
Lady_G
Registered User
Posts: 272
Joined: Fri Jun 08, 2012 12:38 pm
Location: US

Re: [How to] Change your board logo 3.1.x

Post by Lady_G »

As a user migrating from 3.0.12, I think it's important to mention that 3.1.x has two new settings in the Administration Control Panel, under General --> Board Settings.
Main website URL:
If specified, a link to this URL will be prepended to your board’s breadcrumbs and the board logo will link to this URL instead of the forum index. An absolute URL is required, e.g. http://www.phpbb.com.

Main website text:
This text will be displayed as a link to your website homepage in the board’s breadcrumbs. If not specified, it will default to “Home”.
I needed my board logo to link to the home page, not the board index. In earlier versions, I had to customise the style.

Not only does the logo link to the home page, but the home page becomes part of the bread crumb trail. This is a very nice feature, thank you to the developers.
Locked

Return to “[3.1.x] Support Forum”