Mini-Profile Customization Help

[rhaenys]

Hi y'all.  I'm trying to work on our mini profiles and make them look better.  I have a couple of issues.  
1 - is it possible to hide the "title" of a custom field?  Like if the custom field is Country and it has the option for little flags courtesy of CPF image dropdown, how do I get rid of the title "Country" where the line will just show the flag?  
2 - is it possible to color code the titles that I do want left?  Like Favorite GoT quote would be orange instead of white.  Not the answer they fill in, just the title that shows in the mini profile.  
3 - I want to add divider lines between certain custom fields like I could on my old forum, but I can't on proboards.  

I've attached a picture of how it was on the old forum and what I'm talking about.   Basically, I want to be able to recreate this on the new forum but don't have the same options in the admin panel to do this. 

The top 2 pictures are separate fields that I was able to hide the title from and so it just shows the field. I could also tell the old forum that I wanted it to just put the fields together or force it to go to a new line.  Hopefully that makes sense.  The lines are divider lines it let me put in to separate sections.  Any help on how to be able to recreate the picture for proboards I would really appreciate.  Thank you.  

Attachments:

[Brian]

Hi, rhaenys .

1. In the default template your custom profile fields are generated by the following lines:

{foreach $[user.mini_custom_field]}
    <br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/foreach}

The name is produced by $[user.mini_custom_field.name] so removing that variable would remove it from every field.



2. You can surround the $[user.mini_custom_field.name] variable with another element with a class, then target that using CSS. $[user.mini_custom_field.content_class] adds a unique class for each of your custom fields, so you can target each field in your forum's CSS using the class that's added by this variable. Technically you can also use this method to accomplish #1 and hide the names of specific fields.

Example:

<span class="$[user.mini_custom_field.content_class]"><span class="cf-name">$[user.mini_custom_field.name]:</span> $[user.mini_custom_field.value]</span>

With the above in place you can target the custom field name using .cf-name in your forum's style sheet. If you have a field named In Game Name you'd use this in your CSS to target it and color it:

.mini-profile .custom-field-ingamename .cf-name {
    color: #FFFFFF;
}

3. Same as #2, basically. This can be accomplished using CSS.

[rhaenys]

Thanks, I got the colors working well.  Still not sure how to remove just 2 certain titles (Fealty and Country).  I also don't know how to add the horizontal line if you would be able to help with that.  Thank you.  

[Brian]

If you've got the color customization in you can use the same method to remove a title, but instead of the color property you'll be using the display property instead.

If you wanted to remove the In Game Name field's title you'd use this:

.mini-profile .custom-field-ingamename .cf-name {
    display: none;
}

The concept is pretty much the same as before. Just substitute the bit in green with the name of your field, all lowercase with no spaces or special characters.

[rhaenys]

Thanks!