【2018-8-21】更新在文末:整個區塊的所有(?)標籤,修改細部語法用.

 

 -*-*-♤-*-*--*-*-♤-*-*-

【2018-7-11】滑著手機,發現PIXNET官方又無預警 改變前台外貌惹 = =
找到空檔,馬上來移除那個 占空間礙眼的鬼東西...

 

這鬼東西其實以前也有:(當時也是無預警突然出現,不實用又會 吃掉整條視窗面積 = =)

.topbar-placeholder {display:none !important}/*--刪除上方bar--*/    

 

 

而這幾天開始,此語法無效囉~
也就是此篇文更新的東西~要換成以下:

.pixnavbar__top-bar {display:none !important}   

 

若有人好奇官方設定~是這些:

   .pixnavbar__top-bar {
    /* display: -webkit-box; */
    /* display: -ms-flexbox; */
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
} 


若不是想隱藏,只是想修改部分,可以找相似的標籤/語法去改(似乎有不少 .pixnavbar 開頭的設定)

 

  ---*-----*-----♤-----*-----*---   

 

使用以上語法後(看標籤名稱:FF 右鍵 - 檢查元素,反白右邊 html,找 ID 和 class 名稱)
會發現上方只是 文字&藍色底色不見,空間仍還在!(像是搬走的鐵皮屋那樣~垃圾空殼還在...)

再去找問題~官方還有這個設定 = =

  .main-container {
    padding-top: 45px;
} 

也就是說,我們還得覆蓋過這個鬼領域才行:

.main-container {padding-top: 0px !important;}   

 

當然,各位看起來 本網誌如同往常.
而「如同往常」就是本人目標@@ 一直以來都只是想要 穩定寧靜的隨興打文而已...

 

 -*-*-♤-*-*--*-*-♤-*-*-

 

若以上文字都不想看~那請試著把以下紅字,貼在「自訂CSS」的最後方
(卷軸拉到底,文字串最後,自己按出些空白段落)注意不要複製到 任何全形空白   


.pixnavbar__top-bar {display:none !important}/*--刪除上方bar--*/
.main-container {padding-top: 0px !important;}

 

      

 

 ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

 

  

 

 

【2018-8-21】更新:整個區塊的所有(?)標籤,修改細部語法用.(應留言所求@@)

使用 Chrome 右鍵「檢測元素」,然後慢慢從各行html:右鍵 ->「複製」->「CSS選擇器」
再從下方CSS,慢慢 「複製規則」. 方法大約這樣吧@@ 挺手工的...不保證沒有眼花/完全正確喔XD

