Increasing space between username and avatar

For support and discussion related to templates and themes in phpBB 3.3.
Shogun111
Registered User
Posts: 12
Joined: Wed Dec 06, 2023 2:36 am

Increasing space between username and avatar

Post by Shogun111 »

Hopefully I'm in the right place here, apologies if not.

Image

I've figured out how to switch the avatar below the username and increase the font size of the username but the latter has resulted in an overlap as you can see.

Is there a way I can increase the space between the username and avatar?

Many thanks.
User avatar
Talk19Zehn
Registered User
Posts: 876
Joined: Tue Aug 09, 2011 1:10 pm

Re: Increasing space between username and avatar

Post by Talk19Zehn »

Hello, your result show: Profiles on leftside and settings usernames above the avatar-container ....

In my opinion this concerns the avatar-container class after your conversion, see content.css.

Original: phpBB-3.3.11 (prosilver)

Code: Select all

/* Post-profile avatars */
.postprofile .has-avatar .avatar-container {
	margin-bottom: 3px;
	overflow: hidden;
}
Try perhaps this in your stylesheet.css or custom.css: untested (!)

Code: Select all

/* Post-profile avatars */
.postprofile .has-avatar .avatar-container {
	margin-top: 11px;
	overflow: hidden;
}
Original: phpBB-3.3.11 (prosilver)
Please take a look into the responsive.css

Code: Select all

@media (max-width: 700px)
.postprofile .has-avatar .avatar-container {
	margin: 0;
	overflow: inherit;
}
change perhaps in your stylesheet.css or custom.css: untested (!)

Code: Select all

@media (max-width: 700px)
.postprofile .has-avatar .avatar-container {
	margin-top: 5px;
	overflow: inherit;
}
Clear all caches after your works and test the results, please.

I have no other idea at this moment. BTW: It may be important for helpers to know, which style are you using and how did you make your changes? :)

Regards
Best regards
phpBB3 Designs - My own works: Stylearea Ongray-Designs, Adventinducement-Calendar for phpBB
Shogun111
Registered User
Posts: 12
Joined: Wed Dec 06, 2023 2:36 am

Re: Increasing space between username and avatar

Post by Shogun111 »

Talk19Zehn wrote: Wed Dec 06, 2023 11:28 am
Hi, I appreciate the help. I don't know if I'm doing something wrong but neither of those solutions changed anything at all (for better or worse!)

----
Style: prosilver.

Profiles on left side: Just the extension https://www.phpbb.com/customise/db/exte ... dpstprfls/

Username font size:
viewtopic.php?p=4384275

Open styles/prosilver/template/viewtopic_body.html

Replaced:

Code: Select all

<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
with:

Code: Select all

<!-- IF not postrow.U_POST_AUTHOR --><span style="font-size: 12px;"><strong>{postrow.POST_AUTHOR_FULL}</strong></span><!-- ELSE --><span style="font-size: 12px;">{postrow.POST_AUTHOR_FULL}</span><!-- ENDIF -->
Avatar underneath username:

To be honest, I can't quite remember how I did this and quite obviously have little to no idea of what I'm doing

This is currently the code in that section of Open styles/prosilver/template/viewtopic_body.html :

Code: Select all

<!-- BEGIN postrow -->
	<!-- EVENT viewtopic_body_postrow_post_before -->
	<!-- IF postrow.S_FIRST_UNREAD -->
		<a id="unread" class="anchor"<!-- IF S_UNREAD_VIEW --> data-url="{postrow.U_MINI_POST}"<!-- ENDIF -->></a>
	<!-- ENDIF -->
	<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 -->">
		<div class="inner">

		<dl class="postprofile" id="profile{postrow.POST_ID}"<!-- IF postrow.S_POST_HIDDEN --> style="display: none;"<!-- ENDIF -->>
			<dt class="<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG -->has-profile-rank<!-- ELSE -->no-profile-rank<!-- ENDIF --> <!-- IF postrow.POSTER_AVATAR -->has-avatar<!-- ELSE -->no-avatar<!-- ENDIF -->">
				<!-- EVENT viewtopic_body_post_author_before -->
				<!-- IF not postrow.U_POST_AUTHOR --><span style="font-size: 12px;"><strong>{postrow.POST_AUTHOR_FULL}</strong></span><!-- ELSE --><span style="font-size: 12px;">{postrow.POST_AUTHOR_FULL}</span><!-- ENDIF -->
				<!-- EVENT viewtopic_body_post_author_after -->

				<!-- EVENT viewtopic_body_postrow_rank_before -->
				<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd class="profile-rank">{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->
				<!-- EVENT viewtopic_body_postrow_rank_after -->

				<div class="avatar-container">
					<!-- EVENT viewtopic_body_avatar_before -->
					<!-- IF postrow.POSTER_AVATAR -->
						<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}" class="avatar">{postrow.POSTER_AVATAR}</a><!-- ELSE --><span class="avatar">{postrow.POSTER_AVATAR}</span><!-- ENDIF -->
					<!-- ENDIF -->
					<!-- EVENT viewtopic_body_avatar_after -->
				</div>
			</dt>
