Font size increase in common.css

  • Would it be possible to increase the font size of the menu and bookmark headers (titles) and entries in the common.css. If so, which section of the .css file need to be edited? Thanks in advance.

  • @ineuw You don't edit common.css at all. At least no one here will give you tips how to do it. Please follow the directions @ and create your own custom.css file. Then you can edit all the font sizes you want. If you want to make all the fonts equally larger or smaller, it might be a better idea to use the UI zoom provided in vivaldi://settings/appearance/

  • Thanks @luetage. I already knew not to edit the original but copy/add another, from reading an introductory article in gHacks. But, only now I realize what "UI" means. I will try that, but it would still be good to know which section controls the font size. Thanks again.

  • @ineuw Even it is not recommanded, you can add your css on the bottom of common.css, this way you will overwrite all previous.

    I was able to change only the font and font-size of the horizonal menu using this code, just for demonstration:

    .win .menu.horizontal > ul > li > a {
      font-size: 20px;
      font-family: Arial;

    the original one is at the line 13047 in common.css

    I think you would need js to change them.

  • @burbuja

    In most instances you just need to add !important to the end of your changes in your custom file. It's needed if the common.css has values declared already. Not everything does though so it's not always necessary

    For example, the headers in the panel have a bottom margin declared but not a font size or weight, so if you wanted to change it !important would be needed for the margin but not for the other stuff

    .panel > header h1 {
        margin-bottom: 8px !important;
        font-size: 1.5rem;
        font-weight: 200;

  • @sjudenim and @burbuja. Thanks for the info. It is much appreciated.


Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.