Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
Locked
corleoner
Registered User
Posts: 189
Joined: Wed Jan 29, 2014 9:57 pm

Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by corleoner » Thu Jun 30, 2016 2:38 pm

My current style is pretty heavily modified and I rolled out some big changes right before phpbb released 3.1 so I'm holding off upgrading because I don't want to put my users through more change so soon. With that said, I'm trying to keep my current setup as modern as possible at least until 2018 I imagine at that time I'll start looking at upgrading to 3.2.

So, here's what I'm after: I'd like to edit my responsive css to float the postprofile on the left, but restrict the height to only the space used. I want it to float at the top and allow the empty space beneath it to be filled with text.

I don't want to alter the html too much because I only use this one style which has some pretty good responsive css, but I think the viewtopic could be improved and I was hoping this was something I could accomplish with some customization.

Any idea how this would be achieved?

If html change is required, I would be open to also using it on the desktop version, I think it's not a bad idea to place the profile in a corner instead of taking up the entire margin.

Here's my phone view:
01.png
01.png (57.09 KiB) Viewed 5025 times
As you can see, a lot of wasted space for users trying to navigate with small screens.

Thanks guys,

User avatar
Christian 2.0
Former Team Member
Posts: 4442
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by Christian 2.0 » Thu Jun 30, 2016 7:40 pm

Hi there!

This is definitely possible, although would almost certainly need a HTML edit. Essentially what you'd want to do is relocate the postprofile block to sit within the reply content area, then float it leftt, add some right/bottom margin and the text will flow around it.

Will need some CSS changes to cater to make the reply area fill the content that the postprofile has just vacated.

I don't suppose you could share a link to your forum, or PM it to me if you'd rather not share publicly?

Thanks :)
๐Ÿš€ Premium phpBB Styles
Premium 3.2 Styles: Modern phpBB Style, NEW - Volare Material phpBB Style
Premium 3.2 Extensions: phpBB sidebar Extension
Custom work available on request

corleoner
Registered User
Posts: 189
Joined: Wed Jan 29, 2014 9:57 pm

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by corleoner » Thu Jun 30, 2016 8:16 pm

Christian 2.0 wrote:Hi there!

This is definitely possible, although would almost certainly need a HTML edit. Essentially what you'd want to do is relocate the postprofile block to sit within the reply content area, then float it leftt, add some right/bottom margin and the text will flow around it.

Will need some CSS changes to cater to make the reply area fill the content that the postprofile has just vacated.

I don't suppose you could share a link to your forum, or PM it to me if you'd rather not share publicly?

Thanks :)
Hey Christian, thanks for the response. Absolutely, my site is https://raiderforums.com

It's got a heavily modded template and style, but I'm very open to changing HTML, or even adding a responsive condition for html (I've ended up having to do that on certain items I don't want displayed).

Let me know what you think, my current solution was to minimize the profile to 8% and eliminate the username, but that's only temporary, I don't think looks very clean, nor professional. I think ideally, a normal responsive size profile which sits in the corner would be our best solution.

User avatar
Christian 2.0
Former Team Member
Posts: 4442
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by Christian 2.0 » Thu Jun 30, 2016 9:41 pm

Heh, I love your forum's design! You've done an excellent job :) (I particularly love how you've incorporated the 'RF' into Twitter Feed), this gets my design senses tingling :mrgreen:

So, back to the question at hand...

A HTML edit is definitely required. The reason is because the reply body is made up of a whole bunch of block elements. If you imagine trying to wrap a brick around a round pole it's not going to wrap around, and that's essentially what's happening here.

To resolve, you need to place the postprofile code in the same block element (div) as the reply content.

Here's how I'd do it on a fresh prosilver. Given that you're heavily modified I'll explain the steps I'm taking and perhaps you can figure out how to make it work for you.

1) In viewtopic_body.html , grab the postprofile code. Copy to your clipboard and remove from the file. It's a definition list that looks a bit like this:

Code: Select all

