Cómo instalar temas en gnome-shell, (incluidos dos temas)

En el siguiente artículo, les voy a enseñar, ayudado por un vídeo, a cómo instalar temas en gnome-shell.

En este ejercicio práctico se incluyen dos temas completos preparados para instalar en gnome-shell a través de gnome-tweak-tools, así como unos cuantos wallpapers en calidad HD.

Para instalar de manera correcta los dos temas adjuntos y no desesperar en el intento, tan solo deberemos seguir las explicaciones del vídeo de la cabecera.

Los temas aquí utilizados para el ejercicio, son temas sacados de la web de devianart, tan solo los he arreglado para que gnome-shell los reconozca y puedan ser aplicados a través de gnome-tweak-tools.

Para poder seguir el ejercicio nos deberemos bajar el paquete zip desde el siguiente enlace, luego descomprimirlo en cualquier lugar de nuestro sistema y seguir las instrucciones del vídeo.

Tema Elegant-Red en gnome-shell

La carpeta resultante de la descompresión del zip, contendrá tres carpetas o directorios, Elegant-Red, SLAVE y Wallpapers.

Las dos primeras son las que contienen los temas para gnome-shell y deberán ser copiadas a la ruta usr/share/themes, esto lo haremos desde el nautilus pero con permisos de superusuario, para ello abriremos una terminal y teclearemos:

sudo nautilus

Se nos abrirá el explorador nautilus pero con permisos root, de esa manera podremos copiar los dos archivos al citado directorio de sistema, después será tan facil como instalarlos desde el gnome-tweak-tools.

A continuación os adjunto algunas capturas de ambos temas

Elegant Red

Theme Elegant-Red para gnome-shell

SLAVE

Tema SLAVE para gnome-shell

Más información – Cómo controlar y modificar aspectos en gnome-shell

Descarga – Temas gnome-shell



Francisco Ruiz

Natural de Barcelona, España, nací en 1971 y soy un apasionado de la informática y de los dispositivos móviles en general. Mis sistemas operativos favoritos son Android para los dispositivos móviles y Linux para los ordenadores portátiles y de sobremesa, aunque me defiendo bastante bien en Mac, Windows e iOS. Todo lo que se acerca de estos sistemas operativos lo he aprendido de manera autodidacta, ya que como he dicho antes soy un verdadero adicto a estos temas. Mis dos mayores pasiones son mi hijo pequeño de dos años y mi mujer, son sin duda las dos personas más importantes de mi vida.

7 comentarios

  1.   Bloodymary dijo

     Deberías publicar una entrada sobre cómo modificar gnome-shell.css para modificar el “horroroso” panel.  Sería muy didáctico

  2.   kfree dijo

    Claro, la historia está en editar el css. Yo he probado montones de temas y ninguno ha satisfecho mis gustos y me ha tocado el editar el css, y como yo. me imagino que unos cuantos. En vistas de que alguien lo pueda necesitar voy poner un par de cosillas interesantes:

    El archivo que recoge el diseño de un tema de gnome-shell se llama gnome-shell.css y puede tener diferentes ubicaciones, por lo general debería estar en:

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

    Pero también se puede encontrar en /usr/share/themes/Tema/gnome-shell/ y en caso del predeterminado debería estar en /usr/share/gnome-shell/themes/

    Una vez visto se puede editar y luego comprobar los cambios con alt+f2  r

    Algunos apuntes previos, css admite tanto los colores en hexadecimal como rgba, lo más probable es que los encontremos en rgba (red, green, blue, transparencia). En caso que vengan en hexadecimal en la siguiente página se pueden convertir a rgba:

    http://hex2rgba.devoth.com/

    Algunas transformaciones interesantes. 

    +Efecto redondeado del panel. (es para que el panel no parezca una cinta plana)

    /* 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);*/ /*esto está comentado*/
        background-gradient-direction: vertical;
        background-gradient-start: rgba(88,88,88,0.90);
        background-gradient-end: rgba(1,1,1,0.85);

    Las últimas 4 lineas son determinantes, ya que el color al panel se le da mediante el background-color, en este caso yo comente ese elemento y añadí las siguientes tres lineas de  background-gradient-… con el objetivo de que comience con un color y termine con otro en vertical, en este caso comienza con un color claro y termina con un color oscuro, y de esa forma tiene un efecto así como cilíndrico.

    No confundir background-color con color, el elemento color es el color que cogerán las extensiones en el panel, en el ejemplo anterior será un color blanco.

    +El windows list como tiene que ser. 

    Algo que me mosquea de gnome-shell es la poca atención que se le presta al windows list, ya que hace todo muy intuitivo para alguien que venga de otro entorno (ya sea kde, windows, xfce, etc)

    Este punto es un tilin más complejo porque hay varios comportamientos, por ejemplo, cuando la ventana está focalizada, minimizada o cuando se le pasa el puntero por encima.

    A continuación pongo un ejemplo para cuando la ventana está focalizada y que es el mismo comportamiento que cuando hacemos clic en una extensión. Al final el elemento que modificaremos es el mismo para todas las extensiones.

    .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;
    }

    Se hace lo mismo que con el panel, en este caso como el panel le di un color oscuro, al windows list intenté que tuviese un color claro y con gradiente para que también tuviese un efecto redondeado. Es importante tambien el borde, le  dí 1 pixel de ancho y color tirando a blanco para que se notara bien sus limites en el panel oscuro. 

    No obstante, esta parte puede llegar a ser bastante compleja según como este escrito el código del tema de gnome-shell.css que estemos modificando.

    Lo otro es que el windows list al ser una extensión tiene su propia hoja de estilos css, con lo cual para que el trabajo realmente esté bien hecho es mejor hacerlo encima de ella y así evitar código inútil. Esa hoja de estilos se encuentra dentro del directorio de la extensión:

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

    + El tamaño de los iconos en el Actividades (Aplicaciones)

    A veces el tamaño de los iconos es muy grande y con una separación tan grande que apenas caben filas de 4. Pues eso tiene solución. Buscamos la parte de App.

    /* Apps */

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

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

    La parte primera se refiere al espacio que ocupa el icono junto con los espacios de separación, tanto en vertical como horizontal. Lo ideal es que cogieran el tema predeterminado y y os fijéis en las diferencias.

    Luego, la otra parte determina el tamaño en que se visualizarán los iconos. En este caso 48px y no la salvajada de 96px que viene el predeterminado.

    Espero no haber cometido ningún error de ortografía grave ya que esto lo escribí sobre la marcha. Saludos. 

    1.    Bloodymary dijo

       Fantástico

    2.    Francisco Ruiz dijo

      Muy buena info.
      Muchas gracias amigo.

  3.   kfree dijo

    Gracias por los agradecimientos, quisiera tener pronto un tema que estoy preparando, en caso que algún día lo termine os lo enviaré al blog. Aunque creo que me llevará algo de tiempo y espero que cuando lo tenga no venga gnome 3.6 y me lo tire por la borda. Saludos. 

    1.    Francisco Ruiz dijo

      Estamos impacientes esperando tu trabajo.
      Gracias

  4.   Rulez dijo

    Tengo un problema, al intenat abrir nautilus me da este error:
    ” Initializing nautilus-gdu extension
    Nautilus-Share-Message: Called “net usershare info” but it failed: La «red compartida» devolvió el error 255: net usershare: cannot open usershare directory “

Escribe un comentario