修改 gnome-shell.css

  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 的人可能要面對很長時間的半成品期........