How to install themes in gnome-shell, (including two themes)

Sure, the story is in editing the css. I have tried tons of themes and none have satisfied my tastes and I have had to edit the css, and as I have. I imagine quite a few. In view of whether someone may need it, I am going to put a couple of interesting things:

The file that collects the design of a gnome-shell theme is called gnome-shell.css and can have different locations, usually it should be in:

/home/usuario/.themes/topic/gnome-shell/

But it can also be found in / usr / share / themes / Theme / gnome-shell / and in case of the default it should be in / usr / share / gnome-shell / themes /

Once seen you can edit and then check the changes with alt + f2 r

Some previous notes, css supports both hexadecimal and rgba colors, most likely we will find them in rgba (red, green, blue, transparency). In case they come in hexadecimal on the following page they can be converted to rgba:

http://hex2rgba.devoth.com/

Some interesting transformations. 

+ Rounded effect of the panel. (it's so that the panel doesn't look like a flat ribbon)

/ * Panel * /

#panel {
    border: 1px solid rgba (255,255,255,0.15);
border-top: 1px;
border-left: 0px;
border-right: 0px;
    border-radius: 0px;
    color: rgba (255,255,255,1.0);
    / * background-color: rgba (0,0,0,0.9); * / / * this is commented * /
    background-gradient-direction: vertical;
    background-gradient-start: rgba (88,88,88,0.90);
    background-gradient-end: rgba (1,1,1,0.85);

The last 4 lines are decisive, since the color to the panel is given through the background-color, in this case I comment on that element and added the following three lines of background-gradient- ... with the aim of starting with a color and finish with another one vertically, in this case it starts with a light color and ends with a dark color, and that way it has an effect as well as cylindrical.

Do not confuse background-color with color, the color element is the color that the extensions will take on the panel, in the previous example it will be a white color.

+ The windows list as it should be. 

Something that pisses me off about gnome-shell is the little attention paid to the windows list, since it makes everything very intuitive for someone who comes from another environment (either kde, windows, xfce, etc)

This point is a more complex tilin because there are several behaviors, for example when the window is focused, minimized or when the pointer is passed over it.

Here is an example for when the window is focused and that is the same behavior as when we click on an extension. In the end, the element that we will modify is the same for all extensions.

.panel-button: focus {
border: 1px solid rgba (206,207,201,0.85);
background-gradient-direction: vertical;
background-gradient-start: rgba (255,255,255,0.55);
background-gradient-end: rgba (200,200,200,0.40);
    color: white;
    text-shadow: black 0px 1px 1px;
}

The same is done as with the panel, in this case as I gave the panel a dark color, I tried to make the windows list a light color and with a gradient so that it also had a rounded effect. The border is also important, I gave it 1 pixel in width and color by shooting it to white so that its limits will be clearly visible in the dark panel. 

However, this part can become quite complex depending on how the gnome-shell.css theme code that we are modifying is written.

The other thing is that the windows list, being an extension, has its own css style sheet, so for the job to be really well done it is better to do it on top of it and thus avoid useless code. That stylesheet is inside the extension's directory:

/home/user/.local/share/gnome-shell/extensions/windowlist@o2net.cl

+ The size of the icons in the Activities (Applications)

Sometimes the size of the icons is very large and with such a large separation that there are hardly any rows of 4. Well that has a solution. We look for the App part.

/ * Apps * /

.icon-grid {
    spacing: 36px;
    -shell-grid-horizontal-item-size: 70px;
    -shell-grid-vertical-item-size: 70px;
}

.icon-grid .overview-icon {
    icon-size: 48px;

The first part refers to the space that the icon occupies together with the separating spaces, both vertically and horizontally. Ideally, they should take the default theme and look at the differences.

Then the other party determines the size in which the icons will be displayed. In this case 48px and not the 96px savage that comes by default.

I hope I didn't make any serious spelling mistakes as I wrote this on the fly. Greetings.