Template:User info: Difference between revisions

From Wikimedia UK
Jump to navigation Jump to search
(min-height rather than height, doesn't align top & bottom in smaller resolution but at least text doesn't overflow)
(Update)
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<div class="vcard" style="border:1px solid #C2dfff; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); background: #E7FFFF; background: -moz-linear-gradient(top, #A7D7F9 0%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E7FFFF), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(top, #E7FFFF 0%,#7db9e8 100%); background: -o-linear-gradient(top, #E7FFFF 0%,#7db9e8 100%); background: -ms-linear-gradient(top, #E7FFFF 0%,#7db9e8 100%); background: linear-gradient(top, #E7FFFF 0%,#7db9e8 100%); -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; font-family:Calibri, Verdana, sans-serif;">
<div style="width:25%; float:left;height:4px; background:#990000;"></div>
<table width="100%" cellspacing="0" cellpadding="0" valign="top" border="0" style="background:transparent; font-size:14px;">
<div style="width:25%; float:left;height:4px; background:#339966;"></div>
<tr>
<div style="width:25%; float:left;height:4px; background:#A7D7F9;"></div>
<td class="onglet" style="text-align: center; padding: 0.3em; 0; font-size: 100%; {{#ifeq:{{FULLPAGENAME}}|User:{{BASEPAGENAME}}|background: #108de6; background: -moz-linear-gradient(top, #108de6 0%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#108de6), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(top, #108de6 0%,#7db9e8 100%); background: -o-linear-gradient(top, #108de6 0%,#7db9e8 100%); background: -ms-linear-gradient(top, #108de6 0%,#7db9e8 100%); background: linear-gradient(top, #108de6 0%,#7db9e8 100%);|background-color:transparent;}} -moz-border-radius: 7px 0 0 7px; -webkit-border-radius: 7px 0 0 7px; border-radius: 7px 0 0 7px;" width="14.666666666667%">
<div style="width:25%; float:left;height:4px; background:#666666;"></div>
[[User:{{BASEPAGENAME}}|<span style="color:#{{#ifeq:{{FULLPAGENAME}}|User:{{BASEPAGENAME}}|fcfcfc|000}};">'''About me'''</span>]]</td>
__NOTOC__
<td class="onglet" style="text-align: center; padding: 0.3em; border-left:1px solid #C2dfff; font-size: 100%; {{#ifeq:{{FULLPAGENAME}}|Help:Contents|background: #108de6; background: -moz-linear-gradient(top, #108de6 0%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#108de6), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(top, #108de6 0%,#7db9e8 100%); background: -o-linear-gradient(top, #108de6 0%,#7db9e8 100%); background: -ms-linear-gradient(top, #108de6 0%,#7db9e8 100%); background: linear-gradient(top, #108de6 0%,#7db9e8 100%);|background-color:transparent;}}" width="14.666666666667%">
{| style="width:100%; margin:auto; border-collapse:collapse; margin-bottom:10px; clear:left;"
'''[[{{{navbarlink|People}}}|<span style="color:#{{#ifeq:{{{FULLPAGENAME}}|Staff|fcfcfc|000}};">{{{navbarlinkname|{{{navbarlink|Other People}}}}}}</span>]]'''</td>
| style="padding:10px; vertical-align:top; width:75%;" |
<td class="onglet" style="text-align: center; padding: 0.3em; border-left:1px solid #C2dfff; font-size: 100%; {{#ifeq:{{FULLPAGENAME}}|User talk:{{PAGENAME}}|background: #108de6; background: -moz-linear-gradient(top, #108de6 0%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#108de6), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(top, #108de6 0%,#7db9e8 100%); background: -o-linear-gradient(top, #108de6 0%,#7db9e8 100%); background: -ms-linear-gradient(top, #108de6 0%,#7db9e8 100%); background: linear-gradient(top, #108de6 0%,#7db9e8 100%);|background-color:transparent;}} -moz-border-radius: 0 7px 7px 0; -webkit-border-radius:  0 7px 7px 0; border-radius:  0 7px 7px 0;" width="14.666666666667%">
<div style="line-height:.7em; font-size: 270%; font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;">{{{name|<noinclude>Example name</noinclude>}}}</div>
'''[[{{TALKPAGENAME}}|<span style="color:#{{#ifeq:{{FULLPAGENAME}}|User talk:{{PAGENAME}}|fcfcfc|000}};">Talk to me</span>]]'''</td>
{{#if:{{{job title|}}}|
</tr>
<div style="font-size: 180%; padding-top: 16px; font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif; line-height:30px;">{{{job title}}}, {{{organisation|Wikimedia UK}}}</div>}}
</table>
<div style="padding-top: 16px; font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif;">{{{short quote}}}</div>
</div>
</div>


<div style="margin:10px 0; border:0; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; background:white; width:100%; height:200px; overflow:hidden; background: #FCFCFC; background: -moz-linear-gradient(top, #FCFCFC 0%, #F5F5F5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#F5F5F5)); background: -webkit-linear-gradient(top, #FCFCFC 0%,#F5F5F5 100%); background: -o-linear-gradient(top, #FCFCFC 0%,#F5F5F5 100%); background: -ms-linear-gradient(top, #FCFCFC 0%,#F5F5F5 100%); background: linear-gradient(top, #FCFCFC 0%,#F5F5F5 100%);position:relative">
| style="padding:10px 0; vertical-align:top; width:25%; text-align:center;" | [[{{#if:{{{imagename|}}}|{{{imagename}}}{{!}}alt={{{name}}}|File:Wikimedia UK Office Clocks, 2013.jpg{{!}}alt=No photo}}|250px|{{#if:{{{hover text|}}}|{{{hover text|}}}|{{{hover text|{{{name}}}, {{{job title}}}}}}}}]]


<div style="float:left; margin-top:-50px; margin-left:-50px; opacity:0.75;">
|}
[[File:Wikimedia UK logo.svg|left|400px|link=]]
</div>


<div style="float:right; margin-top:10px; margin-bottom:10px; margin-right:10px; text-align:right;">
{| style="width:100%; margin:auto; border-collapse:collapse;"
[[{{#if:{{{imagename|}}}|{{{imagename}}}|File:WMUK office - clocks.jpg}}|x167px|{{{hover text|}}}]]
| style="padding:15px; vertical-align:top; width:37%;" | <h2 style="font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif; border-bottom:0;">Biography</h2>
</div>
{{{bio}}}
| style="padding:15px; vertical-align:top; width:37%;" | <h2 style="font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif; border-bottom:0;">My work</h2>
{{{work}}}
| style="padding:15px; vertical-align:top; width:25%; background:#F4F4F4;" | <h2 style="font-family:'Helvetica Neue', 'Lucida Grande', Tahoma, Verdana, sans-serif; border-bottom:0;">Contact me</h2>
{{{contact}}}
|}


<div style="float:left; margin-top:-10px; margin-right:50px; color:#000; text-align:left; font-size:42px; font-family:Calibri, Verdana, Arial, sans-serif; line-height:0.5em;">
<p style="margin:15px 0 0;">'''<span class="fn">{{{name|John Doe}}}</span>'''</p>
<div style="font-size: 24px; line-height7px;"><span class="title">{{#ifexist:{{{job title|job title}}}|[[{{{job title|job title}}}]]|{{{job title|Mouse-chaser}}}}}</span>, <span class="org">{{{organisation|Wikimedia UK}}}</span></div>
<div style="padding-top: 10px; font-size: 15px;"><i>{{{short quote|}}}</i></div>
</div>
</div>
{| style="width:100%; background:none; border:0; padding:0; margin:0; border-spacing:0; font-family:Calibri, Verdana, sans-serif; font-size:14px;"
| style="width:35.5%; padding-right:10px;" |
<div style="border:0; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; background: #fff; background: -moz-linear-gradient(top, #fff 75%, #F5F5F5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#fff), color-stop(100%,#F5F5F5)); background: -webkit-linear-gradient(top, #fff 75%,#F5F5F5 100%); background: -o-linear-gradient(top, #fff 75%,#F5F5F5 100%); background: -ms-linear-gradient(top, #fff 75%,#F5F5F5 100%); background: linear-gradient(top, #fff 75%,#fff 100%); min-height:250px; padding:5px 15px;">
'''Biography'''&nbsp;&nbsp;&nbsp;{{{bio|foo}}}
</div>
| style="width:35.5%;" |
<div style="border:0; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; background:white; background: #fff; background: -moz-linear-gradient(top, #fff 75%, #F5F5F5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#fff), color-stop(100%,#F5F5F5)); background: -webkit-linear-gradient(top, #fff 75%,#F5F5F5 100%); background: -o-linear-gradient(top, #fff 75%,#F5F5F5 100%); background: -ms-linear-gradient(top, #fff 75%,#F5F5F5 100%); background: linear-gradient(top, #fff 75%,#fff 100%); min-height:250px; padding:5px 15px;">
'''What I do'''&nbsp;&nbsp;&nbsp;{{{work|foo}}}
</div>
| style="width:25%; padding-left:10px;" |
<div style="border:0; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; background:white; background: #fff; background: -moz-linear-gradient(top, #fff 75%, #F5F5F5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#fff), color-stop(100%,#F5F5F5)); background: -webkit-linear-gradient(top, #fff 75%,#F5F5F5 100%); background: -o-linear-gradient(top, #fff 75%,#F5F5F5 100%); background: -ms-linear-gradient(top, #fff 75%,#F5F5F5 100%); background: linear-gradient(top, #fff 75%,#fff 100%); min-height:250px; padding:5px 15px;">
'''Contact me'''&nbsp;&nbsp;&nbsp;{{{contact|foo}}}
</div>
|}
<noinclude>
<noinclude>
== Usage ==
== Usage ==
Line 86: Line 65:
|-
|-
|<code>imagename</code>
|<code>imagename</code>
|Include "File:" but don't link it.
|Include "File:" but don't include [[]]
|-
|-
|<code>hover text</code>
|<code>hover text</code>
|What would you like to appear when the image is hovered over?
|What text would you like to appear when the image is hovered-over?
|-
|-
|<code>bio</code>
|<code>bio</code>
|This parameter is pretty self-explanatory.
|Some information about you and your background.
|-
|-
|<code>work</code>
|<code>work</code>
|What do you do at Wikimedia UK?
|Some information about what you do.
|-
|-
|<code>contact</code>
|<code>contact</code>

Latest revision as of 17:10, 16 November 2015

Example name
{{{short quote}}}
 No photo

Biography

{{{bio}}}

My work

{{{work}}}

Contact me

{{{contact}}}


Usage

{{User info
|navbarlink=
|navbarlinkname=
|name=
|job title=
|organisation=
|short quote=
|imagename=
|hover text=
|bio=
|work=
|contact=
}}

Parameters

Parameter Explanation
navbarlink An optional link; defaults to People
navbarlinkname What you want to link to appear as.
name Full name (compulsory)
job title Just your job title - don't link it. (compulsory)
organisation The organisation you work for (defaults to Wikimedia UK).
short quote Something witty, meaningful or anything else.
imagename Include "File:" but don't include [[]]
hover text What text would you like to appear when the image is hovered-over?
bio Some information about you and your background.
work Some information about what you do.
contact Contact details

Examples

Retrieved from "https://dev.wikimedia.org.uk/w/index.php?title=Template:User_info&oldid=68549"