Custom mini profile fields aren't showing up

[Sylvia Wolf]

Hello I seem to be having a problem with custom profile fields on a custom theme. It's not showing up and I've added the mini_ to everything that needed it. The custom profile fields match the words in the code, yet nothing is showing still. Can you help me? Here is the code:


<!-- PROFILE HOVER BY TRINITY BLAIR OF ADOXOGRAPHY, DO NOT STEAL -->

<div class="mini_profile"><div class="profilemini2">

{if $[user.is_staff]}

<div class="mini-name">$[user]</div>
<div class="mini-group-color" style="background-color:#{if $[user.group]}$[user.group.color]{else}$[user.rank.color]{/if};">{if $[user.group]}$[user.group.name]{else}$[user.rank.name]{/if}</div>

<div class="my_avatar" width="222px" height="352px" align="center">$[user.avatar]</div>
<div class="profilemini">
<div class="info">
<table width="100%">

<!-- THIS IS THE INNER TABLE WITH THE WHITE BACKGROUND, IF YOU WANT TO ADD ANYTHING INTO THIS TABLE DO IT AFTER THIS DIV -->
<div class="mini-inner">

<!-- BEGIN INSIDE HOVER STUFF BELOW -->

<center>

<div class="mini-online">{if $[user.is_online]}<strong>USER IS ONLINE</strong>{else}<em>USER IS OFFLINE</em>{/if}</div>

<div class="mini-gif">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "200x100 GIF"}
<span class="$[user.mini_custom_field.content_class]">
<img src="$[user.mini_custom_field.value]" /></span>
{/if}
{/foreach}
</div>

<div class="mini-charage"><strong>$[user.age]<font size="1"><br />Years<br />Old</font></strong></div>

<div class="mini-gender"><strong>$[user.gender.text]</strong></div><br />
<div class="mini-charsex">
<a href="$[user.pm_href]"><strong>PM Me</strong></a>
</div>
<br clear="all">

<div class="mini-status2">$[user.personal_text]</div>

<div class="mini-music2">

{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Music"}
<div class="player"><object width="200" height="20" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" type="application/x-shockwave-flash">
<param value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" name="movie">
<param value="#202020" name="bgcolor">
<param value="mp3=$[user.mini_custom_field.value]&bgcolor=202020&loadingcolor=383838&buttoncolor=d8d8d8&slidercolor=6b667d;" name="FlashVars">
</object></div>
{/if}
{/foreach}

<div class="filler" style="width:200px;height:20px;background-color:#202020;"></div>

</div>

</center>

<!-- END INSIDE HOVER STUFF -->

</div>
<!-- THIS IS THE END OF THE WHITE INNER TABLE CODE SO DON'T ADD ANYTHING BELOW THIS LINE UNLESS YOU WANT SOMETHING NOT TO APPEAR IN THE WHITE TABLE -->
</table>
</div>
</div>

<br clear="all" />
<div class="mini-posts"><font color="#949494">$[user.posts]</font> {if $[user.posts] == 1}POST{else}POSTS{/if} & <font color="#949494">$[user.likes]</font> {if $[user.likes] == 1}LIKE{else}LIKES{/if}</div>

{elseif $[user.is_member]}

<div class="mini-name">$[user]</div>
<div class="mini-group-color" style="background-color:#{if $[user.group]}$[user.group.color]{else}$[user.rank.color]{/if};">{if $[user.group]}$[user.group.name]{else}$[user.rank.name]{/if}</div>

<div class="my_avatar" width="222px" height="352px" align="center">$[user.avatar]</div>
<div class="profilemini">
<div class="info">
<table width="100%">

<!-- THIS IS THE INNER TABLE WITH THE WHITE BACKGROUND, IF YOU WANT TO ADD ANYTHING INTO THIS TABLE DO IT AFTER THIS DIV -->
<div class="mini-inner">

<!-- BEGIN INSIDE HOVER STUFF BELOW -->
<center>

<div class="mini-online">{if $[user.is_online]}<strong>
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Alias"}
<span class="$[user.mini_custom_field.content_class]">
$[user.mini_custom_field.value]</span>
{/if}
{/foreach}
IS ONLINE</strong>{else}<em>
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Alias"}
<span class="$[user.mini_custom_field.content_class]">
$[user.mini_custom_field.value]</span>
{/if}
{/foreach}
IS OFFLINE</em>{/if}</div>

<div class="mini-gif">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "200x100 GIF"}
<span class="$[user.mini_custom_field.content_class]">
<img src="$[user.mini_custom_field.value]" /></span>
{/if}
{/foreach}
</div>

<div class="mini-charage"><strong>
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Character Age"}
<span class="$[user.mini_custom_field.content_class]">
$[user.mini_custom_field.value]</span>
{/if}
{/foreach}
<font size="1"><br />Years<br />Old</font></strong></div>

