Moving Buttons Right or Address Bar Left



  • Is this possible?



  • Yeah, that's pretty simple.

    button.button-toolbar.back, button.button-toolbar.forward, button.button-toolbar.rewind, button.button-toolbar.next, button.button-toolbar.reload, button.button-toolbar.home {
    	order: 2;
    }
    

    With this you can also decide to just move specific buttons to the right.



  • Got this result because I'm using a Hooks mod script to show the bookmarks button and have 2 extension icons:

    0_1493246006145_s.png



  • @liyin In what order do you want everything?



  • Arrows first, address bar second, buttons (including Bookmarks button) third, and extension buttons last.

    0_1493247582485_S2.png

    Saw the following names in the bookmarks button script:

    this.refs.bookmarksButton

    className: 'button-toolbar bookmarksbutton',
    onClick: bookmarksOnClick.bind(this),
    ref: "bookmarksButton"

    className: 'button-toolbar'



  • @liyin Ok, here you go

    button.button-toolbar.back, button.button-toolbar.forward, button.button-toolbar.rewind, button.button-toolbar.next {
    	order: -1;
    }
    
    .button-toolbar {
     	order: 2;
     } 
    
    button.button-toolbar.reload, button.button-toolbar.home {
    	order: 3;
    }
    
    .extensions-wrapper {
     	order: 4;
     }
    


  • How can I switch the positions of the two extension buttons?

    Any way to set a separator or increase the spacing just a little?

    0_1493249458895_s.png

    .button-toolbar.back, .button-toolbar.forward, .button-toolbar.rewind, .button-toolbar.next { order: 0; }
    
    .button-toolbar.reload, .button-toolbar.home { order: 2; }
    
    .button-toolbar { order: 3; } 
    
    .extensions-wrapper { order: 4; }
    


  • If you are on snapshot you can drag and drop to switch, if not you will have to wait for the 1.9 stable release.

    gn



  • Thanks

    0_1493250784317_s.png

    .button-toolbar.back { order: 0; }
    
    .button-toolbar.reload, .button-toolbar.home, .button-toolbar.bookmarksbutton { order: 1; }
    
    .extensions-wrapper { order: 2; }
    


  • @liyin Oh yeah, I haven't been running Hooks for ages, that's why I wrote .button-toolbar to address the bookmarks button. I noticed you edited your comment to give me the information, but I didn't notice it yesterday. You can exchange it with .button-toolbar.bookmarksbutton.



  • Modified the code above.

    The arrow(s) must be 0 (or -1 in your example) to appear before the address bar.

    But the other buttons can use "order: 1" and not come before the address bar, but after.

    Are you making modifications to Vivaldi files instead of using Hooks mod?



  • I just do everything with one custom.css file with all the modifications I need want. Currently I don't run any javascript mods.



  • Where do you place this .css file?

    Or are you talking about the common.css file in resources\vivaldi\style?



  • https://forum.vivaldi.net/topic/10549/modding-vivaldi/
    You shouldn't edit the common.css file. Use the official method to implement the mods.



  • Found the official method in the sticky.

    A line is added to browser.html, inside the head element:

    <link rel="stylesheet" href="style/anyname.css" />
    

    And the .css file is placed in the "resources\vivaldi\style" folder.


  • Vivaldi Translator

    How do I make a separate bookmarks button through CSS ? I don't want to deal with hooks.



  • There's no way to accomplish this with css alone, because the functionality doesn't exist. You would have to copy the javascript and the css code needed for the button out of VivaldiHooks and make separate files to implement it. If you really want the bookmarks button, it's way easier to just use Hooks.


  • Vivaldi Translator

    @luetage That I did. One thing I can't figure out though is how to switch the bookmark button and the home button above and also add a bit of space between them. This is the code I'm using from above :

    .button-toolbar.back { order: 0; }

    .button-toolbar.bookmarksbutton, .button-toolbar.home { order: 1; }

    .extensions-wrapper { order: 2; }

    Edit : I figured out how to reposition them. I just put extensions as 3 and home as 2. What about the space though :( ?



  • .button-toolbar.home {order: 2; margin-left: 5px} should do the trick.


  • Vivaldi Translator

    @luetage said in Moving Buttons Right or Address Bar Left:

    margin-left: 5px

    Thanks! Any idea how to make the close tab button always show for each tab ? I don't want to make a new topic although it might be appropriate for people who will search for that ...


Log in to reply
 

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