Template:User page: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
(Added frame; See the Template Doc for info) |
||
Line 16: | Line 16: | ||
--> | --> | ||
{{#if:{{{frame|}}}|<div style="background:{{{frame bg|{{#switch:{{{theme|}}}| dark = #0a0a0a | #default = #1f1f1f }}}}}; box-shadow:0 5px 10px rgba(0,0,0,.5); border-radius:{{{radius frame cover|{{#switch:{{{style|}}}|1=6px|1em}}}}}; ; display:flow-root; padding:{{{padding frame cover|{{#switch:{{{style|}}}|1=0.5px|1em}}}}}; ">|}} | |||
<div style="display:flex; justify-content:center; align-items:center; height:256px; {{#if:{{{cover gradient|}}}|background-image:{{{cover gradient}}};|}} background-color:{{#switch:{{{theme}}} | <div style="display:flex; justify-content:center; align-items:center; height:256px; {{#if:{{{cover gradient|}}}|background-image:{{{cover gradient}}};|}} background-color:{{#switch:{{{theme}}} | ||
| custom = {{{theme|}}} | |||
| dark = #181818 | | dark = #181818 | ||
| #default = #404040 | | #default = #404040 | ||
}}; border-radius:6px; overflow: hidden; user-select:none; position:relative; z-index:1; margin-top:{{#ifeq:{{FULLPAGENAME}}|Template:User page|0| | }}; border-radius:6px; overflow: hidden; user-select:none; position:relative; z-index:1; margin-top:{{#ifeq:{{FULLPAGENAME}}|Template:User page|0|0px}}"><!-- | ||
-->{{#if:{{PROTECTIONEXPIRY:edit|File:UserCover-{{PAGENAME}}.png}} | -->{{#if:{{PROTECTIONEXPIRY:edit|File:UserCover-{{PAGENAME}}.png}} | ||
|[[File:UserCover-{{PAGENAME}}.png|link=]] | |[[File:UserCover-{{PAGENAME}}.png|link=]] | ||
Line 26: | Line 28: | ||
|{{#if:{{{cover gradient|}}}||<span style="opacity:.6">[[File:Icon-panorama-filled.png|80px|{{User page/strings|AddCover}}|link=File:UserCover-{{ROOTPAGENAME}}.png]]</span>}}}}}} | |{{#if:{{{cover gradient|}}}||<span style="opacity:.6">[[File:Icon-panorama-filled.png|80px|{{User page/strings|AddCover}}|link=File:UserCover-{{ROOTPAGENAME}}.png]]</span>}}}}}} | ||
</div> | </div> | ||
{{#if:{{{frame|}}}|</div>|}} | |||
<div style="display:flex; align-items:center; position:relative; z-index:3; padding: 0 clamp(8px, 2vw, 30px); margin-top:- | <!-- INFO: the first line centers the frame with the background, the second once centers it without the frame --> | ||
{{#if:{{{frame|}}}|<div style="display:flex; align-items:center; position:relative; z-index:3; padding: 0 clamp(8px, 2vw, 30px); margin-top:-84px; margin-bottom:20px">|<div style="display:flex; align-items:center; position:relative; z-index:3; padding: 0 clamp(8px, 2vw, 30px); margin-top:-94px; margin-bottom:20px">}} | |||
<!-- End of INFO --> | |||
<!-- | <!-- | ||
Line 33: | Line 38: | ||
--> | --> | ||
{{#if:{{{frame|}}}|<div style="background:{{{frame bg|{{#switch:{{{theme|}}}| dark = #0a0a0a | #default = #1f1f1f }}}}}; box-shadow:0 5px 10px rgba(0,0,0,.5); border-radius:{{{radius frame avatar|{{#switch:{{{style|}}}|1=6px|10em}}}}}; display:flow-root; padding:{{{padding frame avatar|{{#switch:{{{style|}}}|1=0.5px|1em}}}}}; ">|}} | |||
<div style="display:flex; justify-content:center; align-items:center; min-width: 128px; width:128px; height:128px; background-color: {{#switch:{{{theme}}} | <div style="display:flex; justify-content:center; align-items:center; min-width: 128px; width:128px; height:128px; background-color: {{#switch:{{{theme}}} | ||
| dark = #212121 | | dark = #212121 | ||
Line 46: | Line 54: | ||
|<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{{#switch:{{{event|}}}|xmas=XMAS|}}-{{PAGENAME}}.png|{{Settings|user={{PAGENAME}}|avatar frame size|ifempty=}}|link=]]</div>|}} | |<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{{#switch:{{{event|}}}|xmas=XMAS|}}-{{PAGENAME}}.png|{{Settings|user={{PAGENAME}}|avatar frame size|ifempty=}}|link=]]</div>|}} | ||
</div> | </div> | ||
{{#if:{{{frame|}}}|</div>|}} | |||
<!-- | <!-- | ||
Line 51: | Line 60: | ||
--> | --> | ||
{{#if:{{{frame|}}}|<div style="background:{{{frame bg|{{#switch:{{{theme|}}}| dark = #0a0a0a | #default = #1f1f1f }}}}}; box-shadow:0 5px 10px rgba(0,0,0,.5); border-radius:{{{radius frame username|{{#switch:{{{style|}}}|1=6px|.6em}}}}}; ; display:flow-root; padding:{{{padding frame username|{{#switch:{{{style|}}}|1=0.5px|1em}}}}}; margin:0 16px">|}} | |||
<div style="background-color: {{#switch:{{{theme}}} | <div style="background-color: {{#switch:{{{theme}}} | ||
| dark = #212121 | | dark = #212121 | ||
| #default = #303030 | | #default = #303030 | ||
}}; border-radius:6px; font-size: 32px; line-height:24px; color: #FFFFFF; padding:10px; margin:0 16px">{{Settings|user={{PAGENAME}}|username|ifempty={{PAGENAME}}}}<span style="user-select:none"></span></div> | }}; border-radius:6px; font-size: 32px; line-height:24px; color: #FFFFFF; padding:10px; margin:0 16px">{{Settings|user={{PAGENAME}}|username|ifempty={{PAGENAME}}}}<span style="user-select:none"></span> | ||
</div> | |||
{{#if:{{{frame|}}}|</div>|}} | |||
<!-- | <!-- | ||
Line 60: | Line 72: | ||
--> | --> | ||
{{#if:{{{frame|}}}|<div style="background:{{{frame buttons|{{#switch:{{{theme|}}}| dark = #0a0a0a | #default = #1f1f1f }}}}}; box-shadow:0 5px 10px rgba(0,0,0,.5); border-radius:{{{radius frame buttons|{{#switch:{{{style|}}}|1=6px|1em}}}}}; ; display:flow-root; padding:{{{padding|{{#switch:{{{style|}}}|1=0.5px|1em}}}}}; margin-left:auto;">|}} | |||
<div style="display:flex; align-items:center; gap:20px; background:{{#switch:{{{theme}}} | <div style="display:flex; align-items:center; gap:20px; background:{{#switch:{{{theme}}} | ||
| dark = #212121 | | dark = #212121 | ||
Line 67: | Line 80: | ||
-->[[File:Icon-settings_account_box-outlined.png|24px|link={{#ifexist:{{FULLPAGENAME}}/Settings|{{FULLPAGENAME}}/Settings|{{fullurl:{{FULLPAGENAME}}/Settings|action=edit&preload={{urlencode:Template:User settings page/preload}}}}}}|{{User page/strings|UserSettings}}]]</div> | -->[[File:Icon-settings_account_box-outlined.png|24px|link={{#ifexist:{{FULLPAGENAME}}/Settings|{{FULLPAGENAME}}/Settings|{{fullurl:{{FULLPAGENAME}}/Settings|action=edit&preload={{urlencode:Template:User settings page/preload}}}}}}|{{User page/strings|UserSettings}}]]</div> | ||
</div> | </div> | ||
{{#if:{{{frame|}}}|</div>|}} | |||
<!-- | <!-- | ||
Revision as of 17:31, 26 March 2024
Todo:
Note:It's not hard to do.
Workaround:to make it, you should to upload .gif, like .png/.jpg... But you should to configure them (just renaming format .gif to .png/.jpg not works)
- Someday complete work on this template, thereby standardizing non-stylized user pages.
- This template should become the second
{{MultiPage}}
, but for user pages. - Animated avatar.


- The {{{discord}}} parameter should be changed to accept a user link, e.g.: discordapp.com/users/{{{discord}}}
- Scrolling in {{User page}}
The above documentation is transcluded from Template:User page/doc. (Edit | Page history)
Editors can experiment in this template's sandbox (edit) and testcases (create) pages.
Editors can experiment in this template's sandbox (edit) and testcases (create) pages.