Online icon below profile

[DV1]

First, I wish everyone here a Merry Christmas and a Good New Year in 2020. I think we can all agree we need some good years ahead.

I think this one will be simple for the pros here.

online-icon-move.png

I have a nice gif with a slightly moving candle-flame that I'm using as the user online icon. Thing is, in the regular position, top-right, it competes too much with the avatar. How do I get it to the place shown in the image?

Thanks

[Mannix_]

Content.css find

Code: Select all

.online {
    background-image: none;
    background-position: 100% 0;
    background-repeat: no-repeat;
}

change
background-position: 100% 0; to background-position: 100% 100%;

[EA117]

Agreed with the background-position: adjustment, although note this background image (in the modified prosilver that appears to be in use here) is attached to the post row. Which means "bottom right" now puts the online image in competition with the "to top" link arrow, and potentially "very far away" from the rest of the profile display.

You could adjust downwards from 100% to at least keep yourself from overlaying the "to top" link arrow. But since the post row is of variable height depending on the post, and the profile height is variable depending on the profile, it would be unlikely that any percentage gives you a consistently pleasing position in relationship to the profile area.

Updated: Probably the least change plan would be to move the existing conditional online class so that it's no longer applied to the post row, and instead apply it to the postprofile block instead. And then adjust the internal padding of the postprofile block to be expecting the background image, and not allow any content to overlay where the background image is going to appear.

Meaning remove the current conditional <!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF --> that is adding the online class to the post row in the viewtopic_body.html template here:

Code: Select all

<div id="p{postrow.POST_ID}" class="post has-profile <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF --><!-- IF postrow.POSTER_WARNINGS --> warned<!-- ENDIF -->">
	

And then add that same <!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF --> conditional code to make online a conditional class of "postprofile" instead. Such that the line which emits the postprofile line now looks like:

Code: Select all

		<dl class="postprofile <!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF -->" id="profile{postrow.POST_ID}"<!-- IF postrow.S_POST_HIDDEN --> style="display: none;"<!-- ENDIF -->>

And then in your .CSS files, adjust the postprofile padding to be inclusive of the 58px high image plus a 10px margin between the background image and the content:

Code: Select all

.postprofile {
	padding-bottom: 68px;
}

And then use the same background-position: mannix had pointed to, to give yourself an 8px margin like the rest of the content, as well as pushing the image to the bottom of the profile area instead of the top:

Code: Select all

.online {
    background-position: 8px 100%;
}

Which should give you a display more consistently like this:

online.png

It looks like other displays such as the user profile would not need the same adjustment, and are fine as-is.

Since you changed templates in addition to CSS, don't forget to use ACP Purge Cache to force rebuilding to see the changes. If you weren't already doing that for CSS-only changes too, in order to increment the asset version.

[DV1]

EA117

Yes, I was going to post the effect that you just described. I thought at first it worked looking at one post but then on another I could see how it moved according to the length.

Maybe by extending - even slightly - the bottom parameters of the profile block?

[EA117]

Maybe by extending - even slightly - the bottom parameters of the profile block?

Agreed, you'll play with the position of the background just like mannix was already recommending, but also adjust the internal padding of the profile area so that it "expects" the background image and will avoid allowing any text or other content to overlap the background image.

But the big change is moving the conditional application of the online class from the post row over to the postprofile block, since that's a template-based change instead of just a CSS-based change.

My earlier post is updated with the changes that I'm trying to describe; whether that's an extent you want to go to, or are happy just picking a CSS-only percentage value change which "looks good in most cases."

[DV1]

Thanks, EA117 and Mannix_

I have some errands to do so will post later tonight or early tomorrow as to results.

Daniel

[DV1]

It works.

candle-light-dark-styles.jpg

As you can see, it really goes well with the dark style I'm working on (the moving of the flame is noticeable). Doesn't look bad on the light style but I will have to look around for an animated candle gif with a transparent background.

The only thing left on this is when it collapses to phone size:

candle-behind-avatar.jpg

