[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.
Scam Warning
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 » Thu Mar 20, 2014 12:37 pm

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: 423
Joined: Sun Apr 14, 2002 2:11 am
Location: Canada

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

Post by Swanny » Wed Oct 29, 2014 2:42 am

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: 64705
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post by Lumpy Burgertushie » Wed Oct 29, 2014 3:09 am

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
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

User avatar
M.O.B.
Registered User
Posts: 898
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. » Wed Oct 29, 2014 4:26 am

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 67403 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 67403 times
Image

User avatar
Lumpy Burgertushie
Registered User
Posts: 64705
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post by Lumpy Burgertushie » Wed Oct 29, 2014 6:11 am

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
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

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 » Wed Oct 29, 2014 7:51 am

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: 898
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. » Wed Oct 29, 2014 8:00 am

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: 898
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. » Wed Oct 29, 2014 10:52 pm

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:
mob_3.jpg
PC site view
mob_3.jpg (56.43 KiB) Viewed 67212 times
mob_4.jpg
smartphone site view
mob_4.jpg (26.64 KiB) Viewed 67212 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 » Sun Nov 02, 2014 1:41 pm

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.. » Tue Nov 04, 2014 9:11 pm

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: 64705
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post by Lumpy Burgertushie » Tue Nov 04, 2014 10:47 pm

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


robert
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

..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.. » Tue Nov 04, 2014 11:31 pm

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: 64705
Joined: Mon May 02, 2005 3:11 am
Contact:

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

Post by Lumpy Burgertushie » Wed Nov 05, 2014 1:01 am

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
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

User avatar
mamba
Registered User
Posts: 423
Joined: Thu Jan 16, 2003 7:59 pm

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

Post by mamba » Wed Nov 05, 2014 2:49 am

It's better not to remove the SITENAME and description for SEO reasons.
Using 3.2, PHP version 7, MySQL 5.5, Host: hostgator shared Linux, Style: Prosilver

Lady_G
Registered User
Posts: 185
Joined: Fri Jun 08, 2012 12:38 pm
Location: US

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

Post by Lady_G » Wed Nov 05, 2014 3:52 am

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”

Who is online

Users browsing this forum: No registered users and 18 guests