怎麼自定網站的 CSS style 應該不用多說，我主要是用這個外掛 stylebot

這段時間又補強了一堆元素設定，總算順眼很多
目前是以標準模式 ( 非暗夜模式 )，如果你有用類似的外掛或是其他的，顏色部分請自行調整

這次有兩個頁面要修改，
首先是一般頁面，主要針對 ithelp.ithome.com.tw 這個網址及底下的頁面
2023/9/1 更新 顏色參數化，方便自行配色
2023/9/7 更新 針對鐵人賽文章做了些版面的修改
2023/9/8 更新 針對 發文 發問 表單視覺一致化的修改
2023/9/11 更新 針對文章頁面抬頭做了修改
語法如下

@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

:root {
  --font-a: 20px; /*標準大字*/
  --font-s: 14px; /*小號字體*/
  --color1: #eee; /*前景色1*/
  --bg1: #111; /*背景色1*/
  --bg2: #222; /*背景色2*/
  --bg3: #333; /*背景色3*/
  --bg4: #0ae; /*背景色4*/
  --bgNone:transparent;
  --radius1:4px; /*小圓角*/
}

*{  font-size: var(--font-a) ;   }
body{ font-family: "Lato", "PingFang TC", "Helvetica Neue", Helvetica, "微軟正黑體", "新細明體", Arial, sans-serif,Noto Color Emoji; }

.header > div,.a970,.a810,footer,
.rightside,.index-announcement,
.qa-list__info,
.mk-instruction,.mk-text-muted,
.qa-header__info-avatar,
.qa-list__sponsorTag,
.post-tags__title,::-webkit-scrollbar
{display: none;}

body *{ color:var(--color1); }

body,.menu__left,.qa-list,.header,
.leftside,.qa-header__info,body,
.chat > .text-center:last-child,
.board > .text-center:last-child,
.notice > div > .text-center,
.notice-title,.tab-bottomline,
.leftside > .title-style,
.post-tags__select,.post-tags,
.select2-container
{ width: 100%;}

body,.menu__left,.qa-list,
.board > div:last-child,
.pagination > li > a,
.pagination > li > span,
.taglist:hover,.chatbox__content,
.chat > .text-center:last-child,
.dropdown-menu,.qa-panel,.comment,
.comment__supplement,.comment__list,
.comment__input,.CodeMirror,
.swal-modal,.reply-frame,.form-control,
.reply-status,.tab-bottomline,
.notice > div > .text-center,
.notice-title,.msg-write,
.leftside > .title-style,
.select2-container--default 
.select2-selection--multiple,
.sec-inner-list
{ background-color: var(--bg1); }

.chatbox:nth-child(2n) 
.chatbox__content,.topic-group,
.menu__dropform-btn,.card,
.notice-list--unread,.section-notice,
.qa-action__link-num,.msgbox__content,
.swal-button--cancel,code,.badge-group,
.msglist-item--active,.article-series,
.pagination .page,.list-card,
.list-card .progress
{ background-color: var(--bg2); }

.msgbox__content--self,
.select2-results__option,
.article-series,
.signup-box .card-footer
{ background-color: var(--bg3); }
.section-calc,.pagination-inner a
{ background: var(--bg3); }
.progress-bar,.pagination-inner .active
{ background-color: var(--bg4); }

.header{margin-bottom: 0;}
.leftside{ margin: 50px 0 0 0; }
.menu__left,.menu__right,.menu__logo,
.btn-trace,.qa-header__info-time,
.qa-header > .text-right,.comment__time,
.qa-header__info-view,.tabs,
.comment__list::before,
.comment__input::before,
.notice-list__time
{ position: absolute; clear: both; }

.notice-list
{position: relative;}

.menu__logo,.tab-bottomline,
.leftside > .title-style,
#talk_editor_toggle,.notice-title 
{ z-index: 555;}

.menu__logo{ left:50px; top: 0; }

.menu__left{ left:0; top: 0; 
  padding-left: 180px;
  border-bottom: 1px solid var(--bg4); }
.chatbox__content,.CodeMirror
{ border: 1px solid var(--bg4); }
.menu__right{ right:0; top: 0; }

.board > .text-center:last-child,
.chat > .text-center:last-child,
.notice > div > .text-center{
  border-top:3px solid var(--bg4);
  position: fixed;  left: 0; bottom: 0;}

