Changing icons with CSS / part II



  • @burbuja Another one:
    0_1525314623569_v-carita.png

    .application-icon svg path {
    	d: path("M 8.9015328,6.4758558 A 0.95170444,3.1556371 0 0 1 7.949828,9.6314932 0.95170444,3.1556371 0 0 1 6.9981236,6.4758558 0.95170444,3.1556371 0 0 1 7.949828,3.3202202 0.95170444,3.1556371 0 0 1 8.9015328,6.4758558 Z M 15.284281,6.4392462 A 0.95170444,3.1190264 0 0 1 14.332576,9.5582723 0.95170444,3.1190264 0 0 1 13.380872,6.4392462 0.95170444,3.1190264 0 0 1 14.332576,3.3202202 0.95170444,3.1190264 0 0 1 15.284281,6.4392462 Z M 20.178158,10.063888 C 15.264313,23.89618 6.4193927,23.745003 1.7512409,10.063888 5.4366238,25.332321 16.492774,25.332321 20.178158,10.063888 Z M 2.2736889,9.984828 A 0.52244901,0.86880792 0 0 1 1.7512401,10.853636 0.52244901,0.86880792 0 0 1 1.2287912,9.984828 0.52244901,0.86880792 0 0 1 1.7512401,9.1160193 0.52244901,0.86880792 0 0 1 2.2736889,9.984828 Z M 20.771209,9.8110651 A 0.52244901,0.86880792 0 0 1 20.24876,10.679875 0.52244901,0.86880792 0 0 1 19.726311,9.8110651 0.52244901,0.86880792 0 0 1 20.24876,8.9422589 0.52244901,0.86880792 0 0 1 20.771209,9.8110651 Z") !important;
    stroke-width: 1px;
    }
    
    .application-icon svg {
    	height: 100%;
    	width: 100%;
    }
    
    .application-icon svg path {
    	fill: #2a7fff;
    	stroke: #2a7fff;
    }
    

    Hab schon alles Mรถgliche probiert, jetzt sieht das bei mir so aus:
    @burbuja Another one:
    0_1525314623569_v-carita.png

    .application-icon svg path {
    	d: path("M 8.9015328,6.4758558 A 0.95170444,3.1556371 0 0 1 7.949828,9.6314932 0.95170444,3.1556371 0 0 1 6.9981236,6.4758558 0.95170444,3.1556371 0 0 1 7.949828,3.3202202 0.95170444,3.1556371 0 0 1 8.9015328,6.4758558 Z M 15.284281,6.4392462 A 0.95170444,3.1190264 0 0 1 14.332576,9.5582723 0.95170444,3.1190264 0 0 1 13.380872,6.4392462 0.95170444,3.1190264 0 0 1 14.332576,3.3202202 0.95170444,3.1190264 0 0 1 15.284281,6.4392462 Z M 20.178158,10.063888 C 15.264313,23.89618 6.4193927,23.745003 1.7512409,10.063888 5.4366238,25.332321 16.492774,25.332321 20.178158,10.063888 Z M 2.2736889,9.984828 A 0.52244901,0.86880792 0 0 1 1.7512401,10.853636 0.52244901,0.86880792 0 0 1 1.2287912,9.984828 0.52244901,0.86880792 0 0 1 1.7512401,9.1160193 0.52244901,0.86880792 0 0 1 2.2736889,9.984828 Z M 20.771209,9.8110651 A 0.52244901,0.86880792 0 0 1 20.24876,10.679875 0.52244901,0.86880792 0 0 1 19.726311,9.8110651 0.52244901,0.86880792 0 0 1 20.24876,8.9422589 0.52244901,0.86880792 0 0 1 20.771209,9.8110651 Z") !important;
    stroke-width: 1px;
    }
    
    .application-icon svg {
    	height: 100%;
    	width: 100%;
    }
    
    .application-icon svg path {
    	fill: #2a7fff;
    	stroke: #2a7fff;
    }

  • Moderator

    @burbuja I liked this one very much. Quite similar to Bunsenlans:

    0_1525313720873_my-better-V.png


    0_1525357501515_bunsen.png



  • @lamarca ๐Ÿ˜ฎ its a great idea! tu put the flame there, replacing the vivaldi-icon!
    Sorry, I really dont like it.


  • Moderator

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

    O its a great idea! tu put the flame there, replacing the vivaldi-icon!

    I did not think about it. It's okay for me.



  • Hi, I am trying to replace the extentions-toggle-button (3 dots), but it does not work as expacted. Could you tel me why?

    button.button-toolbar.toggle-extensions-group svg path {
    d: path("M 8.4089606,4.174856 V 29.825144 Z M 15.591039,4.174856 V 29.825144 Z");
    stroke: var(--colorFg);
    stroke-width: 2px;
    }
    

    My svg file:

    <?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"
       id="svg3014"
       version="1.1"
       viewBox="0 0 24 34"
       height="34"
       width="24">
        <path
         style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none"
         d="M 8.4089606,4.174856 V 29.825144 Z M 15.591039,4.174856 V 29.825144 Z"
         id="path3038" />
    </svg>
    

    Expected result:
    0_1527303924311_addons.png

    Actual result:
    0_1527303986803_actual result.png

    It is also good, but I would like to know why it behaves this way.



  • @burbuja I'd say you got the wrong viewbox there. The original svg is very narrow and you don't change this. The path is just two lines, why don't you make it yourself instead of using an existing oversized version?



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

    why don't you make it yourself instead of using an existing oversized version?

    Hi, I dont get you right. Sure, I put in the custom.css only the path.

    this is the viewbox from my svg-file:

     viewBox="0 0 24 34"
       height="34"
       width="24"
    

    Which is the size, which I see in the developer tool.
    The first screenshot is only zoom in.

    Edit:
    I got it now:

    button.button-toolbar.toggle-extensions-group svg path {
    d: path("M 0.667943,0.16970139 V 15.710737 Z M 3.332057,0.16970139 V 15.710737 Z");
    stroke: var(--colorFg);
    stroke-width: 1px;
    }
    

    @luetage How could I change the original viewbox? The buttons size is 24 x 34 so there is enough space ...
    Here is the result, which I wanted:
    0_1527391570501_extensions.png



  • @burbuja it's too small. The original viewbox can only be changed with javascript I'm afraid. On other buttons it doesn't really matter, but the extension toggle's viewbox is 4x16px, which is really small, especially if you want to fit something wider as in your case.

    With javascript it's easy, you just set the attribute of the svg. I don't know why this hasn't been introduced in css, would come in handy.



  • @luetage Thank you. I got it already ๐Ÿ™‚



  • Now that the extension toggle looks like it's going to be a permanent feature of my browser, I felt it needed a better icon than the "3 dots" which usually means (for better or worse) "menu", not "overflow" or "things you hid".

    .button-toolbar.toggle-extensions-group svg path {
        d: path("M 3.5178639,5.0873842 A 2.0163536,2.0163536 0 0 1 1.5015103,7.1037378 2.0163536,2.0163536 0 0 1 -0.51484333,5.0873842 2.0163536,2.0163536 0 0 1 1.5015103,3.0710306 2.0163536,2.0163536 0 0 1 3.5178639,5.0873842 Z m -1.9029832,10.6174408 4,-6.0000002 h -8 z");
    }
    

    0_1530215589986_a6336e54-0a46-44a3-891e-1b7b29e2b37a-image.png



  • @lonm Permanent because you hide many buttons and they are all in the new dropdown now? I really do hope this dropdown goes away lol. It's no problem to work around it but it's also a bad solution.



  • @luetage Yes. I hide them. Now that it functions more like firefox's overflow menu, I figured it would be easier to just get on board the train and start using it like that.



  • @lonm There is nothing to get on board. If the extension toggle is enabled, extension icons can't be hidden. If it's disabled and you hide an extension icon it shows but ceases normal functionality โ€“ shows the dropdown instead. It's really two different buttons. It's a bug. It's unintuitive and sloppy and it has to be fixed for stable. The logical thing to do is writing a different Vivaldi extensions page, should be really easy to do. Opera did it ๐Ÿ˜›



  • @lonm It looks really good, may be better then my own

    I also did not like the 3 dots which bacame "standard" as here in forum. I see now, it has practicly the same form as the autoscroll indicator. ๐Ÿ™‚



  • @igor-krupenja button.button-addressfield.addressfield-siteinfo.internal {display: none;} take it and run, this is off-topic here ๐Ÿ˜›


  • Moderator

    Antonin and I are old friends. His nick was werewolf, he just gave the code to remove the Title bar, align the Sync icon yesterday. Couple of weeks ago, the icons on the Webpanels .....

    See the Token

    antonin.th.png



  • Improved Speed Dial Folders
    I'm not a massive fan of how folders in the speed dial add a background to a thumbnail with a strange svg folder strip along the top. So I used the path-changing trick to fix it.

    From this:
    0_1533399942279_vivaldi_2018-08-04_17-20-55.png

    To this:
    0_1533399945589_vivaldi_2018-08-04_17-21-04.png

    Code:

    .dial-folder-icon {
        background: transparent;
    }
    
    .dial .folder-flap svg path{
        d: path('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');
    }
    
    .dial .thumbnail-image svg .folder-tab-color {
        fill: var(--colorBgIntense);
    }
    
    .dial .folder-flap svg{
        width: 16px !important;
        height: 16px !important;
        position: relative !important;
        transform: scale(12);
        top: 42px !important;
        left: 16px;
    }
    

    Notes:
    Depending on your thumbnails, and speed dial background image you might need to fiddle with the fill colour and positioning of the folder svg.



  • Hey guys,
    Is there a svg star (like the fav star from old Twitter, for example) that could be used for all bookmarks icons?
    Thanks! ๐Ÿ™‚





  • @luetage Thanks ๐Ÿ™‚
    Just another question, it's the first time I'm dealing with svg files, how do I change its size to fit with Vivaldi's bars?

    Thanks again for your help!


 

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