replace/change icons



  • is it possible to change icons - i thought i had worked it out as some icons are in resources and its obviously possible to replace them in there but it does not change the displayed item - for example

    folder.png in resources is the same as the displayed icon in the bookmarks folder so i overwrote it with my own icon but nothing changed

    i then realised that the icon used in bookmarks is an svg file so obviously called from somewhere else that i cannot find

    theres calls in custom.css - for example - background-image: url(/resources/symbol-reload-dark@2x.png); but adding variations of that does not replace the folder icon in the bookmarks panel

    i can stop the folder icon displaying by adding

    /* folder icon colour and space to text */
    .vivaldi-tree .tree-row svg {
            display: none !important;
    }
    

    but is it then possible to add my own icon




  • Vivaldi Translator

    Most (all?) icons are defined through SVG elements rather than as files on the file system. The bookmark folder icon is defined like this, e.g.:

    <svg width="16" height="16" viewBox="0 0 16 16" class="folder-icon">
      <g>
        <path fill-opacity="1" d="M6.16,2.5H1.6A1.12,1.12,0,0,0,.5,3.63v8.75A1.12,1.12,0,0,0,1.6,13.5H14.4a1.12,1.12,0,0,0,1.1-1.12V5.76a1.19,1.19,0,0,0-1.1-1.23H7.76Z">
        </path>
      </g>
    </svg>
    

    And the reload button like this:

    <svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
      <path d="M20 6.20711C20 5.76166 19.4614 5.53857 19.1464 5.85355L17.2797 7.72031C16.9669 7.46165 16.632 7.22741 16.2774 7.02069C14.7393 6.12402 12.9324 5.80372 11.1799 6.1171C9.4273 6.43048 7.84336 7.35709 6.71134 8.73121C5.57932 10.1053 4.97303 11.8373 5.00092 13.6175C5.02881 15.3976 5.68905 17.1098 6.86356 18.4478C8.03807 19.7858 9.65025 20.6623 11.4118 20.9206C13.1733 21.179 14.9693 20.8022 16.4785 19.8578C17.5598 19.1812 18.4434 18.2447 19.0553 17.1439C19.0803 17.099 19.1048 17.0538 19.1288 17.0084C19.1844 16.9033 19.2376 16.7968 19.2883 16.689C19.5213 16.193 19.2261 15.6315 18.7038 15.466C18.2666 15.3274 17.81 15.5117 17.5224 15.8594C17.4823 15.9079 17.4455 15.9596 17.4125 16.014C17.3994 16.0356 17.3869 16.0576 17.375 16.0801C16.9237 16.9329 16.2535 17.6577 15.4259 18.1757C14.3159 18.8702 12.9951 19.1473 11.6997 18.9573C10.4042 18.7673 9.21861 18.1227 8.35485 17.1387C7.49109 16.1547 7.00554 14.8955 6.98503 13.5864C6.96452 12.2772 7.41039 11.0035 8.24291 9.99293C9.07542 8.98238 10.2403 8.30093 11.5291 8.07047C12.818 7.84001 14.1468 8.07556 15.278 8.73499C15.4839 8.85508 15.6809 8.9878 15.868 9.13202L13.8536 11.1464C13.5386 11.4614 13.7617 12 14.2071 12H20V6.20711Z">
      </path>
    </svg>
    

    You can override these with your own icons using a custom CSS file in which you specify the paths of the SVGs. Here's an example that turns the reload button into a square:

    .toolbar-addressbar .button-toolbar[title~=Reload] svg path {
      d: path("M0 0 m5 5 16 0 0 16 -16 0 Z");
    }


  • @luetage @Komposten - thanks will look at that - seems most things are possible - apart from bookmark item spacing - but its having the path to start down that is difficult sometimes





  • @Slim08 Or you can just look into the documentation and write your own code. The icons I've created myself were all done by drawing them on graph paper and writing down the coordinates. It's pretty fast and painless.

    eg: http://svgpocketguide.com/book/


Log in to reply
 

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