How to create mobile responsive logos

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
jhearcht
Registered User
Posts: 37
Joined: Fri Dec 18, 2009 10:58 pm

How to create mobile responsive logos

Post by jhearcht » Sat Sep 30, 2017 2:35 am

PHPBB3.2.1 on Bluehost on Windows 10

Non-coder, new to phpBB

I added a custom forum logo to my non-commercial forum as an extension via david63's SiteLogo3.2. It looks good on PC, but the full-width logo disappears on cell phones in "response" to the limited pixel space. Apparently the assumption of the extension creator was that an unidentified forum is better than no forum at all. But that is not the way I see it.

After queries on the phpBB forum, and a Google search, it seems that if I want the logo to appear on small screens, there is no automated solution. So I am prepared to try to follow some of the cryptic instructions on the Styles forum for manual addition of smaller logos. viewtopic.php?f=64&t=2270871

But I have hit the first roadblock before I even get started : I don't know where to find the forum code to modify. The instructions seem to assume that a professional will know how to locate the HTML source code. As a coding illiterate, I've poked around in the Bluehost FileManager under phpBB, but haven't found anything that looks like editable code. Can someone point me in the right direction? I will much appreciate your help. :?:

User avatar
david63
Jr. Extension Validator
Posts: 12971
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: How to create mobile responsive logos

Post by david63 » Sat Sep 30, 2017 7:26 am

jhearcht wrote:
Sat Sep 30, 2017 2:35 am
Apparently the assumption of the extension creator was that an unidentified forum is better than no forum at all.
That is untrue - as I have told you before that is the intended behaviour of phpBB 3.1 and greater

Also have you tried using the responsive setting in configuration for this extension?
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email or as they will be ignored

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 547
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to create mobile responsive logos

Post by Hanakin » Sat Sep 30, 2017 12:26 pm

its easier than you think manually. but it depends on what you mean by logo? Is it actually a logo or are you referring to a banner? A link to your board would help.

If its an actual logo that you had made by a professional then it should already scale in SVG form. If its the later than you need to treat it as an ad and build different sizes for easy device and switch them out in CSS for those devices which we can help with.

jhearcht
Registered User
Posts: 37
Joined: Fri Dec 18, 2009 10:58 pm

Re: How to create mobile responsive logos

Post by jhearcht » Sat Sep 30, 2017 7:06 pm

david63 wrote:
Sat Sep 30, 2017 7:26 am
Also have you tried using the responsive setting in configuration for this extension?
David

I had the "make responsive" setting checked "yes" in Logo Options, and the custom logo was missing on my phone. I thought I had tried it both ways, but now I'm not so sure.

Anyway, I just checked "no", and the logo now appears on the small screen. But that's just the reverse of what I assumed to be the function of that setting. Apparently this frustrating odyssey began with an unwarranted assumption. Now my misunderstanding of how "responsiveness" works seems to be crux of the missing logo problem.

The only problem now is that there is a very large blank space between the logo/banner and the first bar of the Home page. Is there any way to reduce that empty space following the logo/banner? Do I need to edit the source code?

Thanks for the help.

PS__I apologize for the implication that the "creator" of the extension was at fault. As usual, it was ignorant operator error.
Last edited by jhearcht on Sat Sep 30, 2017 7:21 pm, edited 1 time in total.

jhearcht
Registered User
Posts: 37
Joined: Fri Dec 18, 2009 10:58 pm

Re: How to create mobile responsive logos

Post by jhearcht » Sat Sep 30, 2017 7:12 pm

Hanakin wrote:
Sat Sep 30, 2017 12:26 pm
its easier than you think manually. but it depends on what you mean by logo? Is it actually a logo or are you referring to a banner? A link to your board would help.
As an amateur, I'm not clear on the technical distinction between a "logo" and a "banner". I've been calling it a "logo" because that's what the extension was called. It's essentially a replacement for the phpBB logo/banner at the top of this page, and extends across the full width. The logo and banner are one single graphic image. I created the image myself, since I'm comfortable with a graphical interface, but not with the text-based interface of the source code. I prefer to leave the manual modifications to the pros.

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 547
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to create mobile responsive logos

Post by Hanakin » Sun Oct 01, 2017 1:55 pm

if its a banner then what you need to do is create different sizes as I said make it to for desktop/tablet/mobile
as I said we need to see your logo in order to provide precise assistance.

essentially treat it like an ad and just swap it out at different screen sizes.

mobile: min 320px, max 599px
tablet: min 600px, max: 700px
desktop: min: 701px, max: 1152px

keep the bulk of your design in the min boundaries but make the overall graphic the max size. Then you an use css to swap and crop as needed.

jhearcht
Registered User
Posts: 37
Joined: Fri Dec 18, 2009 10:58 pm

Re: How to create mobile responsive logos

Post by jhearcht » Sun Oct 01, 2017 7:06 pm

Hanakin wrote:
Sun Oct 01, 2017 1:55 pm
if its a banner then what you need to do is create different sizes as I said make it to for desktop/tablet/mobile
After reading some of the posts about "responsiveness", I had concluded that I would have to create logo/banners of different sizes, and then manually modify the code to select the appropriate image for each screen size. But I was completely surprised to see that the logo/banner (created for PC screens) suddenly appeared on my phone after I turned off the "make responsive" option in the Custom Site Logo extension. I am still confused about all this, but for some unknown reason the disappearing logo problem has disappeared. I still don't know what the "make responsive" option actually does. But I guess I shouldn't look a gift horse in the mouth.

Now, if I can find-out our how to adjust the white space below the logo, I may never have to grope around in the source code again. See attached screenshot. I'm guessing that the white space pixel size may be related to the original PC image size (830px x 224px) instead of the reduced size on phone screens.

Screenshot_forum_2_10-01-2017.png

User avatar
Rahber
Style Customisations
Style Customisations
Posts: 2706
Joined: Tue Feb 12, 2008 3:39 pm
Location: Pakistan
Name: Rahber
Contact:

Re: How to create mobile responsive logos

Post by Rahber » Sun Oct 01, 2017 8:11 pm

What is the link to your board so i can see?
twitter : @Rahber | For Custom Style Hire Me

User avatar
Joyce&Luna
Registered User
Posts: 125
Joined: Wed Oct 14, 2015 3:46 pm
Location: Germany
Name: Anke
Contact:

Re: How to create mobile responsive logos

Post by Joyce&Luna » Sun Oct 01, 2017 11:41 pm

Hello

I mainly use for my style only responsive logo which you can reduce 320px.
Additional smaller pictures are not necessary.

For example:
https://www.phpbb.com/customise/db/styl ... 2/demo/3.2
With Firefox, press CTRL + Shift + M and then decrease it from right to left.
My contributions are translated from German to English by google. This can lead to misunderstanding.

phpBB Style Design

jhearcht
Registered User
Posts: 37
Joined: Fri Dec 18, 2009 10:58 pm

Re: How to create mobile responsive logos

Post by jhearcht » Mon Oct 02, 2017 6:42 pm

Rahber wrote:
Sun Oct 01, 2017 8:11 pm
What is the link to your board so i can see?
http://enformationism.info/phpBB3/

User avatar
Rahber
Style Customisations
Style Customisations
Posts: 2706
Joined: Tue Feb 12, 2008 3:39 pm
Location: Pakistan
Name: Rahber
Contact:

Re: How to create mobile responsive logos

Post by Rahber » Mon Oct 02, 2017 7:08 pm

Okey so bear with me while we try this out. I see originally your logo is 224px which is hard-coded so that's why when it goes into responsive it still maintains its height.

in your responsive.css

find

Code: Select all

@media (max-width: 500px) {


add the following code after that

Code: Select all

span.site_logo {
    height: 100px !important;
}
You need to adjust value for the height and also you have to do this for other media query well so that on each resolution it appear as needed. If i found a more easier way i will post here too.
twitter : @Rahber | For Custom Style Hire Me

jhearcht
Registered User
Posts: 37
Joined: Fri Dec 18, 2009 10:58 pm

Re: How to create mobile responsive logos

Post by jhearcht » Tue Oct 03, 2017 6:23 pm

Rahber wrote:
Mon Oct 02, 2017 7:08 pm
in your responsive.css
Without knowing what to look for, I've been clicking around in the File Manager trying to find where the code for the forum layout is hidden. Now, I just found it under "adm/style/adm.css". Before I start blundering around in the code, I suppose I need to save a backup copy of the original. I didn't see a tool for backups, so I just copied and saved to a new filename. With that to fall back on, I'll try the changes you recommended. Thanks.

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 547
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to create mobile responsive logos

Post by Hanakin » Wed Oct 04, 2017 3:32 am

adm/style/adm.css <- this is not the code you are looking for
Rahber wrote:
Mon Oct 02, 2017 7:08 pm
in your responsive.css

jhearcht
Registered User
Posts: 37
Joined: Fri Dec 18, 2009 10:58 pm

Re: How to create mobile responsive logos

Post by jhearcht » Fri Oct 06, 2017 6:38 pm

Hanakin wrote:
Wed Oct 04, 2017 3:32 am
adm/style/adm.css <- this is not the code you are looking for
I'd appreciate a hint to help me find "responsive.css". The closest I could find was "adm.css", which has a section for "responsive tabs". I'm looking in the Bluehost File Manager under PHPBB.

PS__I have now found under "styles/phpbb/theme" a file named "stylesheet.css", for my forum's optional style "prosilver Special Edition", which has a section named "responsive.css changes". I don't see any reference to the image that I added to replace the phpBB logo/banner.

Is that the file you referred to? Is that where I can edit the white space below the logo/banner?

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 547
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: How to create mobile responsive logos

Post by Hanakin » Fri Oct 06, 2017 6:51 pm

its in your styles theme folder https://github.com/phpbb/phpbb/tree/mas ... lver/theme

if you are wanting to modify a theme I can not stress enough to just add your own custom css file at the end of stylesheets.css and put all changes in this file.

viewtopic.php?f=591&t=2426201

Post Reply

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

Who is online

Users browsing this forum: No registered users and 5 guests