How to set another header image in mobile view

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
martyx
Registered User
Posts: 9
Joined: Thu Nov 21, 2019 9:03 am

How to set another header image in mobile view

Post by martyx »

Hi i use on my prosilver style header image, so if i look in my forum on mobile device, i need load another image, because the whole header cannot be seen on the mobile.

So I would like to ask if this could be done in the code

For classic header image

Code: Select all

.headerbar {
background: #ffff;
background-image: url("/styles/prosilver/theme/images/header.jpg") !important;
}
And how to do it to load another header image on a mobile device?

Thanks
Last edited by martyx on Thu Nov 21, 2019 11:22 am, edited 1 time in total.

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4295
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: How to set another heder image in mobile view

Post by HiFiKabin »

Have a look at my Header Banner extension to see how I do it there https://www.phpbb.com/customise/db/exte ... er_banner/

martyx
Registered User
Posts: 9
Joined: Thu Nov 21, 2019 9:03 am

Re: How to set another heder image in mobile view

Post by martyx »

Thank you, that looks good .. maybe I don't even need so many functions.
It could only be solved using code without the extension ?

User avatar
Gumboots
Registered User
Posts: 216
Joined: Fri Oct 11, 2019 1:59 am

Re: How to set another header image in mobile view

Post by Gumboots »

Sure. Just tack an extra declaration into the relevant media query in responsive.css, and call whatever image you want.

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

Re: How to set another header image in mobile view

Post by EA117 »

Also keeping in mind that "a different image on mobile" isn't strictly necessary. The problem you've described here is simply that the current site logo image is being hidden on mobile, and you can stop that from happening. In the customized version of the style you're already maintaining, in /styles/prosilver/theme/responsive.css find this block which is currently hiding your logo whenever the screen width falls to 700px or lower:

Code: Select all

	.logo {
		/* change display value to inline-block to show logo */
		display: none;
		float: none;
		padding: 10px;
	}
As indicated in the comment, change display: none to display: inline-block if you want to continue showing your existing logo even on smaller displays.

Its possible you might desire to tweak the display of the logo even further for mobile devices, by controlling exactly how the background image is being stretched or clipped to fill the space. You can add additional CSS right after this .logo block, but the block needs to modify the background image display for .site_logo, not .logo. Controlling .logo display was just "how they hid the whole thing."

For example, maybe you'll add control such as this. This is only an example, because what's ultimately appropriate just depends on your preference and/or the content of the image you're displaying:

Code: Select all

	.site_logo {
		background-repeat: no-repeat;
		background-size: auto;
		width: 100%;
	}

martyx
Registered User
Posts: 9
Joined: Thu Nov 21, 2019 9:03 am

Re: How to set another header image in mobile view

Post by martyx »

Maybe we don't understand ... I didn't talk about the logo

I want this header to look the same on both desktop and mobile devices. It solves the add-on from HiFiKabin but I really hate for every nonsense add-ons, I would like to solve it in the code.

I want this header to look the same on both desktop and mobile devices.
The advantage would be ... if the logo was displayed too

Try it out with my header and you'll see it isn't showing all on your mobile.

thank you very much

header.jpg

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

Re: How to set another header image in mobile view

Post by EA117 »

True, it is probably just a misunderstanding. When you said "image", the only "image" being used in the default header is the logo. But maybe you were intending us to consider "the entire header", and not "just the image" or "just the logo."
martyx wrote:
Thu Nov 21, 2019 2:40 pm
Try it out with my header and you'll see it isn't showing all on your mobile.
What is the URL for you site so that we can look at your header on mobile?

martyx
Registered User
Posts: 9
Joined: Thu Nov 21, 2019 9:03 am

Re: How to set another header image in mobile view

Post by martyx »

Here is demo - http://vw.nazory.cz/

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

Re: How to set another header image in mobile view

Post by EA117 »

In that site, you've given your background image to <div class="headerbar">:

Code: Select all

.headerbar {
    background: #ffff;
    background-image: url(/styles/prosilver/theme/images/header.jpg) !important;
}
And that background is still being used on the mobile site, too. The problem is that control hasn't been specified for how the background image should be used in cases where the element the background has been applied to is smaller than the background image itself. On mobile you end up "looking at only a small corner" of the background image, and can see only an empty blue portion of the image.

Someone more CSS savvy can easily outrank me here with a better recommendation, but I would say you're looking for responsive.css changes such as shown here. By "responsive.css changes" I mean putting these additional blocks at the same location as the .logo block discussed earlier:

Code: Select all

.headerbar {
    background: #3266bc;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
}
Combine that with un-centering the site name:

Code: Select all

.site-description h1 {
    text-align: left;
}
I end up with something like this. Is this the kind of display you were looking for, or are we still off base as to your intentions:

vw.png

As a longer-term plan, if you made your site logo more of a "stand alone image" instead of combining it with the blue background, it would give you more freedom to place it and size it as you see fit. Rather than being constrained by the fact that image also contains all of that open blue space, which could have been created by CSS instead of being part of the image.

User avatar
Dan Stylez
Registered User
Posts: 287
Joined: Tue Jan 16, 2018 6:17 am

Re: How to set another header image in mobile view

Post by Dan Stylez »

Personally, I would cut just the wording from your banner - so it's just a logo, then replace the phpBB logo with your logo, then change the headerbar colour to the same as your logo background colour.

Then you would have...
Image
And as your logo already says VW forum - you could hide the site-description in the css.


Then, in the responsive css, I would display the logo, but hide the site-name and description and maybe use "background-size" to make the logo about 280px wide.

Then on small screens it would look like...
Image



For another header background image in mobile view, the code is:

Code: Select all

@media (max-width: 700px) {
	.headerbar {
		background-image: url("images/image-name-here");
	}
}
Top value domain names at FastHosts.
Visit SiteSplat for some unique, elegant phpBB styles and extensions.

martyx
Registered User
Posts: 9
Joined: Thu Nov 21, 2019 9:03 am

Re: How to set another header image in mobile view

Post by martyx »

EA117 thank you, works !

Post Reply

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