Vivaldi UI Customisations



  • Hi! I am trying to get the tab panel on right to be hidden and pull out on hover, it works fine most the time…

    #header {
    	display: none;
    }
    #tabs-container.right {
    	transition: margin-left 0.5s ease-in-out !important;
    /*
    	transition-delay: 0.5s !important; 
    */
    	top:35px;
    	z-index:999;
    	position: fixed !important;
    	margin-left: 0px;
    	height:100%;
    	background-color: black;
    }
    
    #tabs-container.right:hover, #tabs-container.right:focus, tabs-container.right:target {
    	margin-left: -110px;
    	transition-delay: 0;
    }
    
    .inner {
        margin-right: 71px !important;
    }
    
    

    But I don't understand why it sometime stops working. Any idea to fix that? Maybe some Javascript hacks?



  • @D0J0P:

    Would anyone know how to invert the new tab button so that it's just a plus sign with no box or anything around it?

    in this

    button.button-tabbar.newtab
    {
    	background-image: url(/resources/symbol-add.png);
    	background-position: center;
    	margin-top: 3px !important;
    }
    ```plus sign was small and ugly
    
    i use
    

    #tabs-container .newtab{opacity:1}
    #tabs-container .newtab svg{background-color:#2C2C2C;fill:#D2D2D2}

    
    i cant check - im on v.1.1.453.59
    [attachment=4050]lus.png[/attachment]
    Attachments:
    ![](https://forum.vivaldi.net/uploads/attachments/73912/lus.png)


  • Nope, that still looks bad on my theme with color accent on window. Thanks anyway, though!

    I have a new problem. I turn on all my CSS, and the minimize button(Windows 10) goes higher than it normally is. Without CSS, it's in it's normal height in the middle, but with my CSS on, it's now slightly higher than the middle. I don't know what's causing it. Here is all of my CSS:

    .tab-header .favicon {
    	/**[Remove border around favicon(tab icon) and and shadow]**/
    	box-shadow: none !important;
    	background-color: transparent !important;
    	-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.7));
    }
    .bookmark-bar button img.selectedfolder{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAQUlEQVQoz2P8z8iAFzAxEAAsDIkM4XDeNYYiTBPCkXhaDLXoChj/78RrwxFCbrAh6MjhoqCb4RtO2d8MXYwUxyYAnacK3C6BOQMAAAAASUVORK5CYII=') !important;
    opacity: 0.7 !important;
    }
    svg.folder-icon{
        fill: hsla(0,0%,0%,0) !important;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBQYAGg35h+foAAAAS0lEQVQoz2P8z8iAFzAxEACMPjYMLnDeE4b5m/+hm+CAxJNh8EQ3gYWBBYVv4muCxDu7ZTN+NxgT4cghouAvIQVH8MgeZGBgpDg2AfxcDGfrQIVHAAAAAElFTkSuQmCC');
    }
    
    svg.folder-icon.open{
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBQYAFxrP+hxiAAAAn0lEQVQoz6WRMQrCUBBE399sp2BhY2MlCNppKRZphXg3b2DnBfQ6gpgUElKk0ChCjE2IIf4fC6faZYYZdtYUhlYIP2CCJT5abhHb/avp4PMJyVg1HRQlr7YxrGc19njY6VeoV5tHlOkbBtiuKYKJAg+mLOhaBDmeAAl9K131cKPjrCEWIGsRXIU7KUOnIBRiek76SSScmDsFZy7m72++AdabHbHhKtXNAAAAAElFTkSuQmCC') 
    }
    
    svg.folder-trash {
        fill: hsla(0,0%,0%,0) !important;
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTExIDFWMEg0djFIMXYyaDEzVjFoLTN6IiBmaWxsPSJyZ2IoNjAsNjAsNjApIi8+CiAgPHBhdGggZD0iTTUgNHY5aDJWNEg1em0zIDB2OWgyVjRIOHoiIGZpbGw9InJnYig2MCw2MCw2MCkiLz4KICA8cGF0aCBkPSJNMiAxNlY0aDJ2MTBoN1Y0aDJ2MTJIMnoiIGZpbGw9InJnYig2MCw2MCw2MCkiLz4KPC9zdmc+) !important;
        opacity: 0.7;
    }
    /* several cases where they need brightening */ 	
    .ui-light .vivaldi-tree .tree-row[data-selected]:not([data-nofocus]) > label > .folder-icon,
    .ui-dark .folder-icon,
    .ui-light .vivaldi-tree .tree-row[data-selected]:not([data-nofocus]) > label > .folder-trash,
    .ui-dark .folder-trash,
    .ui-light.ui-tabcolor-on.color-behind-tabs-off .bookmark-bar .folder-icon
    {
        -webkit-filter:brightness(400%);
    }
    .startpage --colorAccentBg .toolbar.icons button,          
       --colorAccentBg .toolbar.icons button  {
        border-color: #dedede         !important;               /*making the border uniform*/
        background-image: none     !important;              /*getting rid of the gradient*/
        -webkit-filter: brightness(0.95);                            /* This line is only needed if you want the buttons light grey even when not hovered over*/
    }
    .toolbar.icons svg {
        opacity: 0.75;
    }
    .startpage input[type=button],
     .startpage input[type=submit],
     input[type=button]:not(.circular),
     input[type=submit] {
        background-image: linear-gradient(#ececec,#ececec) !important;
    }
    .addressfield input.url,
    .addressfield-siteinfo,
    .toolbar-addressbar .searchfield-input,
    .panel input[type="search"] {
        font-size: 105%;
        font-weight: 600;
    }
    #titlebar { 
        font-size:105%; 
    }
    .toolbar-addressbar input {
        font-weight: 600;
    }
    .toolbar-addressbar {
        font-weight: 600;
    }
    input[type="search"]::-webkit-search-cancel-button {
        -webkit-filter:brightness(0);
        opacity:0.3;
    }
    

    I would attach a picture, but this forum has never allowed me to attach screenshots for some reason. :S



  • There we go. Here's an image. Take a close look at the minimize button. It's slightly higher than normal.
    Attachments:



  • since a few builds vivaldi uses a font that does not honor font smoothing settings, it's always smoothed, even if cleartype is disabled system wide. while waiting for an official fix, i had solved this issue in the past by just adding e.g.

    .tab-header{font-family:Verdana}
    
    ```to the vivaldi style/common.css. with todays update from 519 to 534 this has no effect anymore, the font of the tab titles stays the same. as i'm not that deep into the css resources of vivaldi, could someone point out how i can change the tab font with the current build? thanks!
    
    edit: i just realized it still does change the font, but now the rendering is broken for all font families, they all get smoothed now :(


  • @D0J0P:

    I turn on all my CSS, and the minimize button(Windows 10) goes higher than it normally is

    this for e.g:

    #browser .window-buttongroup button{width:39px !important;margin-top:5px}
    #browser.win .window-buttongroup button.window-close{margin-top:1px}
    ```no?
    [attachment=4058]cccc.jpg[/attachment]
    Attachments:
    ![](https://forum.vivaldi.net/uploads/attachments/73912/cccc.jpg)


  • That didn't fix it. It's the minimize button that's a bit too high, but I guess I'll live with it.



  • D0J0P, try

    .window-buttongroup button.window-minimize{
    	padding-top: 5px !important;
    }
    ```You'll have to play with the number


  • @brook:

    D0J0P, try

    .window-buttongroup button.window-minimize{
    	padding-top: 5px !important;
    }
    ```You'll have to play with the number
    

    That's perfect! Thank you :)



  • @D0J0P:

    @brook:

    You'll have to play with the number

    That's perfect! Thank you :)

    Oh, finally. Enjoy


  • Hello I was wondering if anyone could make a css code to hide the vivaldi menu button so tabs can take up its space but if pressing alt the menu will still come up. :S


  • Moderator

    @99lool:

    Hello I was wondering if anyone could make a css code to hide the vivaldi menu button so tabs can take up its space but if pressing alt the menu will still come up. :S

    It can be hidden with this:

    .vivaldi {
        display:none !important;
    }
    
    .win #tabs-container.top, .linux #tabs-container.top  {
        padding-left: 2px !important;
    }
    
    

    or if you want a tiny button, you could do something like

    .vivaldi, .vivaldi svg {
        width: 10px !important;
        height: 10px !important;
        line-height:0 !important;
        margin-left:1px !important;
    }
    
    .win #tabs-container.top, .linux #tabs-container.top  {
        padding-left: 2px !important;
    }
    

    Note for others: This is for Windows and Linux versions. OS X doesn't show the V button.



  • Hi. Semi newb here. I have been reading through the thread trying to figure out how to change the font color of un-active tabs. Here is an image of what I am talking about. If anyone knows if I can just add some code to my custom.css, that would be awesome. I want to keep the active tab font green, and un-active tabs more of a light grey vs the current white. So that the font kinda falls into the background. Any tips would be greatly appreciated!



  • @vredesbyrd:

    I want to keep the active tab font green, and un-active tabs more of a light grey vs the current white. So that the font kinda falls into the background. Any tips would be greatly appreciated!

    Try this:
    ```
    .tab-strip .tab:not(.active){
    	color: #d3d3d3 !important;
    }
    ```You can play with the color value to your liking


  • Brook, thanks for getting back so fast! I tried that out, and it worked just perfectly. If and when you have the time, I have a couple more questions that I probably missed in the thread…..

    I removed the favicons from the tabs, but in doing so when audio is playing, it overlaps the text on that tab (see screenshot)....anyway to force the font to only go so many px to the left, or a similar remedy?

    Lastly, is it possible to change the color of the "page loading/progress" bar thats on the bottom of the tab. Current color blends into my active tab color.....Thanks again for all the help! Im very close to having my dream browser B) Take it easy!

    Edit...also, do you know how to change the background of right click menu to dark?

    [attachment=4135]vivalditabs.png[/attachment]

    Current custom.css

    .vivaldi svg g *:not(path) {
    fill:#8FBE8F;
    }
    .button-addressfield.home,.button-tabbar.home,.button-toolbar-small.home,.button-toolbar.home{display:none !important}#tabs-container .newtab{opacity:1}
    #tabs-container .newtab svg{background-color:#8fbe8f;fill:#1b1b1b}
    }
    #tabs-container.top {
    padding-top: 2px !important;
    }
    .tab-strip .tab:not(.active){
    color: rgb(164, 151, 176) !important;
    }
    .favicon{display:none;}
    Attachments:



  • @vredesbyrd:

    Brook, thanks for getting back so fast! I tried that out, and it worked just perfectly. If and when you have the time, I have a couple more questions that I probably missed in the thread…..

    I removed the favicons from the tabs, but in doing so when audio is playing, it overlaps the text on that tab (see screenshot)....anyway to force the font to only go so many px to the left, or a similar remedy?

    Try this:
    ```
    #tabs-container .tab .tab-audio {
       margin-left: -7px !important;
    }
    ```Again, you can play with the number of pixels


  • @vredesbyrd:

    is it possible to change the color of the "page loading/progress" bar thats on the bottom of the tab. Current color blends into my active tab color…..Thanks again for all the help! Im very close to having my dream browser B) Take it easy!

    This will make the indicator green (your favorite color :) )
    ```
    .tab-position .tab .progress-indicator {
        background-color: rgba(0,255,0,.6) !important;}
    ```You can change the opacity (.6) to a different value.
    
    About your question "how to change the background of right click menu to dark?" - sorry, I don't know how to do it,,,


  • Brook. Both of those worked great! And you are correct, I am a green fiend…. And with my ocd tendencies I needed to make vivaldi match the current green/purple/white accents of my OS & foobar.... (cheesy I know)

    Thanks again for all the help! Your the best. ocd is at rest now :S

    Edit...this should be my final question and ill leave you be... :blink: Is there a simple way to change the color or brightness of the trash can and min/max/exit buttons?



  • @vredesbyrd:

    Brook. Both of those worked great! Thanks again for all the help!
    Is there a simple way to change the color or brightness of the … min/max/exit buttons?

    This should do the trick and match your not-active tabs font color
    ```
    .window-buttongroup button {
    	fill: #d3d3d3 !important;
    }
    ```


  • Fantastic. Thanks much


Log in to reply
 

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