The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Mini profile

4 posters

Go down

Mini profile Empty Mini profile

Post by Lizlee July 17th 2018, 6:06 pm

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!
avatar
Lizlee
Forumember

Female Posts : 58
Reputation : 2
Language : Dutch, English

View user profile http://idkmoeteennaamzijn.actieforum.com/forum

Back to top Go down

Mini profile Empty Re: Mini profile

Post by skouliki July 17th 2018, 6:18 pm

hello


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

Female Posts : 12946
Reputation : 1562
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

Mini profile Empty Re: Mini profile

Post by Lizlee July 17th 2018, 7:18 pm

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!
avatar
Lizlee
Forumember

Female Posts : 58
Reputation : 2
Language : Dutch, English

View user profile http://idkmoeteennaamzijn.actieforum.com/forum

Back to top Go down

Mini profile Empty Re: Mini profile

Post by SLGray July 17th 2018, 9:54 pm

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


Mini profile Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 50617
Reputation : 3478
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Mini profile Empty Re: Mini profile

Post by mpelmmc July 17th 2018, 10:01 pm

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.
mpelmmc
mpelmmc
Helper
Helper

Male Posts : 1088
Reputation : 170
Language : English and Spanish

View user profile https://help.forumotion.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum