Question to those using prosilver Header Banner extension

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Question to those using prosilver Header Banner extension

Post by DV1 »

I've implemented the Header Banner extension by member 'HiFiKabin' and I must say it works wonderfully with smooth responsiveness from large to mobile sizes. Good work, and that it is an extension makes it a breeze when phpBB versions are updated and one doesn't have to scramble looking for whatever css edits were made.

I recently asked HiFiKabin how would I go about changing the image once it gets down to around phone size. While an image looks good around, let's say, 200px height, once it collapses to 80px or so then it becomes a bit of a 'sliver' in dimensions.

In various websites I've done this was no problem, just add a media query with the image change for the header, change the image to something around 480x300, and you've got something more visible at that size. I asked him if this could be done in the headerbanner.css that comes with the extension.

He said it was doable but that at the moment he doesn't have the time to do so. I understand that, most contributors to phpBB have their own lives to attend to and are not beholden to every request that comes down the pike.

So I was wondering if anyone here who is using this extension has figured out a way to change the image for a smaller, mobile size. One obvious answer is change the header manually without the extension but that brings up the aforementioned coding, and besides, many of the topics on changing such in these forums go back many years and do not apply to the board's current versions. I could go the route of changing the header to a div but before doing that I want to see if anyone who is using the extension has figured a way for the image change in a media query or other method.

Thank You

Daniel
User avatar
Brf
Support Team Member
Support Team Member
Posts: 53400
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Question to those using prosilver Header Banner extension

Post by Brf »

To receive extension support please visit our Extensions Database and post in the specific extension's designated support area. The link to the support area for each released extension is also available in the first post of each released extension listed in the [3.2.x] Extension Database Releases forum. For extensions still in development (not recommended for a live board) support is in that extensions's topic in the Extensions in Development forum.
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Question to those using prosilver Header Banner extension

Post by DV1 »

As I've noted in the post, I already asked HiFiKabin in that section and he said it was doable but he didn't have the time at the moment to do it.

I asked here in this section in case someone worked out what I was asking about since ultimately it is a style aspect albeit via an extension.

In short, if I asked in that extension discussion I would be repeating myself.

Daniel
User avatar
DTMWC
Registered User
Posts: 379
Joined: Tue Jan 16, 2018 6:17 am

Re: Question to those using prosilver Header Banner extension

Post by DTMWC »

May not be any use for you as you are wanting it to be 480px, but there was a quick way I used for screens that were under 320px wide and that was to revert back to the default logo and upload a logo called "mini_site_logo.png",

The default logo is not responsive so the logo I uploaded had to be 260px wide to stop it hanging out the screen.

I added this to headerbanner.css

Code: Select all

@media (max-width: 320px) {
.headerbar .header-banner {
	display: none;
}

.headerbar #site-description {
	display: block !important;
}

.site-description h1, .site-description p {
	display: none;
}

.logo {
	display: block;
}

.site_logo {
	background-image: url("/styles/prosilver/theme/images/mini_site_logo.png");
	width: 260px;
	height: 60px;
}
}
There are probably better ways of doing it but this was just for a quick simple logo.
Boom.
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Question to those using prosilver Header Banner extension

Post by DV1 »

@ Dan Stylez

Just wanted to let you know the code worked with a 400x300px image. Instead of a particular logo I used a landscape so when it collapsed (not by much) there was enough of it. Here's what I added to code:

.site_logo {
background-image: url("http://website-forum.com/images/landscape-mobile.png") ;
background-repeat: no-repeat;
width: 400px;
height: 300px;
margin: 0 auto 0 -15px;
}


I did a negative on the left margin because 'margin auto' had no effect; understandable since it's a static (non-responsive) image.

Thanks :)
User avatar
3Di
I've Been Banned!
Posts: 17538
Joined: Mon Apr 04, 2005 11:09 pm
Location: I'm with Ukraine 🇺🇦
Name: Marco
Contact:

Re: Question to those using prosilver Header Banner extension

Post by 3Di »

Just a Q, I am not an expert but ... what's wrong using responsive images?
https://www.w3schools.com/howto/howto_c ... onsive.asp
🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Buy me a coffee -> Image
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Question to those using prosilver Header Banner extension

Post by DV1 »

3Di

Oh, there's nothing wrong with responsive images, I use them all the time on my website. :)

In this particular case it has to do with the Header Banner extension. Read the posts above and you'll see why I asked here. I wanted to replace the image when it got down to around 400 but the person who made the extension said he was too busy at the moment to do it.