<div class="mini-gender">$[user.gender.text]</div><br />
<div class="mini-charsex">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Sexuality"}
<span class="$[user.mini_custom_field.content_class]">
$[user.mini_custom_field.value]</span>
{/if}
{/foreach}
</div>
<br clear="all">

<div class="mini-status">$[user.personal_text]</div>

<div class="mini-applot">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "PLOTTER"}
<span class="$[user.mini_custom_field.content_class]">
<a href="$[user.mini_custom_field.value]">PLOTTER</a></span>
{/if}
{/foreach}
</div>
<br clear="all">

<div class="mini-music">

{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Music"}
<div class="player"><object width="200" height="20" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" type="application/x-shockwave-flash">
<param value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" name="movie">
<param value="#202020" name="bgcolor">
<param value="mp3=$[user.mini_custom_field.value]&bgcolor=202020&loadingcolor=383838&buttoncolor=d8d8d8&slidercolor=6b667d;" name="FlashVars">
</object></div>
{/if}
{/foreach}

<div class="filler" style="width:200px;height:20px;background-color:#202020;"></div>

</div>

</center>

<!-- END INSIDE HOVER STUFF -->

</div>
<!-- THIS IS THE END OF THE WHITE INNER TABLE CODE SO DON'T ADD ANYTHING BELOW THIS LINE UNLESS YOU WANT SOMETHING NOT TO APPEAR IN THE WHITE TABLE -->
</table>
</div>
</div>

<br clear="all" />
<div class="mini-posts"><font color="#949494">$[user.posts]</font> {if $[user.posts] == 1}POST{else}POSTS{/if} & <font color="#949494">$[user.likes]</font> {if $[user.likes] == 1}LIKE{else}LIKES{/if}</div>

{else}

<div class="mini-name">$[user]</div>
<div class="mini-group-color">GUEST</div>

<div class="my_avatar" width="222px" height="352px" align="center"><img src="http://placehold.it/220x350" /></div>

{/if}
</div></div>

<!-- END PROFILE HOVER BY TRINITY BLAIR OF ADOXOGRAPHY, DO NOT STEAL -->




Can someone please help me? I've been trying this for more than 4 hours now.. No matter what I try I just can't figure it out.

[Ulises]

Hey Sylvia Wolf.

I've moved your post to the appropriate board since the Support board is for technical questions.

So, you don't need to add mini to everything unless you plan on having an entirely different CSS for those classes that you added "mini" to. First things first, have filled in the custom fields in your profile settings? Otherwise they won't show up if they are not filled out first.

[Kami]

Nov 20, 2016 13:38:58 GMT -8 Ulises said:

Hey Sylvia Wolf.

I've moved your post to the appropriate board since the Support board is for technical questions.

So, you don't need to add mini to everything unless you plan on having an entirely different CSS for those classes that you added "mini" to. First things first, have filled in the custom fields in your profile settings? Otherwise they won't show up if they are not filled out first.

sorry to butt in but the "mini" is part of the template mod trinity made (:

[Ulises]

Good lookin' out, Kami.

[Sylvia Wolf]

Yes I have two or three filled out already, I don't know what to do next? I followed the custom profile instructions found on the help thread for the theme, but that's as descriptive as it gets.

[Ulises]

Sylvia Wolf Can I have a link to the forum (you can PM it to me or post it here)?

[Sylvia Wolf]

melnore.freeforums.net

[Ulises]

Sylvia Wolf You'd be recreating specifically this snippet of code for each custom profile field (to make if easy for you):

<div class="mini-gif">

{foreach $[user.mini_custom_field]}

{if $[user.mini_custom_field.name] == "200x100 GIF"}

    HTML HERE
{/if}

{/foreach}

</div>

All the things in green you need to update according to what make sense for each custom profile field. Taking the sexuality custom field, for example this is what it would look like (place before the <!-- END INSIDE HOVER STUFF --> line):

<div class="cm-field-sexuality">

{foreach $[user.mini_custom_field]}

{if $[user.mini_custom_field.name] == "Sexuality"}

<div class="cm-value-sexuality">$[user.mini_custom_field.value]</div>
{/if}

{/foreach}

</div>

And in your style sheet (Themes > Advanced Styles & CSS) you would need to include the appropriate CSS for it:

.cm-field-sexuality{
    CSS HERE
}
.cm-value-sexuality{
    CSS HERE
}

Any questions let me know.

[Sylvia Wolf]

Okay it's showing up now but now it's just moved around from its natural spot. What did I do wrong?

[Sylvia Wolf]

Should I repost the new coding for you to see?

[Sylvia Wolf]

<!-- PROFILE HOVER BY TRINITY BLAIR OF ADOXOGRAPHY, DO NOT STEAL -->

<div class="mini_profile"><div class="profilemini2">

{if $[user.is_staff]}

<div class="mini-name">$[user]</div>
<div class="mini-group-color" style="background-color:#{if $[user.group]}$[user.group.color]{else}$[user.rank.color]{/if};">{if $[user.group]}$[user.group.name]{else}$[user.rank.name]{/if}</div>

<div class="my_avatar" width="222px" height="352px" align="center">$[user.avatar]</div>
<div class="profilemini">
<div class="info">
<table width="100%">

<!-- THIS IS THE INNER TABLE WITH THE WHITE BACKGROUND, IF YOU WANT TO ADD ANYTHING INTO THIS TABLE DO IT AFTER THIS DIV -->
<div class="mini-inner">

<!-- BEGIN INSIDE HOVER STUFF BELOW -->

<center>

<div class="mini-online">{if $[user.is_online]}<strong>USER IS ONLINE</strong>{else}<em>USER IS OFFLINE</em>{/if}</div>

<div class="mini-gif">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "200x100 GIF"}
<span class="$[user.mini_custom_field.content_class]">
<img src="$[user.mini_custom_field.value]" /></span>
{/if}
{/foreach}
</div>

<div class="cm-field-character age"><strong>$[user.age]<font size="1"><br />Years<br />Old</font></strong></div>
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Character Age"}
<div class="cm-value-character age">$[user.mini_custom_field.value]</div>
{/if}
{/foreach}

<div class="mini-gender"><strong>$[user.gender.text]</strong></div><br />
<div class="cm-field-sexuality">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Sexuality"}
<div class="cm-value-sexuality">$[user.mini_custom_field.value]</div>
{/if}
{/foreach}
<a href="$[user.pm_href]"><strong>PM Me</strong></a>
</div>
<br clear="all">

<div class="mini-status2">$[user.personal_text]</div>



<div class="mini-music2">

{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Music"}
<div class="player"><object width="200" height="20" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" type="application/x-shockwave-flash">
<param value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" name="movie">
<param value="#202020" name="bgcolor">
<param value="mp3=$[user.mini_custom_field.value]&bgcolor=202020&loadingcolor=383838&buttoncolor=d8d8d8&slidercolor=6b667d;" name="FlashVars">
</object></div>
{/if}
{/foreach}

<div class="filler" style="width:200px;height:20px;background-color:#202020;"></div>

</div>

</center>

<!-- END INSIDE HOVER STUFF -->

</div>
<!-- THIS IS THE END OF THE WHITE INNER TABLE CODE SO DON'T ADD ANYTHING BELOW THIS LINE UNLESS YOU WANT SOMETHING NOT TO APPEAR IN THE WHITE TABLE -->
</table>
</div>
</div>

<br clear="all" />
<div class="mini-posts"><font color="#949494">$[user.posts]</font> {if $[user.posts] == 1}POST{else}POSTS{/if} & <font color="#949494">$[user.likes]</font> {if $[user.likes] == 1}LIKE{else}LIKES{/if}</div>

{elseif $[user.is_member]}

<div class="mini-name">$[user]</div>
<div class="mini-group-color" style="background-color:#{if $[user.group]}$[user.group.color]{else}$[user.rank.color]{/if};">{if $[user.group]}$[user.group.name]{else}$[user.rank.name]{/if}</div>

<div class="my_avatar" width="222px" height="352px" align="center">$[user.avatar]</div>
<div class="profilemini">
<div class="info">
<table width="100%">

<!-- THIS IS THE INNER TABLE WITH THE WHITE BACKGROUND, IF YOU WANT TO ADD ANYTHING INTO THIS TABLE DO IT AFTER THIS DIV -->
<div class="mini-inner">

<!-- BEGIN INSIDE HOVER STUFF BELOW -->

<center>

<div class="mini-online">{if $[user.is_online]}<strong>
{/foreach}
IS OFFLINE</em>{/if}</div>

<div class="mini-gif">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "200x100 GIF"}
<span class="$[user.mini_custom_field.content_class]">
<img src="$[user.mini_custom_field.value]" /></span>
{/if}
{/foreach}
</div>

<div class="cm-field-character age"><strong>
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Character Age"}
<div class="cm-value-character age">$[user.mini_custom_field.value]</div>
{/if}
{/foreach}
<font size="1"><br />Years<br />Old</font></strong></div>

<div class="mini-gender">$[user.gender.text]</div><br />
<div class="cm-field-sexuality">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Sexuality"}
<div class="cm-value-sexuality">$[user.mini_custom_field.value]</div>
{/if}
{/foreach}
</div>
<br clear="all">

<div class="mini-status">$[user.personal_text]</div>

<div class="cm-field-application">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "APPLICATION"}
<div class="cm-value-application">$[user.mini_custom_field.value]</div>
{/if}
{/foreach}
</div>
<div class="cm-field-plotter">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "PLOTTER"}
<div class="cm-value-plotter">$[user.mini_custom_field.value]</div>
{/if}
{/foreach}
</div>
<br clear="all">

