Changing icons with CSS / part II



  • @raed In inkscapes options you have to change absolute to relative pathes and save changes.

    button.button-toolbar.home svg path {
    d: path("m 19.356327,10.639013 c -1.608929,2.799724 -3.219429,5.597486 -4.826002,8.398389 -0.298386,0.520213 -0.732224,0.835088 -1.327425,0.878276 -0.66705,0.04829 -1.190796,-0.233213 -1.526873,-0.811925 -1.018046,-1.754588 -2.0247067,-3.516243 -3.0356857,-5.274758 -0.614832,-1.070263 -1.23202,-2.138956 -1.8441036,-3.210398 -0.6175806,-1.0808639 0.078915,-2.3945479 1.3180026,-2.4581509 0.654487,-0.03376 1.158994,0.268155 1.491144,0.837444 0.4538617,0.778551 0.8994777,1.5618149 1.3486267,2.3427219 0.323906,0.562615 0.641138,1.129156 0.974466,1.685882 0.482129,0.807997 1.191189,1.263822 2.134639,1.320358 1.335669,0.0797 2.575934,-0.888876 2.735728,-2.311706 0.01217,-0.106792 0.02003,-0.212797 0.02473,-0.26737 -0.0071,-0.460536 -0.09305,-0.848437 -0.275614,-1.214353 -0.498619,-1.0007709 0.03259,-2.1220739 1.116984,-2.3627459 0.882988,-0.195521 1.796599,0.454646 1.913597,1.352553 0.05104,0.394576 -0.0267,0.7561719 -0.222219,1.0957829 m 0.584208,-4.491495 c -3.809525,-3.8126669 -9.9857237,-3.8126669 -13.7952492,0 -3.8095259,3.8126671 -3.8095259,9.994362 0,13.806636 3.8095255,3.812666 9.9857242,3.812666 13.7952492,0 3.809527,-3.812274 3.809527,-9.9939689 0,-13.806636 m -6.787988,20.157566 c 5.763429,0 8.967624,0 11.059885,-2.092656 2.092657,-2.092658 2.092657,-5.296853 2.092657,-11.059886 0,-5.7634289 0,-8.9676241 -2.092657,-11.0598849 -2.092261,-2.0926571 -5.296456,-2.0926571 -11.059885,-2.0926571 -5.7634287,0 -8.9672278,0 -11.0598849,2.0926571 -2.0926571,2.0922608 -2.0926571,5.296456 -2.0926571,11.0598849 0,5.763033 0,8.967228 2.0926571,11.059886 2.0926571,2.092656 5.2964562,2.092656 11.0598849,2.092656");
    fill: none;
    stroke: var(--colorBg);
    stroke-width: 2px;
     }
    

    I have resized the image, so that no scalling is not needed and combined the pathes, because it has to be one single path. This is the best I could do 😟 :
    0_1545087174514_5ed5d427-c8cf-427e-b054-19c4ded50469-image.png
    Here the source svg:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg
       xmlns:dc="http://purl.org/dc/elements/1.1/"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       height="26.305084"
       width="26.305084"
       id="svg8"
       version="1.1"
       viewBox="0 0 26.305084 26.305084">
      <metadata
         id="metadata14">
        <rdf:RDF>
          <cc:Work
             rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type
               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
            <dc:title></dc:title>
          </cc:Work>
        </rdf:RDF>
      </metadata>
      <defs
         id="defs12" />
      <path
         d="m 19.356327,10.639013 c -1.608929,2.799724 -3.219429,5.597486 -4.826002,8.398389 -0.298386,0.520213 -0.732224,0.835088 -1.327425,0.878276 -0.66705,0.04829 -1.190796,-0.233213 -1.526873,-0.811925 -1.018046,-1.754588 -2.0247067,-3.516243 -3.0356857,-5.274758 -0.614832,-1.070263 -1.23202,-2.138956 -1.8441036,-3.210398 -0.6175806,-1.0808639 0.078915,-2.3945479 1.3180026,-2.4581509 0.654487,-0.03376 1.158994,0.268155 1.491144,0.837444 0.4538617,0.778551 0.8994777,1.5618149 1.3486267,2.3427219 0.323906,0.562615 0.641138,1.129156 0.974466,1.685882 0.482129,0.807997 1.191189,1.263822 2.134639,1.320358 1.335669,0.0797 2.575934,-0.888876 2.735728,-2.311706 0.01217,-0.106792 0.02003,-0.212797 0.02473,-0.26737 -0.0071,-0.460536 -0.09305,-0.848437 -0.275614,-1.214353 -0.498619,-1.0007709 0.03259,-2.1220739 1.116984,-2.3627459 0.882988,-0.195521 1.796599,0.454646 1.913597,1.352553 0.05104,0.394576 -0.0267,0.7561719 -0.222219,1.0957829 m 0.584208,-4.491495 c -3.809525,-3.8126669 -9.9857237,-3.8126669 -13.7952492,0 -3.8095259,3.8126671 -3.8095259,9.994362 0,13.806636 3.8095255,3.812666 9.9857242,3.812666 13.7952492,0 3.809527,-3.812274 3.809527,-9.9939689 0,-13.806636 m -6.787988,20.157566 c 5.763429,0 8.967624,0 11.059885,-2.092656 2.092657,-2.092658 2.092657,-5.296853 2.092657,-11.059886 0,-5.7634289 0,-8.9676241 -2.092657,-11.0598849 -2.092261,-2.0926571 -5.296456,-2.0926571 -11.059885,-2.0926571 -5.7634287,0 -8.9672278,0 -11.0598849,2.0926571 -2.0926571,2.0922608 -2.0926571,5.296456 -2.0926571,11.0598849 0,5.763033 0,8.967228 2.0926571,11.059886 2.0926571,2.092656 5.2964562,2.092656 11.0598849,2.092656"
         style="fill:#ff0000;fill-rule:evenodd;stroke:none;stroke-width:0.82203388"
         id="path4" />
    </svg>
    


  • May be a better version:

    button.button-toolbar.home svg path {
    d: path("m 3.2039589,0.00947894 c -0.641236,0.032915 -1.2124526,0.2266687 -1.6883381,0.5350843 -0.4758854,0.308414 -0.85606693,0.73173576 -1.11669603,1.21972306 -0.260629,0.4879872 -0.4033533,1.0402638 -0.39881999506,1.6118981 0.004529995,0.5716344 0.15565849506,1.1622181 0.47526049506,1.7215734 1.26703013,2.2179126 2.54598303,4.4282026 3.81870203,6.6436762 2.0927538,3.640172 4.1740323,7.288975 6.2814147,10.92102 0.347845,0.598975 0.795473,1.043148 1.326077,1.326077 0.530605,0.282928 1.144166,0.402277 1.834572,0.35229 0.61604,-0.0447 1.149517,-0.229674 1.60525,-0.538406 0.455733,-0.308731 0.834451,-0.741121 1.143284,-1.279548 3.325649,-5.797943 6.659915,-11.586402 9.990442,-17.3819047 0.404729,-0.7030038 0.564296,-1.4531665 0.458642,-2.2699499 -0.121095,-0.9293446 -0.654349,-1.7317985 -1.385899,-2.25001006 -0.731549,-0.5182098 -1.658486,-0.7507441 -2.57239,-0.5483768 -1.122365,0.2490988 -1.959798,0.95300436 -2.386271,1.85451376 -0.426475,0.9015076 -0.442962,1.9985429 0.07312,3.0343553 0.377914,0.7574557 0.553686,1.5625678 0.56832,2.5158888 -0.0098,0.112968 -0.02465,0.33064 -0.04985,0.551701 -0.16539,1.472649 -0.888857,2.7106856 -1.917659,3.5594686 -1.028802,0.848782 -2.36315,1.308858 -3.745585,1.226371 -0.976483,-0.05852 -1.829926,-0.324753 -2.565743,-0.784345 -0.735816,-0.459594 -1.352178,-1.111283 -1.851188,-1.947572 -0.689998,-1.1524366 -1.3468714,-2.3250466 -2.0173654,-3.4896746 -0.929749,-1.6164993 -1.8522349,-3.2406884 -2.79174,-4.8523108 -0.3437807,-0.5892208 -0.7764598,-1.03790876 -1.2928422,-1.33272326 -0.5163806,-0.2948137 -1.1172864,-0.4337666 -1.7946895,-0.3988194 z");
    fill: var(--colorFg);
    stroke: none;
    }
    

    0_1545104804400_8162b3e2-b916-4dd3-8d23-e70c108b7f51-image.png

    Original svg:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg
       xmlns:dc="http://purl.org/dc/elements/1.1/"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       height="24.351908"
       width="26.965475"
       id="svg8"
       version="1.1"
       viewBox="0 0 26.965475 24.351908">
      <metadata
         id="metadata14">
        <rdf:RDF>
          <cc:Work
             rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type
               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
            <dc:title></dc:title>
          </cc:Work>
        </rdf:RDF>
      </metadata>
      <defs
         id="defs12" />
      <path
         id="path2999"
         d="m 3.2039589,0.00947894 c -0.641236,0.032915 -1.2124526,0.2266687 -1.6883381,0.5350843 -0.4758854,0.308414 -0.85606693,0.73173576 -1.11669603,1.21972306 -0.260629,0.4879872 -0.4033533,1.0402638 -0.39881999506,1.6118981 0.004529995,0.5716344 0.15565849506,1.1622181 0.47526049506,1.7215734 1.26703013,2.2179126 2.54598303,4.4282026 3.81870203,6.6436762 2.0927538,3.640172 4.1740323,7.288975 6.2814147,10.92102 0.347845,0.598975 0.795473,1.043148 1.326077,1.326077 0.530605,0.282928 1.144166,0.402277 1.834572,0.35229 0.61604,-0.0447 1.149517,-0.229674 1.60525,-0.538406 0.455733,-0.308731 0.834451,-0.741121 1.143284,-1.279548 3.325649,-5.797943 6.659915,-11.586402 9.990442,-17.3819047 0.404729,-0.7030038 0.564296,-1.4531665 0.458642,-2.2699499 -0.121095,-0.9293446 -0.654349,-1.7317985 -1.385899,-2.25001006 -0.731549,-0.5182098 -1.658486,-0.7507441 -2.57239,-0.5483768 -1.122365,0.2490988 -1.959798,0.95300436 -2.386271,1.85451376 -0.426475,0.9015076 -0.442962,1.9985429 0.07312,3.0343553 0.377914,0.7574557 0.553686,1.5625678 0.56832,2.5158888 -0.0098,0.112968 -0.02465,0.33064 -0.04985,0.551701 -0.16539,1.472649 -0.888857,2.7106856 -1.917659,3.5594686 -1.028802,0.848782 -2.36315,1.308858 -3.745585,1.226371 -0.976483,-0.05852 -1.829926,-0.324753 -2.565743,-0.784345 -0.735816,-0.459594 -1.352178,-1.111283 -1.851188,-1.947572 -0.689998,-1.1524366 -1.3468714,-2.3250466 -2.0173654,-3.4896746 -0.929749,-1.6164993 -1.8522349,-3.2406884 -2.79174,-4.8523108 -0.3437807,-0.5892208 -0.7764598,-1.03790876 -1.2928422,-1.33272326 -0.5163806,-0.2948137 -1.1172864,-0.4337666 -1.7946895,-0.3988194 z"
         style="fill:#000000;fill-rule:evenodd;stroke:none;stroke-width:1.70163202" />
    </svg>
    


  • @burbuja said in Changing icons with CSS / part II:

    In inkscapes options you have to change absolute to relative pathes and save changes.

    Thank you burbuja, knowing this will make my life easier.
    I am hoping that there is a css hack to make the image have more than one path to be able to have multi coloured icons on the task bar.

    Many moons ago @luetage provided on this forum a js file to create a bookmarks icon on the address bar, which displayed two icon colours correctly:

    0_1545134498788_000.png

    setTimeout(function wait(){
        toolbar = document.querySelector(".toolbar-addressbar.toolbar");
        bookmarkbar = document.querySelector(".bookmark-bar");
        morebookmarks = document.querySelector("button[title='More bookmarks']");
        if (bookmarkbar != null){
            bookmarkbar.style.width = 0;
        }
        if (toolbar !== null && bookmarkbar !== null && morebookmarks !== null){
        	morebookmarks.classList.add("button-toolbar");
            morebookmarks.id = "addbookmarks";
            bookmarkbar.remove();
            var svg = morebookmarks.firstElementChild;
            svg.setAttribute("viewBox", "0 2 34 34");
            svg.setAttribute("height", "32");
            svg.setAttribute("width", "32");
    	svg.innerHTML = '<path d="M16 32c7 0 10.91 0 13.45-2.54S32 23 32 16s0-10.9-2.55-13.44S23 0 16 0 5.09 0 2.55 2.54 0 9 0 16s0 10.9 2.55 13.44S9 32 16 32z" fill="#ef3939"></path><path d="M24.43 7.53a12 12 0 1 0 0 16.94 12 12 0 0 0 0-16.94zM23.71 13l-5.93 10.35a2 2 0 0 1-1.63 1.08 1.89 1.89 0 0 1-1.88-1C13 21.27 11.79 19.11 10.55 17l-2.27-4a2 2 0 0 1 1.62-3 1.91 1.91 0 0 1 1.83 1c.56 1 1.1 1.92 1.66 2.88.4.69.79 1.39 1.2 2.07a3.13 3.13 0 0 0 2.62 1.62 3.19 3.19 0 0 0 3.36-2.84v-.33a3.35 3.35 0 0 0-.34-1.49A2 2 0 1 1 24 11.69a2.08 2.08 0 0 1-.29 1.31z" fill="#fff"></path>';
            toolbar.appendChild(morebookmarks);
        } else {
            setTimeout(wait, 300);
        }
    }, 300);
    

    I wonder if it is possible to make a multi coloured icon for the home button for example using js if it is not possible to achieve using simple css.

    I think having the ability to design multi coloured icons would take customising Vivaldi to a new level.

    Regards
    Raed



  • @raed Sure, but for this you have to know javascript, which I dont do.



  • @raed And what about using background-color of the svg or button and changing the path to the white circle?



  • @potmeklecbohdan

    Thank you for the suggestion, I just tried it out, but it does not give the desired result.
    I hope over the holidays someone knowledgeable in java script would provide a js method which would change the address bar icons that will allow us to use more than a single colour in our icon designs.

    Regards
    Raed



  • @raed There is a way, put it there as png ...



  • @raed I'm almost sorry for posting that svg, it didn't make much sense. The icons all only have one path, therefore you can only change one path with css. And you should really go for one path, because this will ensure compatibility with Vivaldi's theme setup. If you want a squircle I would go for the svg displayed on Windows and Linux (menu), set the menu to show the horizontal lines and use that svg in the address bar. But you can also go for the "V" only: https://forum.vivaldi.net/topic/28047/vivaldi-icon.

    But yeah, if you want the full squircle with 2 colors, javascript is the only solution.



  • @burbuja said in Changing icons with CSS / part II:

    @raed There is a way, put it there as png ...

    I do not know how to do that, can you provide an example using any image you want, so I understand how to do it?

    @luetage said in Changing icons with CSS / part II:

    @raed I'm almost sorry for posting that svg, it didn't make much sense

    I am astonished you'd say that, from an end user point of view your bookmarks Vivaldi icon solution works beautifully, I still do not understand the wisdom of introducing the bookmarks bar, since it occupies valuable screen real estate, especially for those of us who do not used 65" monitors,when a simple icon on the address bar to launch bookmarks is a far more elegant way of going about it, and your solution works way better than all available bookmark extensions, if anything I am surprised that you have not turned it into an extension already.

    I checked the link you provided for your java script icon, but I was unable to modify it to display navigation icons, could you provide an example for modifying any of the home/reload/navigation icons using any image you want so I understand how to do it?

    Regards
    Raed



  • @raed You want to replace the svg icon with an image? That you can do, look at part I: https://forum.vivaldi.net/topic/16955/changing-icons-with-css



  • @luetage
    Thank you 🙂

    0_1545219183600_00.png

    /********************************************************************Home icon*******/
    
    .button-toolbar.home svg {
    	display: none;	
    }
    
    button.button-toolbar.home {
            background-image: url(data:image/png;base64,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
    );
    }
    
    

    Regards
    Raed



  • .button-toolbar.home svg {
    	display: none;	
    }
    

    no highlighting no idea why

    button.button-toolbar.home  {
            background-image: url(data:image/png;base64,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%0A6GcV/h+l9Ec9UXSGDQAAAABJRU5ErkJggg==);
    }
    


  • @burbuja
    0_1545224349412_00.png

    And for a little subversion:

    0_1545224370421_111.png

    /********************************************************************Home icon*******/
    
    .button-toolbar.home svg {
    	display: none;	
    }
    
    button.button-toolbar.home {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS41ZEdYUgAABF1JREFUSEu1VmlslFUUfbPRaWdsSZdBatc4lSmgtaVaxRrU2moLth2pGkwUKya4JYiAJCbGBWPEGI0Jwag/cPthalxqNRpKjEuQlBj3tkhSjIS4BEJUtCjz7rmeN3xlKZa2yXiTk7fde85777vvvc9M12BM1d+E1/x/jCK5YswbxPOsZ3vdmTU1xkfymynyFzHC+kJvKLNG4hIK7GAJln9S+CEi6g1nxtxqrDFrKfAH68rSUrCfqPFcMmMkryD5dkKckANF9hLdRGa+FUkDJFvFFe0fE/GERin84mFOgm2f5z59c8Eky/rHmFoS9hOpcULuWw2yXMb2TMLvhU5sdHKzzmeZYLmIs7+O5V0k2kC8JQHfAZk7E9JZLrKiSmT52cBFRUA05DLwU+Ipxqxn/C0pY1oZW0sUsz3Dk0hnUx0dnyN6iY+IL4kRYj/hiI5IVkBsRRRyQQFs02yxj9RCehZBbp8DxMIp+Mxh+v1O7CMGCfc93ydeI56mRtxwjyvZ+ICNFCEeQBzbJvUZtUVhSHdcbGcZ7N0J2PvPA7a2KFacA40ET9xOF+s4LOsp4kmORd22hdjZQQwRx8lPgIQDsE/UQ7/rUB3qVO1vVttSDLzSqHj9MsWFhap+36lxxrxwyJiYt3np7csl7uXAr+OdHYHcMQf6Tbvq3q407J0JaF5IZVU15LM2xa1x1ZD/pDhy9YwaU8b6yRlJoRjxMB1+Ynn0vDiRthLox1er/kiRPdeqfp9Um8gDIhTiNmJHm8qD5wP5M8YEXNr3kKP6FJEx4+AsZs86Og6znkI4oHJjJfDhVao7lygeX6B4+3KVd5pgk2VgBgI7F6s8VueSwon8Rmxh7LkUCXi0/210KqDYbSx3EYKCLG5dArI8DldHfaHKS43AthaV3isU33aorJ8PyQsdocjLPHc1FAl6dKe3A0efg163Ki2LqKwj0ZJSuBWmt/OSGIRCumepYmCx4voKtSH/KM9QcsoizigQodBWYUrjvvmqA/zg7zWpXTsPsqwScs9c4JPWdGLgq2tU1swDisLuou2arlAVZz+Abm7X9lbFriR0hLMf7lR+E8Bl4O6kygDrTPd0QqymeE3+agpN/emgULNcGhtCX5Pi63ZYt3VdFZANtbBbGiHPXgyX8nJlMeTROugXXNWmBqC+4BnGFnk0kxudV0pldJ9sXAB5gDdAeUSRFVBbkGWlPLLbluT8IGeErDs7iOeq3MS7r6FIJTv4LldU5tFMbvw+GxHwHUJpjupZOYqgT9g3TLgZtxM3sP4mcZB+0GwmSdCvzNZB/rgkPJrTG0myiVcJ6+448ZmfSbiJ7WbOtpAIEWG2q4k1JHeXcPoJYfkL+xayPvmTQcdyBrib152LbWwniVkMDhLHTrojY7+7uhrot5lwt/1Btpdy7PjzMJF5gX10dj8f7q5yK5jwBeWYn4gyrpmr6yNWsp3jDU9sDJhNxzM/p4DXNSVzk2FshChlfdxZMuZfthTnAeIJ9AcAAAAASUVORK5CYII=
    );
    }
    
    

    Regards
    Raed



  • @raed I have copyright for my pakman-like avatar 😛



  • I am having trouble displaying the following code correctly:

    .button-toolbar.rewind svg {
    	display: none;	
    }
    button.button-toolbar.rewind {
    background-image: url
    
    (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYA
    
    AABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZc
    
    wAAAvwAAAL8AaQnpDAAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0
    
    LjEuNWRHWFIAAAPLSURBVFhH7ZdrSFNhGMdfIvqqXSgj6EtUZJBWEGX
    
    uHrOpu1ht3SWoID91IZibulkWFYRGUprVovyQERmFYlnoNCLFTE036falcm
    
    SkaefonNvet+dd77FpFmVn1Yf+8HDOznkf/r89l4mo+x4q6qlFm8ljFIX
    
    +hrruoMqeGkRwM/JDPCTNKBc/QQmkFk1mRyKrrmq013M3BEDAPDz64Fl
    
    5aftiNTsaGX2oRougCmSo4RsAUvl0Xp/NJQnYOiRb2fHICCrwpr9+HHO3lIQi
    
    0hAA4Hh//zvmfwICzDfRNgSbwLxtHHOIwmrFQFtGcj
    
    +OX7eFpYmnT7VoxtsqhK83zhsYa3zxhop7sT2Vx/FpmMSnERxvGK7PXruB
    
    pYqn8875zv31K4m1NZHYOqTBMoeK9+i0HDWl4V9u8Dft1/D5TvlADrQju0M
    
    qbiUONspizPdWuUvzZMF3ylSvYDyYoPfVHUrijjXKhsIrQyHsnSJDdMcmx3hi
    
    NZ2exRrSrUj1V+arucMtUl
    
    +4MY3DLbJheMf3K3Wc6DNBIa7kydwHnCtxqB1hxscbZL46WxI3uErvEyrUu
    
    0bHn6tQGlm6OKLtgHnoFGaioEbhpf33LzMMC8ZdBi1fdknF0/Wk7bC5ZZtZ
    
    ujiiECdKV7vrt6oCg3G6ADWFTSDP01O4CzeVXHhlaFCI/FqZuNshzMSbJRr
    
    ckJE0dPq
    
    +nB9rTOPMHQXXvieZD8KKwpqKWwkKkXszwTWyooKxS4od8BvxclvKyKo
    
    GYFWb92n6clvlG1m6OArNRB2biSeJAdp7j17LC8ZeGMoHOWu5Ew1yL4W
    
    DdnTaO2KnsHRxRCFK8qUulzwJe+P0IeN
    
    +uX6o6qSayxu1qpLn1mfKOSxNXAkz0aZWB6+eUQ3CHyf/V2MpsbskLyNm
    
    LuiWRTlrpB1hM3GkPbHro2NmLy6atoIdHSVit0+iV2w1ncKW9UuEzxPSqJkI
    
    QXwpO5jvxMVTe3FxdAo7OiJsMRbgTNMFbDE9xFajGe492Jo2m73+dQkQlq
    
    rEYUdh6i72GIG5FiA
    
    +4KLoCrjfgs9GLcUlMxbgkwsTcJahgmSY1uDMjQdwpjGP2I0xLG1iohClR7V
    
    NZVl637XsNB17jEhBVDRAmEnxVCdAvIb7HhZH4HfCgRXrpADggaq0spSJq
    
    zzTMP1alr51LMRYYbMpDsr/Cq7pcC2EFpT81hyEi0KUZRtafgRBLMZc
    
    +NZ74Fs/ImbjDri/jS2bZrHXv6+fgaACgN0AMJd9FFc/CxFR/YcQ9E9AXA6Du
    
    Jqjl7DHf1YMovx6lmGcf3IR+gyhZ/pc81b4XwAAAABJRU5ErkJggg==
    );
    }
    

    If I use:

    button-toolbar.rewind svg {
    	display: none;	
    }
    

    I get a superimposed image on top of the original icon:
    0_1545589262755_555.png

    I am also having the same issue with the Next button, other buttons on the addressbar behave as they should when I use the same code.
    Any help in debugging greatly appreciated.

    Regards
    Raed



  • Happy New Year:
    0_1545677541546_2222222.png

    Home:

    /********************************************************************Home icon*******/
    
    .button-toolbar.home svg {
    	display: none;	
    }
    
    button.button-toolbar.home {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA3QAAAN0BcFOiBwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAT5SURBVFiFtZZdbFRVEMd/c+69u4WmQNtd2oK2lNhEJEZpKhTSCgqpqaYmykeQRHxQMGpECBBACaUagxKbCJGEQDAaQQNo8CO8AIq0fAkSpGABSYCCKFhoKW3t7nbvPT7UUrd79+72wXnanTP/+f/P3Dlzjmit+d/sRIkV7egow1GVSqh0ENP03ylm4tWu3hDTC19w5WBmU35Za6L/rlb34L2OHa3UIpXAVEFlIKABQUNXxnCgqTdc+ldAQPIu17+B1m8BAeCyhgaB8UAucFU0y6+NfvRzgBYpHWLQNV8X6OfSN0QDKp18D3lh48DZwVRrJ6GAvEv1SwW91nOXwLwt9ZtXv7s79zqtVRqNyoLgV8oTo4VGc3Lj2P/6YhDCTkPQ1cnIAfZPuX+eRqo0PRtwWsC+5o0RzW/9fTECcppy8oH0VARcLAwQNY0YX/iYd0NrzQVPATcKblwRaEtFQLC5HTNqx/g6tmjs64kxorS3AM1MW8OpVATM+e50nE93QluNg3PbHZO0Aj09wEPJyGf6hvHK4OGua93n4NYLDqG9GpzYNbNbx/VAzCnIbaorVA4XExEvSAvylDWEfOUDRzP4yeU0Hz+cUKj4wBwNxkiBdnTWT2fjjkmMAGGnkXcppw2XRhSgbkgRAembXerC73RMnEMq09TECA3Xvw7q73fpAalxSzDblxlDDuAU3YNVuwgl3ue/ZwPi2hlxyOuF5R/kKmtVpvQcsQxRvOwPsGJQjmtie9YUzI3LMXx+TwEK5Tol4iYhQHvLX5Mc5NBtbTNUDMQjcajr36shFMF8cS2RuuOun2QQ/u2Z+tTseGEuZmsdBBiWhDzG0nxEt63EOLUV/0vP4svNwbD8CIJhWji1C1rcYLEV2LzoYRzejuaPmdQ54Zns/sEHDx6lrv4ISxa/hs/nA/oqEA5HWLW6lopp5UydWhYLDHXjv3Sy3Tj87Y9Ksyq9escv8RXYtHACDseAKm3bceSupjU4TvK4NAsdjWYAVY5w7M47Myb0LvW1tZZ1gOWVp6yslLKyUrAdfB99jfXpHkJXz2NOLoFNS3h/zYpUZFui1TqgFHorUFNjAsWpoAHMvT/jr/4EdfEP7O4I4X2HMT78MlU4QDE1j5l9Aqqro0B7qmhr2/dxPr1930AEtFO9P9onAADZlSraeaAgzqdGjRiIgLtcfQLEtxg4AiBJGisytwKdldFHLgp75VxvSifa++tI1M/ieAHz32sj61o5MF26Qxu8cumRATrOfExo4yL8z1ehzn6BHnefJ790tn0mWk/PGEN55rIdd98crpMQoK2luQXI7O9X565gbd9P94zJOGNHEepqxdh9FDZ+A69Px64ocWEXnTOiyHXoeTzL5QToaXGAPSfwrd+Fb/0u7HFFhM+fJvJ3JwD+rRngIkDESPiUT3iNaZxDbv7Iq08TXjYbLAPj5AWiveQTi4luWuq+FZH451PvWqJPcPPmzQxLcRp0fMsD0hVGNTYRajiDU1ES05QxcUpFlWXlBwIFfw5IAEDbrVuPI84+SHwn3b0NE5hh+JcEcgtqE617viSGZmf/oAXPE+FlyrAavMiTCgAYlhlciOZN0JEBkStrTzC38JGkcSnksodmB9doxXigIVmwiApZvrRZwbzCJ4Ckoj17wMV8d1qbp6GlBK1LHKEkHLqdo8RoFlGNwAFtpNcGg8GOVBP+AysP1Oyz6QaBAAAAAElFTkSuQmCC
    );
    }
    

    Reload:

    /********************************************************************Reload icon*******/
    
    .button-toolbar.reload svg {
    	display: none;	
    }
    
    button.button-toolbar.reload {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAA3UAAAN1AdBso6EAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNWRHWFIAAAROSURBVFhHtZV9TBNnHMfPqdEsWTb3z7Js6xgLYTHbgjMz2UtoQnt3VaCVCUw32rsWrRQiS/yDZC8JuuzF/bE/DZtza6Eja5guy7L4kggViLBXWqAULNRCaS2oWQyYgljv2XPH70otD/R48ZN8//g9vft9fn2eu5ZaM6HuLCrY0UANXrpBdf0sUK1NNym38zTV2ZwNVzxEhtsNWH4HByXTew5RrY2IutQYpzqa98KVD4Fg+y6cuQfkcjy/iwPgNM1Rl12vwx3rCEIbqJH2PqJcTqdrfog2pxfuWjn/7LRuvk7z1VEN92cgrzzuzSq+5Xm++Izt2ImPidLUiEch7QJOR7MaWipnoqDyqRht/neCMSM54/lG5H1Bj3pUReiDjz4ni+UE3AsDtDpPQFtlCLojW2I0702Vpw7hURWjnueKEP/l12S5nDbn/ABu56/QWhkTNP8JSS4nsKNcGuCvbAN6uhs/cCS5GPeP8gAXoHVmkLp+E/72N0liOdECTjoGcYijdZ9KsmeCF9Hx0EnUOnIUdQ2a0E9DtajkCj4mcYA2ZyO0z0yEtbxBkqanP2evNMBZtRkdCDnRVLgWobBNijBaiWb9u9GMT4PO95hQTuc3VmifmUma50jC9Ay+XCoNMGIsR/fD1Ul5coixQ2h2gJWGmPHRXcit3gSK5cFPfg1JmJ6hV0pR70t6dK//8CK5nESwAgbQiMPUgWJ5JmlzKUmYHv/2fShSd4AoTs2sXzc/xIB2ArWUbQTN0kS1RhVJmJ7ebD2a/s1ClKbmXqA0uQtzQ7vfAs3y4GO4QpLKCb9dIZ1/wrf09stJBN9PDjDjZ2tAsTz4NSyIMWaBJBfjyy2RBhBCZGlqUp+DuI/9EBSZmWT54yT58I53JTnO7cRw1RRJmprEyHsLO+BjD0N7ZYhvRIzhp0RxTMujq6+WzctVRX2eHEOeMG47T5KmZi6wLznAHX/Ra9BaOf9prY9H1BW8N0sf8aqKf+l/0cDWU/WPiJ8J49WHSNKFVCV/C2YHtNekhquhT1W4rTt3T6Qrt/AkLEmgELdVGLOFyPK07R/QWeC21WHnWBdOIZRJhFHbm8JYVTxdLoxasJQGOX0GLl8dWJzl4NjoaYv+MVh6ACFszRfCVaOy/P41Dm85I8nj/fQphKyb4dKVc+6IbguW/+Hg2YOwRARFrY8K41XGu1ffuYx/+2/M+Jiv7vr25MHHqweLP8M74IAyI9MeTcPtvzXTqK9wGyytiQ12nrn+XSXzJNQZsXO6/Q6eaYBybdg5wxO4WQhKReDjcjVyrBHKtdFSVrbRzrO3vrXuVPQQNfEMjY/Lq/R6RUivn5mthXJJ7Jx6K/72AYeJ2QVL68Opg7pn8S6MZWrsMOtKHGbWBeX68gPeWgfHDIlHAkuLwDtVh98Y5f92KwXvwkWHic6HchF4gBq7mfkCyvUHC445TKweykV8b9Ztx29MC5QKoaj/AYUskG/8gZu7AAAAAElFTkSuQmCC
    );
    }
    
    
    
    /*****************************************************************Stop reload icon*******/
    
    button.button-toolbar.reload.loading svg path {
        d: path('M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z');
        transform: scale(0.068,0.068) !important;
        transform-origin: 22% 19%;
    }
    
    button.button-toolbar.reload.loading {
        fill: #800080 !important;
    }
    

    Forward and Back:

    /*******************************************************Forward and back icons*******/
    
    .button-toolbar.back svg {
    	display: none;	
    }
    
    button.button-toolbar.back {
            background-image: url(data:image/png;base64,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
    );
    }
    
    
    
    .button-toolbar.forward svg {
    	display: none;	
    }
    
    button.button-toolbar.forward {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAC+wAAAvsB9mMCTwAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS41ZEdYUgAAA8VJREFUWEftU21IVFkYPkTsX62Nagn2j7RLBmkFS5nzHWOjzsy1mimtjaAN8tdusTAf6oybLRWExkqrWU2UPzJijUKxLHI0YhXX1JwZ2T7+VA5rpGn36jjOzDm993qOTGPQ4lx3f9QDD/fc88HznOc9L/o/QP5CKSNtqHD4DqqhUwsL0oYW44coi/SgctyDHgAjI/cQGbqFmumWhUH9wFo9iDWC8BiQMMIcCd4GA63oR7pVfrh8ij0uvyLa/CjtPXGRU53S7cnrVrSGbpcXTNwVUBKRiSbGO6QEXtDt8iJR/EMmXt2VDHjoEfmAM7cX9Rfnjle3aiYSDUgm+tPGYt0z8YOJ3fSYPOgo3bYTZ3LTJLOA4MwC/OT7fOHCHzo+0cS1rrSJly0Iv21Dy+jR5FHqUxaVQeyVXvVE92GDENnIRUQjIoMmI9/g0QkunzLm7Msmhzs2kXPe1V56NHm4B2fE4295vEs11f5LDj+ZZQ4zI/9o80P1FaqY7c7mwM9dqpX0eHIQaz6uNfHNlXrhaK9qOt6EyKO9yjCs8cOa/EhwrYEE0w2Dw+m58oifbdJaRreaBHbDyc3mcLsrhz/RqQrHmxBjP+LdhC9XqAKyibsCqkIpdmDDRZ0wxBlnjUQ2cNPiO6i6pwmxmgMHZYu9sk21M7HmIs9f1/KP9+Xx0AEziWSYoh17dNGT9VvkrDlXGINWGziUK5y5pZnTYiJ/u6sWOotzpl6sM2BZa17ep97V85NhLBrXYk/35vEesdf9SswMsNjLr2f5ZRN3+9K/gNgHRYGTnerQ/bJtfAgeHTMSNBsF8S04H2ZHpZq3y1hzBuff2lWugOIxu2kFtFjLKT0/rjZPiSZCGWbiV+fgukqlX3ZxBtGE2694ykxI9CkiV87oJvv1+ti8a07c7kXYsWMddlpPs39pIQG4Zul3bzzLR48NZA8xA7OtBrHfcGhX0K3/HthZ8BW2W4PYabFhh/UBjM9jh6WKLs8C16bm4dolo2DiACtHvPi8Yyduy0pst1Rg+64jpNi6FZdwTfjUt1m4btk3+PeU9SBchGtSm0D8NYyN9BjyVOf/4GjJnk76wcFt+8BAEGu2K6HPPSB0DDgyw9TnpHaJF8Y2UpWSSo+gq6UFpoYSc7j+V2N30g9Oqr/dWgfxV2ObdR98n8E3gy7PARO/WmLua7RzX9Lp+QM7dq+ABG4Sm2U/pPEnjA8Rh6WcLr8HJt5QyvXKIh4PMPA1GDhIf+dgQcU/hs/in574lTKzgolf+q/FRVwr4fQg3rjw4gi9Aw79+lzsJbweAAAAAElFTkSuQmCC
    );
    }
    

    Unfortunately I could not get png images to display correctly for Rewind and Next buttons.

    Regards
    Raed



  • @raed Try this, I did not:

    button-toolbar.rewind svg, button-toolbar.rewind svg * {
    	display: none;	
    }
    


  • @burbuja

    Thank you for the suggestion, unfortunately it did not work, I still get both the default and the new icons superimposed on top of one another for the rewind and next buttons.
    Regards
    Raed



  • @raed I dont get, why it works with the home button n/either. ?

    0_1547052407786_378d3e1c-8df6-4906-b1da-69a865836a9d-image.png


 

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