Mini profile

Technical Details

Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : All members
Forum link : http://idkmoeteennaamzijn.actieforum.com/forum

Description of problem

Hello,

I would like to use the mini profile shown here (https://shine.jcink.net/index.php?showtopic=28649&hl=) on my forum. I am just a bit lost on where exactly I should put the 'wrapper' and 'profile' content. I hope you guys can help me out!

hello


can you post a screenshot cause quests cant view the link you provide

I forgot only members could view it, my bad!

Normal
https://2img.net/h/oi65.tinypic.com/wj8ff4.png

Hover
https://2img.net/h/oi64.tinypic.com/okoi9f.png






This is the information provided on the website:


PUT IN WRAPPER

Code:

<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700' rel='stylesheet' type='text/css'><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

PUT IN CSS

Code:



/****************************************
Mini Profile by Ree of SHINE
*****************************************/

@font-face {
font-family: 'Intro'; font-weight: normal; font-style: normal;
src: url('http://nevermore.b1.jcink.com/uploads/nevermore/Intro.eot') format('eot'),
  url('http://nevermore.b1.jcink.com/uploads/nevermore/Intro.woff') format('woff'),
  url('http://nevermore.b1.jcink.com/uploads/nevermore/Intro.ttf')  format('truetype'),
  url('http://nevermore.b1.jcink.com/uploads/nevermore/Intro.svg#Intro') format('svg');
}

#mp { width: 250px; padding: 5px; background-color: #fefefe; border: 1px solid #f3f3f3; }
.mp1 { width: 220px; padding: 55px 15px 25px; background-image: url(http://media.tumblr.com/89b4584928486a77be543b2f336ff18b/tumblr_inline_mkjq66VtCX1qz4rgp.png); color: #565656; text-align: right; }
.mp1a a:link, .mp1a a:active, .mp1a a:visited { display: inline-block; color: #484848; font-family: intro; font-size: 28px; font-weight: normal; font-style: normal; text-align: right; text-transform: uppercase; text-decoration: none; letter-spacing: -2px; word-spacing: 1px; line-height: 100%; }
.mp1a a:first-letter, .mp span, .mp3c:first-letter { color: #AB445B }
.mp1b { color: #484848; font-family: source code pro; font-size: 9px; font-weight: 500; font-style: normal; text-align: right; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 100%; }
.mp2 { position: relative; width: 250px; height: 400px; overflow: hidden; }
.mp2a { position: absolute; top: 400px; left: 0px; width: 180px; height: 350px; padding: 35px; z-index: 3; opacity: 0; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -ms-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; }
.mp2:hover .mp2a { top: 0px; opacity: 1; }
.mp2b { width: 160px; height: 240px; padding: 10px; background-color: #fafafa; }
.mp2b img { width: 100px; height: 100px; margin: 12px auto; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; }
.mp2c { width: 180px; height: 40px; background-color: #AB445B; line-height: 40px; }
.mp2d { position: relative; width: 60px; height: 40px; line-height: 40px; overflow: hidden; }
.mp2e { position: absolute; top: 0px; left: 0px; width: 60px; height: 40px; color: #fafafa; font-size: 15px; text-align: center; line-height: 40px; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -ms-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; }
.mp2e i { line-height: 40px; }
.mp2d:hover .mp2e { top: 40px; }
.mp2f { position: absolute; top: -40px; left: 0px; width: 60px; height: 40px; color: #fafafa; font-family: source code pro; font-size: 7px; font-weight: 400; font-style: normal; text-align: center; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 40px; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -ms-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; }
.mp2d:hover .mp2f { top: 0px; }
.mp3a { width: 150px; padding: 5px; color: #565656; font-family: source code pro; font-size: 8px; font-weight: 400; font-style: normal; text-align: left; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 100%; border-bottom: 1px solid #f5f5f5; }
.mp3b { width: 150px; padding: 5px; background-color: #f9f9f9; color: #565656; font-family: source code pro; font-size: 8px; font-weight: 400; font-style: normal; text-align: right; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 100%; border-bottom: 1px solid #f5f5f5; }
.mp3c { width: 180px; height: 25px; padding-top: 5px; color: #fafafa; font-family: intro; font-size: 23px; font-weight: normal; font-style: normal; text-align: right; text-transform: uppercase; text-decoration: none; letter-spacing: -2px; word-spacing: 1px; line-height: 100%; margin-bottom: -6px; }
.mpover { position: absolute; top: 0px; left: 0px; width: 250px; height: 400px; background-color: rgba(0,0,0,0.4); opacity: 0; z-index: 2; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -ms-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; }
.mp2:hover .mpover { opacity: 1; }
.mpbg { position: absolute; top: 0px; left: 0px; width: 250px; height: 400px; background-size: cover; background-position: center; z-index: 1; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -ms-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; }
.mp2:hover .mpbg { -webkit-filter: blur(3px) grayscale(1); -moz-filter: blur(3px) grayscale(1); -o-filter: blur(3px) grayscale(1); -ms-filter: blur(3px) grayscale(1); filter: blur(3px) grayscale(1); filter: url(blur.svg#blur); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); ); }


/* CHANGE MEMBERGROUPNUMBER TO MATCH THE ID # OF THE MEMBER GROUP */

#mp.g-MEMBERGROUPNUMBER .mp1a a:first-letter, #mp.g-MEMBERGROUPNUMBER .mp span, #mp.g-MEMBERGROUPNUMBER .mp3c:first-letter { color: #HEXCODE }
#mp.g-MEMBERGROUPNUMBER .mp2c { background-color: #HEXCODE }


PUT IN PROFILE

Code:

<center><div id="mp" class="g-<!-- |g_id| -->"><div class="mp"><div class="mp2"><div class="mp2a"><div class="mp3c"><!-- |field_4| --></div><div class="mp2b"><div class="mp3a"><span><!-- |posts| --></span> posts</div><div class="mp3b"><span><!-- |field_5| --></span> years old</div><div class="mp3a"><!-- |field_6| --></div><img src="<!-- |field_3| -->"><div class="mp3b"><!-- |field_7| --></div><div class="mp3a"><!-- |field_8| --></div><div class="mp3b"><!-- |field_9| --></div></div><div class="mp2c"><table cellpadding="0" cellspacing="0"><th><a href="/?act=Msg&CODE=04&MID=<!-- |id| -->"><div class="mp2d"><div class="mp2e"><i class="fa fa-envelope"></i></div><div class="mp2f">send pm</div></div></a></th><th><a href="<!-- |field_10| -->"><div class="mp2d"><div class="mp2e"><i class="fa fa-pencil"></i></div><div class="mp2f">shipper</div></div></a></th><th><a href="<!-- |field_11| -->"><div class="mp2d"><div class="mp2e"><i class="fa fa-folder"></i></div><div class="mp2f">development</div></div></a></th></table></div></div><div class="mpover"></div><div class="mpbg" style="background-image: url(http://placehold.it/250x400.png)"><!-- |avatar| --></div></div><div class="mp1"><div class="mp1a"><a href="/index.php?showuser=<!-- |id| -->"><!-- |author_name| --></a><div class="mp1b"><span><!-- |field_1| --></span> [<!-- |field_2| -->] is <span><!-- |status| --></span></div></div></div></div></div></center>

CUSTOM FIELDS^
field_1: alias [ TEXT INPUT ]
field_2: preferred pronouns [ TEXT INPUT ]
field_3: square gif [ TEXT INPUT ]
field_4: character's nickname [ TEXT INPUT ]
field_5: character's age [ TEXT INPUT ]
field_6: custom field [ TEXT INPUT ]
field_7: custom field [ TEXT INPUT ]
field_8: custom field [ TEXT INPUT ]
field_9: custom field [ TEXT INPUT ]
field_10: link 1 [ TEXT INPUT ]
field_11: link 2 [ TEXT INPUT ]

PLEASE READ
PLEASE REMEMBER TO REPLACE MEMBERGROUPNUMBER WITH THE ID NUMBER OF THE GROUP, THAT WAY THE COLORS WILL CHANGE ACCORDINGLY

PLEASE ALSO KEEP IN MIND THAT IF YOU CHANGE THE LINKS IN THE MINI (THEY'RE CURRENTLY SET TO SHIPPER AND DEVELOPMENT), THE TITLES IN THE HTML THAT GOES IN THE PROFILE NEED TO BE CHANGED!

Can guests see the post that contains this information?  If yes, please post the link to it.

These instructions you gave to us, looks that they have been made tailor-made for jcink. If that's the case, Forumotion can't, or will struggle a lot supporting what you're asking since jcink is a different server than Forumotion.