How to create mobile responsive logos

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

Re: How to create mobile responsive logos

Post by Sniper_E » Wed Oct 18, 2017 4:39 pm

jhearcht wrote:
Tue Oct 17, 2017 5:58 pm
Where did you find those lines? I opened "overall_header.html" in Prosilver and Prosilver_se, and several other Style & Theme & Template folders, but didn't see any reference to "BothAndBlog".
I went to that site of yours and right clicked on the page and selected View Page Source.

Code: Select all

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

			<div id="site-description" class="site-description">
				<a id="logo" class="logo" href="http://www.bothandblog.enformationism.info" title="Home"><span class="site_logo"></span></a>
				<h1>BothAndBlog Forum</h1>
				<p></p>
				<p class="skiplink"><a href="#start_here">Skip to content</a></p>
			</div>

									
			</div>
					</div>
This above code is what I see in your header.

But you have some weird stuff going on in that site. I can not locate your site_logo image. At resolution 930px your image will not reduce in size and hides part of it. It should reduce in size if you have max-width: 100%; which David's ext gives you. That height could be coming from any of those classes or that id also. I can not see where your problem is coming from so I would suggest you start over with a fresh install of phpBB and David's extension and go from there. That may get rid of whatever you have in there causing that problem. I can not find that css showing anywhere so I can not help you with those extra codes you have in there.
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
:!: Sniper_E Styles | phpbbmodders :!:

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 20, 2017 12:31 am

Sniper_E wrote:
Wed Oct 18, 2017 4:39 pm
But you have some weird stuff going on in that site. I can not locate your site_logo image. At resolution 930px your image will not reduce in size and hides part of it. It should reduce in size if you have max-width: 100%; which David's ext gives you. That height could be coming from any of those classes or that id also. I can not see where your problem is coming from so I would suggest you start over with a fresh install of phpBB and David's extension and go from there. That may get rid of whatever you have in there causing that problem. I can not find that css showing anywhere so I can not help you with those extra codes you have in there.
The only thing I added to the original "Prosilver" theme was 1> the PC size logo image, 2> the Prosilver_se" theme, and 3> the " david63's SiteLogo3.2" extension. I haven't done any coding. The "responsive" logo re-size was included in "SiteLogo". All of this looks good on my PC, and on phone screens, except for out-of-proportion whitespace following the logo.

I'm assuming that the extra whitespace below the logo was a result of the "responsive" coding in the extension. Any "weird stuff" is not my doing, and I don't know how to fix it. Hence this topic. But the discussion above seems to have strayed into extraneous matters that confuse the simple issue : how to automatically (responsively) reduce the allocated logo space to fit small screens, while maintaining appropriate spacing between objects?

Anyway, what could I do differently in a clean install, other than eliminate the "Prosilver_se" color scheme? Or to just forget the idea of having a custom logo/banner?

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

Re: How to create mobile responsive logos

Post by Sniper_E » Fri Oct 20, 2017 1:29 am

You're right we've gone off track. It is hard to read your files or see where that problem is coming from.
That site I'm looking at is in one location and I just found out that image is from somewhere else.

If I had time I could do your styling for you but I have other projects I'm working on.
I started fooling with it on my test site but I don't have time for that. Good luck.

Edit: I fooled around with it a little. The image as a background was giving me that same trouble.
So I put your image in as an image in the header instead of as a background image.
I changed the <div id="page-header"> section to make it an image.

styles/prosilver_se/template/overall_header.html

Code: Select all

	<div id="page-header">
		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">
				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><img src="http://gnomon.enformationism.info/Images/Forum Logo 4_830x224_09-20_2017.png" alt="" /></a>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
			<!-- EVENT overall_header_headerbar_after -->
		</div>
		<!-- EVENT overall_header_navbar_before -->
		<!-- INCLUDE navbar_header.html -->
	</div>
Then I adjusted David's site_logo_common.css a little.

Code: Select all

/**
* site_logo_common.css
**/

#logo img {
    display: block;
    margin: 0 auto 10px;
    max-width: 100%;
}

#logo {
    display: block !important;
    box-sizing: border-box;
}

.headerbar{
	width: auto;
	background-size: contain;
	background-color: transparent;
}

.sl-headerbar {
	margin: 0 auto;
	padding: 5px;
	border-radius: 7px;
	position: relative;
	display: block;
	max-width: 100%;
}

#sl-new-desc {
	clear: left;
	background-color:transparent !important;
}

#sl-new-desc h1 {
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

#sl-new-desc p {
	line-height: 1.3em;
	font-size: 1.1em;
	margin-bottom: 1.5em;
}
You can check the results out on my test site. http://www.sniper-e.com/ and switch to prosilver_se style.
It could still use some fine adjustments to get it looking exactly like you want it to.
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
:!: Sniper_E Styles | phpbbmodders :!:

Post Reply

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

Who is online

Users browsing this forum: No registered users and 2 guests

cron