Gnome Üst Panelde Tarih/Zaman ve Diğer Simgelerin Renklerini Değiştirmek

[Night Glam Flow]

Arkadaşlar üst panelde tarih/zaman uygulamacığının rengini değiştirmek istiyorum. Yani panelde görünen öğelerin renklerini değiştirmek istiyorum. Tarih için gnome-shell.css ile bayağı uğraştım ama hangi satır olduğunu bulamadım.

Sağdaki simgeler için ise svg dosyasını arıyorum ama bulamıyorum.

Yardımcı olursanız çok sevinirim.

[mhmtkrktr]

Sadece saat için değişiklik yapabilirmisin bilmiyorum. Panelin tamamı için şu girdiyi düzenleyebilirsin.

Kod Seç Genişlet

#panel .panel-button {
    color: xxxxxx; }
Orada bulunan simgeleri kullandığın simge temasının içerisinde scalable dizini altında (simge setine göre değişebilir) bulabilirsin. Simge seti dizininde "symbolic" kelimesini aratabilirsin.
Eğer simge seti bu simgeleri içermiyorsa, o zaman varsayılan simge teması gnome-icon-theme yani icons altında gnome dizini içerisinde bulunur.
Amacın simgelerin rengini değiştirmekse şu girdiyi değiştirebilir, yoksa ekleyebilirsin.

Kod Seç Genişlet

#panel .panel-button .system-status-icon {
color: xxxxxx; }

Not: yaptığın değişikliğin etkin olabilmesi için, alt + f2 > rt > enter

[alquirel]

Simgeler hakkında diyeceğim bir şey yok ama CSS düzenlemesi için şu taktiği verebilirim. Bu arada deneyip doğruladığım bir şey değil ama doğru olmaması için de bir sebep yok ortada

Alt+F2 ile açılan satıra lg (looking glass kelimelerinin ilk harfleri olur) yazdığında ekranın üstünden konsol gibi bir pencere iner. Onun sol üst köşesinde de bıçağa benzer bir simge olur. Ona tıklayıp da ekranda gezinirsen üzerinde olduğun öğelerin bilgileri ekranda görünür sürekli. Tarayıcılardaki "Öğe Denetleyicisi" gibi. Yani öğelerin CSS tanımlayıcılarına da oradan ulaşabilirsin. Daha sonra yapacağın iş de spesifik bir CSS tanımlayıcısına ulaşırsan CSS dosyasında aratıp bulursun. Emin olmadığım kısım bu yöntemle ulaştığın bilgiler birebir CSS dosyasındakiyle tutar mı bilmiyorum, denemedim. Ama hiç olmazsa en azından hedefin için fikir verir.

[Night Glam Flow]

Teşekkürler. Bunları bir deneyeyim.  Çok zekice.


Mesaj tekrarı yüzünden mesajınız birleştirildi. Bu mesajın gönderim tarihi : 11 Ekim 2017 - 07:26:58

[mention=631704]@mhmtkrktr[/mention]

Hocam default shell temasının css dosyasını bulamadım ki... Daha doğrusu buldum, ama içi boş.

Plank dock için offset ayarlayamayacağımı anladım. O projeden vazgeçtim. Problemim şu noktaya geldi;



Yukarıdaki resimde hem gnome teması hem shell teması bildiğim gnome ile birlikte gelen default temalar. Malesef bunların css dosyaları boş. Bunların ayarlarıyla nereden oynayacağımı bulamıyorum. Bulursam tekrar paneldeki öğeleri siyah veya kırmızı yapmayı deneyebilirim.

Hatta o ayar dosyasına ulaşırsam üst panelin kalınlığını da belki ayarlayabilirim. Fakat default temaların css dosyalarının hepsi boş.

[mhmtkrktr]

Gnome shell 'in default teması şu dosyadır. /usr/share/gnome-shell/gnome-shell-theme.gresource
gresource olarak derlendiği için yine gresource ile açman gerekir. Dosyayı açmak için şu betiği kullanabilirsin.

Kod Seç Genişlet

#!/bin/bash

[[ -d ~/gs-dir ]] || mkdir ~/gs-dir
[[ -d ~/Night-Glam-Flow ]] || mkdir ~/Night-Glam-Flow
[[ -f /usr/share/gnome-shell/gnome-shell-theme.gresource ]] && \
cp /usr/share/gnome-shell/gnome-shell-theme.gresource ~/gs-dir

GS=~/gs-dir/gnome-shell-theme.gresource
cd ~/Night-Glam-Flow

if [[ -f $GS ]]; then 
for r in $(gresource list $GS); do
    t="${r/#\/org\/gnome\/shell\/}"
    mkdir -p $(dirname $t)
    echo Açıldı $t
    gresource extract $GS $r >$t
done
fi
rm -r ~/gs-dir
[[ $(type nautilus 2>/dev/null) ]] && \
nautilus ~/Night-Glam-Flow