<!-- IF not postrow.S_IGNORE_POST -->
			<dl class="postprofile" id="profile{postrow.POST_ID}">
			<dt>
				<!-- IF postrow.POSTER_AVATAR -->
					<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
				<!-- ENDIF -->
				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
			</dt>

			<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd>{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->

		<dd>&nbsp;</dd>

		<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}:</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
		<!-- IF postrow.POSTER_JOINED --><dd><strong>{L_JOINED}:</strong> {postrow.POSTER_JOINED}</dd><!-- ENDIF -->
		<!-- IF postrow.POSTER_FROM --><dd><strong>{L_LOCATION}:</strong> {postrow.POSTER_FROM}</dd><!-- ENDIF -->

		<!-- IF postrow.S_PROFILE_FIELD1 -->
			<!-- Use a construct like this to include admin defined profile fields. Replace FIELD1 with the name of your field. -->
			<dd><strong>{postrow.PROFILE_FIELD1_NAME}:</strong> {postrow.PROFILE_FIELD1_VALUE}</dd>
		<!-- ENDIF -->

		<!-- BEGIN custom_fields -->
			<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
		<!-- END custom_fields -->

		<!-- IF not S_IS_BOT -->
		<!-- IF postrow.U_PM or postrow.U_EMAIL or postrow.U_WWW or postrow.U_MSN or postrow.U_ICQ or postrow.U_YIM or postrow.U_AIM or postrow.U_JABBER -->
			<dd>
				<ul class="profile-icons">
					<!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_EMAIL --><li class="email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_WWW --><li class="web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}: {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_ICQ --><li class="icq-icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_YIM --><li class="yahoo-icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_AIM --><li class="aim-icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
					<!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
				</ul>
			</dd>
		<!-- ENDIF -->
		<!-- ENDIF -->

		</dl>
	<!-- ENDIF -->
Next up, find the output variable for the post content:

Code: Select all

<div class="content">{postrow.MESSAGE}</div>
Replace with:

Code: Select all

<div class="content">
    *your postprofile code here* (the code from above)
    {postrow.MESSAGE}
</div>
Then we need to increase the width of the postbody class as now it has the full width to play with.

In common.css, find (yours will be different as you have profiles floated to left):

Code: Select all

/* Post body styles
----------------------------------------*/
.postbody {
	padding: 0;
	line-height: 1.48em;
	color: #333333;
	width: 76%;
	float: left;
	clear: both;
}
Change width: 76% to width: 100%;

and that should be it! Here's how it looks on a fresh prosilver:
profile.png
I wouldn't go so far as to call it a perfect solution and it probably needs a bit of tidying up with some padding / margin / border etc, but this should point you in the right direction.

Would love to hear how it goes :)
๐Ÿš€ Premium phpBB Styles
Premium 3.2 Styles: Modern phpBB Style, NEW - Volare Material phpBB Style
Premium 3.2 Extensions: phpBB sidebar Extension
Custom work available on request

User avatar
Lumpy Burgertushie
Registered User
Posts: 64705
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by Lumpy Burgertushie » Thu Jun 30, 2016 9:59 pm

pretty cool solution Christian.
:D

robert
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

corleoner
Registered User
Posts: 189
Joined: Wed Jan 29, 2014 9:57 pm

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by corleoner » Thu Jun 30, 2016 10:12 pm

You da man Christian!

I've now got enough work to keep me busy for the night haha, too bad I don't have a prosilver style, I'd be done already, but I feel confident now I can get it done. I'll post some pics of what I come up with, but give me some time because I want it looking good before I show the results :)

I appreciate the compliment, I've put a ton of work into the site. I think most members take it for granted, you should hear the requests I get (and complaints about every little thing), it's nice to hear that someone who works with this stuff likes what I've done. This has been my first foray into managing a website and I've had a lot of fun with it (as you can probably tell from the way the site has developed).

Anyway, I'll be in touch soon.

User avatar
Christian 2.0
Former Team Member
Posts: 4442
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by Christian 2.0 » Fri Jul 01, 2016 8:14 am

Awesome, the hard work definitely shows :)

Your style is based on prosilver, so the instructions above will be loosely accurate. Excited to see how you style it out :)
๐Ÿš€ Premium phpBB Styles
Premium 3.2 Styles: Modern phpBB Style, NEW - Volare Material phpBB Style
Premium 3.2 Extensions: phpBB sidebar Extension
Custom work available on request

corleoner
Registered User
Posts: 189
Joined: Wed Jan 29, 2014 9:57 pm

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by corleoner » Fri Jul 01, 2016 6:18 pm

I've got a really good grasp on it right now, your solution was nearly perfect for my style, I did have to play around with the html though.

I had to move a few things around, and a couple classes I renamed so that the css wouldn't effect other parts of the site.

I'll post exactly what I did, but first a quick question.

For the most part, the desktop version looks very similar with the edits I made to the html. I had already deleted subjects from replies, so having the first post subject above the post border was fine for me. My real issue is that I don't like the text that wide for my desktop site, I need to have the margins otherwise it overwhelms the eyes to see a gigantic wall of text like that. For mobile though, it's perfect, I think it should be the standard, when I show you the results, I think you might agree.

Anyway, the solution seems simple, but is out of my grasp of coding knowledge:

