前往
大廳
主題

巴哈公會2.0緊湊模式with Stylus

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

巴哈最近更新了公會,使介面更符合現代網頁的設計語言。
不過個人覺得圖片吃了太多畫面,所以透過stylus調整一下排版。
果然一調整就空間就砍了一半
左為原公會2.0介面,右為使用stylus後的介面

Stylus為瀏覽器擴充套件,目的是透過修改css來改變網頁外觀排版。
關於Stylus使用方法可自行google。
註1:Stylus是瀏覽器套件,本身也會吃記憶體,自行斟酌使用。
註2:僅在PC / Firefox上測試過,其他裝置或瀏覽器可能會失效或效果有所差異。
註3:使用Stylus修改css只會影響本地端瀏覽器。不影響伺服器,別人的電腦也看不到你的修改。

Stylus樣式使用範圍
使用於 [ 含以下前綴的網址 ] : [ https://guild.gamer.com.tw/ ]

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

創作回應

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

更多創作