.notice > div{margin-top: 109px; }
.creat-question{ padding: 0;
  margin-left: -200px; width: 1140px; }
.creat-question :nth-child(2)
{ line-height: 50px; }
.index-top{ margin-top: 0; }
.notice{ max-width: 100%; padding: 0;
    margin: 60px 0 0 0; }

.notice-list__time{ text-align: right; }

.select2-container,.tag
{ border: 1px solid var(--bg4); }
.post-tags::before{ display: block; 
  content: 
  "　標籤 Tag 下得越明確，就越容易吸引邦友";}
.post-btn,form .board:last-child
{border: 0; margin-top: 1px;}
form .board{ margin: 0;}
.pagination > .active > a, 
.pagination > .active > a:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span, 
.pagination > .active > span:hover, 
.pagination > .active > span:focus,
.tabs-item__link--hover:hover,
.dropdown-menu > li > a:hover, 
.dropdown-menu > li > button:hover,
.swal-button,.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover
{ background-color: var(--bg4);
  border: 1px solid var(--bg4); }
.tabs-item__link--hover,.tag,
.pagination > li > a:hover, 
.pagination > li > a:focus, 
.pagination > li > span:hover, 
.pagination > li > span:focus,
.msglist-item:focus, 
.msglist-item:hover,
.select2-selection__choice, 
.pagination .page:hover,
.pagination-inner a:hover,
.qa-list__desc
{ background-color: var(--bg3); }

.tab-bottomline,.notice-title
{ position: fixed; top: 50px;  left: 0;
  padding: 0 12.5%; 
  border-bottom: 3px solid var(--bg4);}

.tab-title,.notice-title
{ margin: 0; line-height: 57.6px; 
  vertical-align: middle; }
  
.tab-title{ padding: 0; }

.tabs{  right: 12.5%; bottom: 0; }
.leftside > .title-style
{ margin: 0; padding: 0 12.5%;
  position: fixed; left: 0; top: 50px;
  line-height: 57.6px;
  border-bottom: 3px solid var(--bg4); }
.board{ margin: 60px 0 80px 0;
  background-color: var(--bg1); }
#talk_editor_toggle{ position: fixed;
  top: 69px; left: 360px; }
.qa-list{ padding: 10px; height: 87.4px;}
.qa-list__condition{ right: 20px; }
.qa-list__content,.notice-list__content
{ min-height:72px;
  margin-right:230px; margin-left:0; }
.qa-list__title,.qa-list__desc
{ overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; }
.qa-list__desc
{ margin-top: 10px; padding: 2px 8px; }
.btn-trace{ left: 335px; top: 0; }
.tag,.select2-selection__choice,
.qa-list__desc
{ font-size: var(--font-s); }
.post-type__dropdown-menu{ width: 100px;}

.reply-frame__info,.response-header__info
{ min-height: unset; padding-left: unset;
  margin-left: 70px; padding-top: unset; }
.reply-frame__person
{ display: inline-block; }
.reply-frame__level{ float:none; }

.reply-frame__avatar,.menu__avatar,
.comment__head,.response__avatar-size,
.ans-header__avatar
{  width: 60px; height: 60px; }

.reply-frame__avatar,
.response__avatar-size{top:0;}

.comment__head{left:-8px;top:8px;}
.menu__avatar{ margin-top: 1px; }

.avatar-box .avatar-img
{ width: 40px; height: 40px;
  margin-top:0; margin-right:0; }

.menu__right{ width: fit-content; }
.qa-header__info{ display: block; }
.qa-header__info-time
{ right: 0; bottom: 1.5em; }
.qa-header > .text-right
{ right: 115px; bottom: 0; }
.qa-header__info-view,
.notice-list__time
{ right: 5px; bottom:0;}

.comment__list{ margin-bottom: 10px; }
.comment__list::before,
.comment__input::before
{ content: " ";
  width: 0;   height: 0; 
  left: 55px; top: 30px;
  border: 9px solid var(--bgNone);
  border-left:15px solid var(--bg4); }
.comment__content{padding: 0 10px; }
.comment__body
{ margin-left: 55px; padding: 0; }
.comment__leveltime{color: var(--bgNone);}
.comment__time
{ left: 80px; bottom: -15px; }
.comment{ margin-bottom: 40px; }
.comment__textarea--rightmargin
{ margin-left: 5px; margin-right: 0;}
.comment__list .comment__form,
.comment__list 
.comment__textarea--rightmargin
{ margin-left: 0px;}
.comment__submit,
.comment__submit[data-ajax*="api"]
{ right: 0; padding: 4px 20px;}
.comment__submit 
{ top:unset; bottom:-38px; }
.comment__submit[data-ajax*="api"]
{ top:-40px; bottom:unset; }