<div class="cm-field-music">

{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Music"}
<div class="player"><object width="200" height="20" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" type="application/x-shockwave-flash">
<param value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" name="movie">
<param value="#202020" name="bgcolor">
<param value="mp3=$[user.mini_custom_field.value]&bgcolor=202020&loadingcolor=383838&buttoncolor=d8d8d8&slidercolor=6b667d;" name="FlashVars">
</object></div>
{/if}
{/foreach}

<div class="filler" style="width:200px;height:20px;background-color:#202020;"></div>

</div>

</center>

<!-- END INSIDE HOVER STUFF -->

</div>
<!-- THIS IS THE END OF THE WHITE INNER TABLE CODE SO DON'T ADD ANYTHING BELOW THIS LINE UNLESS YOU WANT SOMETHING NOT TO APPEAR IN THE WHITE TABLE -->
</table>
</div>
</div>

<br clear="all" />
<div class="mini-posts"><font color="#949494">$[user.posts]</font> {if $[user.posts] == 1}POST{else}POSTS{/if} & <font color="#949494">$[user.likes]</font> {if $[user.likes] == 1}LIKE{else}LIKES{/if}</div>

{else}

<div class="mini-name">$[user]</div>
<div class="mini-group-color">GUEST</div>

<div class="my_avatar" width="222px" height="352px" align="center"><img src="http://placehold.it/220x350" /></div>

{/if}

</div></div>

<!-- END PROFILE HOVER BY TRINITY BLAIR OF ADOXOGRAPHY, DO NOT STEAL -->



It's all mixed up now on the mini profile.
It still doesn't show gender too and it supposed to look like this:

Alias

Gif image

20 Gender
Years (Sexuality?)
Old Pm me

Can someone help me?

[Ulises]

You need to specify the CSS for each custom field HTML you added like I did in my previous post

Nov 20, 2016 15:02:06 GMT -8 Ulises said:

.cm-field-sexuality{
CSS HERE
}
.cm-value-sexuality{
CSS HERE
}

Any questions let me know.

[Sylvia Wolf]

Okay around line 1116-1192

Where exactly would I put it between those two? And for the CSS I have to put it exactly like in your previous post? Like the whole div tag and everything? I'm confused at what you mean by CSS here. Is it supposed to be exactly like the mini profile ones in the forum templates?

[Sylvia Wolf]

Exactly like this for the CSS right?

{if $[user.mini_custom_field.name] == "Cm field here"}

{div class="cm-value-here">$[user.mini_custom_field.value]{/div}
{/if}

{/foreach}

[Ulises]

Sylvia Wolf Oh, no. I think I'm confusing you a bit here. Let me explain with a simple example (the sexuality one above).

When you created the div for the sexuality custom field you gave it a class called "cm-field-sexuality" Your browser looks at that class within the style sheet in order to style it how you want. Say for example you want all the text inside that class to be a certain font and font size so you would need to fill the CSS with this:

.cm-field-sexuality{
    font: Arial;
    font-size: 10px;
}

But lets say you wanted to control another div within that div (which we do in this case) the div with the class "cm-value-sexuality" and we wanted that specific text to have a different font without affecting the other div:

.cm-value-sexuality{
    font: Comic Sans Ms;
    font-size: 18px;
}

CSS and HTML are two separate things. You would paste the above two parts at the very bottom of your style sheet. I would also avoid inline CSS and the use of <br /> and go with handling the style with pure CSS. Taking the break spacing you want as an example you would need this CSS to accomplish that (don't forget to remove the <br /> tags and inline CSS you have).

This HTML:

<div class="cm-field-character age"><strong>
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Character Age"}
<div class="cm-value-character age">$[user.mini_custom_field.value]</div>
{/if}
{/foreach}
<font size="1"><br />Years<br />Old</font></strong></div>

would first turn into this:

<div class="cm-field-character age">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Character Age"}
<div class="cm-value-character age">$[user.mini_custom_field.value] Years Old</div>
{/if}
{/foreach}

and the relevant CSS would be this:

.cm-field-character.age{
    font-weight: bold;
    width: 100px;
    font-size: 12px;
}
.cm-value-character.age{
    word-spacing: 100px;
}

If you are gonna change the width of the parent div (cm-field-character.age) then you'll need to change the word-spacing attribute of cm-value-character.age

I know this was a lot so if I lost you let me know.