Site logo image responsive

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Scam Warning
User avatar
Sniper_E
Registered User
Posts: 1126
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Site logo image responsive

Post by Sniper_E »

I created four site_logo images for the different resolution sizes. Desktop and Mobile.
566px by 64px - site_logo.png
480px by 54px - site_logo_med.png
320px by 36px - site_logo_small.png
280px by 32px - site_logo_tiny.png
These are simply my large site logo image, reducing the size for each smaller image.

First I replaced the codes in the overall_header.html to show my logo and description on hover.

Code: Select all

			<div id="site-description">
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
				<a id="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="{SITE_DESCRIPTION}">{SITE_LOGO_IMG}</a>
			</div>
Then I added the images in the stylesheet to show the different size logo images.

I listed the large site_logo image in the prosilver/theme/imageset.css

Code: Select all

.imageset.site_logo {
	background-image: url("./images/site_logo.png");
	padding-left: 566px;
	padding-top: 64px;
}
The search bar would run over the full size site_logo image at 800px by 768px resolution.
So I added a new line at the bottom of the prosilver/theme/imageset.css

Code: Select all

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
	.imageset.site_logo {
		background-image: url("./images/site_logo_med.png");
		padding-left: 480px;
		padding-top: 54px;
	}
}
Now the med site_logo image loads in the smaller desktop resolution as needed.

When the responsive style kicks in at 700px the site_logo image drops so below the /* Logo block.
Sideways mobile view needs site_logo image in the prosilver/theme/responsive.css

Code: Select all

.imageset.site_logo {
	background-image: url("./images/site_logo_med.png");
	padding-left: 480px;
	padding-top: 54px;
}
Now when you turn your mobile device upright you need the small site_logo image.
In the prosilver/theme/responsive.css add it in the 500px section.

Code: Select all

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
	.imageset.site_logo {
		background-image: url("./images/site_logo_small.png");
		padding-left: 320px;
		padding-top: 41px;
	}
And the smaller mobile views like the 320px view add the smallest under the 350px view.

Code: Select all

@media only screen and (max-width: 350px), only screen and (max-device-width: 350px) {
	.imageset.site_logo {
		background-image: url("./images/site_logo_tiny.png");
		padding-left: 280px;
		padding-top: 32px;
	}
The different size site_logo images will now load depending on your view. Desktop and Mobile.
You can check out the responsive sizes here ->Image
Last edited by Sniper_E on Wed Sep 23, 2015 6:53 pm, edited 4 times in total.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
User avatar
Raul [ThE KuKa]
Style Customisations
Style Customisations
Posts: 11072
Joined: Mon Dec 08, 2003 9:24 pm
Location: Spain
Name: Raul Arroyo
Contact:

Re: Site logo image responsive

Post by Raul [ThE KuKa] »

Thanks Sniper_E :wink:
All unsolicited PMs will be ignored.
:warning: Knowledge Base | Documentation | Board rules | phpBB Styles Rules & Policies | Styles Queue Stats :warning:


If you like my styles, translations, etc. and want to show some appreciation, then feel free to Donate.
:flag_es: phpBB Spain - Online Since 2003 :heart:


ClickClickClick
Registered User
Posts: 32
Joined: Sat Jul 23, 2011 11:10 pm

Re: Site logo image responsive

Post by ClickClickClick »

Thank you for the how to, Sniper_E!
Will definitely be doing this.
User avatar
PayBas
Former Team Member
Posts: 930
Joined: Thu May 25, 2006 12:37 am

Re: Site logo image responsive

Post by PayBas »

I wouldn't add a completely new file for a single media query rule.

You could do this just as easily by adding media queries to the already existing responsive.css for lower resolutions.
User avatar
Sniper_E
Registered User
Posts: 1126
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E »

PayBas wrote:I wouldn't add a completely new file for a single media query rule.

You could do this just as easily by adding media queries to the already existing responsive.css for lower resolutions.
I'll look into that PayBas. Thank you for the better direction. I didn't know that could be done.

Please... No one should use my insane codes in this thread. Sniper Out!
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
User avatar
PayBas
Former Team Member
Posts: 930
Joined: Thu May 25, 2006 12:37 am

Re: Site logo image responsive

Post by PayBas »

I didn't say your code was insane ;). I could just be a bit more efficient. Might as well give pointers where applicable.
User avatar
Sniper_E
Registered User
Posts: 1126
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E »

You are correct PayBas. Thanks for the pointer. First post updated.

I have it working fine on my mobile device.
When I turn my phone upright it loads the smaller site_logo image.
When I turn my phone back sideways I have to refresh my browser to reload those classes.
It will not automatically reload those classes like the desktop browsers do.

Other than that problem, all works well.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
lavachapi
Registered User
Posts: 54
Joined: Sat Nov 01, 2014 8:12 am

Re: Site logo image responsive

Post by lavachapi »

Looking with developer tool from Firefox I see that Image and that Image
Khaos-Rage
Registered User
Posts: 71
Joined: Sun Jul 13, 2008 4:31 am

Re: Site logo image responsive

Post by Khaos-Rage »

Looks fine to me at 360x640 on Firefox which is the lowest resolution that would possibly used by most people unless they have an really old feature phone.
Screenshot_16.png
Screenshot_16.png (43.25 KiB) Viewed 9720 times
User avatar
Sniper_E
Registered User
Posts: 1126
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E »

Yes, the image needed to be smaller for the 320px layout. I didn't check that.
My cell phone did not go that small, like Khaos-Rage. So I didn't see that problem.

Thank you lavachapi for pointing that out. My bad, fixed...
I must "View All Responsive Layouts" in the future.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
elgrandoc
Registered User
Posts: 50
Joined: Sun Aug 31, 2014 4:49 pm
Location: Hartlepool, UK
Name: Karl Williams
Contact:

Re: Site logo image responsive

Post by elgrandoc »

This has been endlessly useful. Thank you for this Sniper_E. Managed to get my forum logo working on the mobile platform. Excellent!
User avatar
Sniper_E
Registered User
Posts: 1126
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E »

Your welcome! Glad you got your site hooked up. This stuff is endless.
I'm using this feature in extension's stylesheets also to control their pages.
phpbb did great making this feature possible. Love the responsive style!

Thank you phpBB...
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
User avatar
proskier
Registered User
Posts: 34
Joined: Tue Dec 31, 2013 4:41 am
Location: United States
Name: Jay Avondoglio

Re: Site logo image responsive

Post by proskier »

I tried to do this with my board (copying your instructions) but I only have 'large' and 'small' image. No image shows when resolution is below 700px. Can you take a look and see what is wrong? Thanks for any help.

www.KisnardOnline.com/forums
Image
DEV Proskier
User avatar
Sniper_E
Registered User
Posts: 1126
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E »

Yes proskier that is the way the responsive works. The logo image drops.
When the responsive style kicks in at 700px the site_logo image drops.
Follow the instructions on the first post and yours will show.

I personally took the {SITENAME} out of my header. My logo is my site name, like yours.
Reduce the size of your site logo image and list it in the lower resolution sections.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
User avatar
proskier
Registered User
Posts: 34
Joined: Tue Dec 31, 2013 4:41 am
Location: United States
Name: Jay Avondoglio

Re: Site logo image responsive

Post by proskier »

Figured it out... the reason it wasn't working is because your instructions omit 1 step for responsive.css (switching .logo from none to inline-block):

Code: Select all

.logo {
   /* change display value to inline-block to show logo */
   display: inline-block;
   /* display: none; */
   float: none;
   padding: 10px;
}
Found the step here: http://www.mixingonbeat.com/phpbb/viewt ... 163&t=9110
Image
DEV Proskier
Locked

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