User avatar
Brf
Support Team Member
Support Team Member
Posts: 53469
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}

Re: Increasing space between username and avatar

Post by Brf »

We would need to see your problem in-action in order to diagnose your css problem. Here is what that section looks like here on phpbb.com
You do not have the required permissions to view the files attached to this post.
User avatar
P_I
Community Team Member
Community Team Member
Posts: 2401
Joined: Tue Mar 01, 2011 8:35 pm
Location: Western Canada 🇨🇦

Re: Increasing space between username and avatar

Post by P_I »

Shogun111 wrote: Wed Dec 06, 2023 3:22 pm Style: prosilver.

Profiles on left side: Just the extension https://www.phpbb.com/customise/db/exte ... dpstprfls/
Since you are using this extension you should consider that to receive extension support please visit our Extensions Database and post in the specific extension's designated support area. The link to the support area for each released extension is also available in the first post of each released extension listed in the [3.3.x] Extension Database Releases forum.

The extension author(s) might be able to provide some guidance on a solution for you.
Normal people… believe that if it ain’t broke, don’t fix it. Engineers believe that if it ain’t broke, it doesn’t have enough features yet. – Scott Adams
Shogun111
Registered User
Posts: 12
Joined: Wed Dec 06, 2023 2:36 am

Re: Increasing space between username and avatar

Post by Shogun111 »

This is the forum: https://www.nsno.co.uk/viewtopic.php?p=6183

I can say with near certainty that I'm doing something wrong and it's probably an incredibly basic error. I found the section in content.css to change to 'margin-top: 8px' but as you can see from the attachment, it still says 'margin-bottom: 3px' in spite of that. So I'm either editing in the wrong place or some other human error.

I'll share my WinSCP screen/path just to see if it's something obvious I'm missing

Edit: I am purging the cache at the same time as these changes

phpbb html.png
WinSCP phpbb.png
You do not have the required permissions to view the files attached to this post.
User avatar
Brf
Support Team Member
Support Team Member
Posts: 53469
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}

Re: Increasing space between username and avatar

Post by Brf »

It says margin-top for me. You need to clear your web browser's cache with F5.
Shogun111
Registered User
Posts: 12
Joined: Wed Dec 06, 2023 2:36 am

Re: Increasing space between username and avatar

Post by Shogun111 »

Brf wrote: Wed Dec 06, 2023 3:57 pm It says margin-top for me. You need to clear your web browser's cache with F5.
Yeah, I've just tried it incognito and the changes are there :lol: and now clearing my browser cache is showing it for me...

I appreciate the help and patience in this thread, thank you!
User avatar
Sniper_E
Registered User
Posts: 1166
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey

Re: Increasing space between username and avatar

Post by Sniper_E »

Shogun111 wrote: Wed Dec 06, 2023 3:22 pm
Talk19Zehn wrote: Wed Dec 06, 2023 11:28 amClear all caches after your works and test the results, please.
Hi, I appreciate the help. I don't know if I'm doing something wrong but neither of those solutions changed anything at all (for better or worse!)
That css should have made a difference. Did you clear server cache in ACP? Did you ctrl-F5 a few times in your browser?
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
Shogun111
Registered User
Posts: 12
Joined: Wed Dec 06, 2023 2:36 am

Re: Increasing space between username and avatar

Post by Shogun111 »

Sniper_E wrote: Wed Dec 06, 2023 4:01 pm
Shogun111 wrote: Wed Dec 06, 2023 3:22 pm
Hi, I appreciate the help. I don't know if I'm doing something wrong but neither of those solutions changed anything at all (for better or worse!)
That css should have made a difference. Did you clear server cache in ACP? Did you ctrl-F5 a few times in your browser?
It did, it was just my stupidity causing issues! I needed to clear my personal internet browser's cache

Talk19Zehn's solution did work, thank you very much.
User avatar
Talk19Zehn
Registered User
Posts: 876
Joined: Tue Aug 09, 2011 1:10 pm

Re: Increasing space between username and avatar

Post by Talk19Zehn »

Thanks for the feedback to all contributors.
The customisation for the responsive layout = responsive.css is currently still missing ...
This is noticeable in the hover aspect in the small resolutions > max-width: 700px and if an avatar is used. ;)
Talk19Zehn wrote: Wed Dec 06, 2023 11:28 am Original: phpBB-3.3.11 (prosilver)
Please take a look into the responsive.css

...(...)...
Regards
Best regards
phpBB3 Designs - My own works: Stylearea Ongray-Designs, Adventinducement-Calendar for phpBB

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