Please, anyone who understands this can make a modification for me!



  • Please, anyone who understands this can make a modification for me. :relaxed:

    https://userstyles.org/styles/99938/better-styling-for-chrome-extension-quick-tabs

    It is a way to change this extension : Quick Tabs ( The option to modify is in the extension settings! )

    I would like to have the scroll bar in 15px, this color: # daded3

    Background in general also of this color: # daded3

    The search where green is change to this color: # 2b5788

    If anyone does this I would greatly appreciate it! I do not understand anything! I was editing and I did not find which of the options should change, thanks!
    Extension image

    /*v2.1 Updated 3.25.16*/
    
    body
    {
      max-height: 600px;
      width: 750px;
    }
    
    div
    {
      box-sizing: border-box;
    }
    
    .qs_wrapper
    {
      float: left;
      width: 100%;
      margin: 0 0 4px 0;
      padding-left: 10px;
    }
    
    .qs_input
    {
      margin: 4px 0 0 0px;
      height: 32px;
      width: 97%;
      border-radius: 5px;
      display: block;
      float: left;
      background-color: rgb(215, 235, 139);
      border: 1px solid rgb(153, 153, 153);
    }
    
    .tab, .bookmark, div.separator.big
    {
      border: 1px solid #D2CCCC;
      padding: 5px;
    /* padding-bottom: 5px; */
      border-radius: 5px;
      margin-bottom: 3px;
      margin-right: 2%;
      box-shadow: 2px 2px 5px #aaa;
      width: 31%;
      float: left;
      display: inline;
    /*color: rgb(32,61,116);*/
      clear: none;
      color: rgb(29, 101, 158);
      font-weight: 500;
      background-image: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(122,122,122,0.18) 99%, rgba(122,122,122,0.18) 100%);
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(99%,rgba(122,122,122,0.18)), color-stop(100%,rgba(122,122,122,0.18)));
      background-image: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
      background-image: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
      background-image: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
      background-image: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
      overflow: hidden;
      height: 3.5em;
    }
    
    /*
    div.tabimage {
    float: left;
    }
     */
    
    div.tabimage img
    {
      vertical-align: middle;
      padding: 4px;
      padding-left: 0;
    }
    
    div.content
    {
      margin: 4px 0;
      padding: 0;
      padding-left: 10px;
      float: left;
      height: 600px;
      width: 100%;
    }
    
    .highlight
    {
      text-decoration: none;
      border-bottom-width: 1px;
      border-bottom-style: dotted;
    }
    
    .withfocus
    {
      background-color: rgba(255,146,10,.7);
    /*font-weight: 400;*/;
    }
    
    div.closed
    {
      background-image: none;
    /* background-color: #dfdfdf; */
      opacity: .6;
      color: #555;
    }
    
    div.closed.withfocus
    {
      background-color: rgba(255,146,10,.4);
    }
    
    div.closed.withfocus div.title
    {
      background-color: transparent;
    }
    
    div.url
    {
      color: #777;
      width: 71%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    
    div.close
    {
      float: right;
      display: inline;
      opacity: .5;
      border: 1px solid #999191;
      background-color: #F1EEA0;
      border-radius: 3px;
      top: 0 !important;
      right: 0 !important;
    }
    
    div.withfocus.open div.close
    {
      top: 0 !important;
      right: 0 !important;
    }
    
    div.close:hover
    {
      opacity: 1;
      background-color: rgb(235, 19, 19) !important;
    }
    
    .title
    {
      overflow: hidden;
      width: 71%;
    }
    
    div.separator.big
    {
      color: #212121;
      height: 2em;
      font-size: 12px;
      background-color: rgb(198, 212, 255);
      padding: 0;
      width: 97%;
    }
    
    div.separator.big:before, div.separator.big:after
    {
      content: "▼";
    }
    
    div.separator.big span
    {
      vertical-align: baseline;
    }
    
    .withfocus div.title, div.closed.withfocus div.title, .withfocus div.url
    {
      background-color: transparent;
      color: inherit;
    }
    
    div.tabimage img
    {
      background-color: transparent;
    }
    
    .bookmark div
    {
      background-color: transparent;
    }
    
    .bookmark
    {
      background-color: rgb(230, 240, 190);
      border-top: 1px solid rgba(0, 0, 0, 0.07);
    }
    
    .withfocus
    {
      background-color: rgba(255, 146, 10, 0.7) !important;
      color: #777;
    }
    
    /* i really want this to be global */
    

    //MODEDIT: Please format code blocks correctly; see http://commonmark.org/help/



  • What do you mean with "I really want this to be global" at the end of the code? You are already using a custom code, so do you want to have the changes applied to the code you are using, or do you want a new code that just changes the things you described?



  • @luetage Just the things I wrote, I do not understand anything about it! :/ ( One day I will learn at least the basics! :) )
    For example: I want as the extension is at that time, I just want the modifications I quoted, change the colors, and the scroll bar at 15px. :relaxed:
    I wanted the code I left with the changes. :relaxed:



  • Lol, you didn't answer my question :D
    In the extension options there is a field for custom code, you pasted the code here. Do you want me to change the code you are using in the picture, or do you want me to delete the custom code and ONLY make the changes to the STANDARD quick tabs as provided by the extension freshly installed?

    Please answer with option 1 or option 2.



  • @luetage said in Please, anyone who understands this can make a modification for me!:

    Lol, you didn't answer my question :D

    Sorry! lol

    Do you want me to change the code you are using in the picture!

    I'm currently using this code! What I wanted is to get that same code over with the changes I mentioned, so I would copy and paste the new code with the changes.

    I hope you understand, Google Translate fails sometimes.



  • Ok, all clear!

    Just one last question, you would have the same color for the scroll bar and for the background. This would mean the scroll bar is almost not noticeable. Do you really want that?

    And the background color for search is a dark blue then, what color do you want the letters in? You won't be able to see the current dark letters on a dark background very well.



  • @luetage You could change to: # 2b5788 too. :relaxed:



  • Try this

    body
    {
    max-height: 600px;
    width: 750px;
    }
    
    div
    {
    box-sizing: border-box;
    }
    
    .qs_wrapper
    {
    float: left;
    width: 100%;
    margin: 0 0 4px 0;
    padding-left: 10px;
    }
    
    .qs_input
    {
    margin: 4px 0 0 0px;
    height: 32px;
    width: 97%;
    border-radius: 5px;
    display: block;
    float: left;
    background-color: #2b5788;
    color: #fff;
    border: 1px solid rgb(153, 153, 153);
    }
    
    .tab, .bookmark, div.separator.big
    {
    border: 1px solid #D2CCCC;
    padding: 5px;
    /* padding-bottom: 5px; */
    border-radius: 5px;
    margin-bottom: 3px;
    margin-right: 2%;
    box-shadow: 2px 2px 5px #aaa;
    width: 31%;
    float: left;
    display: inline;
    /color: rgb(32,61,116);/
    clear: none;
    color: rgb(29, 101, 158);
    font-weight: 500;
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(122,122,122,0.18) 99%, rgba(122,122,122,0.18) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(99%,rgba(122,122,122,0.18)), color-stop(100%,rgba(122,122,122,0.18)));
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
    background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
    overflow: hidden;
    height: 3.5em;
    }
    
    /*
    div.tabimage {
    float: left;
    }
    */
    
    div.tabimage img
    {
    vertical-align: middle;
    padding: 4px;
    padding-left: 0;
    }
    
    div.content
    {
    margin: 4px 0;
    padding: 0;
    padding-left: 10px;
    float: left;
    height: 600px;
    width: 100%;
    }
    
    .highlight
    {
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    }
    
    .withfocus
    {
    background-color: rgba(255,146,10,.7);
    /font-weight: 400;/;
    }
    
    div.closed
    {
    background-image: none;
    /* background-color: #dfdfdf; */
    opacity: .6;
    color: #555;
    }
    
    div.closed.withfocus
    {
    background-color: rgba(255,146,10,.4);
    }
    
    div.closed.withfocus div.title
    {
    background-color: transparent;
    }
    
    div.url
    {
    color: #777;
    width: 71%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    }
    
    div.close
    {
    float: right;
    display: inline;
    opacity: .5;
    border: 1px solid #999191;
    background-color: #F1EEA0;
    border-radius: 3px;
    top: 0 !important;
    right: 0 !important;
    }
    
    div.withfocus.open div.close
    {
    top: 0 !important;
    right: 0 !important;
    }
    
    div.close:hover
    {
    opacity: 1;
    background-color: rgb(235, 19, 19) !important;
    }
    
    .title
    {
    overflow: hidden;
    width: 71%;
    }
    
    div.separator.big
    {
    color: #212121;
    height: 2em;
    font-size: 12px;
    background-color: rgb(198, 212, 255);
    padding: 0;
    width: 97%;
    }
    
    div.separator.big:before, div.separator.big:after
    {
    content: "▼";
    }
    
    div.separator.big span
    {
    vertical-align: baseline;
    }
    
    .withfocus div.title, div.closed.withfocus div.title, .withfocus div.url
    {
    background-color: transparent;
    color: inherit;
    }
    
    div.tabimage img
    {
    background-color: transparent;
    }
    
    .bookmark div
    {
    background-color: transparent;
    }
    
    .bookmark
    {
    background-color: rgb(230, 240, 190);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    }
    
    .withfocus
    {
    background-color: rgba(255, 146, 10, 0.7) !important;
    color: #777;
    }
    
    html
    {
    background-color: #daded3;
    }
    
    ::-webkit-scrollbar
    {
    width: 15px
    }
    


  • @luetage Thank you very much!!! :)



  • @JuniorSilva30 said in Please, anyone who understands this can make a modification for me!:

    Please, anyone who understands this can make a modification for me. :relaxed:

    https://userstyles.org/styles/99938/better-styling-for-chrome-extension-quick-tabs

    It is a way to change this extension : Quick Tabs ( The option to modify is in the extension settings! )

    I would like to have the scroll bar in 15px, this color: # daded3

    Background in general also of this color: # daded3

    The search where green is change to this color: # 2b5788

    If anyone does this I would greatly appreciate it! I do not understand anything! I was editing and I did not find which of the options should change, thanks!
    Extension image

    /*v2.1 Updated 3.25.16*/
    
    body
    {
      max-height: 600px;
      width: 750px;
    }
    
    div
    {
      box-sizing: border-box;
    }
    
    .qs_wrapper
    {
      float: left;
      width: 100%;
      margin: 0 0 4px 0;
      padding-left: 10px;
    }
    
    .qs_input
    {
      margin: 4px 0 0 0px;
      height: 32px;
      width: 97%;
      border-radius: 5px;
      display: block;
      float: left;
      background-color: rgb(215, 235, 139);
      border: 1px solid rgb(153, 153, 153);
    }
    
    .tab, .bookmark, div.separator.big
    {
      border: 1px solid #D2CCCC;
      padding: 5px;
    /* padding-bottom: 5px; */
      border-radius: 5px;
      margin-bottom: 3px;
      margin-right: 2%;
      box-shadow: 2px 2px 5px #aaa;
      width: 31%;
      float: left;
      display: inline;
    /*color: rgb(32,61,116);*/
      clear: none;
      color: rgb(29, 101, 158);
      font-weight: 500;
      background-image: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(122,122,122,0.18) 99%, rgba(122,122,122,0.18) 100%);
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(99%,rgba(122,122,122,0.18)), color-stop(100%,rgba(122,122,122,0.18)));
      background-image: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
      background-image: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
      background-image: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
      background-image: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(122,122,122,0.18) 99%,rgba(122,122,122,0.18) 100%);
      overflow: hidden;
      height: 3.5em;
    }
    
    /*
    div.tabimage {
    float: left;
    }
     */
    
    div.tabimage img
    {
      vertical-align: middle;
      padding: 4px;
      padding-left: 0;
    }
    
    div.content
    {
      margin: 4px 0;
      padding: 0;
      padding-left: 10px;
      float: left;
      height: 600px;
      width: 100%;
    }
    
    .highlight
    {
      text-decoration: none;
      border-bottom-width: 1px;
      border-bottom-style: dotted;
    }
    
    .withfocus
    {
      background-color: rgba(255,146,10,.7);
    /*font-weight: 400;*/;
    }
    
    div.closed
    {
      background-image: none;
    /* background-color: #dfdfdf; */
      opacity: .6;
      color: #555;
    }
    
    div.closed.withfocus
    {
      background-color: rgba(255,146,10,.4);
    }
    
    div.closed.withfocus div.title
    {
      background-color: transparent;
    }
    
    div.url
    {
      color: #777;
      width: 71%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    
    div.close
    {
      float: right;
      display: inline;
      opacity: .5;
      border: 1px solid #999191;
      background-color: #F1EEA0;
      border-radius: 3px;
      top: 0 !important;
      right: 0 !important;
    }
    
    div.withfocus.open div.close
    {
      top: 0 !important;
      right: 0 !important;
    }
    
    div.close:hover
    {
      opacity: 1;
      background-color: rgb(235, 19, 19) !important;
    }
    
    .title
    {
      overflow: hidden;
      width: 71%;
    }
    
    div.separator.big
    {
      color: #212121;
      height: 2em;
      font-size: 12px;
      background-color: rgb(198, 212, 255);
      padding: 0;
      width: 97%;
    }
    
    div.separator.big:before, div.separator.big:after
    {
      content: "▼";
    }
    
    div.separator.big span
    {
      vertical-align: baseline;
    }
    
    .withfocus div.title, div.closed.withfocus div.title, .withfocus div.url
    {
      background-color: transparent;
      color: inherit;
    }
    
    div.tabimage img
    {
      background-color: transparent;
    }
    
    .bookmark div
    {
      background-color: transparent;
    }
    
    .bookmark
    {
      background-color: rgb(230, 240, 190);
      border-top: 1px solid rgba(0, 0, 0, 0.07);
    }
    
    .withfocus
    {
      background-color: rgba(255, 146, 10, 0.7) !important;
      color: #777;
    }
    
    /* i really want this to be global */
    

    //MODEDIT: Bitte Code-Block richtig formatieren, siehe http://commonmark.org/help/

    Just curious. I hope you got the help you needed! But why wouldn't you just use Vivaldi's Quick Commands to jump between tabs? F2 -> T (Twitch tab jumps up) -> Enter. It's beautiful, easy, fast. I haven't used this particular one here, but it doesn't seem as smooth. Or are you using the bad browser atm?



  • @Werkaster It's because I use it in Google Chrome and also added it to Vivaldi, it has other options (three Vivaldi already have), recent tabs closed and as you said, f2 shows the tabs open and also searches the bookmarks.

    I use this extension because it has everything I want in one place, and because it also has an option to show the number of open tabs and search the history and search favorites (which is useful for Chrome). Vivaldi does not need, in fact it pro Vivaldi only has two functionalities, search in the history (what I hardly do, because I use the web panel to do this), and count the number of open tabs.

    In Chrome it has a lot of functionality, not Vivaldi, because Vivaldi is full of native functions! And this is very good! :relaxed:

    Hope you understand, Google Translate fails sometimes ... :relaxed:

    Number of open tabs : http://i.imgur.com/3oANzTq.jpg
    Tabs open and recently closed (Vivaldi already has this natively) : http://i.imgur.com/dMQPVd4.jpg
    To find favorites, Vivaldi already has this and in many ways : http://i.imgur.com/SBDQ1Tt.jpg
    Search the history, Vivaldi already has this in the web panel : http://i.imgur.com/7wZfK49.jpg


Log in to reply
 

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