As indicated by the red arrow, the gif shows behind the avatar. Does 'online' even show at smaller sizes? Is removing this a css or template issue?

[EA117]

Yes, in standard prosilver the "online" banner is shown even in the "collapsed" arrangement which gets invoked at 700px or smaller displays:

online.png

But it's not that it "must show", if that's actually what you're asking. You could choose to simply disable the "online" image when the screen size drops to 700px or lower, by adding a section like this to responsive.css. (Or adding it to the existing override of .online { } in the existing @media (max-width: 700px) { } section; your choice.)

Code: Select all

@media (max-width: 700px) {
	
	.online {
		background-image: none;
	}
}	

To make the opaque not-a-transparent-banner online image actually display and work in these responsive modes, looks like it would take some more careful thought and work. If that's your preference, for the actual profile display I expect it's a matter of using a media query 700px section like this to move the background image to be in the top right of postprofile instead of at the bottom. And to move the padding we added that accommodates the image's presence from the bottom to the right of prostprofile, too. You'll probably already figure that one out yourself, but I'll post an example as soon as I have time to make one, if you haven't already solved it by then.

Note it looks like other profile displays will need some work for responsive mode too, even though they didn't need adjusting just for the opaque non-transparent online image. The background-image: none will hide the image and solve this case too. But if your intention is to display the image on small screens, we'll have to come up with a solution for these profile displays, too.

[DV1]

I tried the code for 'background image - none' in responsive.css at 700px but the gif still shows behind the avatar.

As for the, 'other profile displays', when I collapse it to small it shows okay, list-like. Unless you're referring to a detail(s) I'm not aware of.

As for the urgency of displaying the online gif on small screens. . .not sure. Still, will look at css to see about moving the gif at 700px.

Daniel V.

[EA117]

I tried the code for 'background image - none' in responsive.css at 700px but the gif still shows behind the avatar.

I see that behavior now, and why I missed it in testing. The English CSS stylesheet (/styles/prosilver/theme/en/stylesheet.css) is applied after responsive.css on this point, and so the background-image: url(./icon_user_online.gif) is being re-asserted, even though the default from content.css is still successfully overridden. (Since the main non-language-specific CSS stylesheet.css includes responsive.css after content.css.)

The way I would solve that -- since the manner in which the English-specific CSS stylesheet is handled is unique compared to all others -- is simply add the responsive media query directly into the /styles/prosilver/theme/en/stylesheet.css file, such that this file's entire content looks like:

Code: Select all

/* Online image */
.online { background-image: url("./icon_user_online.gif"); }

@media (max-width: 700px) {
	
	.online {
		background-image: none;
	}
}

As for the, 'other profile displays', when I collapse it to small it shows okay, list-like. Unless you're referring to a detail(s) I'm not aware of.

Well for what it's worth, it looks like this to me. With the image overlapping the profile text in an unreadable manner:

other.png

And that "makes sense" given that we only controlled how the image should display when presented as part of "postprofile", and this is a non-post-related profile display. Note this is the one I'm saying "once background-image: none is in effect, it would automatically fix this one, too."

But this is all definitely addressable if you actually want to leave the online image displayed on mobile devices. It will involve using more specific CSS selector paths throughout the changes, in order to make the online tweak apply differently on these different pages. But just needs some more time to sit down and make those calculations.

[DV1]

EA117

I did the change in '/en/stylesheet.css' and it removes the gif. Thank you.

I see what you mean re the viewing profile page. I was going by collapsing it with a post page and that did not display the overlaps of the vpp.

You've been really helpful and I've sent a memo to the North Pole. So, I would put up another sock or two on the fireplace mantle. I can also arrange a private car on the Polar Express, if you like.

Anyway, the main issues have been addressed. As for:

But this is all definitely addressable if you actually want to leave the online image displayed on mobile devices.

If and when it's convenient for you to spend time with this then please let me know. Maybe apart just from my use there may be others who would like to make their own 'online' image display in the manner which we have been discussing.

I will continue to do little experiments with the css to see what's what.

Daniel V.