Cómo modificar las propiedades de estilo de los temas de carcasa de gnomo

Los temas de la cáscara de gnomo (GS) dependen en gran medida de CSS para diseñar varios elementos del caparazón. Un archivo CSS típico incluido en un tema GS puede tener miles de propiedades. Este artículo cubrirá algunos conceptos que puede usar para ajustar los temas de GS existentes creando un nuevo tema que herede los valores de los temas originales. Si está un poco familiarizado con cómo funciona CSS, puede aprovechar los ejemplos mencionados a continuación para cambiar casi cualquier aspecto de un tema de GS.

Habilitando temas personalizados de shell gnome

Ubuntu, junto con muchas otras distribuciones basadas en GNOME, no permite temas personalizados hechos por el usuario de forma predeterminada. Para cargar temas del usuario, una extensión GS y una utilidad de ajuste oculta es necesario instalar. Puede instalar la herramienta de ajuste de extensión y gnome requerida en Ubuntu ejecutando el siguiente comando:

$ sudo apt install gnome-shell-extensions gnome-tweaks

Inicie la aplicación "Tweaks" desde el lanzador de aplicaciones y vaya a la pestaña "Extensiones" en la barra lateral. Habilite la extensión "Temas del usuario", como se muestra en la captura de pantalla a continuación. Asegúrese de que la alternancia de "extensiones" esté habilitada en la parte superior.

Una vez que haya terminado con este paso, cierre y relance la aplicación Tweaks. Ahora, podrás cambiar el tema GS desde la pestaña "Apariencia".

Creación de los archivos necesarios para la personalización del tema

Para personalizar un tema existente, deberá crear un nuevo tema GS que se base en el tema original. De esta manera, puede cambiar solo partes seleccionadas del tema, sin cambiar el tema completo. Cualquier parte intacta del tema original se mantendrá como es. Ejecución de los comandos a continuación creará un nuevo tema personalizado llamado "Mytheme" en su directorio de $ Home.

$ mkdir -p ~/.temas/mito/gnome-shell/
$ touch ~/.temas/mito/gnome-shell/gnome-shell.CSS

Puede usar cualquier editor de texto para ingresar sus propias personalizaciones en el "gnome-shell.Archivo CSS "creado ejecutando el comando anterior. Una vez que haya ingresado el código requerido, puede seleccionar el tema "Mytheme" en el menú desplegable en la aplicación Tweaks, como se explica en la primera sección de este artículo. Tenga en cuenta que deberá iniciar sesión y volver a iniciar sesión para que los cambios entren en vigencia. Alternativamente, también puede presionar e ingresar "R" en el cuadro de entrada emergente para recargar la carcasa GNOME.

Encontrar el archivo Base CSS

Si desea usar el archivo CSS original como referencia, deberá encontrarlo y extraerlo primero. Los temas de terceros pueden incluir directamente una "gnome-shell.Archivo CSS ", lo que facilita el uso como base para la personalización de CSS. Sin embargo, los archivos del sistema predeterminados pueden incluir "gnome-shell-theme.archivos de GreSource "en su lugar. Puede encontrar el tema GS del sistema predeterminado ubicado en la ruta "/usr/share/gnome-shell/teme". Dentro de este directorio, encontrará el archivo GreSource en otra carpeta de la misma que el nombre del tema del sistema predeterminado. En la última versión de Ubuntu, encontrará el archivo de GroSource en la ruta “/usr/share/gnome-shell/theme/yaru”. Copie el archivo Gresource en otra carpeta y ejecute el siguiente comando:

$ GResource List Gnome-Shell-Theme.greeso

Después de ingresar el comando anterior, recibirá la siguiente salida:

/org/gnome/shell/theme/yaru-dark/gnome-shell-rie-rastast.CSS
/org/gnome/shell/thema/yaru-dark/gnome-shell.CSS
/org/gnome/shell/theme/yaru/gnome-shell-high-contrast.CSS
/org/gnome/shell/theme/yaru/gnome-shell.CSS
…
…
…

La cuarta línea en la salida anterior proporciona la ruta correcta al archivo CSS. Para extraerlo, ejecute un comando en el siguiente formato:

$ Gresource Extract gnome-shell-teme.Greesource/org/gnome/shell/theme/yaru/gnome-shell.CSS
> Salida.CSS

Ahora puede consultar la "salida.Archivo CSS "obtenido anteriormente y úselo como base para la personalización. Algunos ejemplos de personalización de CSS se mencionan a continuación. Estos ejemplos no cubren todos los casos de uso, pero le darán una idea básica sobre cómo proceder. Tenga en cuenta que no se dará ninguna explicación para las reglas CSS mencionadas a continuación, ya que están más allá del alcance de este artículo. Puede consultar la documentación de referencia de CSS desde W3Schools o Mozilla para obtener más información.

Cambiar las propiedades de la fuente del tema del sistema

El siguiente código cambiará las propiedades de fuente del tema del sistema predeterminado. El estilo de fuente se cambiará a Noto Sans y el tamaño de fuente se cambiará a 12 PT.

escenario
Font-Family: Noto Sans, Sans-Serif;
tamaño de fuente: 12pt;

Si está utilizando un tema GS de terceros, es posible que primero deba importar su archivo CSS especificando la ruta completa, como se muestra en el ejemplo a continuación:

@Import URL ("Path/to/Theme.CSS ");
escenario
Font-Family: Noto Sans, Sans-Serif;
tamaño de fuente: 12pt;

Si un archivo CSS no está disponible para importar, puede extraerlo del archivo Gresource, como se explicó anteriormente.

Cambiar el color de fondo del panel

Para cambiar el color de fondo del panel a rojo, use el siguiente código:

#Panel
Color de fondo: rojo;

Cambio de ancho del interruptor de palanca

Use el código a continuación para cambiar el ancho de los botones de alternar:

.interruptor de palanca
Ancho: 100px;

Conclusión

Con cierto conocimiento de las reglas y propiedades de CSS, puede personalizar fácilmente casi todos los aspectos de un tema GS. Sin embargo, es importante localizar el archivo CSS base correcto para usarlo como referencia y evitar muchas conjeturas.