Custom profile field alignment. Help needed.

[Maxxius]

Hello guys, I'm trying to re-create how profile fields were on my 3.4.6 forum in the newest version. Now the new version has is all centered by default which it not always the best looking solution. Can you guys give me any tips. How to achieve what I described in the screenshot?

First one is about where you check custom profile field options and other is how it looks in topic view, under avatar. Thank you!

[Lucas James]

 

[Genestoy]

Here is how I did mine which aligns the fields to the left so they are all straight on the left side--

To align the author pane profile fields
                            
ACP> Type “profile” in search> Profile Fields> Edit Field (pencil icon)> Scroll down to “Display format for topics”> Check “Use custom formatting”> In the box below that add the code below (for each profile field)

<div align="left"><strong>{$title}:</strong> {$content}</div>

 

[Maxxius]

@Lucas James thanks but I think having a mod for that reason alone is an overkill. Most importantly the mod does not do what I need - aligning.

@Genestoy yep, that definitely puts everything to the left side. 🙂

I came up with this little code which totally takes care of the part how it is displayed under the avatar.

.ft { width:70px; 
color:#08556F;
font-weight:bold;
margin-right:3px;
display:inline-block;
text-align:right;
padding-right: 3px;
}

.fc {word-wrap:break-word;
text-align:left; 
width:120px;
display:inline-block;
word-wrap:break-word;
vertical-align:text-top;
}

and put this in profile settings

<span class='ft'><strong>{$title}</strong></span><span class='fc'> {$content}</span>

The remaining problems are how to make checklist set values go in one line and not be put in new line with a <br> tag and how to align multiple checklist boxes in one line in profile settings.

 

[Maxxius]

I figured out

I edited file system/CustomField.php line 850                     

from
 

return implode( '<br>', explode( ',', htmlspecialchars( $value, ENT_DISALLOWED | ENT_QUOTES, 'UTF-8', FALSE ) ) );

to
 

return implode( ', ', explode( ',', htmlspecialchars( $value, ENT_DISALLOWED | ENT_QUOTES, 'UTF-8', FALSE ) ) );

 

[Maxxius]

now the only thing I have problem with is making my EDITO PROFILE popup page to look in order when checklist set is used. I need those checkboxes to be in one line. I made some progress but I mess up other areas of forum, mainly Notification settings page.

 

I added this code and it made things look like in the right side of the screenshot. Guys do any of you know how I can improve this CSS code so it would work ONLY on EDIT PROFILE popup page?

.ipsField_fieldList {display:flex;display:block}
.ipsField_fieldList > li {display:block;padding:0px 0px 8px 15px;width:130px; float:left;}