Help request to make banners responsive

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
The Other Jason
Registered User
Posts: 14
Joined: Sun Oct 11, 2020 9:54 pm

Help request to make banners responsive

Post by The Other Jason »

Hi all,

I'm not an experienced coder, but I have learned how to make a number of custom alterations to the board style I chose (naruto_shippuuden). However, I cannot seem to find how to make the top and bottom banners responsive for phones, tablets, etc. I've looked at several older tutorials on these boards, but none have fully answered the question. Here is a link to my board in progress:

https://www.battleoftheplanets.info/cnc

Any help or guidance on how to make the header and footer graphics responsive would be greatly appreciated. I think the "naruto" style looks toward the master "prosilver" style for to treat the banners, but I'm not entirely certain of that.

All my best,

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

Re: Help request to make banners responsive

Post by HiFiKabin »

If you look at how I do things with my Header Banner extension that should help put you on the right track
The Other Jason
Registered User
Posts: 14
Joined: Sun Oct 11, 2020 9:54 pm

Re: Help request to make banners responsive

Post by The Other Jason »

Hi James,
HiFiKabin wrote:
Mon Oct 12, 2020 9:12 am
If you look at how I do things with my Header Banner extension that should help put you on the right track
Thank you for the pointer. I checked into the extension and the FAQ and information for it. However, I have not been able to decipher exactly where to look, or what to alter that has helped. I'm still investigating. But if you have any additional suggestions on where to look within any of the code/settings, I'd be grateful.

Thanks again!

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

Re: Help request to make banners responsive

Post by HiFiKabin »

The relevant bit of the stylesheet is below

Code: Select all

.headerbar .header-banner {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.headerbar .header-banner {
		width: 100% !important;
	}
}
(the second block of code if for Internet Explorer only)

Obviously you will need to change the class names, just make sure that you do not have a minimum size for your banner otherwise it will not fully resize correctly.
The Other Jason
Registered User
Posts: 14
Joined: Sun Oct 11, 2020 9:54 pm

Re: Help request to make banners responsive

Post by The Other Jason »

Hello James,

Thank you again for your help. I have been trying various methods all week, trying to alter items with the code below. Once I activate the extension and enter my options, it has done everything from displaying a missing graphic button over the top banner to displaying it as a small horizontal stripe. Everything I have tried only seems to make matters worse. So I'm afraid I'm really missing something basic.
HiFiKabin wrote:
Tue Oct 13, 2020 7:46 am
I wasn't sure what you meant by changing the class names. Would that be entering the name of the graphic I'm using in the place of ".headerbar" and/or ".header-banner"?

Thanks again for any more help and I'm incredibly sorry to be a bother with this. I hope it's the last thing I need to crack before opening my board up.

Best,

The Other Jason
Last edited by Mick on Sat Oct 17, 2020 9:25 am, edited 1 time in total.
Reason: Removed unnecessary full quoting
User avatar
Mannix_
Registered User
Posts: 922
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: Help request to make banners responsive

Post by Mannix_ »

Did you try adding background-size: contain; property to your banner images ?
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.3.x etc. contact me here or here.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4972
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: Help request to make banners responsive

Post by HiFiKabin »

The header Banner now appears to be working correctly.

Can you post the code you are using for the footer banner using the code tags and let me know exactly where you are placing that code in the template file.
User avatar
Lumpy Burgertushie
Registered User
Posts: 68181
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Help request to make banners responsive

Post by Lumpy Burgertushie »

when you first posted this request I checked your board. your banner image was already responsive down to a certain size.
it still is the same now.
check it here:
http://ami.responsivedesign.is/?url=htt ... .info/cnc/#
notice that it is responsive down to tablet size but when it gets smaller is when it starts to cut off the right side of the banner.

I was not able to find where in your css you have the settings for that.


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
DTMWC
Registered User
Posts: 375
Joined: Tue Jan 16, 2018 6:17 am

Re: Help request to make banners responsive

Post by DTMWC »

Lumpy Burgertushie wrote:
Sat Oct 17, 2020 11:53 pm
when you first posted this request I checked your board. your banner image was already responsive down to a certain size.
it still is the same now.
check it here:
http://ami.responsivedesign.is/?url=htt ... .info/cnc/#
notice that it is responsive down to tablet size but when it gets smaller is when it starts to cut off the right side of the banner.

I was not able to find where in your css you have the settings for that.


robert
It's done using the background size cover here Robert,

Code: Select all

#page-header {
    clear: both;
    background: url(./images/cncheader.jpg) no-repeat 0 0;
        background-size: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
}
From experience I've always found for banners which you wish to have text on, it's better to have one banner for normal screens and one for smaller screens, otherwise by the time your big banner is down to small screen size - the text is so small nobody can read it,
If you use CodePen... Give @SMKS's Thank You NHS pen a like.
User avatar
Lumpy Burgertushie
Registered User
Posts: 68181
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Help request to make banners responsive

