Template talk:Userbox

新的用户框模板代码

本主题或以下段落文字，移动自 Talk:讨论版#新的用户框模板代码

我把用户框模板重写了，新代码放在这里，管理员拿去吧。--Great Brightstar（讨论） 2016年2月3日 (三) 23:16 (CST)

与现有Template:Userbox的对比 --D41D8CD98F00B204E9800998ECF8427E 2016年2月3日 (三) 23:35 (CST)

。。。。看不懂代码的我跪了。--丝毫没有存在感的某蓝色管理员（讨论） 2016年2月3日 (三) 23:42 (CST)

也就是增加了對分類的控制，可以直接在模板中填寫分類？--Notalgia-Contαct- 2016年2月3日 (三) 23:46 (CST)

(－)反对 萌百用户页面不能添加分类，新的参数毫无意义。--巡查&Developer XYZ指示物（nbdd0121） (Talk) 2016年2月4日 (四) 09:21 (CST)

(－)反对 @Great Brightstar为何要重写Userbox？新版本有何改进？请您说明一下。@Nostalgia不是你要求他重写的吧？是否有相关的讨论？--W3jc（讨论） 2016年2月4日 (四) 10:53 (CST)

那個版本是維基百科最新的版本，已經刪掉分類參數。--Notalgia-Contαct- 2016年2月4日 (四) 10:59 (CST)

为何要跟维基保持一致？这个不是更新的理由吧...--W3jc（讨论） 2016年2月4日 (四) 11:02 (CST)

模板本來從維基引用過來，維基方面的更新一般跟隨，有編輯習慣等原因，因為個人不用Userbox，沒注意到【萌百不允许在制作的用户框下加會被引用到用戶頁面的分类。】。--Notalgia-Contαct- 2016年2月4日 (四) 11:30 (CST)

(＋)支持 五年过去了，不知如今是否可以再次检讨是否跟随更新为维基百科目前所使用的调用模块的用户框模板？除了萌百不使用的分类参数，新的模板提供了更多的控制参数如align、padding，甚至可以通过id-op/info-op实现更多css功能，相信一定程度上更能够激励创作和提高社区活跃度。——兔饼(留言) 2021年4月14日 (三) 13:31 (CST)

编辑请求 - ScarletteDreamme

由ScarletteDreamme提出的编辑请求:

状态：   搁置

将原内容修改为：

将width参数移至外层<div>标签中，这样可以多少改善一点移动端用户框外观。（虽然一般来说移动端屏幕都足够狭窄，不至于出现用户框随文字无限拉长？）

红梦子#FF2400（讨论） 2017年5月14日 (日) 15:10 (CST)

补充：只移动width，不移动height，否则还是会造成内容出框（参见Userbox-2）。 --红梦子#FF2400（讨论） 2017年5月14日 (日) 15:12 (CST)

请直接看这一层。去掉表的width，不要移到<div>里面，然后在info栏style补一个"width:215px;"。原来的解决方案文字太短的话背景色宽度会不够。在info栏style补的方案可以做到用户框保持同样宽度 --红梦子#FF2400（讨论） 2017年5月14日 (日) 15:57 (CST)

把原來的width:260px;注釋掉？。。--不太會用戶框的Zyksnowy（讨论） 2017年5月14日 (日) 16:14 (CST)

熊孩子终于测试完毕了，测试记录见沙盒版本历史。以下概述个人认为的最优解决方案：

• <div>标签：还是写一个width:260px;（原因：不知道为什么，215px+45px并不等于260px。也不像是info padding导致的，因为215px+45px也不等于170px+45px+45px）。
• 表格总体尺寸：不写width（原因：不需要），不写height（原因：否则字多的时候不能自动拓宽）。
• id栏style：保持现状。
• info栏style：width:215px; height:59px;48px;（原因：防止字太少的时候自动收缩。至于为什么是48px，是因为这样总体宽度就是59px了……我超想知道原因）。

--红梦子#FF2400（讨论） 2017年5月14日 (日) 16:31 (CST)

把我建议的这个写法做成了User:ScarletteDreamme/Userbox-new，这边更新之前我在用户页里先用那个。能看出在移动端或者移动端视图看起来比Userbox好很多（至少我这么觉得） --红梦子#FF2400（讨论） 2017年5月14日 (日) 20:08 (CST)

编辑请求 - Grandom

由Grandom提出的变基编辑请求：

状态：   完成

等申请通过这几天又发现几个新问题，现在再次修改编辑请求。

目前的用户框存在以下几个问题：

1.在移动端框内上下有迷之空白

解决方法：在表格一层的style属性中添加margin:0px;。

2.在移动端宽度不受控制

解决方法：在表格一层的width值后添加!important。

3.在移动端（主要是安卓端）id栏会变矮，字数过多后整体高度却又不增加

