Gnome Shell Theme anpassen

Dank der Verwendung der css Sprache zur Gestaltung der Theme des Desktops sind Anpassungen leicht möglich.

Als erstes möchte ich das Panel durchsichtig haben:

Das Standardtheme wird durch die Datei gnome-shell.css beschrieben und liegt im Pfad “/usr/share/gnome-shell/theme/. Diese ändern wir nun. Im Bereich Panel ändern werden die Boxeigenschaften geändert von:

/* Panel */
#panel {
   background-color: black;
   font-weight: bold;
   height: 1.86em;
}

nach:

/* Panel */
#panel {
    color: #ffffff;
    font-weight: bold;
    height: 1.86em;
    background-color: rgba(0,0,0,0.20); 
}

Dann setze ich die kleine Rundung links oben auf den Radius 0 im Bereich:

.panel-corner {
    -panel-corner-radius: 0px;
    -panel-corner-background-color: black;
    -panel-corner-border-width: 2px;
    -panel-corner-border-color: transparent;
}

Alternativ könnte man auch die obigen Farbparameter verwenden.

.panel-corner {
    -panel-corner-radius: 6px;
    -background-color: rgba(0,0,0,0.20);
}

Als zweites möchte ich noch die Iconen Größe im Anwendungs Übersichtsmodus ändern.

Dazu suche ich in der selben Datei den Abschnitt:

/* Application Launchers and Grid */
.icon-grid {
    spacing: 36px;
    -shell-grid-horizontal-item-size: 118px;
    -shell-grid-vertical-item-size: 118px;
}
.icon-grid .overview-icon {
    icon-size: 96px;
}

Dort verkleiner ich die Iconen Größe von 96 auf 82. Den Abstand könnte man mit dem Paramter spacing beeinflussen – mache ich nicht.

Als drittes ändere ich noch die Farbe der Popup Menüs, das Logout Menüs und die ALT+F2 Dialogboxaus dem Panel. Ich suche:

/* PopupMenu */
.popup-menu-boxpointer {
    -arrow-border-radius: 8px;
    -arrow-background-color: black;
    -arrow-border-width: 2px;
    -arrow-border-color: #a5a5a5;
    -arrow-base: 24px;
    -arrow-rise: 11px;
}

Dann füge ich nach “-arrow-background-color:..” die Zeile ein:

-arrow-background-color: rgba(0,0,0,0.80);

Für das LogOut Menü suche ich den Bereich /* End Session Dialog */ und setzte dort ebenfalls die Zeile:

background-color: rgba(0,0,0,0.80);

zusätzlich ein. Fertig sieht dieser Bereich dann so aus:

/* End Session Dialog */
.end-session-dialog {
    spacing: 42px;
    background-color: rgba(0,0,0,0.80); /*neu*/
   }

Ebenso im Run Menü. Das sieht dann so aus:

.run-dialog {
    border-radius: 16px;
    background-color: rgba(0,0,0,0.80);  /*neu*/
    padding-right: 21px;
    padding-left: 21px;
    padding-bottom: 15px;
    padding-top: 15px;
}

Fertig!

Wenn alles fertig ist ALT+F2 drücken, rt eingeben und Enter. Die Shell neu gestartet. Nun sollte alles funktionieren.

Beim nöchsten Gnome Update ist allerdings alles wieder weg! UND sollte ich einen Fehler machen startet die Shell nicht mehr. Deshalb ist es besser ein Verzeichnis im Homeverzeichnis anzulegen /home/.themes/mytheme/gnome-schell/ und alle Dateien VOR deren Änderung aus dem Verzeichnis /usr/share/gnome-shell/theme/ in dieses neue Verzeichnis zu speichern.

Nun “gnome-tweak-tools” und die “user-theme-extension” installieren und aktivieren. Dann kann man dort das neue User Theme “mytheme” auswählen und aktivieren.

Die Änderung der Theme erfolgt wir oben beschrieben aber eben in diesem Verzeichnis. Dann startet die Gnome Shell auch nach einem Fehler noch im Standardtheme und bei Gnome Shell Updates wird dein Theme nicht überschrieben.

