2

I am trying to edit a theme to customize it to my liking. Mostly change colours. It has the following folders

GTK folders have gtk.css and gtk-dark.css. Which gtk.css should I edit for change to work with 18.04 ? What is the GTK related to 18.04 ? Is there any other file I would need to edit ? The theme is " Materia "

https://github.com/nana-4/materia-theme

Thanks

Update 1:

Not able to locate the CSS class to change the border-bottom colour

change header border-bottom

Update 2:

gtk.css in gtk 3.22 in plain Materia- Google Drive

https://drive.google.com/file/d/1ntA-mDEjFdyeT93Y62Lm9n-yPDi9qtLw/view?usp=sharing

Update 3 :

Looks like I got the code right, but border-bottom is still white :(

:not(headerbar) .caja-pathbar button, .caja-pathbar :not(headerbar) button, :not(headerbar)
.path-bar button {
  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #03a9f4 0%, transparent 0%) 0 0 0/0 0 0px;
  border-radius: 2px;
}

:not(headerbar) .caja-pathbar button:checked, .caja-pathbar :not(headerbar) button:checked, :not(headerbar)
.path-bar button:checked {
  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #03a9f4 100%, transparent 0%) 0 0 2/0 0 2px;
}
0
1

to make the required changes with the folder you have provided https://drive.google.com/file/d/1NgWdbxKmIbh38WJo9vFDI4wYEfXu1UTz/view?usp=sharing

navigate to .../gtk-3.22/gtk.css edit the file to add the below content at around line number 632

.path-bar.linked:not(.vertical) > button:checked {
  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #FF0000 100%, transparent 0%) 0 0 2/0 0 2px;
}

Change the color #FF0000 to your liking.

enter image description here


If you are not following Manual Installation Procedure:

then open the file gtk.css for the Materia Theme and add the below content at line number around 631

.path-bar.linked:not(.vertical) > button:checked {
  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #1A73E8 100%, transparent 0%) 0 0 2/0 0 2px;
}

enter image description here


https://github.com/nana-4/materia-theme#manual-installation

Manual Installation

Run the following commands in the terminal:

git clone --depth 1 https://github.com/nana-4/materia-theme
cd materia-theme
sudo ./install.sh

for Materia theme:

open the gtk.css file and look for below content at line number around 1566 Col 83

.caja-pathbar button:checked,
.path-bar.linked:not(.vertical) > button:checked {
  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #1A73E8 100%, transparent 0%) 0 0 2/0 0 2px;
}

Change the color #1A73E8 to your liking.

enter image description here


for example: If you take materia-compact theme, look for the below content in the gtk.css file.

.caja-pathbar button:checked,
.path-bar.linked:not(.vertical) > button:checked {
  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #00FF00 100%, transparent 0%) 0 0 2/0 0 2px;
}

enter image description here

enter image description here

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.