Custom mini profile fields aren't showing up

[Sylvia Wolf]

Okay I understand most of it now, the CSS would be easy enough but before we move on to that, can we focus on just HTML for now?
The alias, gender, music, gif, aren't showing up. Plus they're all centered but I believe I can fix that in CSS correct?

What's more is the hover image now goes slightly over the mini profile, which kinda bothers me. Finally I'd like to give the staff and members the same exact profile, now if this was my own coding I'd think I'd understand it pretty well. Since it's not its kind of confusing to me. I want the member profiles to be the staff members profiles as well, but still have the pm button. Does that make sense or no?

Basically I want the design to follow like this:
Alias
Character Gender
Age Sexuality
Pm Me
Music


Application Plotter

^ something like that. But I can do the float property in CSS to make it like that right? Or only in HTML?

I'm sorry if I'm being a bother, I just want the site coding to be done and finished so I can move on to designing the colors and threads next. As of now though, this is my primary concern.

This is what it looks like right now:

melnore.freeforums.net/thread/1

[Ulises]

melnore.freeforums.net/user/1/personal

If you go there, you'll see that you don't have all of them filled out. Fill them out and they should show. You can you the float:left; attribute, yes, for the CSS.

[Sylvia Wolf]

Okay I filled everything out except music. The gif I'm not so worried about right now. But what about the other stuff?

[Ulises]

Alright coolio. Now we are getting somewhere. We are done with the HTML stuff. Onto the CSS. We are gonna take this step by step. First take off the float:left; from the "mini-gif" class. To do this go to line 2163 and remove that line. Don't forget to save changes. Let me know once you're done.

[Sylvia Wolf]

All right got it done

[Ulises]

Sylvia Wolf Cool. I went ahead and moved the placement of the center tags in the HTML. Now go to line 2178 and remove the same float:left; you see. Then tell me what you think now.

[Sylvia Wolf]

Okay thanks I just removed the float:left, then I looked at the mini profile. It seems to be looking okay so far, what's next?

[Ulises]

Ok one quick thing back to HTML again. I noticed you hadn't copied the alias HTML for is_staff (which is why it was showing for you in the first place). Do you want to show the alias for staff too?

[Sylvia Wolf]

Yes please

[Ulises]

Went ahead and fixed the HTML for you. The rest is all CSS.

[Sylvia Wolf]

Okay thank you I tried to add the float properties in the CSS to the elements but they didn't change from where they are positioned now.


Also, how would I make the staff and member profiles the same?

Would I put $[user.is_staffandmember]?

[Ulises]

You want them the same? In that case the code could be much simpler:

SPOILER: Click to show

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

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

{if $[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 -->

<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-gender"><strong>$[user.gender.text]</strong></div><br />
<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]<strong><font size="1"><br />Years<br />Old</font></strong></div>
{/if}
{/foreach}
</div>
<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>
<center> <div class="mini-online">{if $[user.is_online]}<strong>USER IS ONLINE</strong>{else}<em>USER IS OFFLINE</em>{/if}</div></center>

<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>

<br clear="all">

<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>
<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>


<!-- 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 -->

[Sylvia Wolf]

Okay I changed it to that but it seems that the mini profile still looks the same for me?

[Ulises]

Sylvia Wolf Yeah, the mini-profile would look the same for members and staff which you are both, as admin. Now, did you need help for the CSS or are you good to go?

[Sylvia Wolf]

Okay thank you, and yeah I may need a little guidance on the CSS, sorry xD