Mini profile
3 posters
Page 1 of 1
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!
Re: Mini profile
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
PUT IN CSS
PUT IN PROFILE
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!
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!
Re: Mini profile
Can guests see the post that contains this information? If yes, please post the link to it.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Mini profile
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.
Guest- Guest
Similar topics
» Can’t see the text on the mini profile
» Mini profile is shifted
» how i add a field to hover mini profile?
» Mini profile width
» Header and mini profile?
» Mini profile is shifted
» how i add a field to hover mini profile?
» Mini profile width
» Header and mini profile?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum