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

Başlatan Night Glam Flow, 09 Ekim 2017 - 18:35:41

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

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.
#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.
#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.

#!/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.
Alıntı YapOldukç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.

#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.



/* 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.

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


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