模板討論: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;了,左邊有時填的是VocaloidFlag這種單詞。 --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的約束。
  • 至少解決了用冒號:縮進之後,外框線被剝離的問題。
  • 尚未發現改動後出現的其他變動。——avatar_桂の脌.png 桂月August討論) 2025年6月24日 (二) 21:03 (CST)
此頁面最後編輯於 2025年6月24日 (週二) 21:44。
搜尋萌娘百科 (按"/"快速搜尋)
有新的未讀公告