解决方法：将表格一层的height值删除，id栏一层的height值改为57。（对于楼上编辑请求中提到的必须设置为48总体高度才为59的问题，测试后并没有出现。）

4.模板中实际存在一个自定义边框宽度的参数，但自定义之后会导致整体宽度变化

解决方法：在div一层的style属性中添加display:table; width:262px;固定宽度；border值移动到表格一层；表格一层的width值变为相对宽度100%。

全部改正后的代码见User:Grandom/Template:Userbox。(这里仅包含includeonly中的部分）

这里借用下@渡边鸽咕嗝的用户页，可以直接对比修改前和修改后的效果。

--Grandom（讨论） 2019年9月24日 (二) 22:53 (CST)

1和2已采纳，3采纳将表格一层的height值删除而后半部分改用word-break: break-all;以及将所有的height改为min-height，4拒绝（让用户自己决定是否要用超宽边框）。——From AnnAngela the Temporary Bureaucrat (Talk) 2019年9月26日 (四) 13:09 (CST)

@AnnAngela

1.原申请中第4点并不是说要禁止使用宽边框，而是使用宽边框之后保持整体宽度不变。不过刚好第4点中有个小错误：display:table;并不是必要的。

2.修改为min-height后id栏一层的值仍然应当改为57，不然id栏默认变矮的问题没有解决。

3.您对info-lh的修改稍有问题，应为{{#if:{{{info-lh|}}}|{{{info-lh}}}|1.25em}}，目前所有用户框高度较混乱。（不过我没明白增加这个判断的意义是什么，好像没什么区别）

4.补充，刚刚发现的历史遗留问题，看了下编辑历史，当时id栏没有设置line-height，所以很多用户框模板里自行添加了<p style="line-height:100%"> </p>，如今的模板已经不再需要。
但是<p>标签的引入导致id文字上下有默认的段落间距，已经无法实现原本设计的默认高度容纳三行id，移动端更是两行id就会撑高。

目前想到的只能靠重新修改所有含有<p>标签的用户框模板解决。

--Grandom（讨论） 2019年9月26日 (四) 13:41 (CST)

1.我认为设计这个参数的本意就不是让宽边框压缩内容来达成宽度不变的=。=并且实现起来相当不合理，就没采用

2.done;

3.{{{a|b}}}有个问题，如果用户写了|a=的话那么mw会认为参数a有值（即使是空值），所以{{{a|b}}}输出就为（空）不为b了，使用if检测能避免这个问题；

4.这个没法批量处理，只能用户自己解决了。——From AnnAngela the Temporary Bureaucrat (Talk) 2019年9月26日 (四) 14:25 (CST)

感谢，第3点这是我没想到的了。我又检查了一下，id栏还是不要用word-break: break-all;了，左边有时填的是Vocaloid、Flag这种单词。 --Grandom（讨论） 2019年9月26日 (四) 14:48 (CST)

以及安卓端变矮问题仍未解决(竟然),我沙盒试了一下还是要height:57px;才可以。-_-|| --Grandom（讨论） 2019年9月26日 (四) 15:08 (CST)

@AnnAngela min-height不可用于表格及表格元素中，请考虑使用height。

“	Applies to: all elements but non-replaced inline elements, table columns, and column groups	”
——MDN

--Nzh21（讨论） 2019年9月26日 (四) 16:52 (CST)

OK，word-break那里我用break-word了。——From AnnAngela the Temporary Bureaucrat (Talk) 2019年9月26日 (四) 18:46 (CST)

@AnnAngela 表格层里还有个！min-height:59px;（不过这个是说要去掉来着吧） --Grandom（讨论） 2019年9月26日 (四) 18:49 (CST)

而且break-word好像不对吧……效果也没出来 --Grandom（讨论） 2019年9月26日 (四) 18:53 (CST)

其实都默认就挺好的 --Grandom（讨论） 2019年9月26日 (四) 18:57 (CST)

表格层那个是故意留的，breakword留着也没啥关系。——From AnnAngela the Temporary Bureaucrat (Talk) 2019年9月26日 (四) 19:05 (CST)

但是长单词还是被换行了啊。 --Grandom（讨论） 2019年9月26日 (四) 19:09 (CST)

编辑请求 - Max Lyu

由Max Lyu提出的编辑请求：

状态：   完成

申请者未给出申请内容 Max Lyu（讨论） 2019年12月17日 (二) 12:46 (CST) Userbox在实际使用的时候会和文本混在一起，造成非常奇怪的效果，请问是否有方法改进，如在文本与Userbox交界处自动换行？本人不会维基语法或HTML，拜托了

可以组合使用|float=none|display=inline-block——From AnnAngela the Temporary Bureaucrat (Talk) 2019年12月26日 (四) 15:07 (CST)

---

还是在文档里推荐使用{{clear}}吧，一来直接用现成的用户框模板没法改属性，二来如果真有做模板时用了这两条的就更混乱了。 Grandom讨论·贡献 2020年4月20日 (一) 18:06 (CST)

编辑请求 - RabBIThole

由RabBIThole提出的编辑请求：

状态：   完成

将原内容修改为：

请求添加border-image 属性，以使用渐变色边框

—— RabBIThole（讨论·贡献） 2020年5月13日 (三) 10:32 (CST)

Done.——From AnnAngela the Temporary Bureaucrat (Talk) 2020年5月16日 (六) 14:21 (CST)

@AnnAngela不知道到为何目前没法正常使用，请看这个页面—— RabBIThole（讨论·贡献） 2020年5月16日 (六) 20:16 (CST)

(▲)同上 我觉得可能是因为把border-image写在前面会被后面的border相关属性覆盖。--Moegirlpedia:~ Leranjun$ Home · Talk · Contrib 2020年5月16日 (六) 20:18 (CST)

Fixed.——From AnnAngela the Temporary Bureaucrat (Talk) 2020年5月16日 (六) 23:20 (CST)

编辑请求 - BearBin - 2023.03.11

由BearBin提出的对Template:Userbox的编辑请求：

状态：   完成

将以下内容：

第一行的

<includeonly><div style="float:{{#if:{{{float|}}}|{{{float|}}}|left}}; border:{{#if:{{{border-width|}}}|{{{border-width|}}}|{{#if:{{{border-s|}}}|{{{border-s|}}}|1}}}}px solid {{#if:{{{border-color|}}}|{{{border-color|}}}|{{#if:{{{1|}}}|{{{1|}}}|{{#if:{{{border-c|}}}|{{{border-c|}}}|{{#if:{{{id-c|}}}|{{{id-c|}}}|#999}}}}}}}}; margin:1px; {{#if: {{{display|}}} | display: {{{display|}}} |}};{{#if:{{{border-image|}}}|{{{border-image|}}}}};">

修改为：

<includeonly><div style="float:{{#if:{{{float|}}}|{{{float|}}}|left}}; width:fit-content; border:{{#if:{{{border-width|}}}|{{{border-width|}}}|{{#if:{{{border-s|}}}|{{{border-s|}}}|1}}}}px solid {{#if:{{{border-color|}}}|{{{border-color|}}}|{{#if:{{{1|}}}|{{{1|}}}|{{#if:{{{border-c|}}}|{{{border-c|}}}|{{#if:{{{id-c|}}}|{{{id-c|}}}|#999}}}}}}}}; margin:1px; {{#if: {{{display|}}} | display: {{{display|}}} |}};{{#if:{{{border-image|}}}|{{{border-image|}}}}};">

去除窄屏下的多余空白——BearBin 「喷他 • 留名」 2023年3月11日 (六) 20:13 (CST)

Done. ——  ほしみ 2023年3月11日 (六) 23:25 (CST)

编辑请求 - 桂の脌 - 2025.06.24

由桂の脌提出的对Template:Userbox的编辑请求：

状态：   待处理申请

将以下内容：

<div style="float:{{#if:{{{float|}}}|{{{float|}}}|left}}; width:fit-content; border:{{#if:{{{border-width|}}}|{{{border-width|}}}|{{#if:{{{border-s|}}}|{{{border-s|}}}|1}}}}px solid {{#if:{{{border-color|}}}|{{{border-color|}}}|{{#if:{{{1|}}}|{{{1|}}}|{{#if:{{{border-c|}}}|{{{border-c|}}}|{{#if:{{{id-c|}}}|{{{id-c|}}}|#999}}}}}}}}; margin:1px; {{#if: {{{display|}}} | display: {{{display|}}} |}};{{#if:{{{border-image|}}}|{{{border-image|}}}}};">
    <table cellspacing="0" style="width:260px !important; min-height:59px; margin: 0; background:{{#if:{{{info-background|}}}|{{{info-background|}}}|{{#if:{{{2|}}}|{{{2|}}}|{{#if:{{{info-c|}}}|{{{info-c|}}}|#EEE}}}}}};">
        <tr>
            <td style="width:{{#if:{{{id-w|}}}|{{{id-w|}}}|45}}px; height:57px; background:{{#if:{{{logo-background|}}}|{{{logo-background|}}}|{{#if:{{{1|}}}|{{{1|}}}|{{#if:{{{id-c|}}}|{{{id-c|}}}|#DDD}}}}}}; text-align:center; font-size:{{#if:{{{logo-size|}}}|{{{logo-size|}}}|{{#if:{{{5|}}}|{{{5|}}}|{{#if:{{{id-s|}}}|{{{id-s|}}}|14}}}}}}pt; line-height:{{#if:{{{id-lh|}}}|{{{id-lh|}}}|1em}}; color:{{#if:{{{logo-color|}}}|{{{logo-color|}}}|{{#if:{{{id-fc|}}}|{{{id-fc|}}}|black}}}};">'''{{#if:{{{logo|}}}|{{{logo|}}}|{{#if:{{{3|}}}|{{{3|}}}|{{#if:{{{id|}}}|{{{id|}}}|id}}}}}}'''</td>
            <td style="font-size:{{#if:{{{info-size|}}}|{{{info-size|}}}|{{#if:{{{info-s|}}}|{{{info-s|}}}|9}}}}pt; padding:4pt; line-height:{{#if:{{{info-lh|}}}|{{{info-lh|}}}|1.25em}}; color:{{#if:{{{info-color|}}}|{{{info-color|}}}|{{#if:{{{info-fc|}}}|{{{info-fc|}}}|black}}}};">{{#if:{{{info|}}}|{{{info|}}}|{{#if:{{{4|}}}|{{{4|}}}|{{#if:{{{info|}}}|{{{info|}}}|''info''}}}}}}</td>
        </tr>
    </table>
</div>

修改为：

<table cellspacing="0" style="<!--
外框线样式-->float:{{#if:{{{float|}}}|{{{float|}}}|left}}; width:260px !important; border:{{#if:{{{border-width|}}}|{{{border-width|}}}|{{#if:{{{border-s|}}}|{{{border-s|}}}|1}}}}px solid {{#if:{{{border-color|}}}|{{{border-color|}}}|{{#if:{{{1|}}}|{{{1|}}}|{{#if:{{{border-c|}}}|{{{border-c|}}}|{{#if:{{{id-c|}}}|{{{id-c|}}}|#999}}}}}}}}; margin:1px; {{#if: {{{display|}}} | display: {{{display|}}} |}};{{#if:{{{border-image|}}}|{{{border-image|}}}}};<!--
内层表格样式-->min-height:59px; background:{{#if:{{{info-background|}}}|{{{info-background|}}}|{{#if:{{{2|}}}|{{{2|}}}|{{#if:{{{info-c|}}}|{{{info-c|}}}|#EEE}}}}}};">
    <tr>
        <td style="width:{{#if:{{{id-w|}}}|{{{id-w|}}}|45}}px; height:57px; background:{{#if:{{{logo-background|}}}|{{{logo-background|}}}|{{#if:{{{1|}}}|{{{1|}}}|{{#if:{{{id-c|}}}|{{{id-c|}}}|#DDD}}}}}}; text-align:center; font-size:{{#if:{{{logo-size|}}}|{{{logo-size|}}}|{{#if:{{{5|}}}|{{{5|}}}|{{#if:{{{id-s|}}}|{{{id-s|}}}|14}}}}}}pt; line-height:{{#if:{{{id-lh|}}}|{{{id-lh|}}}|1em}}; color:{{#if:{{{logo-color|}}}|{{{logo-color|}}}|{{#if:{{{id-fc|}}}|{{{id-fc|}}}|black}}}};">'''{{#if:{{{logo|}}}|{{{logo|}}}|{{#if:{{{3|}}}|{{{3|}}}|{{#if:{{{id|}}}|{{{id|}}}|id}}}}}}'''</td>
        <td style="font-size:{{#if:{{{info-size|}}}|{{{info-size|}}}|{{#if:{{{info-s|}}}|{{{info-s|}}}|9}}}}pt; padding:4pt; line-height:{{#if:{{{info-lh|}}}|{{{info-lh|}}}|1.25em}}; color:{{#if:{{{info-color|}}}|{{{info-color|}}}|{{#if:{{{info-fc|}}}|{{{info-fc|}}}|black}}}};">{{#if:{{{info|}}}|{{{info|}}}|{{#if:{{{4|}}}|{{{4|}}}|{{#if:{{{info|}}}|{{{info|}}}|''info''}}}}}}</td>
    </tr>
</table>

理由

• 在某些情况下，尤其是在进行排版的时候（例如使用:缩进用户框），当前版本中用<div />定义的外框会被剥离出来单独放在框体左上角变成一个小点。
  经测试，若将外框定义的CSS样式挪到表格外围的定义中则可解决此问题。
• 挪动了一下无默认值的CSS样式属性定义段中分号;的位置，以免系统展开时出现多余的字符。
• 外框width属性原有的值fit-content经测试似乎并未生效，故合并为值260px !important。

初步测试结果

在Windows11电脑端的Chrome中进行初步测试得到如下结论：

• 用户框的实际宽度会从261.6px缩短到260px。
• 不论增加多少长度的字符内容，用户框宽度均不会超过260px，满足原版本中width属性fit-content的约束。
• 至少解决了用冒号:缩进之后，外框线被剥离的问题。
• 尚未发现改动后出现的其他变动。—— 桂月August（讨论） 2025年6月24日 (二) 21:03 (CST)