Template:User settings page: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
(User Avatar & Profile Cover) |
||
| Line 10: | Line 10: | ||
|timeoffsetm=</nowiki>{{Settings|user={{ROOTPAGENAME}}|timeoffsetm}}<nowiki> | |timeoffsetm=</nowiki>{{Settings|user={{ROOTPAGENAME}}|timeoffsetm}}<nowiki> | ||
}}</onlyinclude></includeonly></nowiki>}}</div> | }}</onlyinclude></includeonly></nowiki>}}</div> | ||
</div></ | </div> | ||
<div style="display:flex; flex-direction:column; border: 1px solid #525252; background-color:#3C3C3C; padding:20px; margin-top:20px;{{border-radius|4px}}"> | |||
<h3 style="padding:0">Avatar</h3> | |||
<div style="display: flex; align-items:center; background:#454545; border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:30px"> | |||
<!-- Avatar (128px) --> | |||
<div style="display:flex; justify-content:center; align-items:center; min-width:128px; width:128px; height:128px; user-select:none"><!-- | |||
--><div style="display:flex; justify-content:center; align-items:center; width:100%; height:100%; background:#525252; border-radius:6px; overflow:hidden;"><!-- | |||
-->{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatar-{{ROOTPAGENAME}}.png}} | |||
|[[File:UserAvatar-{{ROOTPAGENAME}}.png|link=|128px]] | |||
|{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatar-{{ROOTPAGENAME}}.jpg}} | |||
|[[File:UserAvatar-{{ROOTPAGENAME}}.jpg|link=|128px]] | |||
|[[File:Icon-user.png|link=|48px]]}}}} | |||
</div><!-- | |||
-->{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatarFrame-{{ROOTPAGENAME}}.png}} | |||
|<div style="width:224px; height:224px; transform:scale(.7); display:flex; align-items:center; justify-content:center; overflow:hidden; user-select:none; position:absolute">[[File:UserAvatarFrame-{{ROOTPAGENAME}}.png|link=]]</div> | |||
|}}<!-- | |||
--></div> | |||
<!-- Avatar (64px) --> | |||
<div style="display:flex; justify-content:center; align-items:center; min-width:64px; width:64px; height:64px; user-select:none; margin-left:60px"> | |||
<div style="display:flex; justify-content:center; align-items:center; width:100%; height:100%; background:#525252; border-radius:6px; overflow:hidden;"><!-- | |||
-->{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatar-{{ROOTPAGENAME}}.png}} | |||
|[[File:UserAvatar-{{ROOTPAGENAME}}.png|link=|64px]] | |||
|{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatar-{{ROOTPAGENAME}}.jpg}} | |||
|[[File:UserAvatar-{{ROOTPAGENAME}}.jpg|link=|64px]] | |||
|[[File:Icon-user.png|link=|24px]]}}}} | |||
</div><!-- | |||
-->{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatarFrame-{{ROOTPAGENAME}}.png}} | |||
|<div style="width:224px; height:224px; transform:scale(.35); display:flex; align-items:center; justify-content:center; overflow:hidden; user-select:none; position:absolute">[[File:UserAvatarFrame-{{ROOTPAGENAME}}.png|link=]]</div> | |||
|}} | |||
</div> | |||
<!-- Avatar (40px) --> | |||
<div style="display:flex; justify-content:center; align-items:center; min-width:40px; width:40px; height:40px; user-select:none; margin-left:40px"> | |||
<div style="display:flex; justify-content:center; align-items:center; width:100%; height:100%; background:#525252; border-radius:6px; overflow:hidden;"><!-- | |||
-->{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatar-{{ROOTPAGENAME}}.png}} | |||
|[[File:UserAvatar-{{ROOTPAGENAME}}.png|link=|40px]] | |||
|{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatar-{{ROOTPAGENAME}}.jpg}} | |||
|[[File:UserAvatar-{{ROOTPAGENAME}}.jpg|link=|40px]] | |||
|[[File:Icon-user.png|link=|16px]]}}}} | |||
</div><!-- | |||
-->{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatarFrame-{{ROOTPAGENAME}}.png}} | |||
|<div style="width:224px; height:224px; transform:scale(.22); display:flex; align-items:center; justify-content:center; overflow:hidden; user-select:none; position:absolute">[[File:UserAvatarFrame-{{ROOTPAGENAME}}.png|link=]]</div> | |||
|}} | |||
</div> | |||
</div> | |||
<div style="display:flex; gap:10px; margin-top:20px"> | |||
<div style="background:#4c4c4c; border:1px solid rgba(255,255,255,.1); border-radius:2px; padding:4px 8px;"> | |||
{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatar-{{ROOTPAGENAME}}.png}} | |||
|[[:File:UserCover-{{ROOTPAGENAME}}.png|View Avatar]] | |||
|{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatar-{{ROOTPAGENAME}}.jpg}} | |||
|[[:File:UserCover-{{ROOTPAGENAME}}.jpg|View Avatar]] | |||
|Upload Avatar: [[:File:UserCover-{{ROOTPAGENAME}}.png|{{Code|PNG}}]] [[:File:UserCover-{{ROOTPAGENAME}}.png|{{Code|JPG}}]]}}}} | |||
</div> | |||
<div style="background:#4c4c4c; border:1px solid rgba(255,255,255,.1); border-radius:2px; padding:4px 8px;"> | |||
{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatarFrame-{{ROOTPAGENAME}}.png}} | |||
|[[:File:UserCover-{{ROOTPAGENAME}}.png|View Avatar Frame]] | |||
|[[:File:UserCover-{{ROOTPAGENAME}}.png|Upload Avatar Frame]]}} | |||
</div> | |||
</div> | |||
<h3>Cover</h3> | |||
<div style="display: flex; justify-content:center; align-items:center; width:100%; height:256px; background:#404040; border-radius:6px; overflow: hidden; user-select:none; position:relative; z-index:1;"><!-- | |||
-->{{#if:{{PROTECTIONEXPIRY:edit|File:UserCover-{{ROOTPAGENAME}}.png}} | |||
|[[File:UserCover-{{ROOTPAGENAME}}.png|link=]] | |||
|{{#if:{{PROTECTIONEXPIRY:edit|File:UserCover-{{ROOTPAGENAME}}.gif}} | |||
|[[File:UserCover-{{ROOTPAGENAME}}.gif|link=]] | |||
|{{#if:{{PROTECTIONEXPIRY:edit|File:UserCover-{{ROOTPAGENAME}}.jpg}} | |||
|[[File:UserCover-{{ROOTPAGENAME}}.jpg|link=]] | |||
|[[File:Icon-panorama.png|link=|80px]]}}}}}} | |||
</div> | |||
<div style="display:flex; gap:10px; margin-top:20px"> | |||
<div style="background:#4c4c4c; border:1px solid rgba(255,255,255,.1); border-radius:2px; padding:4px 8px;"><!-- | |||
-->{{#if:{{PROTECTIONEXPIRY:edit|File:UserAvatarFrame-{{ROOTPAGENAME}}.png}} | |||
|[[:File:UserCover-{{ROOTPAGENAME}}.png|View Profile Cover]] | |||
|[[:File:UserCover-{{ROOTPAGENAME}}.png|Upload Profile Cover]]}} | |||
</div> | |||
</div> | |||
</div></onlyinclude></includeonly> | |||