ETH官方钱包

前往
大廳
主題

巴哈公會(huì)2.0緊湊模式with Stylus

mP3+Z | 2021-03-06 04:02:00 | 巴幣 4 | 人氣 290

巴哈最近更新了公會(huì),使介面更符合現(xiàn)代網(wǎng)頁(yè)的設(shè)計(jì)語(yǔ)言。
不過(guò)個(gè)人覺(jué)得圖片吃了太多畫(huà)面,所以透過(guò)stylus調(diào)整一下排版。
果然一調(diào)整就空間就砍了一半
左為原公會(huì)2.0介面,右為使用stylus後的介面

Stylus為瀏覽器擴(kuò)充套件,目的是透過(guò)修改css來(lái)改變網(wǎng)頁(yè)外觀排版。
關(guān)於Stylus使用方法可自行g(shù)oogle。
註1:Stylus是瀏覽器套件,本身也會(huì)吃記憶體,自行斟酌使用。
註2:僅在PC / Firefox上測(cè)試過(guò),其他裝置或?yàn)g覽器可能會(huì)失效或效果有所差異。
註3:使用Stylus修改css只會(huì)影響本地端瀏覽器。不影響伺服器,別人的電腦也看不到你的修改。

Stylus樣式使用範(fàn)圍
使用於 [ 含以下前綴的網(wǎng)址 ] : [ https://guild.gamer.com.tw/ ]

CSS
.globalcontainer .main-container_header .scenery-img {height:80px} /*縮小公會(huì)背景圖高度*/
.globalcontainer .main-container_header_info h1, .globalcontainer .main-container_header_info small {text-shadow:0px 0px 2px rgba(0, 0, 0, 1); color:#fff} /*加強(qiáng)公會(huì)名稱顯示*/
.globalcontainer .main-container_wall-post_footer .shareandmore {padding-top:0px} /*GP-BP鈕與內(nèi)文縮距*/
.linkbox {display:none} /*刪除連結(jié)產(chǎn)生的圖片與說(shuō)明文字*/
.webview_commendlist .c-reply__item .reply-content__cont img {max-height:82px} /*圖片與GIF高度減半*/

創(chuàng)作回應(yīng)

(??? ??)?{鳴aiRN7?
想請(qǐng)問(wèn) mP3 ,公會(huì)背景圖高度的縮小後呈現(xiàn)效果,看起來(lái)好像不屬於像下方貼文之貼圖那樣的比例縮小方式,是這樣吧?!!是否因背景圖為長(zhǎng)寬相差過(guò)大,若以比例縮呈現(xiàn),就會(huì)圖片過(guò)小呢?
2021-03-06 10:29:05
mP3+Z
是 背景圖那塊單純改高度而已 超過(guò)的部分會(huì)被截掉 如果覺(jué)得還是想要保留背景圖的話可以改高度 例如把80px改成160px (原值是320px)
2021-03-06 10:58:00
(??? ??)?{鳴aiRN7?
原來(lái)是這樣呀;謝謝 mP3 的教學(xué)呦!
2021-03-06 11:04:09
mP3+Z
或是你要完全刪除背景圖也可以 多加一行 #guildBackground {display:none}
2021-03-06 11:13:05
mP3+Z
刪了背景圖畫(huà)面更簡(jiǎn)潔了 https://i.imgur.com/MEPuBl5.png
2021-03-06 15:54:10
(??? ??)?{鳴aiRN7?
感覺(jué) mP3的 CSS 寫(xiě)得滿好的呢!以前無(wú)名時(shí)期,只稍會(huì)像依樣話葫蘆那般地, XDD 小改寫(xiě)那些CSS樣式而已。
2021-03-06 18:04:48
mP3+Z
巴哈網(wǎng)頁(yè)的css本身就寫(xiě)的不錯(cuò) 定義很明確 所以蠻好改的
2021-03-06 18:21:02

更多創(chuàng)作