Site logo image responsive

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

Site logo image responsive

Post by Sniper_E » Sun Nov 02, 2014 5:20 am

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: 6754
Joined: Mon Dec 08, 2003 9:24 pm
Location: Spain
Name: Raul Arroyo
Contact:

Re: Site logo image responsive

Post by Raul [ThE KuKa] » Sun Nov 02, 2014 11:55 am

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


If you like my styles, translations, etc. and want to show some appreciation, then feel free to Donate with Image
: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 » Mon Nov 03, 2014 1:48 am

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 » Mon Nov 03, 2014 9:09 am

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: 790
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E » Mon Nov 03, 2014 9:10 pm

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 » Mon Nov 03, 2014 10:31 pm

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: 790
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E » Thu Nov 13, 2014 5:57 pm

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: 49
Joined: Sat Nov 01, 2014 8:12 am

Re: Site logo image responsive

Post by lavachapi » Fri Nov 14, 2014 3:37 pm

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 » Fri Nov 14, 2014 4:43 pm

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 7689 times

User avatar
Sniper_E
Registered User
Posts: 790
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E » Fri Nov 14, 2014 5:17 pm

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 » Wed Nov 19, 2014 11:08 pm

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: 790
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E » Mon Nov 24, 2014 5:56 am

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: 32
Joined: Tue Dec 31, 2013 4:41 am
Location: United States
Name: Jay Avondoglio

Re: Site logo image responsive

Post by proskier » Tue Nov 25, 2014 5:15 am

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: 790
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: Site logo image responsive

Post by Sniper_E » Wed Dec 03, 2014 11:13 pm

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: 32
Joined: Tue Dec 31, 2013 4:41 am
Location: United States
Name: Jay Avondoglio

Re: Site logo image responsive

Post by proskier » Fri Dec 05, 2014 11:15 pm

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”