v2 mini profile

v2 mini profile Oct 23, 2014 20:16:42 GMT -8

Quote

Post by Leif on Oct 23, 2014 20:16:42 GMT -8

Hello! I apologize to those who have been asking for my new mini-profile code that's available on my test board. This code has been exclusive to a role-play I'm a part on for a while. Enough time has passed and it seems people would like it. I have decided to release it for all to use.

. I just wanted to thank everyone for all their support and their eagerness to use my new code. Thank-you all for using the old set. I'm glad I was able to create one of the first fully functioning hover codes (without using JavaScript). I'm so pleased to see how many different ways it has been adapted across ProBoards.

This code by default is set for a Harry Potter theme in mind, but it is editable. This requires some knowledge of basic editing of templates. I wasn't awesome enough to win the Profile Contest, but, I made this before the Profile Contest and have been slapping bugs out. I'm satisfied with this now. This is meant to be an entire board mini-profile revamp, not for just one person. Your admins can have different styles than members while retaining the basic look.

The Information:

200x400 Hover Image. (widthxheight)
Built for 150x200 avatar. (widthxheight)
Large border based on member groups.
Group icon based on member groups.
Four (4) customization fields.
Biography link
Plotter link
Different color schemes based on member groups.
MP3 player
Hover profile
360 hover spin

See it in Action:

My Test Board: rpg.proboards.com/thread/137/lorem-ipsum (uses full colorization features + new coming soon features)
Active RPG: firewhiskeyandcoke.proboards.com/ (uses full colorization)
Another RPG: perfectstorm.freeforums.net/posts/recent (uses colorization)

Here's a basic GIF preview without the hover effect that shows the range of colorization, for full effect just visit my test board.

Please be patient. I'm breaking this down step by step!

Changing Avatar Size (RECOMMENDED):