One of the members here, Dan Stylez showed the code he used and it worked well for a static image.

You seem to have a lot of posts here so if you look at the extension and figure a way of modifying it to where the switch will also be responsive, then go for it! I and I'm sure others who use the HB extension will appreciate it. :D

Daniel
User avatar
3Di
I've Been Banned!
Posts: 17538
Joined: Mon Apr 04, 2005 11:09 pm
Location: I'm with Ukraine 🇺🇦
Name: Marco
Contact:

Re: Question to those using prosilver Header Banner extension

Post by 3Di »

It should work just fine with responsive imgs if the search bar had not to be taken into consideration as well.
That needs some absolute reference in fact.

Mine it was just a Q, unfortunately I haven't enough spare time to invest on this or anything else, at the moment.
🆓 Free support for our extensions also provided here: phpBB Studio
🚀 Looking for a specific feature or alternative option? We will rock you!
Please PM me only to request paid works. Thx. Buy me a coffee -> Image
My development's activity º PhpStorm's proud user º Extensions, Scripts, MOD porting, Update/Upgrades
User avatar
DTMWC
Registered User
Posts: 379
Joined: Tue Jan 16, 2018 6:17 am

Re: Question to those using prosilver Header Banner extension

Post by DTMWC »

@DV1 no problem :)

I've since made some edits to the css and the html so that a smaller banner can be added straight into the html without having to play around adjusting the sizes in the css, you can see it here. that's not prosilver, but obviously it works the same way.
Boom.
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Question to those using prosilver Header Banner extension

Post by DV1 »

@ DanStylez

Now things seem a little confusing. When I first read your last post you gave info about the code and a link to your forum to show how a different responsive image can be used for smaller screen sizes. But then I looked at your post later and the info was removed. Then I looked at it again and the info was back. Ok, Stylez, what kind of deceptive soccer move are you pulling off here?! :D

Anyway, the css part is easy to add to the headerbanner.css but as you know the html accessed through view source looks different in the template which I guess is overall-header. Could you copy/paste how it looks in the template for the following from your forum? The templates have always been a little squirrelly for me to deal with.

Code: Select all

<div class="headerbar" role="banner">
					<div class="inner">

			<div id="site-description" class="site-description">
				<a id="logo" class="logo" href="./index.php" title="Board index"><span class="site_logo"></span></a>
				<h1>Estilo</h1>
				<p>Style Development &amp; Testing Forum</p>
				<p class="skiplink"><a href="#start_here">Skip to content</a></p>
			</div>

						
			</div>
			<div class="banner-header">
	<div style="position:absolute; z-index:-100;">
	<h1>Estilo</h1>
	<p>Style Development &amp; Testing Forum</p>
	<p class="skiplink"><a href="#start_here">Skip to content</a></p>
</div>
<div class="header-banner">
	<a href="./index.php" title="Board index"><img class="header-banner" style="width:100%; border-radius:7px; width:1280px;" src="https://s8.postimg.cc/w1faw1k8l/doncaster-banner.png" alt="Board index"></a>
</div>
<div class="header-banner-mobile">
	<a href="./index.php" title="Board index"><img class="header-banner-mobile" style="width:100%; border-radius:7px; width:1280px;" src="https://s8.postimg.cc/6qalfhlx1/doncaster-banner-mobile.png" alt="Board index"></a>
</div>
</div>
		</div>
Thanks and good work in making the smaller image responsive. :)
User avatar
DTMWC
Registered User
Posts: 379
Joined: Tue Jan 16, 2018 6:17 am

Re: Question to those using prosilver Header Banner extension

Post by DTMWC »

:lol: sorry about that :D after i posted earlier this morning, i checked it using a windows phone and noticed the banners are not responsive with that, (worked on computer browsers though) so edited the post to remove it as didn't want to suggest an idea that turned out not to work. Then had another look at it this afternoon and found a solution so re added it to the post :lol:

Here goes...

1st - This bit is optional and doesn't matter if it's changed or not.
When the option "Do you wish to hide the Header Background colour?" was set to no, the was slightly smaller than the header bar, so to make it match the style i changed it in the headerbanner_background.cssfile, found here headerbanner\styles\prosilver\theme.

Find:

Code: Select all

.headerbar {
	background : transparent;
}

Change To:

Code: Select all

.headerbar {
	padding: 0;
	background: none;
}

2nd - To add the small image to the overall_header_headerbar_after.html file, found here headerbanner\styles\prosilver\template\event.

Find lines 24 --> 26:

