Use a fixed width font for tooltips?



  • Does anyone know how to edit /opt/vivaldi-snapshot/resources/vivaldi/style/custom.css to make tooltips use a fixed width font instead of a proportional font? I would like to use Ubuntu Mono in tooltips everywhere (in tabs, bookmark bar, web pages) for readability reasons.

    Vivaldi 1.6.689.32 (Official Build) dev (64-bit)
    Revision 841b9a58130b84a3816d42023b714a2127e1e56f
    OS Linux

    Thanks!



  • Being on Windows, I am unable to test this but there appear to be font settings for each browser in the css.

    Try this,

    #browser.linux,
    #browser.linux+div,
    #browser.linux+div+div,
    #browser.linux button,
    #browser.linux input,
    #browser.linux select,
    #browser.linux textarea {
        font-family: Ubuntu Mono, sans-serif
    }


  • @sjudenim said in Use a fixed width font for tooltips?:

    Being on Windows, I am unable to test this but there appear to be font settings for each browser in the css.

    Try this,

    #browser.linux,
    #browser.linux+div,
    #browser.linux+div+div,
    #browser.linux button,
    #browser.linux input,
    #browser.linux select,
    #browser.linux textarea {
        font-family: Ubuntu Mono, sans-serif !important;
    }
    

    Forgot that you might need to add add !important and I couldn't edit my original post



  • Hi and thanks for responding. I think I should include the contents of my current custom.css and a screenshot to show how the text in the active and inactive tabs, address bar, bookmarks bar and the tooltip for the bookmark bar appears.

    /opt/vivaldi-snapshot/resources/vivaldi/style/custom.css

    * { font-size: 17px !important; font-family: Ubuntu Mono, Liberation Mono, monospace !important; }
    #browser.linux, #browser.linux+div, #browser.linux+div+div, #browser.linux button, #browser.linux input, #browser.linux select, #browser.linux textarea { color: #000010 !important; font-size: 17px !important; font-family: Ubuntu Mono, Liberation Mono, monospace !important;}
    .tab.active { color: #c3c368 !important; font-weight: bold !important; }
    .tab-audio {position: static !important; }
    * .favicon { display: none !important; }
    #status_info>span {font-size: 18px !important; color: #c3c368 !important; background: #000010 !important; }

    Screenshot

    0_1481949400614_custom-css.png

    As you can see, the tooltip is still a proportional font.

    I should make it clear I'm not really good at CSS and so the code may have some silliness but it works for me!



  • @aesouza

    Using the * heading should work for everything so I'm not sure why it isn't.

    Some of your code has redundant bits in it so I've cleaned up and changed the colours so that you can use the theme editor in Vivaldi to modify them instead of having to edit the css. See how this works for you

    * {
        font-family: Ubuntu Mono, monospace !important;
        font-size: 17px !important;
    }
    #browser.linux, 
    #browser.linux + div, 
    #browser.linux + div + div, 
    #browser.linux button, 
    #browser.linux input, 
    #browser.linux select, 
    #browser.linux textarea { 
        color: var(--colorFg) !important; 
    }
    .tab.active { 
        color: var(--colorFg) !important;
        font-weight: 700 !important;
    }
    .tab-audio { 
        position: static !important;
    }
    .favicon { 
        display: none !important;
    }
    #status_info>span { 
        font-size: 18px !important;
        color: var(--colorFg) !important;
        background-color: var(--colorBg) !important;
    }


  • @sjudenim said in Use a fixed width font for tooltips?:

    @aesouza

    Using the * heading should work for everything so I'm not sure why it isn't.

    Some of your code has redundant bits in it so I've cleaned up and changed the colours so that you can use the theme editor in Vivaldi to modify them instead of having to edit the css. See how this works for you

    ...

    Thanks for taking the time to look into this! So did you get the tooltips to use a fixed font on your system?

    I looked at all instances of tooltip in common.css and then modified my custom.css trying to stick in font-family: Ubuntu Mono !important but there was no effect.

    I'm using the code you provided but I made #status_info>span a little colorful by using color: var(--colorHighlightBg) !important; instead of color: var(--colorFg) !important; where --colorHighlightBg is #ED773D.

    I would also like the "progress bar" (?) that transiently runs at the bottom of a tab when the tab is loading to be --colorHighlightBg. Is that possible?



  • @aesouza

    No, I haven't really noticed. All the fonts on my system are using Segoe UI so I don't notice any differences in the various elements.

    Yes to the tab progressbar.

    .tab-position .tab .progress-indicator {
        background-color: var(--colorHighlightBg) !important;
    }


  • @sjudenim said in Use a fixed width font for tooltips?:

    @aesouza

    No, I haven't really noticed. All the fonts on my system are using Segoe UI so I don't notice any differences in the various elements.

    Yes to the tab progressbar.

    .tab-position .tab .progress-indicator {
        background-color: var(--colorHighlightBg) !important;
    }
    

    Your code for the progress bar is just the thing. Thanks!

    Re. the tooltip font, it's a bit mysterious but I'll let it rest for now!


Log in to reply
 

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