Personalizar el aspecto de la barra de pestañas en Konsole

Vamos a personalizar la barra de pestañas del emulador de teminal Konsole del proyecto KDE para diferenciar la pestaña activa de las otras

Desde hace mucho tiempo Konsole de KDE es el emulador de terminal predeterminado en mi equipo que utilizo a diario.

Es rápido, tiene previsualización de imágenes, posibilidad de dividir la pantalla en vertical y horizontal, uso de pestañas, y un montón de cosas buenas más. Una gran herramienta de KDE para trabajar en la terminal.

Una cosa que no me terminaba de gustar, es que al trabajar con muchas pestañas, no se diferenciaba muy claramente qué pestaña era la activa de todas, ya que el color de la activa y de las no activas era muy similar.

En este tutorial veremos cómo poder solucionar ese pequeño contratiempo y hacer más cómodo el uso de esta gran herramienta.

Tal como nos dice la documentación de Konsole, este permite el uso de hojas de estilo personalizadas para configurar el aspecto de la barra de pestañas, con un archivo .css.

Así que voy a crear un archivo llamado style_konsole.css que voy a ubicar en la ruta ~/.config En tu caso le puedes llamar con otro nombre y ubicarlo en la carpeta que te apetezca.

cd ~/.config
touch style_konsole.css

Ahora abrimos el archivo con el editor que prefiramos y configuramos el color de fondo de la pestaña, y el color del texto de la siguiente manera (violeta y blanco en mi caso):

QTabBar::tab::selected {
    background: #2b0055;
    color: white;
}

Guardamos el archivo. Y ahora abrimos Konsole y pulsamos el atajo de teclado Ctrl+Shift+,

Se nos abrirá la ventana de configuración de Konsole, y nos dirigimos al apartado Barra de pestañas/separadores y en la sección de Aspecto en la sección Otros marcamos la opción Usar hoja de estilos de usuario.

Y en la caja inferior escribimos la ruta completa de la ubicación de nuestro archivo .css recién creado. En mi cado sería ~/.config/style_konsole.css

Aplicamos los cambios y ya deberían verse en nuestro Konsole un aspecto distinto en la barra de pestañas. Puedes abrir varias para ver cómo queda este cambio y comprobar que ahora sí se distinguen perfectamente la pestaña actual de las otras.

También podemos especificar otros colores e incluso el tamaño mínimo de las pestañas y el tamaño de la pestaña seleccionada. Por ejemplo, vamos a establecer un tamaño mínimo de 100 píxeles en las pestañas y la pestaña seleccionada de color gris para el fondo, color rojo para el texto y un tamaño de 200 píxeles.

Nuestro archivo .css tendría este código:

QTabBar::tab::selected {
    background: #999999;
    color: red;
    min-width: 200px;
}
QTabBar::tab {
    min-width: 100px
}

Cabe destacar, que una vez que hemos establecido un archivo .css, si hacemos cambios sobre él para configurar otros colores o lo que sea, deberemos cerrar Konsole por completo y volverlo a abrir para que se recargue el archivo y podamos ver los cambios efectuados.

Si también utilizas Konsole, espero que este pequeño y sencillo tutorial te haya servido. Comenta si lo pusiste en práctica.

¿Configuras de alguna manera más el archivo .css? Compártelo en los comentarios del blog

8 comentarios sobre “Personalizar el aspecto de la barra de pestañas en Konsole

  1. Seguro que es muy interesante el artículo.

    Pero tras comprobar que la pestaña activa se ve apretada, no he tocado ningún archivo .css.

    Lo que sí me ha servido de tu artículo es que desconocía lo de la previsualización. He mirado en las opciones, las he activado y he alucinado al ver que con un Ctrl (la tecla que he elegido) y pasando el ratón puedo ver una imagen previa de archivos gráficos o hacer click en otros para abrirlos con la aplicación asociada.

    Saludos

      1. Una imagen vale más que 1.000 palabras (o eso dicen).

        Mira como la pestaña central es la activa. Se nota apretada y además tiene una raya azul en la parte inferior. Y no es por fish. Es del propio Plasma.

        Saludos

      2. Cierto, aunque sigo sin entender lo de apretada!! 🙂
        Pero la raya inferior sí la diferencia bien… a mí eso no me pasaba y no se distinguía muy bien. Supongo que por cosa del tema de Plasma…
        Saludos!! 😉

      3. Con pestaña apretada quería decir pulsada (al final significan lo mismo). Es un efecto bastante chulo.

      4. Ah! vale, entendí… si no fuera por la barra inferior, no quedaría muy claro cual es la pestaña activa… 🙂
        Saludos!

  2. La raya azul la puedes quitar con border-bottom
    QTabBar::tab::selected {
    background: #999999;
    color: red;
    min-width: 200px;
    border-bottom: 0px;
    y no se ve tan apretada con la opción de ajustar la anchura de las pestañas a la ventana completa.
    Saludos.

Responder a krovikan74 Cancelar la respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.