Code: Select all

<div class="header-banner">
	<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="{{ HEADERBANNER }}" alt="{{ lang('INDEX') }}"></a>
</div>

Move the </div> on line 27 down a line. (so line 27 is empty)
Add this to line 27:

Code: Select all

<div class="header-banner-mobile">
	<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner-mobile" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="headerbanner/styles/prosilver/mobile-banner/doncaster-banner-mobile.png" alt="{{ lang('INDEX') }}"></a>
</div>

So lines 24 --> 29 now look like:

Code: Select all

<div class="header-banner">
	<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="{{ HEADERBANNER }}" alt="{{ lang('INDEX') }}"></a>
</div>
<div class="header-banner-mobile">
	<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner-mobile" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="headerbanner/styles/prosilver/mobile-banner/doncaster-banner-mobile.png" alt="{{ lang('INDEX') }}"></a>
</div>
(the source will be the url or the location the mobile banner is stored etc)


3rd - To hide the big banner and show the small one, open the headerbanner.cssfile, found here headerbanner\styles\prosilver\theme.

Add this:

Code: Select all

.headerbar .header-banner-mobile {
	text-align: center;
	max-width: 100%;
	max-height: 100%;
	display: none;
	border-radius: 0 !important;
}

@media (max-width: 700px) {
.headerbar .header-banner {
	display: none;
}

.headerbar .header-banner-mobile {
	display: inline-block;
	width: 100% !important;
}
}
The first block hides the mobile banner and also removes its corner radius to match the prosilver style.
The second block hides the big banner when the screen is 700px and shows the mobile banner when the screen is at 700px (this can be changed)


Here's a link to how it looks in Prosilver.

Typing it up makes it look like a lot of work, but it's literally 3 small edits in 3 files.

Note: If anyone uses these edits, don't forget to make a backup of the files first and then when you've done the edits - purge the cache in the ACP.
Last edited by DTMWC on Tue Jul 24, 2018 4:40 am, edited 1 time in total.
Boom.
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Question to those using prosilver Header Banner extension

Post by DV1 »

Ok, you've just saved yourself from a yellow card. :)

Will try it and respond later.

Thanks. :)
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Question to those using prosilver Header Banner extension

Post by DV1 »

@ Dan Stylez

The mobile image works perfectly. The only adjustment I'm making is to have it change at 480 instead of at 700 as you have it.

But for some reason I'm now getting a "double-header" on desktop size:

Image

The only place where I have the link to the image is in the Header Banner extension panel in the ACP.

Why would it be repeating?

Thanks.

(Note: background is just desktop)
DV1
Registered User
Posts: 397
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Question to those using prosilver Header Banner extension

Post by DV1 »

Ok, I see what happened. Where you describe in the above the addition to the 'event' template: "Added another div on the next line, so it looks like:". I took it to mean that the two additions were to be added to the previous one. When in fact you simply repeated the first one with the addition in the second code. I went back and noticed that there was a repeat of the div class header-banner, removed it, and now everything looks and works smoothly . :)

Just my opinion, but I must say that HiFiKabin's extension and your mobile modifications have made an easy and substantial solution to the image header questions that so many have asked.

Very good work indeed.

Cheers. :D

Daniel
User avatar
DTMWC
Registered User
Posts: 379
Joined: Tue Jan 16, 2018 6:17 am

Re: Question to those using prosilver Header Banner extension

Post by DTMWC »

Hey,
This is a guess, but reading it back now my step 2 posted above isn't very clear :oops: (i'll edit the above post later)
I showed what the code looks like after adding the div, so if you copied the code exactly from there and added it you have probably got 2 normal banner div's there now.

Quick way to check, open the overall_header_headerbar_after.html file.
If yours finishes on line 34 - you have 2 banners added, it should finish on line 31.

The end of the file should look like this from line 24 to line 31:

Code: Select all

<div class="header-banner">
	<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="{{ HEADERBANNER }}" alt="{{ lang('INDEX') }}"></a>
</div>
<div class="header-banner-mobile">
	<a href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="header-banner-mobile" style="width:100%; border-radius:{{ HEADERBANNER_CORNER }}px; width:{{ HEADERBANNER_SIZE }}px;" src="headerbanner/styles/prosilver/mobile-banner/doncaster-banner-mobile.png" alt="{{ lang('INDEX') }}"></a>
</div>
</div>
{% endif %}
Hopefully you should now have just the one banner on the desktop screen :)

Edit: Glad you got it sorted :D
Boom.
Post Reply

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