Folgende Lesezeichen sind noch interessant:

  • .popup-menu-boxpointer (Hintergrundfarbe der Popupmenüs)
  • .popup-combo-content (Hintergrundfarbe)
  • #panel (Hintergrundfarbe Panelleiste oben)
  • .panel-corner (die runden Ecken von der Panlleiste)
  • /*Overview*/ .workspace-thumbnails-background (Hintergrund der dynamischen Arbeitsflächen)
  • /*Overview*/ #overview regelt die Fläche nach drücken der Super Taste, um einen hellen Fläche zu bekommen könnte man einfügen: background-color: rgba(128,128,128,0.2);
  • /*Dash*/ #dash (linkes Menü z.B.: Hintergundfarbe durchsichtig und Rahmen dazu)
  • .workspace-swichtcher… (Design von STRG+ALT+UP/DOWN)
  • .icon-grid (Absatnd der Anwendungsiconen im Übersichtsmodus)
  • .icon-grid .overview-icon (Größe der Anwendungsiconen im Übersichtsmodus)
  • .popup-menu-content (Hintergrundfarbe)
  • .switch-list (ALT+TAB Funktion)
  • .run-dialog (ALT+F2 Dialog)
  • .end-session-dialog (Design des Beenden Dialoges)
  • unter /*Message Tray*/ .notification ist der untere Notizendialog designt

Navigation mit include() einbinden

Zur Einbindung einer Navigation in eine HTML Seite benötigt kann man den Befehl include() verwwenden. Voraussetzung ist, dass php auf dem Server läuft.

Der Vorteil – man erstellt nur einmal eine Navigationsdatei und kann diese in viele Seiten einbinden. Ändert sich das Menü, ist nur die Änderung einer Datei – nähmlich der ausgelagerten Navigationsdatei notwendig.

Im ersten Schritt erstellen wir die Navigationsdatei z.B.: mit dem Namen navigation.inc. Dabei ist jeder Namen und auch jede Änderung zulässig. Von den Endungen html und php rate ich aus Sicherheitsgründen ab. Jede Datei, in der die Navigation über den include Befehl eingebunden werden soll, muß die Dateiendung php haben! (eben nicht html)

Inhalt der Datei navigation.inc

<ul>
<li><a href=" http://www.beispiel.de">Home</a></li>
<li><a href="http://www.beispiel.de/tolleseite.php">Tolle Seite</a></li>
<li><a href="http://www.beispiel.de/urlaub/bilder.php"></a>Urlaubsbilder</li>
<li><a href="http://www.beispiel.de/impressum.php"></a>Impressum</li>
</ul>

Der zweite Schritt: In den Seiten, in denen ihr die Navigation einbauen wollt, braucht ihr dann nur noch die include-Funktion aufrufen:

Datei tolleseite.php

..
<?php include ("navigation.inc"); ?>
...

Änderungen der Navigation brauchen ab sofort nur noch in der navigation.inc erfolgen, damit sie auf allen Seiten erscheinen.

Seiten mit include() einbinden

Möchte man auf einer Indexseite index.php eine Navigation einbauen, welche dynamisch nur die Inhalte in diese Seite einträgt, kann man diese mit dem Befehl include() erledigen. Alternativ könnt man auch nur die Navigation in die einzelnen Seiten einbinden. Dann muß trotzdem jede Inhaltsseite einen Kopfbereich haben – eben den vollen Inhalt einer HTML Seite (nur die Navigation wird ergänzt).

Ich finde es schöner, wenn man eine index.php hat und dazu dann der Text des Inhaltes geladen wird. Das erspart Schreibaufwand, da nur der Inhalt in einer Textdatei ausgelagert werden muß – also keine Meta Daten, CSS Verweise,… Nachteilig ist allerdings, dass es dann nur den einen Medatdatensatz der index.php mit den Suchinformationen für die Crowler gibt.

Los gehts:

Wir erstellen die Datei index.php mit der Navigation und Fragen anschließend die Aktion. Die Variable $page erhält dann den Wert der Abfrage aus dem aktivierten Link.

Anschließend erfolgt eine Wenn – Dann Abfrage über den Befehl case. Falls der Fall zutrifft wird die entsprechende Seite aus dem Unterverzeichnis inc/ geladen. Der Break Befehl setzt nach dem Laden der Seite einen Stop. Sonst würde die Abfrage weiter laufen.

