新的用戶框模板代碼
我把用戶框模板重寫了,新代碼放在這裡,管理員拿去吧。--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)
- (+)支持 五年過去了,不知如今是否可以再次檢討是否跟隨更新為維基百科目前所使用的調用模塊的用戶框模板?除了萌百不使用的分類參數,新的模板提供了更多的控制參數如align、padding,甚至可以通過id-op/info-op實現更多css功能,相信一定程度上更能夠激勵創作和提高社區活躍度。——兔餅(留言) 2021年4月14日 (三) 13:31 (CST)
編輯請求 - ScarletteDreamme
由ScarletteDreamme提出的編輯請求:
- 狀態: 擱置
將原內容修改為:
<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)- 熊孩子終於測試完畢了,測試記錄見沙盒版本歷史。以下概述個人認為的最優解決方案:
- <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;
。
- 解決方法:在表格一層的style屬性中添加
- 2.在移動端寬度不受控制
- 解決方法:在表格一層的width值後添加
!important
。
- 解決方法:在表格一層的width值後添加
- 3.在移動端(主要是安卓端)id欄會變矮,字數過多後整體高度卻又不增加
- 解決方法:將表格一層的height值刪除,id欄一層的height值改為57。(對於樓上編輯請求中提到的必須設置為48總體高度才為59的問題,測試後並沒有出現。)
- 4.模板中實際存在一個自定義邊框寬度的參數,但自定義之後會導致整體寬度變化
- 解決方法:在div一層的style屬性中添加
display:table; width:262px;
固定寬度;border值移動到表格一層;表格一層的width值變為相對寬度100%。
- 解決方法:在div一層的style屬性中添加
全部改正後的代碼見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)
- @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)
- @AnnAngela 表格層裡還有個!
- OK,word-break那裡我用break-word了。——From AnnAngela the Temporary Bureaucrat (Talk) 2019年9月26日 (四) 18:46 (CST)
- --Nzh21(討論) 2019年9月26日 (四) 16:52 (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提出的編輯請求:
- 狀態: 完成
將原內容修改為:
—— RabBIThole(討論·貢獻) 2020年5月13日 (三) 10:32 (CST)
- Done.——From AnnAngela the Temporary Bureaucrat (Talk) 2020年5月16日 (六) 14:21 (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中進行初步測試得到如下結論: