Changing icons with CSS / part II



  • Trash button with fixed transform: translate

    .button-tabbar.toggle-trash svg g path {
    	d: path('M 6 8 h14 v2 h-14 Z M 6 12 h14 v2 h-14 Z M 9 16 h8 v2 h-8 Z');
    }
    .button-tabbar.toggle-trash svg g {
    	transform: translate(0px, 0px) !important;
    }
    

    0_1503900078295_Screenshot 2017-08-28 08.00.53.png



  • @luetage said in Address Bar at very top:

    @retoree You have some nice modifications going on there. I see you're using my trash button and @sjudenim's menu button. Care to share your own creations back to the changing icons thread thread? I like what you've done with the bookmark and home buttons.

    Home button:
    0_1512050123058_f6892917-f4bb-4be8-b679-44909b0d6faf-image.png

    .button-toolbar.home svg path {
        d: path('M25 7.813l-12.5-6.25-12.5 6.25 12.5 6.25 12.5-6.25zM12.5 3.637l8.351 4.176-8.351 4.176-8.351-4.176 8.351-4.176zM22.496 11.248l2.504 1.252-12.5 6.25-12.5-6.25 2.504-1.252 9.996 4.998zM22.496 15.936l2.504 1.252-12.5 6.25-12.5-6.25 2.504-1.252 9.996 4.998z');
    }
    

    Bookmark button:
    0_1512050271017_2b718f4f-5471-4026-ad35-1e61f8e77ac3-image.png
    0_1512050323272_f80bef57-bf05-4bf5-8a26-8ffce29823e8-image.png

    .button-addressfield.bookmark svg path {
        d: path('M10.325 0.875c-1.472 0-2.738 1.197-3.325 2.447-0.587-1.25-1.854-2.447-3.325-2.447-2.029 0-3.675 1.647-3.675 3.675 0 4.127 4.163 5.209 7 9.289 2.682-4.055 7-5.294 7-9.289 0-2.029-1.647-3.675-3.675-3.675z');
    }
    .button-addressfield.bookmark.bookmarked svg .bookmark-outline {
        fill: rgb(218, 93, 93);
    }
    .button-addressfield.bookmark.bookmarked:hover svg .bookmark-outline {
        fill: rgb(234, 64, 64);
    }
    

    Also check Narsis post below for Bookmarks side panel icon.
    alt text



  • @retoree How do you make the buttons smaller? Can you send me the css?



  • A couple more alternatives...

    Vivaldi menu icon (at the top left):

    0_1511407037141_vivaldi_menu_icon_example.png

    Gets rid of the squircle background and scales it up a bit.

    #titlebar > button > span.application-icon > svg path,
    #titlebar > button > span.vivaldi-v > svg path {
        d: path('M16.42 8.64l-4.17 7.23a1.39 1.39 0 0 1-1.15.76 1.33 1.33 0 0 1-1.32-.7c-.88-1.51-1.75-3-2.62-4.54l-1.6-2.77A1.4 1.4 0 0 1 6.7 6.51a1.34 1.34 0 0 1 1.3.72l1.17 2c.28.48.55 1 .84 1.45a2.2 2.2 0 0 0 1.84 1.14 2.24 2.24 0 0 0 2.36-2v-.23a2.34 2.34 0 0 0-.24-1 1.4 1.4 0 1 1 2.62-.87 1.46 1.46 0 0 1-.17.92z');
    }
    #titlebar > button > span.application-icon > svg,
    #titlebar > button > span.vivaldi-v > svg {
    	height: 100%;
    	width: 100%;
    }
    .vivaldi {
        position: relative !important;
        top: -3px !important;
    }
    

    Bookmarks side panel icon:

    0_1511407476534_vivaldi_side_panel_bookmark_icon_example.png

    To match this because consistency is nice.

    .bookmarks svg path {
    	d: path('M10.325 0.875c-1.472 0-2.738 1.197-3.325 2.447-0.587-1.25-1.854-2.447-3.325-2.447-2.029 0-3.675 1.647-3.675 3.675 0 4.127 4.163 5.209 7 9.289 2.682-4.055 7-5.294 7-9.289 0-2.029-1.647-3.675-3.675-3.675z');
    	transform: translate(6px,8px);
    }
    

    Notes side panel icon:

    0_1511407708947_vivaldi_side_panel_notes_icon_example.png

    Makes it easier to find the panel imo.

    .notes svg path/*, .bookmarks.active svg path*/ {
    	d: path('m23.90625,3.96875c-1.04688,0 -2.09375,0.40625 -2.90625,1.21875l-15.8125,15.8125l-0.0625,0.3125l-1.09375,5.5l-0.3125,1.46875l1.46875,-0.3125l5.5,-1.09375l0.3125,-0.0625l15.8125,-15.8125c1.625,-1.625 1.625,-4.1875 0,-5.8125c-0.8125,-0.8125 -1.85938,-1.21875 -2.90625,-1.21875zm0,1.90625c0.50391,0 1.01172,0.23047 1.5,0.71875c0.97266,0.97266 0.97266,2.02734 0,3l-0.71875,0.6875l-2.96875,-2.96875l0.6875,-0.71875c0.48828,-0.48828 0.99609,-0.71875 1.5,-0.71875zm-3.59375,2.84375l2.96875,2.96875l-12.09375,12.09375c-0.65625,-1.28125 -1.6875,-2.3125 -2.96875,-2.96875l12.09375,-12.09375zm-13.375,13.71875c1.19922,0.48438 2.14063,1.42578 2.625,2.625l-3.28125,0.65625l0.65625,-3.28125z');
    	transform: scale(0.68,0.68) translate(3px,4px);
    }
    

    Depending on what other mods you use you might need to tweak the scaling and positioning a bit.



  • @Narsis Nice work on these icons!

    In other news the sync icon has been leaked on some screenshot. Can't remember where anymore. It's just the standard cloud icon. Does someone have an idea for an icon representing sync, that isn't a cloud? I've looked around and the options aren't plentiful.



  • @narsis thanks for notes, I actually have bookmark icon in panel, just forgot about it.



  • Round back/forward.
    0_1519922283047_16573c47-a477-4606-bac3-b908a7dc0894.png

    .button-toolbar.back > svg path {
      d: path('M293.004,78.525C249.64,3.436,153.62-22.295,78.531,21.061C3.436,64.411-22.296,160.443,21.068,235.542     c43.35,75.087,139.375,100.822,214.465,57.467C310.629,249.648,336.365,153.621,293.004,78.525z M219.836,265.802     c-60.075,34.685-136.894,14.114-171.576-45.969C13.57,159.762,34.155,82.936,94.232,48.253     c60.071-34.683,136.894-14.099,171.578,45.979C300.495,154.308,279.908,231.118,219.836,265.802z M211.986,141.328h-65.491     l17.599-17.603c6.124-6.129,6.124-16.076,0-22.197c-6.129-6.133-16.078-6.133-22.207,0l-44.402,44.4     c-6.129,6.131-6.129,16.078,0,22.213l44.402,44.402c6.129,6.128,16.078,6.128,22.207,0c6.124-6.131,6.124-16.077,0-22.201     l-17.606-17.601h65.499c8.669,0,15.697-7.041,15.697-15.701v-0.008C227.683,148.353,220.655,141.328,211.986,141.328z') !important;
      transform: scale(.08) !important; /*backbutton*/
    }
    .button-toolbar.forward > svg path {
      d: path('M216.545,145.893l-44.374-44.368c-6.131-6.133-16.076-6.133-22.205,0h0.008c-6.129,6.121-6.129,16.068,0,22.197     l17.589,17.603h-65.485c-8.666,0-15.701,7.033-15.701,15.701v0.008c0,8.668,7.035,15.701,15.701,15.701h65.493l-17.597,17.601     c-6.129,6.132-6.129,16.069,0,22.201c6.122,6.136,16.066,6.136,22.197,0l44.41-44.402c6.128-6.127,6.128-16.078,0-22.209     C216.57,145.909,216.554,145.9,216.545,145.893z M235.533,21.057C160.438-22.291,64.414,3.433,21.063,78.521     c-43.356,75.096-17.633,171.119,57.464,214.483c75.087,43.353,171.119,17.625,214.476-57.47     C336.364,160.443,310.62,64.408,235.533,21.057z M265.801,219.83c-34.688,60.079-111.503,80.657-171.574,45.973     C34.158,231.118,13.565,154.304,48.25,94.229C82.932,34.151,159.756,13.567,219.828,48.25     C279.899,82.934,300.485,159.763,265.801,219.83z') !important;
      transform: scale(.08) !important; /*forwardbutton*/
    }
    

    Icons made from Chris Veigt for flaticon.com



  • @raed You should be able to do this without javascript, but since you are already using js code for the button it doesn't really matter. And yeah, you can color the svg, but I would keep it like it is ā€“ the Vivaldi theme color variables assure the button is consistent over all themes you load. In any case, that's your choice. The Vivaldi icon has 2 paths, and each path has a fill for the color (egfill=blue). Just inspect the footer again and you will see how to do it.



  • @raed You need to introduce a second path for this to work. Maybe I'll take a look at it later.



  • @raed As said, without the second path it's futile. This works.

    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 0 34 34");
            svg.setAttribute("height", "34");
            svg.setAttribute("width", "34");
    	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);
    


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

    Any thoughts on changing the title bar (minimize, resize and close) icons, and on reducing the wasted screen real estate on top of the tabs?

    Glad you are happy, but any requests unrelated to changing icons are off-topic here.



  • @raed The path is the alignment. It has a starting point M which places it in the viewbox. If you change the viewbox, the path might not be centered anymore, speak: changing the viewbox misaligned your path. Try scaling like @Hadden89 instead of changing the viewbox to control the size of the path/icon. If you start to scale it might be a good idea to make the viewbox 32x32, like in the original svg on the Vivaldi Forum.



  • @raed

    You can set your address bar's height and then set the toolbar buttons to the same height.

    I have everything merged onto one bar so I'm not sure the selector, but you can try this

    .toolbar.toolbar-addressbar,
    .toolbar .button-toolbar {
        height: 36px !important;
    }

  • Moderator

    @raed .button-toolbar:hover svg {color: a-darker-color}


  • Moderator

    @raed My bad, the correct property for SVGs is different to text. It should have been fill. Try this one:

    .button-toolbar:hover svg {fill: red}
    


  • Where have I to put the CSS / SVG code in?





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

    @burbuja

    https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1

    Thank you, I just added my custom.css to browser.html. One more question: Where or how to add my custom svg?



  • @burbuja

    You add the path for the svg to your custom.css. The examples in this thread can be added directly to your custom.css file.

    If you are using an actual .svg image, you would have to place it in a folder and add a url to it in your css file, the svg path method is the better way.

    You can extract the path from most svg images with this online tool https://jakearchibald.github.io/svgomg/



  • I was able to change the V-icon using this code:

    button.vivaldi {
       background-color:  var(--colorBg);
    }
    .application-icon svg path {
         d: path("M 11.342262,2.01002 V 2.34237 C 11.342262,2.34237 11.654172,2.29656 11.841512,2.29656 13.022042,2.29656 14.014762,6.4553 15.168472,6.77727 13.692812,7.2602 12.485442,8.41387 12.485442,10.02369 12.485442,12.08962 16.563622,14.23607 16.563622,16.54347 16.563622,18.01914 15.272382,19.70895 13.987922,19.03871 8.304672,16.07314 7.580382,8.10275 8.431152,5.01726 L 5.863732,1.35152 C 5.863732,1.35152 3.6911919,5.08654 3.5350819,6.82628 3.5717921,12.34149 8.0047519,20.64849 11.546362,20.64849 14.846482,20.64849 18.280742,17.91184 18.280742,14.45074 18.280742,11.63355 14.739182,10.453 14.739182,8.36023 14.739182,7.63581 15.168432,7.23338 15.812342,6.91142 17.073372,6.91142 17.690492,6.37478 18.710032,5.83819 L 18.495392,5.3284 C 18.307582,5.46254 18.173482,5.54304 18.066162,5.56986 17.932012,5.5967 17.824672,5.62354 17.717352,5.62354 17.475882,5.62354 17.019732,4.89913 16.375802,3.42345 14.989492,1.00437 13.397032,1.07783 11.342262,2.01002 Z");
    
    }
    .application-icon svg {
       height: 100%;
       width: 100%;
    }
    
    .application-icon:hover svg path {
       fill: darkred;
       }
    

    0_1520821480283_customized.png
    thank you @luetage


Log in to reply
 

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