[CSS] 隱藏/刪除/修改 pixnet痞克幫網誌前台上方BAR/橫條區塊/快捷功能－小無的不臘閣大圖多建議電腦版

【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;
}

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

使用之前回覆欄位改版同樣的標示法好了...　只加上邊框，標示出位置．
（邊框不一定在前台完全有作用．邊框可能會撐開欄位長寬，或使位置位移．）
感謝小池野夏さん把那篇推上來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;/*酒紅色框*/
}

♦ 對照用原始預設：

隨便修改...大約這樣吧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）

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

【2020. 7. 3】應留言詢問之更新教學：
　　修改 bar 右上方，白字的「收藏／搜尋／選單／提醒／頭像」，此５個超連結的顏色

　　＊為圖檔，所以方法是：「重新製圖」->「替換圖片」　　

1. 用瀏覽器右鍵「檢測元素」（也能看到圖檔尺寸），去查 pixnet 官方預設，為 28x28 px 之 svg 檔案。
　　（這步驟對修 css 的人應該是常識，就沒有截圖了）　

2. 製作替換用 svg 圖：這是向量圖檔，我沒裝新版 Ill，所以... 用網路免費線上程式XD　搜尋「svg Editor」
　　我如下圖大約畫了個鈴鐺。鈴鐺形狀是多個基本圖形組成，中間星星是文字～懶得拉曲線XD　
　　★ 若此步驟有障礙，應也可用透明背景的點陣圖檔(如PNG,GIF)，甚至不透明的一般圖檔(如JPG)啦。

3. 程式網頁右上方匯出 = 存檔，依 Pixnet 官方圖檔，設定成相同的尺寸（可減少麻煩）28x28 px

4. 匯出後要上傳... 馬上會發現個有趣問題～pixnet 自家相簿不支援 svg XDDD
　　故我採用此篇教學：建立 Google drive 圖床並顯上到網頁上 @ cubemail88 - Medium
　　把檔案上傳到咕狗雲端，然後複製該篇內文的公式，替換網址之ID 即可。記得開啟「共用設定」。

　　註：由於現在咕狗雲端只能開放「知道連結者可查看」，為了確認不同人亦可看到～我上傳到小分身的雲端
　　　　然後用沒登入的手機開網誌，是可以看到外連的圖片。總之架站者請務必多用不同環境測試顯示。
　　　　當然，若改用 PNG 則免找 svg 圖床啦XD　但 png 或 gif 放大頁面時，比起 svg 會有些糊掉@@

5. 然後再用瀏覽器右鍵「檢測元素」（也就是 F12，但右鍵可精準選取）...右鍵複製選擇器／複製規則。
　　可得到以下 Pixnet 官方設定：
.pixnavbar__top-bar__icon-notification {
background-image: url(https://s.pixfs.net/common/pixnavbar-ui-module/image/icon_bell.svg); }

　　用上步驟得到的圖片網址替換，並加上驚嘆號重要：
.pixnavbar__top-bar__icon-notification {
background-image: url(https://drive.google.com/uc?export=view&id=1y1Usq40WYjmAX5moQCmi_IhiNVDyauI9) !important; }

　　就可如下圖成功修改囉！^q^

6. 滑鼠移上去的變色，不是替換圖片，而是官方原本就有的半透明設定．
　　我配合自己測試用網誌，把 icon 改成黑色，所以有沒半透明，對比不是很明顯。
　　（淺色變不透明是變亮，深色變不透明是變暗）　上圖鈴噹是半透明，下圖滑鼠移上後黑色比上圖深．

--- END ---

小無

小無的不臘閣大圖多建議電腦版

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

«	十一月 2024					»
日	一	二	三	四	五	六
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

小無的不臘閣大圖多建議電腦版

[CSS] 隱藏/刪除/修改 pixnet痞克幫網誌前台上方BAR/橫條區塊/快捷功能

歷史上的今天

留言列表

最新文章 (含未置頂)

ALL ArticLeS

最新留言

隨興的文章分類☆

【Comic】漫畫 (6)

【Animation】動畫 (5)

【ACG】其他 (8)

【Music】 (7)

【其他】 (6)

【電腦】 (3)

【本人】...Orz (4)

cALendAr

站外連結

台灣網路書店

💖 日本漫畫線上連載 💖💖

日本漫畫官網（點擊開啟）

字典、資料庫、工具

計數器【隱藏標題】

footMArk

我去誰家【隱藏標題】

rSS feed

poWered

«	十一月 2024					»
日	一	二	三	四	五	六
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

«	十一月 2024					»
日	一	二	三	四	五	六
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

小無的不臘閣 大圖多建議電腦版

[CSS] 隱藏/刪除/修改 pixnet痞克幫網誌前台 上方BAR/橫條區塊/快捷功能

歷史上的今天

留言列表

最新文章 (含未置頂)

ALL ArticLeS

最新留言

隨興的文章分類☆

【Comic】漫畫 (6)

【Animation】動畫 (5)

【ACG】其他 (8)

【Music】 (7)

【其他】 (6)

【電腦】 (3)

【本人】...Orz (4)

cALendAr

站外連結

台灣網路書店

💖 日本漫畫 線上連載 💖💖

日本漫畫官網（點擊開啟）

字典、資料庫、工具

計數器【隱藏標題】

footMArk

我去誰家【隱藏標題】

rSS feed

poWered

小無的不臘閣大圖多建議電腦版

[CSS] 隱藏/刪除/修改 pixnet痞克幫網誌前台上方BAR/橫條區塊/快捷功能

💖 日本漫畫線上連載 💖💖

«	十一月 2024					»
日	一	二	三	四	五	六
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30