Skip to content
This repository has been archived by the owner on Jul 26, 2018. It is now read-only.

Latest commit

 

History

History
124 lines (87 loc) · 5.96 KB

CONTRIBUTING.md

File metadata and controls

124 lines (87 loc) · 5.96 KB
Raw

Contributing to Communitheme

Communitheme consists of three parts. Each part is located in a different repository but the instructions in this file cover all the repositories.

  • gnome-shell-communitheme is the theme for the gnome shell. This themes stuff like the calendar widget, the Ubuntu dock, the top panel, the login screen and more.
  • gtk-communitheme themes gtk+2 and gtk+3. This specifies how applications like Files, Terminal, Ubuntu Software look.
  • suru-icon-theme contains all the icons.

Build and install themes from source

This installation method is to try out the theme while developing it. If you're not a developer, use the daily build ppa as specified in the README.md.

Gnome Shell theme

# Download the repository from github
git clone https://github.com/ubuntu/gnome-shell-communitheme.git
cd gnome-shell-communitheme
# Initialize build system (only required once per repo)
meson build --prefix=/usr
cd build
# Build and install
sudo ninja install

If you want to change the GDM look and point to the same stylesheet. You only need to do this once.

update-alternatives --install /usr/share/gnome-shell/theme/gdm3.css gdm3.css /usr/share/gnome-shell/theme/communitheme/gnome-shell.css 15

GTK theme

# Download the repository from github
git clone https://github.com/ubuntu/gtk-communitheme.git
# Enter the directory you just cloned
cd gtk-communitheme
# Initialize build system (only required once per repo)
meson build --prefix=/usr
cd build
# Build and install
sudo ninja install

Suru Icon theme

# Download the repository from github
git clone https://github.com/ubuntu/suru-icon-theme.git
# Enter the directory you just cloned
cd suru-icon-theme
# Initialize build system (only required once per repo)
meson build --prefix=/usr
cd build
# Build and install
sudo ninja install

Now everything should be in place. Reboot and login to the Communitheme on Xorg session and set the Communitheme themes using Gnome Tweaks.

The GTK2 and GTK3 files go into /usr/share/themes/Communitheme. The shell files go into /usr/share/gnome-shell/theme/communitheme. You can edit the gtk.css and gnome-shell.css files in those folders directly for testing, or you can edit the SCSS files inside the folder you cloned from GitHub.

SCSS is the actual "source code" of the theme. This is compiled into the CSS files. Edit the SCSS if you want to contribute your changes back to us. SCSS is simple enough to get the hang of if you already know CSS. You can go through this SCSS tutorial to learn more. After making your edits in the SCSS files, you can run sudo ninja install in the gnome-shell-communitheme/build folder for the Shell or the gtk-communitheme/build folder for GTK3/GTK2. That’ll do all the compiling and installing.

Changes to Gnome Shell theme are visible after doing Alt + F2 and running r as command. The changes to GTK theme will be visible after running the following commands.

# To reload GTK theme
# Change to Adwaita theme and back to Communitheme
gsettings set org.gnome.desktop.interface gtk-theme Adwaita
gsettings set org.gnome.desktop.interface gtk-theme Communitheme
# To reload icon theme
# Change to Humanity icon theme and back to Suru
gsettings set org.gnome.desktop.interface icon-theme Humanity
gsettings set org.gnome.desktop.interface icon-theme Suru

Quick testing in the GTK Inspector

To do some quick testing you can also use the GTK Inspector.

# Install inspector
sudo apt install libgtk-3-dev
# Enable the shortcut to open it
gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true

Now you can open any program GTK3 program and press CTRL + Shift + D to bring up the inspector.

The most useful program to use with the inspector is the widget factory though. Which shows you basically every widget. Run sudo apt install gtk-3-examples, then run gtk3-widget-factory That will open the widget factory, then you can open the inspector with CTRL + Shift + D again.

Click the upper-left target button to select an object.

Select something like a button and you’ll see the following.

We don’t really care too much about that stuff so just click the dropdown button with “Miscellaneous” and select CSS nodes. Which shows you:

The element you selected will be highlighted within a list of all elements in the window. In the left pane you can see the name of the widget you clicked on (button) and its different CSS classes (.text-button .toggle). The right pane shows all the element’s CSS properties and values and where to find it in the gtk.css file. You can see all supported CSS properties in the inspector, but for something more detailed look at the Gnome CSS Properties reference.

Clicking the CSS tab will take you to a text entry window where you can type in CSS that will be applied.

Putting button { background-color: red; } will make all buttons have a red background. It’s exactly like the inspect element tool in a web browser.

Why do we import from package content and not from upstream git repository?

We sync our version to be compatible with the GTK and GNOME Shell versions being in ubuntu repositories. This is why we sync from them (or rebase them as soon as we update a new version with changes in ubuntu).

GTK: What is removed from the initial directory?

We remove on new version import:

  • *.in, Makefile.*, meson.build: we have our own build system.
  • adwaita_engine.c: we use the default adwaita engine
  • *.css: we build these from the *.cscc sources