Der Befehl default: include (’inc/startseite.php’); break; legt die Startseite fest.

..
</head>
<body>
<div class="wrapper">
<div id="nav">
<ul>
                <li><a href="?action=startseite">Start</a></li>
         <li><a href="?action=grafiken">Grafiken</a></li>
<li><a href="?action=fotos">Fotos</a></li>
        <li><a href="?action=uebermich">Über mich</a></li>
</ul>
</div>

<div class="content">
                <?php $page = $_GET["action"] ?>
                    <?php
                       switch($page) {
                           default: include ('inc/startseite.inc'); break;
                              case 'startseite': include('inc/startseite.inc'); break;
                              case 'grafiken': include ('inc/grafik.inc'); break;
                              case "fotos": include ("inc/fotos.inc"); break;
                              case "uebermich": include ("inc/mich.inc."); break;
                         }?>
</div>

Der Inhalt einer Datei mich.inc könnte dann einfach so aussehen:

<h1>Über mich</h1>
Das iste eine Testseite über mich.

Mehr muß dann dort nicht stehen. CSS Verweise, Metadaten,… werden aus der index.php genutzt.

Fertig!

Seiten mit include() einbinden

Möchte man auf einer Indexseite index.php eine Navigation einbauen, welche dynamisch nur die Inhalte in diese Seite einträgt, kann man diese mit dem Befehl include() erledigen. Alternativ könnt man auch nur die Navigation in die einzelnen Seiten einbinden. Dann muß trotzdem jede Inhaltsseite einen Kopfbereich haben – eben den vollen Inhalt einer HTML Seite (nur die Navigation wird ergänzt).

Ich finde es schöner, wenn man eine index.php hat und dazu dann der Text des Inhaltes geladen wird. Das erspart Schreibaufwand, da nur der Inhalt in einer Textdatei ausgelagert werden muß – also keine Meta Daten, CSS Verweise,… Nachteilig ist allerdings, dass es dann nur den einen Medatdatensatz der index.php mit den Suchinformationen für die Crowler gibt.

Los gehts:

Wir erstellen die Datei index.php mit der Navigation und Fragen anschließend die Aktion. Die Variable $page erhält dann den Wert der Abfrage aus dem aktivierten Link.

Anschließend erfolgt eine Wenn – Dann Abfrage über den Befehl case. Falls der Fall zutrifft wird die entsprechende Seite aus dem Unterverzeichnis inc/ geladen. Der Break Befehl setzt nach dem Laden der Seite einen Stop. Sonst würde die Abfrage weiter laufen.

Der Befehl default: include (’inc/startseite.php’); break; legt die Startseite fest.

..
</head>
<body>
<div class="wrapper">
<div id="nav">
<ul>
                <li><a href="?action=startseite">Start</a></li>
         <li><a href="?action=grafiken">Grafiken</a></li>
<li><a href="?action=fotos">Fotos</a></li>
        <li><a href="?action=uebermich">Über mich</a></li>
</ul>
</div>

<div class="content">
                <?php $page = $_GET["action"] ?>
                    <?php
                       switch($page) {
                           default: include ('inc/startseite.inc'); break;
                              case 'startseite': include('inc/startseite.inc'); break;
                              case 'grafiken': include ('inc/grafik.inc'); break;
                              case "fotos": include ("inc/fotos.inc"); break;
                              case "uebermich": include ("inc/mich.inc."); break;
                         }?>
</div>

Der Inhalt einer Datei mich.inc könnte dann einfach so aussehen:

<h1>Über mich</h1>
Das iste eine Testseite über mich.

Mehr muß dann dort nicht stehen. CSS Verweise, Metadaten,… werden aus der index.php genutzt.

Fertig!

Einnahme/ Überschußrechnung mit Linux

Auf der Seite von Uwe Mock (http://www.jes-eur.de) findet Ihr ein Java lauffähiges Programm mit dem Namen „JES-die Java EÜR“. Es ist damit für alle Betriebssysteme geeignet. Er stellt sogar ein deb und rpm Repository zur Verfügung. Das Programm ist kostenlos – der Entwickler freut sich aber über jeden realisierten Wunsch seiner öffentlichen Amazon Wunschliste.