Go to Admin > Themes > Your Theme > Advanced Styles & CSS > Style Sheet tab
Around line 1143 (or press CTRL F and find .mini-profile { color: ) The line should look like this:.mini-profile { color: @mini_text_color; font: @mini_text_font; background: @mini_background; border: @mini_border; .rounded-corners(@mini_border_radius); text-align: @mini_text_align; overflow: hidden; padding: 13px 10px; width: 150px; }
Now what we're gonna do is change the 150px to 200px.
Delete padding: 13px 10px;
Seven lines below that around line 1150 find this:.mini-profile .avatar { max-width: 150px; max-height: 150px; overflow-x: hidden; overflow-y: hidden; margin: auto; border-width: 0px; vertical-align: middle; }
Change the max-height: 150px; to max-height:200px;
A few lines below that find this: .avatar_size_default img, .avatar_size_default default { max-height: 150px; max-width: 150px; }
Change the max-height: 150px; to max-height:200px;
Go to line 976 (or around there) and find: .posts .post .content { padding-left: 10px; vertical-align: top; }
Change the 10px to 60px
Go to line 1036 (or around there) and find: .messages .item .content { padding-left: 10px; word-wrap: break-word; overflow-x: auto; overflow-y: hidden; }
Change the 10px to 60px
Save.

Adding New CSS

If you're not already on the style sheet, go to Admin > Themes > Your Theme > Advanced Styles & CSS > Style Sheet tab
At the very end paste this code:.firemini { width:200px; height:400px; opacity:0; transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; transform: rotate(0deg) scale(1) skew(0deg) translate(0px); -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); -ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); } .firemini:hover { width:200px; height:400px; opacity: 1; background-color:#ebc6ad; transform: rotate(360deg) scale(1) skew(0deg) translate(0px); -webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0px); -moz-transform: rotate(360deg) scale(1) skew(0deg) translate(0px); -o-transform: rotate(360deg) scale(1) skew(0deg) translate(0px); -ms-transform: rotate(360deg) scale(1) skew(0deg) translate(0px); } .fireminiinside { width:200px; margin:auto; text-align:center; } .leifbox { width: 80px; overflow:hidden; float:left; z-index:1; } div.firemini { background-color: #ebc6ad; } div.mpav { overflow: hidden;padding:0px;width:150px;max-height:200px;border:5px solid #000000;margin:auto; } div.leifbox { background-color: #dfa37c; color: #000000; text-align:center; } /* Hufflepuff Mini-Profile */ div.hufflepuff div.firemini { background-color: #808378; } div.hufflepuff div.mpav { overflow: hidden;padding:0px;width:150px;max-height:200px;border:5px solid #1a1b1d;margin:auto; } div.hufflepuff div.leifbox { background-color: #1a1b1d; color: #DBD69C; text-align:center; } div.hufflepuff div.mini-profile { border-color: #E9AC2D; } /* Gryffindor Mini-Profile */ div.gryffindor div.firemini { background-color: #fbc591; ;} div.gryffindor div.mpav { overflow: hidden;padding:0px;width:150px;max-height:200px;border:5px solid #5d2b34;margin:auto;} div.gryffindor div.leifbox { background-color: #5d2b34; color: #DBD69C; text-align:center; } div.gryffindor div.mini-profile { border-color: #5d2b34; } /* Hot Guy House (Slytherin) Mini-Profile */ div.slytherin div.firemini { background-color: #8c8986; ;} div.slytherin div.mpav { overflow: hidden;padding:0px;width:150px;max-height:200px;border:5px solid #24471d;margin:auto;} div.slytherin div.leifbox { background-color: #24471d; color: #e6e8e8; text-align:center; } div.slytherin div.mini-profile { border-color: #24471d; } /* Ravenclaw Mini-Profile */ div.ravenclaw div.firemini { background-color: #9a7155; } div.ravenclaw div.mpav { overflow: hidden;padding:0px;width:150px;max-height:200px;border:5px solid #005f7a;margin:auto;} div.ravenclaw div.leifbox { background-color: #005f7a; color: #e5d9b1; text-align:center; } div.ravenclaw div.mini-profile { border-color: #005f7a; } /* Dominion Mini-Profile */ div.dominion div.firemini { background-color: #a4b1b7; } div.dominion div.mpav { overflow: hidden;padding:0px;width:150px;max-height:200px;border:5px solid #005f7a;margin:auto;} div.dominion div.leifbox { background-color: #005f7a; color: #ffffff; text-align:center; } div.dominion div.mini-profile { border-color: #005f7a; } /* Order Mini-Profile */ div.order div.firemini { background-color: #FFF1E3; } div.order div.mpav { overflow: hidden;padding:0px;width:150px;max-height:200px;border:5px solid #e8921d;margin:auto;} div.order div.leifbox { background-color: #e8921d; color: #ffffff; text-align:center; } div.order div.mini-profile { border-color: #e8921d; } /* Neutral Mini-Profile */ div.neutral div.firemini { background-color: #e4e4e4; } div.neutral div.mpav { overflow: hidden;padding:0px;width:150px;max-height:200px;border:5px solid #a9a9a9;margin:auto;} div.neutral div.leifbox { background-color: #a9a9a9; color: #000000; text-align:center; } div.neutral div.mini-profile { border-color: #a9a9a9; }
Save (we'll get back to editing the colors).

The Template:

Go to Themes > Layout Templates > Mini-Profile
Select all code and press backspace or delete to empty it out
Copy this code in it's entirety:  <div class="{foreach $[user.mini_custom_field]} {if $[user.mini_custom_field.name] == "Background Group"} {if $[user.mini_custom_field.value] == "Hufflepuff"} hufflepuff {elseif $[user.mini_custom_field.value] == "Gryffindor"} gryffindor {elseif $[user.mini_custom_field.value] == "Slytherin"} slytherin {elseif $[user.mini_custom_field.value] == "Ravenclaw"} ravenclaw {elseif $[user.mini_custom_field.value] == "Dominion"} dominion {elseif $[user.mini_custom_field.value] == "Order"} order {elseif $[user.mini_custom_field.value] == "Neutral"} neutral {/if} {/if} {/foreach}"> <div class="$[miniprofile_class]" style="background-image: url('http://i.imgur.com/TEmAoXn.png');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Hover Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:cover;"> <div class="firemini"> <div class="fireminiinside"> <span style="font-size:11px;padding-right:3px;padding-left:3px;">$[user]</span> {if $[user.is_guest]}Guest<br />{/if} <br /> $[user.warning.bar] {if $[user.is_member]} <span style="color: #FFFFFF;font-size:10px;">{if $[user.custom_title]}$[user.custom_title]{/if}</span> <div class="info"> {if $[user.avatar]} <div class="mpav">$[user.avatar]</div> {/if} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Biography"}<div style="float:left;margin-left:-16px;margin-top:-120px;font-size:11px;max-height:200px;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); writing-mode: tb-rl;"><a href="$[user.mini_custom_field.value]">biography</a></div>{/if}{/foreach} {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Plotter"}<div style="float:right;margin-right:-5px;margin-top:-120px;font-size:11px;max-height:200px;-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate-90deg); writing-mode: bt-lr;"><a href="$[user.mini_custom_field.value]">Plotter</a></div>{/if}{/foreach} <div class="leifbox" style="float:left;height:20px;text-align:center;margin-top:7px;margin-right:10px;margin-left:10px;line-height:20px;"> {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Year"}$[user.mini_custom_field.value]{/if}{/foreach} </div> <div class="leifbox" style="float:left;height:20px;text-align:center;margin-top:7px;margin-right:10px;margin-left:10px;line-height:20px;"> {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Blood Status"}$[user.mini_custom_field.value]{/if}{/foreach} </div><div style="clear:both;"></div> <div class="leifbox" style="height:20px;text-align:center;margin-top:7px;margin-right:10px;margin-left:10px;line-height:20px;"> <span title="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Dating"}$[user.mini_custom_field.value]{/if}{/foreach}">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Relationship Status"}$[user.mini_custom_field.value]{/if}{/foreach}</span> </div> <div class="leifbox" style="height:20px;text-align:center;margin-top:7px;margin-right:10px;margin-left:10px;line-height:20px;"> {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Player Name"}$[user.mini_custom_field.value]{/if}{/foreach} </div> <div style="float:left;width:80px;height:60px;text-align:center;margin-top:5px;margin-bottom:5px;margin-right:10px;margin-left:10px;line-height:60px;">  {foreach $[user.mini_custom_field]} {if $[user.mini_custom_field.name] == "Background Group"} {if $[user.mini_custom_field.value] == "Hufflepuff"} <img src="http://i.imgur.com/GxMJGfh.png" alt="Hufflepuff" /> {elseif $[user.mini_custom_field.value] == "Gryffindor"} <img src="http://i.imgur.com/vK64MCY.png" alt="Gryffindor" /> {elseif $[user.mini_custom_field.value] == "Ravenclaw"} <img src="http://i.imgur.com/XGUQzRj.png" alt="Ravenclaw" /> {elseif $[user.mini_custom_field.value] == "Slytherin"} <img src="http://i.imgur.com/W5iFr9t.png" alt="Slytherin" /> {elseif $[user.mini_custom_field.value] == "Order"} <img src="http://i.imgur.com/EIR8i09.png" alt="Order" /> {elseif $[user.mini_custom_field.value] == "Dominion"} <img src="http://i.imgur.com/fv51XbZ.png" alt="Dominion" /> {elseif $[user.mini_custom_field.value] == "Neutral"} <img src="http://i.imgur.com/RNVGJtp.png" alt="Neutral" /> {/if} {/if} {/foreach}  </div> <div class="leifbox" style="float:left;height:20px;text-align:center;margin-top:10px;margin-right:10px;margin-left:10px;line-height:20px;"> $[user.posts] posts </div> <div class="leifbox" style="float:left;height:20px;text-align:center;margin-top:10px;margin-right:10px;margin-left:10px;line-height:20px;"> $[user.likes] likes </div> {foreach $[user.mini_custom_field]} {if $[user.mini_custom_field.name] == "MP3 Link"} <div class="leifbox" style="float:left;width:180px;height:20px;text-align:center;margin-left:10px;line-height:20px;"> <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100%" height="100%"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="wmode" value="transparent"/><param name="FlashVars" value="mp3=$[user.mini_custom_field.value]"/><br></object> </div> {/if} {/foreach} </div><br /> {/if} {if $[user.miniprofile_badge]} <div class="$[user.miniprofile_badge_container_class]"> {foreach $[user.miniprofile_badge]} $[user.miniprofile_badge.icon] {/foreach} </div> {/if} </div></div></div> </div>
Paste (CTRL + V) into the empty field
Save!

Editing the Custom Profile Fields:

Editing fields is never fun! I know, but, we gotta do this!

Go to Admin > Members > Custom Profile Fields
Fill out profile fields as needed, keep in mind by default this template only has 4 extra spaces (5 if you delete the likes and replace it). But, you can have as many as you want on your regular profile! There are some extra hidden ones!
MP3 Link is built into this template so it's simple to add.
Be sure to add a field titled Biography
Be sure to add a field titled Plotter
Be sure to add a field called Hover Image
Be sure to create a field called Background Group
Create a field called MP3 Link if you want MP3s
The default fields this template includes are Year, Character Age, Blood Status, Relationship Status, Dating, Player Name
Let's say you want to replace Year with whatever simply find this in the Mini-Profile Template: {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Year"}$[user.mini_custom_field.value]{/if}{/foreach}
Replace the word Year with whatever field you created in Custom Profile Fields
For the others repeat steps 10 & 11

Notice: The relationship status field is a bit different, if you hover over it it displays the Dating field. On our RPG we currently use it like "Dating" for relationship status and when hovering over it states "Julien Sol". Relationship Status = shown, Dating = hover.

Hover Image size is 200x400. This is your regular image that is shown. When hovered over it reveals the data. Avatar size is 150x200. This avatar is shown under the hover. Some asked why don't I make the avatar much, much bigger? Simple: Proportions, easier on ProBoards thumbnails to generate using smaller sizes, and I prefer setting it this way. It's personal preference to me so I don't mess around with the default avatar coding as much.

Background Group/Colors:
Background Group field should be a drop down that lists your groups. By default I have Hufflepuff, Gryffindor, Slytherin, Ravenclaw, Dominion, Order, and Neutral. Add your own groups!

Add in your groups in the dropdown on custom profile fields for Background Group
For example I added Hufflepuff
Find this code in the Mini-Profile template:<div class="{foreach $[user.mini_custom_field]} {if $[user.mini_custom_field.name] == "Background Group"} {if $[user.mini_custom_field.value] == "Hufflepuff"} hufflepuff {elseif $[user.mini_custom_field.value] == "Gryffindor"} gryffindor {elseif $[user.mini_custom_field.value] == "Slytherin"} slytherin {elseif $[user.mini_custom_field.value] == "Ravenclaw"} ravenclaw {elseif $[user.mini_custom_field.value] == "Dominion"} dominion {elseif $[user.mini_custom_field.value] == "Order"} order {elseif $[user.mini_custom_field.value] == "Neutral"} neutral {/if} {/if} {/foreach}">
Modify the names between the groups. Our example Hufflepuff can be changed to Human and the lowercased hufflepuff can be changed to human. For simplicity reasons keep it the same. Remember what you did here!
Now, let's do the same for the image! Find:  {foreach $[user.mini_custom_field]} {if $[user.mini_custom_field.name] == "Background Group"} {if $[user.mini_custom_field.value] == "Hufflepuff"} <img src="http://i.imgur.com/GxMJGfh.png" alt="Hufflepuff" /> {elseif $[user.mini_custom_field.value] == "Gryffindor"} <img src="http://i.imgur.com/vK64MCY.png" alt="Gryffindor" /> {elseif $[user.mini_custom_field.value] == "Ravenclaw"} <img src="http://i.imgur.com/XGUQzRj.png" alt="Ravenclaw" /> {elseif $[user.mini_custom_field.value] == "Slytherin"} <img src="http://i.imgur.com/W5iFr9t.png" alt="Slytherin" /> {elseif $[user.mini_custom_field.value] == "Order"} <img src="http://i.imgur.com/EIR8i09.png" alt="Order" /> {elseif $[user.mini_custom_field.value] == "Dominion"} <img src="http://i.imgur.com/fv51XbZ.png" alt="Dominion" /> {elseif $[user.mini_custom_field.value] == "Neutral"} <img src="http://i.imgur.com/RNVGJtp.png" alt="Neutral" /> {/if} {/if} {/foreach}
Replace Hufflepuff once again with Human (as you set earlier). In the following line you should see an imgur link with an alt for Hufflepuff. Change the link to your group icon. 60x60 width recommended.
Keep doing these until you replaced/added all of your groups.

Now Let's Paint (Adding Colors):
Okay! Now the colors! Remember that old CSS we saved at the bottom? This is going to be super simple... Remember the Hufflepuff example above that we changed to Human? Now let's do that with colors:

Go back to the style sheet, at the very bottom.
Find the fields that look like this (There should be a few):/* Hufflepuff Mini-Profile */ div.hufflepuff div.firemini { background-color: #808378; } div.hufflepuff div.mpav { overflow: hidden;padding:0px;width:150px;max-height:200px;border:5px solid #1a1b1d;margin:auto; } div.hufflepuff div.leifbox { background-color: #1a1b1d; color: #DBD69C; text-align:center; } div.hufflepuff div.mini-profile { border-color: #E9AC2D; }
Change hufflepuff to human to match the earlier editing we did.
Just change the CSS to how you want. The second line is the background of the mini-profile. Third line is the avatar & avatar border color. The fourth line is the custom profile field background colors and text color. The fifth line is the border of the large box.
Just do this with the others to match your groups and you're done!

I Don't Have a Mini-Profile Border Like You:
Add a border in your regular visual sheet. I like between 7 to 10 pixels. That's all. The CSS will override the border color based on groups. The border, radius, etc will all take affect.

My Avatar Size isn't working
ProBoards' upload automatically resizes everything to 150x150 or less. This is really bad for RP forums, yes, I know. Simply link to it elsewhere on the web. There are other templates and plugins to prevent uploads. ProBoards' system does a fantastic job at resizing even web images for ProBoards purposes, however, it isn't sizes us RPers are accustomed with. So, simply link to it elsewhere.

Add Peter's Monetary System
Add this to where you want it <span class="money_symbol"></span><span class="money_amount"></span>

Edit: Please do not ask on Firewhiskey and Coke's cbox for help with this code.

v2 mini profile

Post by Leif on Oct 23, 2014 20:16:42 GMT -8

Quick Reply