thefrayedend
Posts: 1
Joined: Tue Apr 26, 2016 4:11 am

How to theme Budgie

Tue Apr 26, 2016 4:32 am

First let me state that I am not an expert in Budgie, GTK3, or CSS. Everything in this guide has been figured out from trial and error, looking at other themes (specifically Vertex), and looking at the source code. I can not guarantee this will work with anything outside of openSUSE 42.1, and even then it might not be the proper way to do things, it just happens to work for me. I am creating this guide because of the lack of good GTK themes for Budgie, and in hopes that others will share what they know so I might learn more also.

Everything in this guide is added to a newly created file called "budgie.css" and linked to an existing GTK3 theme. You can call the file anything you want. You link "budgie.css" to a theme by using the following:

Code: Select all

@import url("budgie-panel.css");
The above line should be added to the end of "gtk.css" or more generally "gtk-main.css", odds are you will see many other links at the end of one of these two files.


If you want to theme the menu you can use the following code:

Code: Select all

.budgie-menu CategoryButton {
	color: #fff; /* text color */
}
.budgie-menu CategoryButton:hover,
.budgie-menu CategoryButton:selected {
	color: @theme_text_color; /* selected text color */
}
.budgie-menu BudgieMenuWindow {
	background-color: alpha(#2763E5, 1.0); /* background color */
}
The above will only set the catagory color, I would like to learn how to theme the catagory buttons better, but nothing I have tried works.


If you want to theme the panel you can use the following code:

Code: Select all

.budgie-panel {
  
	color: #F3F3F5;
  	text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
  	box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
  	background-color: transparent;
  	background-image: linear-gradient(to bottom, rgba(66, 131, 177, 0.6), rgba(108, 167, 201, 0.6)); } /* panel color and opacity */
The above makes the panel colored and simi transparent similar to Windows 7/8.

This panel code will use an image instead of a RGB color to theme the panel:

Code: Select all

.budgie-panel {
  
	color: #F3F3F5;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
	background-color: transparent;
	background-image: url('assets/panel.png'); }

The following will theme the tasklist, it does not work on the icon tasklist:

Code: Select all

#tasklist-button,
#tasklist-button:backdrop {
  color: #000000; /*open app text color */
  outline-color: rgba(243, 243, 245, 0.3);
  background-image: linear-gradient(to bottom, #D4D0C8, #D4D0C8); /*open app background color */
  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
  -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.7); }
  #tasklist-button:hover,
  #tasklist-button:backdrop:hover {
    color: #000000; /* mouse over text color */
    outline-color: rgba(243, 243, 245, 0.3);
    background-image: linear-gradient(to bottom, #b2b2b2, #b2b2b2); /* mouse over color */
    text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
    -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.7); }
  #tasklist-button:active, #tasklist-button:active:hover, #tasklist-button:checked, #tasklist-button:checked:hover,
  #tasklist-button:backdrop:active,
  #tasklist-button:backdrop:active:hover,
  #tasklist-button:backdrop:checked,
  #tasklist-button:backdrop:checked:hover {
    color: #000000; /* selected app text color */
    outline-color: rgba(255, 255, 255, 0.3);
    background-image: linear-gradient(to bottom, #e9e7e3, #e9e7e3); /* selected app background color */
    text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
    -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    border-image: none;
    border-width: 3px;
    border-radius: 5.5px;
    -gtk-icon-shadow: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 1px 0 rgba(0, 0, 0, 0.6), inset -1px 0 rgba(0, 0, 0, 0.6), inset 0 1px rgba(0, 0, 0, 0.9), inset 0 -1px rgba(0, 0, 0, 0.55); }

#tasklist-button,
#tasklist-button:backdrop, #tasklist-button:hover,
#tasklist-button:backdrop:hover {
  border-image: none;
  border-width: 3px;
  border-radius: 5px;
  -gtk-icon-shadow: none;
  box-shadow: inset -2px 0 rgba(255, 255, 255, 0.05), inset 2px 0 rgba(255, 255, 255, 0.05), inset 0 2px rgba(255, 255, 255, 0.12), inset 0 1px rgba(0, 0, 0, 0.6), inset 0 -1px rgba(0, 0, 0, 0.8), inset 1px 0 rgba(0, 0, 0, 0.6), inset -1px 0 rgba(0, 0, 0, 0.6); }

As I have said GTK3 and Budgie are new to me, I ditched LXDE recently in favor of Budgie so I am learning as I go. I will update this guide as I learn more. If anyone else has any useful knoledge please write it below and I will add it to the guide!


The following is a list of icons for Budgie, these icons should be placed in the icon theme folder of the icon theme you are using:
places/start-here-symbolic.png <- this is the Budgie menu button
places/user-desktop.png <-- this is the show desktop button
actions/system-shutdown-symbolic.png <--this is the power button on the panel

User avatar
amrock
Posts: 52
Joined: Mon Jan 25, 2016 2:06 am

Re: How to theme Budgie

Tue Jan 16, 2018 6:44 am

anymore tips or things you have learned?

User avatar
kyrios
Posts: 2052
Joined: Thu Sep 22, 2016 4:20 pm

Re: How to theme Budgie

Tue Jan 16, 2018 9:17 am

Is this what you are looking for ?

User avatar
amrock
Posts: 52
Joined: Mon Jan 25, 2016 2:06 am

Re: How to theme Budgie

Tue Jan 16, 2018 10:23 am

kyrios wrote:
Tue Jan 16, 2018 9:17 am
Is this what you are looking for ?
nope...it is the website styling
I want to know how to change the main menu properties/apprearence

User avatar
kyrios
Posts: 2052
Joined: Thu Sep 22, 2016 4:20 pm

Re: How to theme Budgie

Tue Jan 16, 2018 11:01 am

oops my bad... I should read before posting :P
shame on me!

Return to “Tutorials”