Not 1: Başka bir konu; eğer değişmemişse varsayılan tema siyah diye biliyorum. Debian kullandığını söylemiştin sanırım. Bu şekilde ise Debian özelleştirme yapmış olabilir ki, bu durumda themes dizinine atılmış bir tema kullanıyor da olabilirsin.

Not 2: temayı tekrar gresource olarak derleyebilirsin fakat buna gerek yok. Sadece background-image: url("resource:///org/gnome/shell/theme/falanca.png"); olan satırları şu şekle alman yeterli. background-image: url("falanca.png");
Sonrasında dizini /usr/share/themes altına taşıyarak kullanabilirsin.

[Night Glam Flow]

[mention=631751]@mhmtkrktr[/mention]

Hocam sen aslansın aslan... Aslan parçası hiiiieaaaaaaa




Oldukça güzel görünüyor, şimdi asıl mevzu panelin çevresini solda planktki gibi siyah çizgi ile kaplamak.

Ayrıca panel fazla kalın görünüyor, az inceltmem lazım.

[mhmtkrktr]

Aslanı iltifat olarak kabul ediyor sevincini paylaşıyorum. ;-) Teşekkür ederim.

Bunlar soru mu, yoksa sesli mi düşündün anlayamadım ama aşağıda gerekli işlemi paylaşayım.

Oldukça güzel görünüyor, şimdi asıl mevzu panelin çevresini solda planktki gibi siyah çizgi ile kaplamak.

Ayrıca panel fazla kalın görünüyor, az inceltmem lazım.

Kod Seç Genişlet

#panel {
    border-color: #XXXXXX;   /* hex veya rgba verilebilir. (hex için isteğe bağlı opacity değeri verilebilir.) */
    border-bottom-width: Xpx;
    border-left-width: Xpx;  /* border kalınlığı. */
    border-right-width: Xpx;
    height: X.Xem;    /* panel yüksekliği height değeri ile ( px , em, pt, % ) ayarlanabilir. */ }


Not 1: border tüm paneli saracaksa, tek satır yeterli. border: Xpx #xxxxxx;
Not 2: panel yüksekliği panel font ve simge büyüklüğü ile de bağlantılıdır. Gözardı etmemeni tavsiye ederim.

[Night Glam Flow]

[mention=631786]@mhmtkrktr[/mention]

Hocam borderları kendim çözdüm. Şu an burada yapamadığım şey;

Paneldeki simgele paneli tam ortalamıyor. Biraz yukarıda kalıyorlar.

padding kodu ile denedim beceremedim.

Kod Seç Genişlet

/* TOP BAR */
#panelBox{ padding: 5px 5px; }
#panel {
  background-color: #444;
  font-weight: normal;
  border-left: 2.5px;
  border-right: 2.5px;
  border-top: 2.5px;
  border-bottom: 2.5px;
  border-color: #272624;
  border-radius: 20px;
  height: 2.1em; }
  #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
    background-color: transparent; }
  #panel #panelLeft, #panel #panelCenter {
    spacing: 4px; }
  #panel .panel-corner {
    -panel-corner-radius: 0;
    -panel-corner-background-color: black;
    -panel-corner-border-width: 2px;
    -panel-corner-border-color: transparent; }
    #panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
      -panel-corner-border-color: #474747; }
    #panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
      -panel-corner-radius: 0;
      -panel-corner-background-color: transparent;
      -panel-corner-border-color: transparent; }
  #panel .panel-button {
    font-weight: bold;
    font-size: 18px;
    color: #792308;
    transition-duration: 100ms; }
    #panel .panel-button .app-menu-icon {
      -st-icon-style: symbolic;
      margin-left: 4px;
      margin-right: 4px; }
    #panel .panel-button:hover {
      color: #ddd; }
    #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
      background-color: rgba(0, 0, 0, 0.01);
      box-shadow: inset 0 -1px 0 #f0544c;
      color: #ddd; }
      #panel .panel-button:active > .system-status-icon, #panel .panel-button:overview > .system-status-icon, #panel .panel-button:focus > .system-status-icon, #panel .panel-button:checked > .system-status-icon {
        icon-shadow: black 0 2px 2px; }
    #panel .panel-button .system-status-icon {
      padding: 0 10px; }
    .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button {
      color: #ddd; }
      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active {
        color: #ddd; }
  #panel .panel-status-indicators-box,
  #panel .panel-status-menu-box {
    spacing: 2px; }
  #panel .power-status.panel-status-indicators-box {
    spacing: 0; }
  #panel .screencast-indicator {
    color: #f57900; }


[mhmtkrktr]

Sen bir yerlerde aksini belirtmemişsen, zaten ortalaması gerekiyor ama şu şekilde de yönlendirebilirsin.

Kod Seç Genişlet

  #panel .panel-button {
    margin-top: Xpx; }

Objeler üstte vereceğin değer kadar aşağıya çekilecektir.