I've already got seperate responsive conditioned css so styling it isn't an issue.

A) either style the desktop profile so that the height extends 100% the length of the content (creating a margin which would essentially mimic the profile space we utilize pre-edits). If I could accomplish that, the site would maintain nearly the exact look I had before (which I would like).
I've tried to do that, but nothing I try works for extending it.

or the 2nd solution:
B) add an IF condition in the html which would allow the edits for only @media only screen and (max-width: 1199px).

Which do you think is the better option, and would you possibly know the edit to accomplish that?

corleoner
Registered User
Posts: 189
Joined: Wed Jan 29, 2014 9:57 pm

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by corleoner » Fri Jul 01, 2016 10:43 pm

I tried one idea, which was to include both codes, and div class them responsive-hide and desktop-hide with display:none in the proper css.

It does work, but does not pass validation, gives me a ton of errors when I run the source code so I took it off. I'm sure I either did something wrong, or what I did is the improper way to do it.

corleoner
Registered User
Posts: 189
Joined: Wed Jan 29, 2014 9:57 pm

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by corleoner » Fri Jul 01, 2016 11:46 pm

OK, disregard that last part, I'm on the right track after adjusting some margins from surrounding content. I should have some results soon :)

corleoner
Registered User
Posts: 189
Joined: Wed Jan 29, 2014 9:57 pm

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by corleoner » Sat Jul 02, 2016 1:53 am

OK, here's what I came up with:

As you can see, very little distinguishable difference before before and after for desktop views, but the new effect to mobile responsive was dramatic.
Screenshot (147).png
Thanks so much for the help Christian!

User avatar
Christian 2.0
Former Team Member
Posts: 4442
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by Christian 2.0 » Sat Jul 02, 2016 10:08 am

You're welcome! That looks great, really happy to hear that you've been able to figure it out :)

Let me know if I can do anything else for you, otherwise, have a great weekend :)
๐Ÿš€ Premium phpBB Styles
Premium 3.2 Styles: Modern phpBB Style, NEW - Volare Material phpBB Style
Premium 3.2 Extensions: phpBB sidebar Extension
Custom work available on request

corleoner
Registered User
Posts: 189
Joined: Wed Jan 29, 2014 9:57 pm

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by corleoner » Mon Jul 04, 2016 7:36 pm

A quick update, over the weekend I spent some time figuring out how to optimize the mobile space a little better.

First since it doesn't seem necessary to have the author name under the avatar and right next to it in the subject, I removed the "by:" in the language file so that just the username followed by the date/time was displayed. That allowed the username to only be used in one spot and looks pretty good that way.

I was having trouble with elongated avatars not sizing correctly when I reduced profile width %, no matter what I did, the height of skinny pics were distorting too long. The problem was that those posts would hit the avatar margin and go to the next line. If the first line started with a quote (which is quite often) then the entire length of the quote would be cut off the width of the profile. It's a minor thing, but I like to do things right so the only solution I could come up with was to .css resize avatars to square. That solved my problem perfectly.

I also borrowed something from arty's mobile style which I had previously installed. He had a great popup .js for menu items and I was able to use that to cut down the profile space on desktop and eliminate it altogether on responsive.

We have a lot of mods installed, and when you start adding too many items in the profile it stretches the posts too far and makes it annoying to scroll through all the empty space. This solution worked out well.
Here's how it turned out:
On phone
Screenshot (154).png
On desktop
Screenshot (158).png

User avatar
Christian 2.0
Former Team Member
Posts: 4442
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by Christian 2.0 » Mon Jul 04, 2016 8:57 pm

Sweet! Are your members loving it? :D
๐Ÿš€ Premium phpBB Styles
Premium 3.2 Styles: Modern phpBB Style, NEW - Volare Material phpBB Style
Premium 3.2 Extensions: phpBB sidebar Extension
Custom work available on request

corleoner
Registered User
Posts: 189
Joined: Wed Jan 29, 2014 9:57 pm

Re: Any way to float profile (floated so that post text can fill in below)? [For responsive mode]

Post by corleoner » Tue Jul 05, 2016 4:19 am

Christian 2.0 wrote:Sweet! Are your members loving it? :D
Ohh some people resist change for as long as possible, and any alteration sets them into hysteria. I imagine some of them must have swiss cheese underwear and toothbrushes that look like old scrubbers.

For the most part though, they're happy, but I do this sort of thing for myself. I like it and that's what matters.

Locked

Return to โ€œ[3.0.x] Styles Support & Discussionโ€

Who is online

Users browsing this forum: No registered users and 18 guests