gnome-shell.css 中一些選擇器項目的名稱一覽表
1. 先看PopupMenu 的部份
首先以 Advanced Settings 設定一個你要修改的 gnome-shell 主題
其次打開檔案管理員 nautilus 在家目錄下按下 CTRL+H 顯示隱藏檔，找到.theme 找到該 gnome-shell 主題開啟 gnome-shell.css
搜尋字串 PopupMenu 找到 .popup-menu-boxpointer 選擇器
A. border: 2px solid rgba(255,255,255,0.9); 就是外框顯示的部份，可以控制他的邊框大小及顏色。
B. background-gradient-direction: vertical; 這是漸層遞色的方向
C. background-gradient-start: rgba(122,76,27,0.7); 漸層遞色開始的顏色
D. background-gradient-end: rgba(122,76,27,0.7); 漸層遞色結束的顏色
E. box-shadow: 0px 0px 7px 7px rgba(255,255,255,0.4); 這是光暈的效果(上面以白色為例子)
其中 rgba中4個值分別是 (紅,綠,藍,透明度)
其他所有關於 .popup- XXX 都是與這部份相關的設定 ，你只要修改完，再按下ALT+F2 輸入R 按下ENTER 鍵重新載入Gnome-shell 就看得到變化了 。(之後不再重複)
關於顏色的部份，你可以安裝KcolorChooser 來選擇顏色或取得色號。
2. 調整應用程式列表的圖示大小與間距
搜尋字串 .icon-grid 找到 .icon-grid 選擇器
跟應用程式按鈕大小間距相關的就底下這幾個選擇器
.icon-grid {
spacing: 5px;
-shell-grid-item-size: 100px; /* was 118px */
}
這是外框及間距大小 (不包含線的部份)
.contact-grid {
spacing: 5px;
-shell-grid-item-size: 212px; /* 2 * -shell-grid-item-size + spacing */
}
這是聯絡人圖示大小及間距，你隨便按下一個字母搜尋時聯絡人圖示也會列出。
.icon-grid .overview-icon {
icon-size: 64px;
圖示大小
}
***** Gnome-shell 3.4 要改成這樣 *****
.icon-grid {
spacing: 6px;
/*-shell-grid-item-size: 118px; /* was 118px */
-shell-grid-horizontal-item-size: 108px;
-shell-grid-vertical-item-size: 108px;
}
.contact-grid {
spacing: 36px;
-shell-grid-item-size: 72px; /* 2 * -shell-grid-item-size + spacing */
}
.icon-grid .overview-icon {
width: 96px; /* Same width as two normal results + spacing */
height: 96px; /* Aspect ratio = 1.75. Normal US business card ratio */
icon-size: 72px;
}
*********************************
如果要讓應用程式按鈕如上圖出現外框線，要搜尋字串 .overview-icon
.app-well-app > .overview-icon,
.remove-favorite > .overview-icon,
.search-result-content > .overview-icon {
border-radius: 4px;
padding: 3px;
border: 1px solid transparent rgba(221,187,102,0.2);
外框線
font-size: 9pt;
color: white;
text-align: center;
}
最右側應用程式過濾器，則是在 .app-filter 選擇器設定。
又如.contact 選擇器，
你可以發現聯絡人的按鈕可以設定成長方形的
.contact {
width: 272px; /* Same width as two normal results + spacing */
height: 118px; /* Aspect ratio = 1.75. Normal US business card ratio */
border-radius: 3px;
padding: 3px;
border: 1px rgba(221,187,102,0.padding2);
舉一反三我們試著將 .icon-grid 改成如下，他也會變成長方形
.icon-grid .overview-icon {
width: 128px; /* Same width as two normal results + spacing */
height: 64px; /* Aspect ratio = 1.75. Normal US business card ratio */
/*icon-size: 64px;*/
}
很可惜Grid 我找不到設成長方形的方法.....
**************** Gnome-shell 3.4 可以改成長方形 ***************
/* Apps */
.icon-grid {
spacing: 6px;
/*-shell-grid-item-size: 118px; /* was 118px */
-shell-grid-horizontal-item-size: 108px;
-shell-grid-vertical-item-size: 81px;
}
.contact-grid {
spacing: 36px;
-shell-grid-item-size: 72px; /* 2 * -shell-grid-item-size + spacing */
}
.icon-grid .overview-icon {
width: 128px; /* Same width as two normal results + spacing */
height: 96px; /* Aspect ratio = 1.75. Normal US business card ratio */
icon-size: 72px;
}
********************************************************
3. workspace 工作區預覽
比較有趣的部份是以前我一直想關閉工作區自動隱藏，查了也沒發現有Autohide 的選項，現在終於被我找到了 ...
.workspace-controls {
visible-width: 246px; /* Amount visible before hovering */
}
這是覺得最有趣的部份... 也達成了以往想要的樣子
這個選擇器就是表示，你滑鼠沒有移到最右邊時，工作區預覽可以看到的範圍，一般都是 15px 左右，只要你設定成 240px 左右，工作區預覽就相當於不隱藏了，這個設定觀看你的螢幕框度比，例如我的螢幕設定為 246px 就完美不動了。
.workspace-thumbnails-background {
background-color: rgba(220,220,220,0.1);
底部填充顏色
border: 2px solid rgba(220,220,220,0.5);
外框線寬及顏色
border-right: 1px;
border-radius: 1px;
padding: 2px;
}
反正就是這樣....
4. panel ，就是最上方的功能表列
/* Panel */
#panel {
border: 1px solid rgba(255,255,255,0.3);
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-radius: 0px;
color: rgba(255,255,255,1.0);
background-gradient-direction: horizontal;
background-gradient-start: rgba(100,100,100,0.1);
background-gradient-end: rgba(0,0,0,0.4);
height: 24px;
font-size: 9pt;
font-weight: bold;
}
你可以隨意改變並測試這些值，原則上就是不要改到顯示不出來就可以。
5. Run Dialog 就是你按下 Alt+F2 那個視窗
/* Run Dialog */ 設定的方式也是一樣，稍微測試一下就知道他們的作用，在最底下可以看到
.lightbox {
background-color: rgba(0,0,0,0.3);
}
.lightbox 這就是周圍暗影的部份，你按下登出時或要求輸入密碼時，整個桌面變暗，那個變按的底色。
同樣的，/* PolicyKit Authentication Dialog */ 這個區段就是控制輸入密碼那個視窗的顏色
/* Modal Dialogs */ 區段也是，例如登出時那個對話視窗
.modal-dialog {
font-size: 9pt;
border-radius: 4px;
border: 2px solid rgba(255,255,255,0.4);
background-gradient-direction: vertical;
background-gradient-start: rgba(217,180,48,0.2);
background-gradient-end: rgba(0,0,0,0.8);
box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.7);
color: #fff;
陰影
padding-right: 42px;
padding-left: 42px;
padding-bottom: 30px;
padding-top: 30px;
}
6. message-tray就是滑鼠移到右下角會浮上來那個部份
#message-tray {
background-gradient-direction: horizontal;
漸層顏色的方向
background-gradient-start: rgba(218,154,48,0.0);
漸層起點顏色
background-gradient-end: rgba(218,154,48,1);
漸層終點顏色
box-shadow: inset 0px 1px 1px rgba(255,255,255,0.5);
陰影
border-radius: 3px;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
color: white;
height: 36px;
}
7. /* Overview */ 區段
當你按下概覽或是滑鼠移到左上角，這個時候背景的顏色會變黑，上例我用紅色強調的區域，如果你不要這麼黑，改成
/* Overview */
#overview {
spacing: 12px;
background-color: rgba(255,255,255,0.1);
}
這樣就可以了
其他的舉一反三，應該大概都知道怎麼設定了，這原本應該有個程式幫助一般使用者設定，很可惜使用Gnome-shell 的人可能要面對很長時間的半成品期........
-------------------------------------» 閱讀全文 »標籤： Gnome Shell, LinuxMint, Ubuntu