選擇器一覽:(階層憑感覺啦XD!那麼細眼睛看不清楚(炸)

.navbar {}
   .navbar-container
      .pixnavbar
        .pixnavbar__top-bar-container
           .pixnavbar__top-bar
              .pixnavbar__top-bar__main-sites
                 .pixnavbar__top-bar__logo
                 a.pixnavbar__top-bar__pix-site:nth-child(2)
                 a.pixnavbar__top-bar__pix-site:nth-child(3)
              .pixnavbar__top-bar__list
           .pixnavbar__top-bar__menu-container {空}
           .pixnavbar__top-bar__notification-container {空}
           .pixnavbar__top-bar__avatar-container {空}

~~~*~♧~*~♤~*~~*~~~

 

加上官方的預設語法(我們修改必須壓過官方位階,才會顯示在前台.所以要知道官方設定了啥~)


.main-container {}
.navbar {
    position: fixed;
    top: 0;
    z-index: 100000001;
    line-height: normal;
    background-color: #006ac6;
}
.navbar-container {}

.pixnavbar {
    position: fixed;
    background-color: #006ac6;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.3);
    box-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.pixnavbar.pixnavbar-d__navbar {
    width: 100%;
}
.pixnavbar, .pixnavbar * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


.pixnavbar-d__navbar .pixnavbar__top-bar-container {
    position: relative;
    margin: 0 auto;
}

.pixnavbar-d__navbar .pixnavbar__top-bar {
    height: 45px;
    padding-left: 5px;
    line-height: 45px;
}

.pixnavbar__top-bar__main-sites {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/*---------------------*/
.pixnavbar-d__navbar .pixnavbar__top-bar__logo {
    width: 110px;
    height: 30px;
    margin-right: 35px;
    background-size: 75px 30px;
}
.pixnavbar a {
    text-decoration: none;
}
.pixnavbar__top-bar__logo {
    background: url(https://s.pixfs.net/common/pixnavbar-ui-module/image/logo_pixnet_ch.svg) 0 no-repeat;
}

/*--------nth-child(2)-------------*/
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-blog {
    width: 70px;
    height: 20px;
    background: url(https://s.pixfs.net/common/pixnavbar-ui-module/image/nav_blog_normal.svg) 50% no-repeat;
}
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-site {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 2.5px;
    color: hsla(0,0%,100%,.6);
    text-decoration: none;
}

/*--------nth-child(3)-------------*/
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-streamtopic {
    width: 45px;
    height: 20px;
    margin-left: 40px;
    background: url(https://s.pixfs.net/common/pixnavbar-ui-module/image/nav_bonbon_normal.svg) 50% no-repeat;
}
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-site {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 2.5px;
    color: hsla(0,0%,100%,.6);
    text-decoration: none;
}

.pixnavbar__top-bar__list {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

 

[CSS] 修改pixnet痞克幫網誌前台 上方BAR(快捷)- 01.png

慣例派測試用網誌XD:http://smallwu36test.pixnet.net/blog
上圖可見,官方設定的本來就跑框@@ 右邊太長~超出整個網誌寬度了(不是我設定問題喔XD!)

     

[CSS] 修改pixnet痞克幫網誌前台 上方BAR(快捷)- 02.png

使用之前回覆欄位改版 同樣的標示法好了... 只加上邊框,標示出位置.
(邊框不一定在前台完全有作用.邊框可能會撐開欄位長寬,或使位置位移.)
感謝小池野夏さん把那篇推上來XD 剛好複製貼上語法XD(無論CSS或是前台底色XD)


.main-container {}
.navbar {
    position: fixed;
    top: 0;
    z-index: 100000001;
    line-height: normal;
    background-color: #006ac6;
   border: 5px  solid #a80000 !important;/*紅色框*/
}
.navbar-container {     border: 5px  solid #ff9000 !important;/*橘色框*/}

.pixnavbar {
    position: fixed;
    background-color: #006ac6;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.3);
    box-shadow: 0 1px 6px rgba(0,0,0,.3);
   border: 5px solid #f8fb00 !important; /*金黃色框*/
}

.pixnavbar.pixnavbar-d__navbar {
    width: 100%;
    border: 5px  solid #8efb00 !important;/*草綠色框*/
}
.pixnavbar, .pixnavbar * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.pixnavbar-d__navbar .pixnavbar__top-bar-container {
    position: relative;
    margin: 0 auto;
   border: 5px  solid #8faf8e !important;/*淺墨綠框*/
}

.pixnavbar-d__navbar .pixnavbar__top-bar {
    height: 45px;
    padding-left: 5px;
    line-height: 45px;
    border: 5px  solid #00ffc6 !important;/*亮藍綠色框*/
}

.pixnavbar__top-bar__main-sites {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 5px solid #45fdff !important;/*水藍色框*/
}

/*---------------------*/
.pixnavbar-d__navbar .pixnavbar__top-bar__logo {
    width: 110px;
    height: 30px;
    margin-right: 35px;
    background-size: 75px 30px;
    border: 5px solid #007eff !important;/*藍色框*/
}
.pixnavbar a {
    text-decoration: none;
}
.pixnavbar__top-bar__logo {
    background: url(https://s.pixfs.net/common/pixnavbar-ui-module/image/logo_pixnet_ch.svg) 0 no-repeat;
    border: 5px solid #022299 !important;/*深藍色框*/
}

/*--------nth-child(2)-------------*/
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-blog {
    width: 70px;
    height: 20px;
    background: url(https://s.pixfs.net/common/pixnavbar-ui-module/image/nav_blog_normal.svg) 50% no-repeat;
    border: 5px solid #d1b0ff !important;/*淺紫色框*/
}
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-site {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 2.5px;
    color: hsla(0,0%,100%,.6);
    text-decoration: none;
    border: 5px solid #c0787a  !important;/*暗粉紅色框 紅色底*/
}

/*--------nth-child(3)-------------*/
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-streamtopic {
    width: 45px;
    height: 20px;
    margin-left: 40px;
    background: url(https://s.pixfs.net/common/pixnavbar-ui-module/image/nav_bonbon_normal.svg) 50% no-repeat;
    border: 5px solid #9445ff !important; /*紫色框*/
}
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-site {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 2.5px;
    color: hsla(0,0%,100%,.6);
    text-decoration: none;
    border: 5px solid #f845ff !important;/*桃紅色框*/
}

.pixnavbar__top-bar__list {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 5px solid #c7006c !important;/*酒紅色框*/
}

[CSS] 修改pixnet痞克幫網誌前台 上方BAR(快捷)- 02.png

 

 

  對照用原始預設:

[CSS] 修改pixnet痞克幫網誌前台 上方BAR(快捷)- 01.png

[CSS] 修改pixnet痞克幫網誌前台 上方BAR(快捷)- 03.png

隨便修改...大約這樣吧XD;?(因為畢竟不是我真的要用,實在不知道要改什麼XD;;)
總之標籤語法應該是有效/有作用的,可以改成與自己網誌樣式 比較搭配的顏色與圖案~
...我沒禮貌的把官方「痞客邦」LOGO,改成「We Are~」XD(隨意撿現成的素材圖回收利用~)


.main-container {}
.navbar {
    position: fixed;
    top: 0;
    z-index: 100000001;
    line-height: normal;
    background-color: #006ac6;
}
.navbar-container {}

.pixnavbar {
    position: fixed;
    background-color: #000 !important;/*黑色底色*/
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.3);
    box-shadow: 0 1px 6px rgba(0,0,0,.3);
width: 980px !important;
}

.pixnavbar.pixnavbar-d__navbar {
    width: 100%;
}
.pixnavbar, .pixnavbar * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.pixnavbar-d__navbar .pixnavbar__top-bar-container {
    position: relative;
    margin: 0 auto;
   border: 0px  solid #8faf8e !important;/*淺墨綠框*/
}

.pixnavbar-d__navbar .pixnavbar__top-bar {
    height: 45px;
    padding-left: 5px;
    line-height: 45px;
    border: 0px  solid #00ffc6 !important;/*亮藍綠色框*/
}

.pixnavbar__top-bar__main-sites {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 0px solid #45fdff !important;/*水藍色框*/
}

/*---------------------*/
.pixnavbar-d__navbar .pixnavbar__top-bar__logo {
    width: 110px;
    height: 30px;
    margin-right: 35px;
    background-size: 75px 30px;
    border: 0px solid #007eff !important;/*藍色框*/
}
.pixnavbar a {
    text-decoration: none;
}
.pixnavbar__top-bar__logo {
    background: url(http://p6.p.pixnet.net/albums/userpics/6/6/424166/49df9c58bf2a7.png) 0 no-repeat !important;
    width: 176px !important;
    height: 36px !important;
    border: 0px solid #022299 !important;/*深藍色框*/
}

/*--------nth-child(2)-------------*/
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-blog {
    width: 70px;
    height: 20px;
    background: url(https://s.pixfs.net/common/pixnavbar-ui-module/image/nav_blog_normal.svg) 50% no-repeat;
    border: 0px solid #d1b0ff !important;/*淺紫色框*/
}
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-site {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 2.5px;
    color: hsla(0,0%,100%,.6);
    text-decoration: none;
    border: 0px solid #c0787a  !important;/*暗粉紅色框 紅色底*/
}

/*--------nth-child(3)-------------*/
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-streamtopic {
    width: 45px;
    height: 20px;
    margin-left: 40px;
    background: url(https://s.pixfs.net/common/pixnavbar-ui-module/image/nav_bonbon_normal.svg) 50% no-repeat;
    border: 0px solid #9445ff !important; /*紫色框*/
}
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-site {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 2.5px;
    color: hsla(0,0%,100%,.6);
    text-decoration: none;
    border: 2px solid #5b000e !important;/*暗紅色框*/
}

.pixnavbar__top-bar__list {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 0px solid #c7006c !important;/*酒紅色框*/
    background-color: #5b000e !important;/*紅色底色*/
}

     

~~~*~♧~*~♤~*~~*~~~

 

保留官方設定是方便檢查&壓過去XD 確定修改好後,就可以只保留修改處.節省 CSS 讀取時間(?)
目前我在測試用網誌的,只有以下語法(就會有同樣的作用~)

/*上方bar隨便修改*/
.pixnavbar {    background-color: #000 !important;/*黑色底色*/ width: 980px !important;}
.pixnavbar__top-bar__logo {/*替換掉官方logo XD*/
    background: url(http://p6.p.pixnet.net/albums/userpics/6/6/424166/49df9c58bf2a7.png) 0 no-repeat !important;    width: 176px !important;    height: 36px !important;}
.pixnavbar-d__navbar .pixnavbar__top-bar__pix-site {    border: 2px solid #5b000e !important;/*暗紅色框*/}
.pixnavbar__top-bar__list {    background-color: #5b000e !important;/*紅色底色*/}

       

     ♧           *           ♧   

   

大概這樣吧~.(若有手誤請依CSS常識判斷喔XD)

 

 

 --- END ---

 

創作者介紹
創作者 小無 的頭像
小無

小無的不臘閣

小無 發表在 痞客邦 留言(2) 人氣()


留言列表 (2)

發表留言
  • 小池野夏
  • 請問一下
    有這些BAR每個功能的標籤嗎?
    因為我都找不到這些飆牽
    謝謝您
  • 回覆在您的網誌囉!(以下只是複製貼上XD)

    ---------
    嗨!回訪來看看...您似乎把最上方BAR隱藏了吧?
    請問還有需要 各細部的標籤語法嗎?

    因為一一標示 不算小工程...
    要晚點有空才能幫忙處理喔XD;;;

    小無 於 2018/08/20 13:45 回覆

  • 小池野夏
  • 看到了,非常感謝你
    回家來研究
    很少看到以人會寫這麼詳細(原本還沒新增我的需求之前)
    一般都只是告訴你隱藏的語法是什麼就沒了
    大愛版主 <3