Changing icons with CSS / part II



  • Hi, I changed the "new tab icon"witht this code:

    button.button-tabbar.newtab svg path {
    d: path("M 4.6666667e-6,0.12498045 15.875005,8.0624803 4.6666667e-6,15.99998 10.583338,8.0624803 Z");
    fill: red !important;
    }
    button.button-tabbar.newtab:hover svg path {
    	fill: green !important;
    }
    

    How can I make it a bit bigger? The original svg is only 16 x 16



  • @burbuja By changing the width, height and viewbox.



  • Original home button:

    button.button-toolbar.home svg path{
      d: path("M 13,4 2.5,14 H 6 V 22 H 20 V 14 H 23.5 L 18,9 16,7 Z M 18,20 H 15 V 15 H 11 V 20 H 8 V 11.531 L 13,6.8 18,11.531 Z");
    }
    


  • Yet another rendition of a home button.

    0_1521746394732_home.png

    button.button-toolbar.home svg path {
    	d: path('M 268.75977,1.2441406 C 254.57588,2.1500053 247.39528,16.331883 
    
    237.55078,24.435547 156.00485,106.62282 73.109684,187.49726 -7.5078125,270.58203 c -
    
    9.2620115,14.6994 7.30065213,36.69966 24.0039065,30.60938 13.871843,-4.64533 20.635951,-18.78265 
    
    31.666233,-27.33032 C 121.95653,200.06625 195.75072,126.27141 269.54492,52.476562 
    
    352.37788,134.69293 433.92472,218.2292 517.66406,299.50977 c 14.67905,9.23824 36.62879,-7.24762 
    
    30.63282,-23.93946 C 543.87819,261.97769 530.00937,255.3036 521.62613,244.54726 
    
    441.1422,164.53663 361.67355,83.47498 280.4375,4.2402344 276.94341,2.1410834 
    
    272.83301,1.0859146 268.75977,1.2441406 Z M 435.73242,23.398438 c -27.89396,1.41693 -56.10435,-
    
    1.430982 -83.92969,1.515624 -15.4982,5.100454 -18.70952,30.207624 -3.71093,37.859376 
    
    12.78719,6.897584 27.60564,1.722043 41.29297,3.380859 9.12182,0.09956 18.6302,-0.197861 
    
    27.51367,0.146484 0.6174,22.144465 -2.17573,44.664779 1.84179,66.558599 6.48101,15.24088 
    
    32.3916,15.85811 38.24219,-0.21094 5.26659,-13.6252 0.59296,-28.21262 2.07617,-42.234378 C 
    
    458.7923,72.180941 461.04295,53.50944 457.14844,35.578125 453.33023,27.657889 
    
    444.31569,23.174239 435.73242,23.398438 Z M 78.189453,270.72656 c -13.843448,-0.19754 -
    
    23.824405,15.18669 -20.800781,28.06446 0.630249,74.85844 -1.320021,149.83257 1.039062,224.61914 
    
    3.988413,12.49405 19.161364,16.71404 30.904243,14.39583 43.952363,-0.75609 88.107873,1.79645 
    
    131.933643,-1.40169 12.21047,-4.68114 15.37211,-19.79967 13.34961,-31.43555 0,-41.45117 0,-82.90234 
    
    0,-124.35352 23.29753,0 46.59506,0 69.89258,0 0.69155,47.89451 -1.72101,95.97534 1.34375,143.75196 
    
    4.62617,12.29636 19.84188,15.56641 31.52729,13.43873 43.63013,-0.7561 87.46362,1.79742 
    
    130.96685,-1.40358 12.21257,-4.68317 15.38315,-19.81073 13.33334,-31.4492 -0.55477,-69.48921 
    
    1.22533,-139.07916 -0.95638,-208.50587 -4.46531,-16.36442 -30.95182,-19.73837 -38.39649,-4.02149 -
    
    6.48761,12.74084 -1.40153,27.27508 -3.09375,40.80469 0,54.05143 0,108.10286 0,162.1543 -30.78515,0 
    
    -61.57031,0 -92.35547,0 -0.69154,-47.89451 1.72102,-95.97534 -1.34375,-143.75196 -4.62709,-12.29728 
    
    -19.84664,-15.57304 -31.53313,-13.42928 -36.16066,0.72662 -72.54131,-1.80237 -108.56452,1.42147 -
    
    12.17136,4.70993 -15.28551,19.78732 -13.28125,31.40039 0,41.45313 0,82.90625 0,124.35938 -
    
    30.7767,0 -61.55339,0 -92.330081,0 -0.463977,-69.82524 1.088871,-139.6981 -0.847657,-209.49219 -
    
    2.554439,-8.91052 -11.527829,-15.44024 -20.787109,-15.16602 z');
    transform: scale(0.037,0.037) !important;
    transform-origin: 20% 14%;
    }
    

    Regards
    raed



  • @raed great idea with the chimney



  • Alternative home-button in form of a flame of chimney.
    The idea was: home -- chimney -- flame in it.

    button.button-toolbar.home svg path{
    d: path("M 8.4493319,17.20534 C 3.7875194,5.4005603 13.868539,0.12444029 13.902412,0.10670029 14.812711,2.4808803 15.067052,2.8047003 17.322144,8.1476803 18.62605,11.23701 19.209239,14.81745 18.431242,18.03718 17.673521,21.17299 15.77664,23.63666 14.087265,25.8933 L 15.10394,18.68413 C 15.377507,16.74429 15.041565,13.38968 13.255439,11.84469 12.668738,11.33721 11.543912,11.23209 10.944808,11.56741 10.10382,12.03812 9.2811578,14.84513 8.4493319,17.20534 Z");
    fill: blue;
    }
    

    0_1521770502400_home-flame.png



  • back-button:

    button.button-toolbar.back svg path {
    d: path("M 19.477778,22.044444 17.522222,24 6.522222,13 17.522222,2 19.477778,3.9555556 10.677778,13 Z");
    }
    

    forward-button:

    button.button-toolbar.forward svg path {
    d: path("M 6.522222,22.044444 8.477778,24 19.477778,13 8.477778,2 6.522222,3.9555556 15.322222,13 Z");
    }
    

    reload-button:

    button.button-toolbar.reload svg path {
    d: path("M 20.529013,16.245264 C 19.230907,19.101096 16.375075,21.307876 13,21.307876 8.4566299,21.307876 4.6921234,17.54337 4.6921234,13 4.6921234,8.45663 8.4566299,4.6921235 13,4.6921235 15.33659,4.6921235 17.283749,5.6007975 18.841476,7.1585244 L 15.20678,11.052841 H 24.033899 V 1.9661016 L 20.788634,5.2113658 C 18.841476,3.2642073 15.985643,1.9661016 13,1.9661016 6.8989031,1.9661016 1.9661016,6.8989032 1.9661016,13 1.9661016,19.101096 6.8989031,24.033899 13,24.033899 17.932801,24.033899 22.08674,20.658824 23.514656,16.245264 Z");
    }
    

    I made all three a bit bigger:
    0_1521773331983_buttones.png



  • @raed How can I change the order of the toolbar-buttons?



  • @burbuja
    I used the following .css code kindly provided by @luetage:

    .addressfield {
    	order: 1;
    }
    .toolbar-addressbar.toolbar .toolbar {
    	order: 2;
    }
    .searchfield {
    	order: 3;
            margin-left: 5px;
    }
    .toolbar-addressbar.toolbar > .extensions-wrapper {
    	order: 4;
    }
    button.button-toolbar.home {
    	order: 1;
    }
    button.button-toolbar.back {
    	order: 2;
    }
    button.button-toolbar.rewind {
    	order: 3;
    }
    button.button-toolbar.reload {
    	order: 4;
    }
    button.button-toolbar.next {
    	order: 5;
    }
    button.button-toolbar.forward {
    	order: 6;
    }
    

    changing the order numbers changes icon position.

    Regards
    raed



  • @raed Dont I need also javascript?



  • @burbuja
    I just tried it without any js and it works on my setup.
    Regards
    raed



  • @burbuja Great, I dont. It works. 🙂 Thank you!



  • I find this order more logic:

    button.button-toolbar.back {
    	order: 1;
    }
    button.button-toolbar.rewind {
    	order: 2;
    }
    button.button-toolbar.reload {
    	order: 3;
    }
    button.button-toolbar.next {
    	order: 4;
    }
    button.button-toolbar.forward {
    	order: 5;
    }
    button.button-toolbar.home {
    	order: 6;
    }
    


  • An alternative reload icon:

    0_1521777340918_Untitled.png

    button.button-toolbar.reload svg path {
    	d: path('M202.403,95.22c0,46.312-33.237,85.002-77.109,93.484v25.663l-69.76-40l69.76-40v23.494 c27.176-7.87,47.109-32.964,47.109-62.642c0-35.962-29.258-65.22-65.22-65.22s-65.22,29.258-65.22,65.22 c0,9.686,2.068,19.001,6.148,27.688l-27.154,12.754c-5.968-12.707-8.994-26.313-8.994-40.441C11.964,42.716,54.68,0,107.184,0 S202.403,42.716,202.403,95.22z');
    transform: scale(0.09,0.09) !important;
    transform-origin: 20% 17%;
    }
    

    Regards
    raed



  • @raed Indeed, it looks better. The original arrow is too big.



  • My own reload button, inspired by you:

    button.button-toolbar.reload svg path {
    	d: path("M 4.8051075,12.752007 C 4.9616095,9.6188998 6.8053723,6.5162891 9.9437768,5.2746979 14.168552,3.6033253 19.053931,5.7190012 20.725304,9.9437763 22.396676,14.168551 20.281,19.053931 16.056225,20.725303 13.883484,21.584866 11.738591,21.456214 9.7170543,20.580762 L 11.185489,18.75127 3.4561349,18.869667 7.7599627,25.425641 8.6227394,23.107682 C 11.149659,24.201998 14.282768,24.358499 17.059048,23.260168 22.732318,21.015754 25.504583,14.614222 23.260169,8.9409529 21.015754,3.2676842 14.614222,0.49541735 8.9409529,2.739832 4.3540548,4.5544648 1.7329938,9.2209816 2.0288268,13.850338 Z");
    }
    

    0_1521777997406_buttones.png



  • My contribution to kitsch:

    0_1521798852067_Untitled.png

    button.button-toolbar.home svg path {
        d: path('M455.813,5.345c-0.99-3.301-4.093-5.498-7.546-5.336c-31.407,1.52-48.157,32.385-
    
    48.854,33.699 c-0.069,0.13-0.134,0.261-0.195,0.394l-0.004,0.01c-12.275-0.628-24.658-0.628-36.934,0l-
    
    0.005-0.01 c-0.061-0.133-0.126-0.264-0.194-0.394c-0.698-1.313-17.447-32.179-48.854-33.699c-3.437-
    
    0.163-6.556,2.035-7.546,5.336 c-3.401,11.337-
    
    1.343,28.899,0.981,41.635c1.729,9.468,5.779,26.968,9.997,32.504c0.107,0.14,0.219,0.277,0.335,0.409l7.
    
    828,8.896 c0.172,3.766,1.253,7.417,3.189,10.712c0.899,1.531,1.907,3.219,2.989,4.991l-1.29,34.835c-
    
    0.215,8.37-3.999,16.283-10.378,21.707 l-6.312,5.361c-12.871,10.938-28.392,18.599-44.885,22.153l-
    
    8.391,1.811c-11.834,2.554-22.264,9.358-29.371,19.16l-80.37,110.91 c-7.656,10.565-11.436,23.559-
    
    10.644,36.576l0.17,2.869c0.586,9.68-2.823,18.829-9.6,25.763 c-6.778,6.935-15.845,10.548-
    
    25.542,10.189l-42.597-1.6c-6.188-0.234-11.47-4.83-12.559-10.911l-0.063-0.352 c-0.816-4.574,0.675-
    
    9.209,3.995-12.406c1.254-1.21,2.587-2.491,3.937-3.787l0.495-0.476c4.985-4.795,7.073-11.692,5.584-
    
    18.449 c-1.489-6.761-6.284-12.146-12.837-14.408c-2.081-0.715-4.24-1.078-6.417-1.078c-7.507,0-
    
    14.267,4.174-17.649,10.908l-8.74,17.49 c-7.623,15.256-
    
    7.466,33.391,0.423,48.518c4.625,8.843,11.49,16.355,19.848,21.722c8.368,5.385,18.053,8.511,28.012,9.0
    
    42 l56.833,3.009c0.235,0.859,0.475,1.724,0.721,2.597c3.472,12.304,14.817,20.897,27.588,20.897h88.388 
    
    c14.16,0,25.68-11.52,25.68-25.68c0-5.112-1.487-9.997-4.253-14.164c20.744-6.657,37.178-23.757,47.403
    
    -37.101 
    
    c7.724,28.351,19.07,55.64,35.675,77.042c1.421,1.831,3.608,2.902,5.926,2.902h55c2.043,0,3.998-
    
    0.833,5.413-2.308 s2.166-3.462,2.081-5.504l-1-24c-0.144-3.456-2.632-6.364-6.023-7.042l-13.971-2.794v-
    
    62.757c0-16.522,2.604-32.862,7.741-48.564 l23.748-72.6c2.321-7.097,3.542-14.479,3.627-21.941l1.307-
    
    112.705c0.003-0.22-0.009-0.437-0.025-0.653 c2.09-3.243,4.025-6.374,5.621-9.01c1.983-3.277,3.129-
    
    7.032,3.343-10.843l7.856-8.927c0.117-0.133,0.229-0.269,0.335-0.41 c4.218-5.536,8.268-23.036,9.997-
    
    32.504C457.157,34.244,459.215,16.681,455.813,5.345z M66.618,425.061 c-7.356-0.392-14.512-2.702-
    
    20.697-6.682c-6.175-3.965-11.247-9.517-14.662-16.047c-5.667-10.867-5.78-23.903-0.301-34.869 l8.733-
    
    17.476c0.813-1.62,2.438-2.626,4.238-
    
    2.626c0.515,0,1.034,0.088,1.532,0.26c2.259,0.78,2.902,2.674,3.073,3.452 c0.171,0.776,0.383,2.761-
    
    1.331,4.409l-0.49,0.471c-1.358,1.304-2.701,2.593-3.956,3.805c-6.927,6.669-10.049,16.329-8.354,25.828 
    
    l0.063,0.356c2.325,12.986,13.578,22.773,26.762,23.273l42.6,1.6c7.591,0.283,15.078-1.226,21.885-4.281 
    
    c-1.275,1.76-2.461,3.609-3.534,5.555c-2.589,4.697-3.162,9.992-2.623,15.774L66.618,425.061z 
    
    M239.352,451.543h-18.141 c1.661-3.622,2.461-7.611,2.293-11.727c-0.14-3.442-0.946-6.69-2.28-
    
    9.633h18.128c2.853,0,5.533,1.109,7.546,3.123 
    
    c2.021,2.021,3.134,4.705,3.134,7.558C250.032,446.752,245.241,451.543,239.352,451.543z 
    
    M396.963,454.543h-6.345l-5.72-12.628 l11.635,2.327L396.963,454.543z M408.514,239.31l-23.748,72.6c-
    
    5.629,17.21-8.484,35.119-8.484,53.228v62.699l-8.556,1.63 c-1.676-4.854-4.006-11.754-5.693-17.355c-
    
    8.049-34.721-5.445-74.813-1.837-102.357c1.02-7.786,4.747-22.361,10.496-41.041 c2.112-6.865,8.354-
    
    11.761,15.531-12.184c4.135-0.243,7.29-3.792,7.046-7.927c-0.243-4.135-3.78-7.306-7.927-7.046 c-
    
    13.394,0.788-25.042,9.929-28.987,22.746c-4.236,13.766-9.589,32.488-11.032,43.504c-3.778,28.838-
    
    6.471,70.974,2.155,107.941 
    
    c0.035,0.152,0.075,0.302,0.12,0.451c3.021,10.069,7.914,23.788,8.121,24.367c1.082,3.028,3.942,4.979,7.
    
    059,4.979 c0.465,0,0.936-0.043,1.408-0.133l5.367-1.022l4.599,10.155h-20.625c-17.317-23.764-44.139-
    
    78.044-46.246-187.644 c-0.079-4.142-3.524-7.456-7.643-7.354c-4.142,0.08-7.434,3.501-
    
    7.354,7.643c0.511,26.569,2.937,64.76,11.185,103.011 c-3.303,5.158-10.01,14.811-19.116,23.797c3.896-
    
    18.436-4.186-37.956-20.851-47.955l-26.86-16.116 c-3.554-2.132-8.159-0.979-10.29,2.572c-2.131,3.552-
    
    0.979,8.159,2.572,10.29l26.86,16.116 c12.834,7.701,18.042,23.871,12.114,37.614c-4.413,10.23-
    
    14.022,17.119-25.115,18.021l-85.089,1.007 c-4.138,0.049-7.454,3.44-
    
    7.411,7.578c0.043,4.115,3.391,7.422,7.498,7.422c0.022,0,0.046,0,0.069,0l39.9-0.358 
    
    c0.033,0,0.066,0,0.099,0c5.755,0,10.432,4.482,10.667,10.245c0.12,2.933-0.934,5.714-2.967,7.832 c-
    
    2.033,2.117-4.769,3.283-7.704,3.283h-0.003h-46.878c-6.087,0-11.495-4.101-13.152-9.971c-2.999-10.63-
    
    4.572-18.48-2.499-22.241 c2.131-3.864,10.312-16.581,26.119-17.955c4.126-0.359,7.181-3.995,6.822-
    
    8.122c-0.358-4.126-3.992-7.18-8.122-6.822 c-5.064,0.44-9.969,1.753-14.569,3.809c6.406-9.037,9.619-
    
    20.083,8.942-31.266l-0.17-2.871c-0.583-9.569,2.193-19.113,7.817-26.873 l80.369-110.909c4.933-
    
    6.804,12.174-11.528,20.389-13.301l8.389-1.81c18.901-4.074,36.688-12.852,51.436-25.385l6.313-5.362 
    
    c9.627-8.185,15.335-20.123,15.66-32.748l0.392-
    
    14.998c7.599,8.625,17.224,15.06,28.083,18.724c4.227,1.427,6.081,1.719,7.565,1.719 c1.511,0,3.225-
    
    0.342,5.916-1.182c9.751-3.043,18.526-8.294,25.819-15.386l-1.081,93.265 
    
    C411.331,227.793,410.36,233.665,408.514,239.31z M432.933,70.331l-9.456,10.745c-1.37,1.557-
    
    2.035,3.613-1.835,5.677 c0.175,1.806-0.231,3.585-1.175,5.144c-2.815,4.65-8.259,13.412-
    
    13.096,19.859c-6.439,8.582-15.146,14.774-25.179,17.905 c-0.671,0.209-1.138,0.338-1.447,0.417c-0.48-
    
    0.122-1.344-0.367-2.768-0.847c-9.472-3.196-17.736-9.139-23.9-17.188 c-4.856-6.342-10.313-15.34-
    
    13.134-20.139c-0.894-1.521-1.275-3.259-1.104-5.033l0.012-0.122c0.198-2.063-0.467-4.115-1.835-5.67 l-
    
    9.456-10.745c-3.302-5.466-10.904-36.719-9.571-
    
    54.374c17.994,4.521,28.74,22.832,29.765,24.645l2.026,4.421 
    
    c1.296,2.829,4.208,4.561,7.31,4.359c15.034-0.988,30.28-0.988,45.314,0c3.113,0.202,6.013-1.531,7.31-
    
    4.359l2.03-4.431 c1.047-1.875,11.673-20.146,29.759-
    
    24.643C443.84,33.602,436.236,64.864,432.933,70.331z');
         transform: scale(0.05,0.05) !important; /*reduce/increase size of image in the virtical and horizantal planes*/
        transform-origin: 10% 7%;/*controls the position withing the image box up-down, left-right*/
    }
    
    

    I have my addressbar reduced to 28 px, if the icon does not appear centered on your set up, play around with the following two values:

    transform: scale
    
    

    and

    transform-origin:
    
    


  • @raed I remove these in inkscape svg editor



  • Would somebody know, how to change the color of focus in spatial navigation?

    Sorry I dont know where can I create a new Topic in English 😞



  • @burbuja

    I am not sure I know what you mean.
    If you mean change icon color on mouse over try this:

    .button-toolbar:hover svg {
        fill: #efefef;
        background: var(--colorBg) !important;
    }
    

    Regards
    raed


 

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