Looking for some help with UI customization



  • Hey, I started using Vivaldi a few hours ago and I'm quite impressed so far. But there are a few minor issues I would like assistance with, if possible. Bear in mind I have absolutely no css knowledge, so any solutions of that kind would have to be something I could easily paste into my custom.css. My apologies if this is posted in the wrong forum section.

    • Is there a way to have the tabs look more like this, ie. easier to distinguish from eachother? I find that the current view make them all flow into eachother, which I'm sure a lot of people prefer, but personally I find the former more aesthetically pleasing than the latter. Is there perhaps some extension I'm not aware of? Also, while we're at it: Having the x (close button) not hiding.
    • Is there a way to have some sort of spacing between the address field and search field?

    • Is it possible to add a download button to the toolbar? I'm not a big fan of the panel, and it was the first thing I disabled. Basically, to have it look something along the lines of this.

    • And I saved the biggest one for last: Multiple tab rows. Is it feasible?

    Any help appreciated. Thanks.

    EDIT: Oh, I forgot one: The spellcheck. I have it disabled, but that doesn't stop it from putting annoying red squiggly lines where it feels like. Can I get rid of this once and for all?


  • Moderator

    @yesnoidktbh Right-click in a text edit field to disable spell-check.

    0_1536625494807_Spell Check Enabled.png



  • @pesala As you can see from my screenshot, it is already disabled.



  • @yesnoidktbh

    The code below should fix to a certain degree your first and second request.

    I grabbed a few css parts from the forum and tested them on the latest snapshot to make sure that they still work.

    The codes aren't written by me so thanks to DavidXanatos for the tab-colour part and aesouza for the addressfield-colour part. (sources at the bottom)

    Just copy paste this into your custom.css and that should be all. But you definitely need to adjust the colours as they probably were used for other themes.

    In case you have any questions just wave ; )

    Okay here you go:

    /* the upper part is for a small border to the tabs itself and the lower part is the colour for inactive tabs*/
    
    .tab-position .tab {
        margin-right: 1px;
        margin-left: 1px;
    }
    .tab-position .tab:not(.active) {
      background-color: lightgrey;
    }
    
    
    /* this is for the addressfield colours first part is background colour, second is the 
    colour of the loading bar and the last part is the colour the letters should have*/
    
     .addressfield {
    background-color: #BBCDDE !important;
    }
    .addressfield .pageload-indicator {
    background-color: #2B4661 !important;
    }
    .addressfield form input.url {
        color: black !important; opacity: 0.6 !important;
    }
    

    Sources of the two topics:
    https://forum.vivaldi.net/topic/14497/address-bar-background-colour
    https://forum.vivaldi.net/topic/29721/make-tabs-more-optically-distinct/3

    EDIT: When you need to know exactly what to do to make a custom css work just have a look at this post:
    https://forum.vivaldi.net/topic/10549/modding-vivaldi



  • It should work ☺

    /* space between address field and search field */
    .searchfield { margin-left: 50px; }
    


  • @potmeklecbohdan said in Looking for some help with UI customization:

    It should work ☺

    /* space between address field and search field */
    .searchfield { margin-left: 50px; }
    

    It does! Thank you.

    @zaibon said in Looking for some help with UI customization:

    @yesnoidktbh

    The code below should fix to a certain degree your first and second request.

    I grabbed a few css parts from the forum and tested them on the latest snapshot to make sure that they still work.

    The codes aren't written by me so thanks to DavidXanatos for the tab-colour part and aesouza for the addressfield-colour part. (sources at the bottom)

    Just copy paste this into your custom.css and that should be all. But you definitely need to adjust the colours as they probably were used for other themes.

    In case you have any questions just wave ; )

    Okay here you go:

    /* the upper part is for a small border to the tabs itself and the lower part is the colour for inactive tabs*/
    
    .tab-position .tab {
        margin-right: 1px;
        margin-left: 1px;
    }
    .tab-position .tab:not(.active) {
      background-color: lightgrey;
    }
    
    
    /* this is for the addressfield colours first part is background colour, second is the 
    colour of the loading bar and the last part is the colour the letters should have*/
    
     .addressfield {
    background-color: #BBCDDE !important;
    }
    .addressfield .pageload-indicator {
    background-color: #2B4661 !important;
    }
    .addressfield form input.url {
        color: black !important; opacity: 0.6 !important;
    }
    

    Sources of the two topics:
    https://forum.vivaldi.net/topic/14497/address-bar-background-colour
    https://forum.vivaldi.net/topic/29721/make-tabs-more-optically-distinct/3

    EDIT: When you need to know exactly what to do to make a custom css work just have a look at this post:
    https://forum.vivaldi.net/topic/10549/modding-vivaldi

    Thank you for this. I have a question though, if you don't mind. The background colour seems to work, but as soon as I hit enter the background colour changes to grey. I tried changing the colours to white in the code, but I can't seem to get rid of the grey. Am I doing something wrong here or would I need additional code?



  • @yesnoidktbh Okay this is getting really weird. When I put in white in the following code

     .addressfield {
    background-color: white !important;
    }
    

    I get the same result as you - while loading, the colour is as it should be but as soon as the site is done loading it changes to a light grey.

    Now comes the strange thing - just for fun I changed white to blue and afterwards to green and suddenly those colours stick even after the site finished loading.

    I am afraid that this is a bit beyond my knowledge - but I'll give it a closer look after I come home from work.



  • @yesnoidktbh

    This had bothered me too. I don't remember which bit of my code fixed it though, it's been awhile.

    Try this,

    .addressfield .pageload:not(.unstarted).progress-done {
        opacity: 0 !important;
        border: none !important; 
    }
    


  • @sjudenim
    For me this results in white before and while I type in addressfield after hitting enter and the loading process starts the addressfield background becomes grey and will switch back to white after the loading finished.

    So I tried to find out how the addressfield is called while loading and came up with the following:

    Please note: I have close to "not the slightest clue" what I am doing here but it works ... it doesn't - so it would be nice if somebody corrects the code to get rid of unnecessary parts

    .addressfield {
    	background-color: white !important;
    }
    
    .addressfield .pageload:not(.unstarted).progress-done {
        opacity: 0 !important;
        border: none !important; 
    }
    
    .addressfield .progressing {
        opacity: 0 !important;
        border: none !important; 
    }
    

    EDIT: Sorry celebrated too early as this kills the loading indicator in the addressfield...



  • @zaibon

    That's what it's supposed to do, the grey is the progress colour. Once the page is fully loaded it normally has a faded colour, the code I gave you makes it go back to you original white.

    Is that not what you wanted? If not, what is it you are trying to do?



  • @sjudenim
    Point is that I still get a red loading bar (colour based from my theme) while the background changes from white to grey and back to white afterwards.
    0_1536823944540_Unbenannt.png
    So from my point of view the red bar is fine but the background should stay white



  • @zaibon

    So you don't want a page load indicator and rather the field remain white?

    .addressfield .pageload .pageload-indicator {opacity: 0 !important}
    


  • @sjudenim
    Okay sorry for being a bit unclear with this. I do want a pageloadindicator in the addressfield but while loading the addressfield background colour shouldn't change.
    So like this
    addressfield with no action --> white --> hitting enter to start loading a page --> background still white while a red(or whatever) loading bar progresses
    --> loading is done --> background still white


Log in to reply
 

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