.comment__body,.qa-list,.qa-list__desc,
.comment__input .form-control,.taglist,
.taglist__statistic-num,.notice-list,
.likeGroup__arrow--active,.qa-panel,
.reply-frame,.reply-status
{ border: 1px solid var(--bg4); 
  border-radius: var(--radius1);}

.board,.comment__list .form-control
{border: 0px solid var(--bg4);}

.tabs-content__taglist{ padding: 10px;
  display: flex;   flex-wrap: wrap; }
.taglist{ padding:26px 10px; margin: 10px;
  width: calc( 100% / 3 - 10px * 2 );
  border-radius: 15px; }
.taglist__name{ padding: 0 0 10px 20px; }
.taglist__right{ position:static; }
.taglist__statistic{ padding-left: 140px;}
.taglist__statistic-name 
{ margin: 3px 0; padding: 3px 10px; }
.taglist__statistic-num { width: 110px;
  padding: 0 8px; display: inline-block;  
  margin-left: 10px; }
.taglist__right .btn-trace 
{ left: 30px; top: 145px; }
.likeGroup__arrow i{  top:3px;}

.qa-list:has(.ir-qa-list__status) 
{  height: 131px; }
.ir-qa-list__status *
{font-size: 17px; position: absolute;}
.ir-qa-list__status a
{right: 20px; bottom: 20px;}
.ir-qa-list__status span{left: -80px; 
  width: 70PX; text-align: center;
  border-radius: 4PX; height: 1.6em;
  border-width: 1px ;}
.ir-qa-list__status span:last-child{top:3em;}

第二部分是針對我的主頁頁面進行修改 ithelp.ithome.com.tw/users/*
這個頁面必須到 stylebot 的設定頁面新增這個網址之後，再將下面的語法貼上去

.profile-side > div:nth-child(1),
.profile-side__ad{display: none;}

body{ margin-left: 0;}
.col-md-12 > div:nth-child(1)
{ position: fixed;  z-index: 555; top: 50px; left: 0;
  padding: 0 13%;   width: 100%; height: 190px; background-color: #111; }
.col-md-12 > div:nth-child(1),
.rightside > div{ margin:0; }
.profile-header__right{ position: absolute; right: 0; }
.col-md-12 > div:nth-child(2)
{ margin-top:260px; margin-left: 0; width: calc( 100% - 250px); }
.col-md-12 > div:nth-child(3)
{ margin-top: 260px; display: block; width: 230px;}
.pull-right{margin-top: 30px;}
.profile-pagination{ 
  position: fixed; left: 0; bottom: 0;
  z-index: 555; text-align: center;
  border-top: 3px solid #0ae; }
.profile-nav__list{ position: absolute; top: 100px; }
.profile-side > div:nth-child(2) > div > a::after{ content: "我的鐵人檔案";
  background-color: #111; width: 140px;
  position: absolute;   left:68px; }

.profile-side__title
{ overflow: hidden;  white-space: nowrap; 
  text-overflow: ellipsis; }
.profile-side__box--ironman img{ top: 2px }
.profile-side__icon::after {
  position: absolute; left:43px;
  background-color: #111;
  width: 170px; text-align: left;
  padding-left: 5px;
}
.profile-side > div:nth-child(3) > div > i::after{ content: "我的收藏"; }
.profile-side > div:nth-child(4) > div > i::after{ content: "我的追蹤"; }
.profile-side > div:nth-child(5) > div > i::after{ content: "我的Like"; }
.profile-side > div:nth-child(6) > div > i::after{ content: "我的紀錄"; }
.profile-side > div:nth-child(7) > div > a i::after{ content: "我的訂閱列表"; }
.profile-side > div:nth-child(8) > div > a i::after{ content: "封鎖清單"; }
.profile-list__condition{ float: right; }
.profile-list__content{ min-height: 72px;
  padding-left: 10px; overflow: unset; }
.profile-pagination
{ width: 890.5px;  margin-left: 189.5px;
  border-left: 1px solid #0ae;
  border-right: 1px solid #0ae;}

至於畫面如何，等有空再來補