Post by Lumpy Burgertushie »

thanks, however, why does it stop affecting the image size when it gets down to phone size?


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
Mannix_
Registered User
Posts: 922
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: Help request to make banners responsive

Post by Mannix_ »

Lumpy Burgertushie wrote:
Sun Oct 18, 2020 3:26 am
thanks, however, why does it stop affecting the image size when it gets down to phone size?


robert
That's how cover works. It's better to use contain that keeps the aspect ratio of the image and scale its down to fit in the container.
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.3.x etc. contact me here or here.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
The Other Jason
Registered User
Posts: 14
Joined: Sun Oct 11, 2020 9:54 pm

Re: Help request to make banners responsive

Post by The Other Jason »

Hello James,
HiFiKabin wrote:
Sat Oct 17, 2020 10:23 am
The header Banner now appears to be working correctly.

Can you post the code you are using for the footer banner using the code tags and let me know exactly where you are placing that code in the template file.
The header does work to a certain extent, but when I check it on my phone, it cuts the 1/3 off the right side of the image and shows a little of the extra over-run for it on the bottom. It's still not sizing down like I was hoping to see.

The footer.. I can try. Again, I apologize if I supply the wrong bits, I'm just not well-versed enough to be sure it's what you're asking for... But does this help?

This is in a file named "naruto_adds.css" custom style that mentions the footer graphic:

#page-footer {
clear: both;
background: url(./images/footer.jpg) no-repeat 0 100%;
height: 350px;
margin: 0;
}

#page-footer h3 {
margin-top: 20px;
}


It is also mentioned in the "common.css" custom style file, here:

.footer-row {
font-size: 10px;
line-height: 1.8;
margin: 0;
}


I'm not sure if the actual directions for the placement of the footer (or header) are described in the custom style, or if they point to the overall pro silver style.

Best,

The Other Jason
Last edited by The Other Jason on Mon Oct 19, 2020 1:22 am, edited 2 times in total.
The Other Jason
Registered User
Posts: 14
Joined: Sun Oct 11, 2020 9:54 pm

Re: Help request to make banners responsive

Post by The Other Jason »

Hello,
Lumpy Burgertushie wrote:
Sat Oct 17, 2020 11:53 pm
when you first posted this request I checked your board. your banner image was already responsive down to a certain size.
it still is the same now.
check it here:
http://ami.responsivedesign.is/?url=htt ... .info/cnc/#
notice that it is responsive down to tablet size but when it gets smaller is when it starts to cut off the right side of the banner.

I was not able to find where in your css you have the settings for that.
Thank you, this site will help immensely as I work with this. Better than switching back and forth to my devices to check. I am unsure of location in the css settings too.

This is all based on the "naruto_shippuuden" custom style that I have been slowly molding into what I am hoping for. I have tried to change as little in the code as possible, save for pointing to my new graphics. Some of what I have had to change - like eliminating black lines around file attachments and eliminating the descriptive dialogue for them - was done in the pro silver style code. So I know some of this custom still points to the original and that may be where some of the problems are coming from.

Thanks for your help,

The Other Jason
Last edited by The Other Jason on Mon Oct 19, 2020 1:21 am, edited 1 time in total.
The Other Jason
Registered User
Posts: 14
Joined: Sun Oct 11, 2020 9:54 pm

Re: Help request to make banners responsive

Post by The Other Jason »

Hello,
It's done using the background size cover here Robert,

Code: Select all

#page-header {
    clear: both;
    background: url(./images/cncheader.jpg) no-repeat 0 0;
        background-size: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
}
From experience I've always found for banners which you wish to have text on, it's better to have one banner for normal screens and one for smaller screens, otherwise by the time your big banner is down to small screen size - the text is so small nobody can read it,
Yes, I've seen a couple tutorials that suggest different banner sizes for other screen sizes. I'm fine with creating different banners if that's what it will take. I haven't looked real closely at how to accomplish that yet though.

Thanks,

The Other Jason
The Other Jason
Registered User
Posts: 14
Joined: Sun Oct 11, 2020 9:54 pm

Re: Help request to make banners responsive

Post by The Other Jason »

Hello James,
HiFiKabin wrote:
Mon Oct 12, 2020 9:12 am
If you look at how I do things with my Header Banner extension that should help put you on the right track
There is one other issue I've noticed when I enable the Header Banner extension. It shows an outlined box with a question mark in the final displayed header graphic. I think that's looking for the site logo? I have that button disabled in your extension, but I see there is an invisible link still active in my banner. I don't want it there so I'm going to see if I can find where to look to disable that completely. That may also be interfering with allowing your extension to operate correctly.

Best,

The Other Jason
Post Reply

Return to “phpBB Custom Coding”