Este pretende ser un artículo corto que sirva como extensión de este otro. En aquel momento explicamos cómo hacer modificaciones temporales a Vivaldi, para lo que es necesario conocer al menos los selectores y algunas reglas CSS. Lo que se va a explicar aquí es cómo hacerlos permanentes para que se mantengan tras cerrar y volver a abrir el navegador. En teoría, los cambios que hagamos serán seguros, y se mantendrán incluso entre actualizaciones.

Hay algo de información en este hilo del blog de Vivaldi, que tiene ya seis años. Allí se explica que para hacer los cambios permanentes hay que activar una opción experimental, y sigue estando con esa etiqueta en la actualidad. Una vez activada podremos crear hojas CSS con las reglas, y todos los cambios que en su día eran temporales pasarán a ser permanentes.

Vivaldi con tus reglas CSS

El principio del truco es el mismo: tenemos que ir a vivaldi://inspect/#apps y, bajo chrome-extension://mpognobbkildjkofajifpdfhcoklimli/browser.html, hacer clic en «Inspect». Aparecerán las herramientas del desarrollador del navegador, y usaremos la flecha para averiguar qué clases, IDs, atributos, etc, tiene un elemento. Será esta información la que usemos en nuestras hojas de estilos CSS.

Una vez tengamos claro qué queremos modificar, o antes, pero aquí hemos empezado recordando el truco, hay que ir a vivaldi://experiments y activar la casilla «Allow CSS modifications». Con la opción activada, vamos al apartado Apariencia de los ajustes y en MODIFICACIONES DE A INTERFAZ DE USUARIO indicamos la carpeta en donde meteremos las hojas CSS. Lo que queda sería crear al menos una hoja con una regla CSS y reiniciar el navegador.

¿Qué se puede hacer?

Se puede hacer de todo, siempre y cuando se acierte con los selectores. Algo habitual es usar display: none para ocultar un elemento. A mí me ha resultado útil poder cambiar el color del icono de DeepL en el panel, ya que su favicon es de un color azul oscuro y se ve mejor en blanco que en su color original. Los botones del panel no tiene ID, pero sí atributo «name», y en mi caso lo he puesto blanco con esto:

button[name="WEBPANEL_1d189260-cad3-4bc0-98f9-434d67cf7b1f"] {
      filter: grayscale(1) invert(1)
}

Hay que tener en cuenta que ese «name» es el que me aparece a mí, y es probable que otros vean cadenas de texto diferentes.

Como mencionábamos, los cambios se suponen seguros, pero hay que recordar si hemos hecho algo de esto y, si algo no va bien, de lo primero que hay que hacer para solucionar las cosas es desactivar la casilla para permitir modificaciones CSS.

Con esto puedes tener tu Vivaldi como tú quieras.