Make Site Logo Responsive?

For support and discussion related to templates and themes in phpBB 3.3.
Post Reply
User avatar
DBG1
Registered User
Posts: 51
Joined: Fri Jun 12, 2020 11:05 pm

Make Site Logo Responsive?

Post by DBG1 »

Is there any code I can insert into my style to make my logo responsive? Our style utilizes a logo at 198 X 91, but I normally run our site at 150% size in a browser and the logo always looks like rubbish (all pixelated). Even when at only 100% in a browser the logo doesn’t look that sharp since the file is such low-res to begin with.

I would like to be able to upload the logo at 3X the resolution (596 x 273) so that it can accommodate a much higher resolution screen. I tried replacing the existing logo file with one at 596 x 273 already and of course it didn’t work. It only displayed the edge of the image within the logo area.

I also don’t want to expand the logo area itself as I feel it is just right and I don't want other stuff to get moved around. I also don't want to increase the size of the logo on the screen, just make it appear sharper. So I just want the site to be able to handle bigger sized files and shrink them down or res them up as needed based on screen resolution.

Any ideas on what I might be able to do to the code to make it perform responsively would be much appreciated.
.m.
Registered User
Posts: 531
Joined: Wed Nov 04, 2009 8:39 pm

Re: Make Site Logo Responsive?

Post by .m. »

Code: Select all

https://www.google.com/search?q=phpbb+responsive+logo
if you use a high resolution image then max-width: 100%; might work.

however better method would be to use different sizes of logos & media queries

board url should have been given so that someone could check it
User avatar
DBG1
Registered User
Posts: 51
Joined: Fri Jun 12, 2020 11:05 pm

Re: Make Site Logo Responsive?

Post by DBG1 »

Thanks. Good idea.

Do you know which file in the style would have a all the settings for the logo where I could add that?

I was thinking maybe overall_header.html or index.php, but I don't see anything in those files for site_logo settings.
User avatar
Lumpy Burgertushie
Registered User
Posts: 67986
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Make Site Logo Responsive?

Post by Lumpy Burgertushie »

those settings would be in the css files of the style. usually in the colours.css file for the image and the common.css file for the size/positioning etc.

robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
User avatar
DBG1
Registered User
Posts: 51
Joined: Fri Jun 12, 2020 11:05 pm

Re: Make Site Logo Responsive?

Post by DBG1 »

Thanks. I found it in common.css

Now I have:

Code: Select all

.site_logo {
	display: inline-block;
	width: 198px;
	height: 56px;
Should I change it to the following or something else?

Code: Select all

.site_logo {
	display: inline-block;
	width: max-width: 100%;
	height: 56px;
UPDATE:

Tried it. Didn't work.
User avatar
Talk19Zehn
Registered User
Posts: 540
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: Make Site Logo Responsive?

Post by Talk19Zehn »

Hello, my own graphic is actually 596x273px (!) (it could also be 600x275px). The graphic in this example has no lettering (!):

Please test this: CSS -> Test, test, test ...

colours.css

Code: Select all

.site_logo {
	background-image: url("./images/logopro596273.png");
	background-repeat: no-repeat;
	background-size: contain;
}

common.css

Code: Select all

.site_logo {
	display: inline-block;
	width: 198px;
	height: 91px;
}
Please clear all caches after your works.

Regards
User avatar
EA117
Registered User
Posts: 1765
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Make Site Logo Responsive?

Post by EA117 »

DBG1 wrote:
Sat Jul 18, 2020 7:10 pm
Any ideas on what I might be able to do to the code to make it perform responsively would be much appreciated.
What you're proposing will work, but does have a "down side" of asking the web browser to perform scaling of the image during 100% of "normal" displays, too. By giving the web browser a 600px-wide image worth of data to work with, that's "good" and "will make the image look good when all 600px need to be displayed." (e.g. on your zoomed display.)

But in order to display the 200px-wide "normal" display list most visitors are seeing today, you're asking the visitor's web browser to download the 600px-wide image but then "stretch" it down to only 200px wide. Which definitely "works", but it's not always the best quality, and more to the point can vary in quality from browser-to-browser and platform-to-platform. If its a busy JPEG-type image you might never notice; but on something with straight lines or text the resample/stretching performed by the web browser might be more noticeable.


The "direct path to the 100% ideal of what you're asking" would be to make an .SVG vector-based version of logo instead of having a bitmap at all. Such that at every resolution, including the current 200px-wide usage, the image is being drawn with the highest possible detail for the resolution needed. Whether that's possible and how much work it would entail depends on what your current image looks like. But once the .SVG is created, you specify that in the .CSS and leave everything else as-is size-wise. If you wanted to show the logo here, or PM the logo or site link if it needs to remain private, some better input could be given.

DBG1 wrote:
Sat Jul 18, 2020 7:10 pm
I would like to be able to upload the logo at 3X the resolution (596 x 273) so that it can accommodate a much higher resolution screen. I tried replacing the existing logo file with one at 596 x 273 already and of course it didn’t work. It only displayed the edge of the image within the logo area.
Continuing with your .PNG approach instead, I believe the reason max-width doesn't work is because we're dealing with background image size, and not element size. Think of it like "cutting a hole" in a piece of paper to reveal a photograph behind it. Size lets your control how big a "hole" you're making, but this just changes the amount of picture revealed through the hole; not the size of the picture itself.

The existing logo display works because .site_logo is being assigned a size which is exactly the right size "hole" needed to reveal 100% of a 198x56 image file. Your intention is to leave that "hole" exactly at 198x56, but then provide a larger image file and scale the size of the picture; not the size of the hole.

That's the background-size: contain display mode. Which means, whatever my background image is, expand it or squish it until it's entirely visible through the "hole" of the element size the background is being displayed on. So you want to leave the size specified as 198x56 in content.css, replace your current 198x56 .PNG image file with the 596x273 .PNG image file, and then in colours.css add background-size: contain to how the logo image is defined:

Code: Select all

.site_logo {
	background-image: url("./images/site_logo_596x273.png");
	background-size: contain;
	background-repeat: no-repeat;
}
Go ahead and throw the no-repeat in there too, since depending on your image content, you likely don't intend for the image to be "tiled" or repeated if there were ever any space left over.

And of course CTRL-F5 refresh to pull all of those changes when next viewing the site.
User avatar
DBG1
Registered User
Posts: 51
Joined: Fri Jun 12, 2020 11:05 pm

Re: Make Site Logo Responsive?

Post by DBG1 »

Thank you for that. When I was changing the .site_logo size in common.css it also didn't seem right to me because I knew I was changing the size of the logo, but not doing anything to keep the container of the logo fixed. So fixing the container in coulurs.css was the right solution once I uploaded the larger resolution logo file. Thank you.

So first I replaced the existing logo.png file with the higher resolution files and then used the following code:

Code: Select all

.site_logo {
	background-image: url("./images/logo.png");
	background-size: contain;
	background-repeat: no-repeat;
} 
But that didn't work exactly correctly. It did load the bigger logo, and without going outside of the designated logo area, but the logo was loading much smaller in size than it should for some reason. But then I changed it to the following code and now it works perfectly:

Code: Select all

.site_logo {
	background-image: url("./images/logo.png");
	background-size: 198px 56px;
	background-repeat: no-repeat;
}
Also, the automatic resizing of the logo to smaller sizes on smaller screen resolutions still looks good and not jagged because our logo is just a text based logo and nothing complicated or graphical.

So problem solved, thank you again, and the result looks great!
Post Reply

Return to “[3.3.x] Styles Support & Discussion”