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