How to Change Logo and Background in Modern interface
try to search logo on your editor
or Go to /modern/src/
HI Marvin, i cant find src folder in my modern file. the only files i can find in modern is static, style.css,service-worker.js.map,service-worker.js,manifest.json,logo512,logo192,index,favicon.ico,asset-manifest.json.
Where am i not doing right?
You need to download the source from the GitHub repository.
Hi, were you able to change the logo?
Hi Alexis.
No I wasn’t able to change it. None of the svg files I uploaded were valid. I either get errors or the new svg file will not load in the logo
You need to have "img" group in your SVG.
Hi Anton, I did.
here is my svg file
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="63.5mm" height="20.32mm" version="1.0" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 6350 2032"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="img">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<circle fill="none" stroke="#336699" stroke-width="50.8" stroke-miterlimit="22.9256" cx="728.76" cy="1190.78" r="480.66"/>
<circle fill="none" stroke="#000066" stroke-width="33.87" stroke-miterlimit="22.9256" cx="728.76" cy="1190.78" r="325.18"/>
<circle fill="none" stroke="#003399" stroke-width="25.4" stroke-miterlimit="22.9256" cx="728.76" cy="1190.78" r="191.66"/>
<circle fill="#00CCFF" stroke="#000066" stroke-width="20" stroke-miterlimit="22.9256" cx="728.76" cy="1190.78" r="46.13"/>
<path fill="#000066" d="M1132.6 343.49c-1.59,-2.62 -3.09,-5.08 -4.48,-7.4 -18.64,-30.95 -21.52,-37.09 -54.41,-67.51 -23.9,-22.1 -57.56,-50.45 -63.68,-53.83 -36.21,-20.02 -60.08,-31.72 -94.86,-44.02 -19.46,-6.89 -46.51,-13.06 -58.63,-17.14 -47.45,-16 -126.16,-20.32 -265.64,-1.75 -99.67,13.26 -182.82,92.84 -188.97,96.47 -30.98,18.33 -107.44,93.1 -123.75,187.1 -5.92,35.41 11.12,65.49 68.39,143.37l382.45 648.34 383.4 -678.78 34.32 -75.06c20.71,-67.96 19.56,-74.38 -14.14,-129.79z"/>
<circle fill="white" cx="714.37" cy="450.67" r="209.46"/>
<path fill="#003399" fill-rule="nonzero" d="M1608.83 867.26l0 142.32 124.72 0c24.94,0 43.29,-2.93 55.76,-8.8 22.01,-10.27 33.01,-30.08 33.01,-59.42 0,-32.28 -10.27,-53.56 -31.55,-64.56 -12.47,-6.61 -30.07,-9.54 -54.28,-9.54l-127.66 0zm151.13 -91.7c36.68,0.73 65.29,5.87 85.1,13.94 19.81,8.07 36.68,20.54 50.62,36.68 11.74,13.2 20.54,27.87 27.15,44.75 6.6,16.14 10.27,34.48 10.27,55.02 0,25.68 -6.6,49.89 -19.08,74.1 -12.47,24.21 -33.74,41.81 -62.35,51.35 24.21,9.54 41.08,23.48 51.35,41.82 10.27,18.34 15.41,45.48 15.41,82.9l0 35.21c0,24.21 0.73,40.35 2.93,49.16 2.93,13.93 9.54,23.47 19.81,30.07l0 13.21 -121.05 0c-3.67,-11.74 -5.87,-21.28 -7.34,-28.61 -2.93,-14.67 -4.4,-30.08 -4.4,-45.49l-0.73 -48.42c-0.74,-33.74 -6.6,-56.49 -19.08,-67.49 -11.73,-11 -33.74,-16.87 -66.02,-16.87l-113.72 0 0 206.88 -107.84 0 0 -528.21 258.97 0z"/>
<path id="1" fill="#003399" fill-rule="nonzero" d="M2195.12 1231.87c30.08,0 52.82,-11 68.23,-32.28 16.14,-21.27 24.21,-51.35 24.21,-90.23 0,-38.88 -8.07,-68.96 -24.21,-90.24 -15.41,-21.27 -38.15,-32.28 -68.23,-32.28 -30.08,0 -52.82,11.01 -68.96,32.28 -16.14,21.28 -24.21,51.36 -24.21,90.24 0,38.88 8.07,68.96 24.21,90.23 16.14,21.28 38.88,32.28 68.96,32.28zm199.55 -122.51c0,57.22 -16.14,106.37 -49.15,146.72 -33.02,41.09 -83.64,61.63 -150.4,61.63 -66.76,0 -116.64,-20.54 -149.66,-61.63 -33.01,-40.35 -49.88,-89.5 -49.88,-146.72 0,-56.49 16.87,-104.91 49.88,-146.73 33.02,-41.08 82.9,-61.62 149.66,-61.62 66.76,0 117.38,20.54 150.4,61.62 33.01,41.82 49.15,90.24 49.15,146.73z"/>
<path id="2" fill="#003399" fill-rule="nonzero" d="M2572.83 866.53l-103.45 0 0 -93.91 103.45 0 0 93.91zm-103.45 46.95l103.45 0 0 390.29 -103.45 0 0 -390.29z"/>
<path id="3" fill="#003399" fill-rule="nonzero" d="M2825.68 986.84c-23.48,0 -41.82,7.34 -55.02,22.74 -13.21,14.68 -21.28,34.48 -24.21,60.16l158.46 0c-2.2,-27.14 -10.27,-47.68 -24.94,-61.62 -14.68,-13.94 -33.02,-21.28 -54.29,-21.28zm0 -83.63c32.28,0 61.62,5.87 88.03,18.34 25.68,11.74 46.96,30.81 63.83,57.22 15.41,22.74 25.68,49.89 30.08,80.7 2.2,18.34 3.67,44.02 2.93,77.03l-267.04 0c1.47,39.62 13.94,67.5 36.68,82.9 13.94,9.54 31.55,14.68 51.36,14.68 21.27,0 38.15,-5.87 51.35,-18.35 6.6,-6.6 13.21,-15.4 18.34,-26.41l104.91 0c-2.93,22.75 -15.41,46.22 -36.68,70.43 -33.01,38.15 -79.97,57.23 -140.12,57.23 -49.89,0 -93.91,-16.14 -131.32,-48.42 -38.15,-31.55 -57.23,-83.64 -57.23,-156.27 0,-67.49 16.88,-119.58 51.36,-155.53 34.48,-35.94 78.5,-53.55 133.52,-53.55z"/>
<line fill="none" stroke="#000066" stroke-width="25.4" stroke-miterlimit="22.9256" x1="4237.89" y1="1381.04" x2="5900.35" y2= "1381.04" />
<polygon fill="#000066" fill-rule="nonzero" points="3405.43,784.68 3405.43,878.58 3247.7,878.58 3247.7,1312.89 3136.19,1312.89 3136.19,878.58 2977.73,878.58 2977.73,784.68 "/>
<path id="1" fill="#000066" fill-rule="nonzero" d="M3633.6 913.06c2.2,0 3.66,0 5.13,0 0.73,0.74 3.67,0.74 8.8,0.74l0 104.9c-6.6,-0.73 -12.47,-1.46 -17.6,-1.46 -5.14,-0.74 -8.81,-0.74 -11.74,-0.74 -41.08,0 -68.96,13.21 -82.9,40.35 -8.07,15.41 -11.74,38.15 -11.74,69.7l0 186.34 -103.44 0 0 -390.29 97.57 0 0 68.23c16.14,-26.41 30.08,-44.02 41.08,-53.56 19.81,-16.14 44.76,-24.21 74.84,-24.21z"/>
<path id="2" fill="#000066" fill-rule="nonzero" d="M3921.91 1122.88c-6.6,4.4 -12.47,8.07 -19.07,10.27 -6.61,2.2 -16.14,4.4 -27.15,6.6l-22.74 4.41c-21.28,3.66 -36.68,8.8 -46.22,13.93 -16.14,9.54 -24.21,23.48 -24.21,43.29 0,17.61 5.14,30.08 14.67,38.15 9.54,8.07 21.28,11.74 35.22,11.74 22.01,0 42.55,-6.61 60.89,-19.81 18.34,-12.47 27.88,-35.95 28.61,-70.43l0 -38.15zm-61.63 -47.69c19.08,-2.2 32.28,-5.13 40.35,-8.8 14.68,-6.6 22.01,-16.14 22.01,-28.61 0,-16.14 -5.87,-27.15 -16.87,-33.75 -11,-5.87 -27.14,-8.8 -48.42,-8.8 -24.21,0 -41.82,5.87 -51.35,17.61 -7.34,8.8 -12.48,20.54 -14.68,35.94l-98.3 0c2.2,-34.48 11.74,-62.36 28.61,-84.36 27.14,-34.48 73.36,-51.36 138.65,-51.36 43.29,0 81.44,8.81 114.45,25.68 33.01,16.87 49.89,48.42 49.89,96.1l0 179.01c0,12.47 0,27.14 0.73,44.75 0.73,13.94 2.2,22.74 5.87,27.15 3.67,5.13 8.07,8.8 14.67,11.73l0 15.41 -110.78 0c-2.93,-8.07 -5.13,-15.41 -6.6,-22.01 -0.73,-6.6 -2.2,-14.67 -2.93,-24.21 -13.94,15.41 -30.08,28.61 -48.42,39.62 -22.01,12.47 -46.95,19.07 -74.83,19.07 -35.22,0 -64.56,-10.27 -87.3,-30.81 -22.75,-19.81 -34.48,-48.42 -34.48,-85.84 0,-47.68 18.34,-82.9 55.02,-104.17 20.54,-11.74 50.62,-19.81 90.23,-24.94l34.48 -4.41z"/>
<path id="3" fill="#000066" fill-rule="nonzero" d="M4348.15 1062.72c-2.2,-14.67 -6.6,-27.88 -14.67,-39.61 -11.74,-15.41 -29.35,-23.48 -53.56,-23.48 -34.48,0 -57.95,16.87 -70.43,51.35 -6.6,18.34 -10.27,41.82 -10.27,71.9 0,28.61 3.67,52.09 10.27,68.96 12.48,33.01 35.22,49.15 68.97,49.15 23.47,0 40.35,-6.6 50.62,-19.8 9.53,-12.48 16.14,-29.35 18.34,-49.89l104.17 0c-2.2,31.55 -13.94,60.89 -33.74,88.04 -31.55,44.75 -79.24,67.49 -142.33,67.49 -62.36,0 -108.58,-19.08 -138.66,-56.49 -29.34,-37.42 -44.01,-85.1 -44.01,-144.53 0,-67.49 16.14,-119.58 49.15,-156.99 32.28,-37.42 77.03,-55.76 134.99,-55.76 49.15,0 88.77,11.01 120.31,33.02 31.55,22 49.89,60.89 55.03,116.64l-104.18 0z"/>
<polygon id="4" fill="#000066" fill-rule="nonzero" points="4521.29,786.88 4621.8,786.88 4621.8,1070.79 4749.45,924.07 4875.63,924.07 4739.18,1073.73 4880.77,1312.89 4757.52,1312.89 4664.35,1145.62 4621.8,1190.37 4621.8,1312.89 4521.29,1312.89 "/>
<path id="5" fill="#000066" fill-rule="nonzero" d="M5084.72 995.96c-23.48,0 -41.82,7.34 -55.02,22.74 -13.21,14.68 -21.28,34.48 -24.21,60.16l158.46 0c-2.2,-27.14 -10.27,-47.68 -24.94,-61.62 -14.68,-13.94 -33.02,-21.28 -54.29,-21.28zm0 -83.63c32.28,0 61.62,5.87 88.03,18.34 25.68,11.74 46.96,30.81 63.83,57.22 15.41,22.74 25.68,49.89 30.08,80.7 2.2,18.34 3.67,44.02 2.93,77.03l-267.04 0c1.47,39.62 13.94,67.5 36.68,82.9 13.94,9.54 31.55,14.68 51.36,14.68 21.27,0 38.15,-5.87 51.35,-18.35 6.6,-6.6 13.21,-15.4 18.34,-26.41l104.91 0c-2.93,22.75 -15.41,46.22 -36.68,70.43 -33.01,38.15 -79.97,57.23 -140.12,57.23 -49.89,0 -93.91,-16.14 -131.32,-48.42 -38.15,-31.55 -57.23,-83.64 -57.23,-156.27 0,-67.49 16.88,-119.58 51.36,-155.53 34.48,-35.94 78.5,-53.55 133.52,-53.55z"/>
<path id="6" fill="#000066" fill-rule="nonzero" d="M5550.58 913.06c2.2,0 3.66,0 5.13,0 0.73,0.74 3.67,0.74 8.8,0.74l0 104.9c-6.6,-0.73 -12.47,-1.46 -17.6,-1.46 -5.14,-0.74 -8.81,-0.74 -11.74,-0.74 -41.08,0 -68.96,13.21 -82.9,40.35 -8.07,15.41 -11.74,38.15 -11.74,69.7l0 186.34 -103.44 0 0 -390.29 97.57 0 0 68.23c16.14,-26.41 30.08,-44.02 41.08,-53.56 19.81,-16.14 44.76,-24.21 74.84,-24.21z"/>
<path id="7" fill="#000066" fill-rule="nonzero" d="M5703.17 1188.17c2.2,18.34 7.33,30.82 13.94,38.89 12.47,13.93 35.94,20.54 70.43,20.54 19.8,0 35.94,-2.94 47.68,-9.54 11.74,-5.87 17.61,-14.67 17.61,-26.41 0,-11.74 -4.4,-20.54 -13.94,-26.41 -9.54,-5.87 -45.49,-16.14 -106.38,-30.81 -44.01,-11.01 -75.56,-24.21 -93.9,-41.09 -18.34,-16.14 -27.15,-39.61 -27.15,-70.43 0,-35.94 13.94,-66.76 42.55,-92.43 28.62,-25.68 68.23,-38.89 119.59,-38.89 49.15,0 88.77,9.54 118.84,28.62 30.82,19.8 48.42,53.55 52.83,101.24l-101.98 0c-1.47,-13.21 -5.13,-23.48 -11,-31.55 -11.01,-13.94 -30.08,-20.54 -57.23,-20.54 -22.01,0 -38.15,3.67 -47.68,10.27 -9.54,6.6 -13.94,14.67 -13.94,24.21 0,11.74 5.13,20.54 15.41,25.68 9.53,5.13 45.48,14.67 106.37,28.61 40.35,9.54 71.16,23.47 90.97,43.28 19.81,19.81 30.08,44.02 30.08,73.37 0,38.88 -14.67,70.42 -43.28,94.63 -28.62,24.21 -73.37,36.69 -133.52,36.69 -60.9,0 -106.38,-13.21 -135.73,-38.89 -29.34,-25.67 -44.01,-58.69 -44.01,-99.04l103.44 0z"/>
<line fill="none" stroke="#000066" stroke-width="25.4" stroke-miterlimit="22.9256" x1="3907.14" y1="1459.36" x2="5900.35" y2= "1459.36" />
<line fill="none" stroke="#000066" stroke-width="25.4" stroke-miterlimit="22.9256" x1="3594.04" y1="1533.27" x2="5900.35" y2= "1533.27" />
</g>
</g>
</svg>The size is massive. You should probably reduce the size.
please whats your recommended width/height sizes
Check the original logo. Also if you change the size you need to update in the code as well.
Great. Thanks its working now... there are still alot i need to read on react.
hi @Oluwatobi pls what did you do finally it's still not working for me
yes. i have.
steps would be,
clone traccar-web from git on visual studio
run the whole react code and start npm
navigate to src> resource>images>logo.svg and replace it with yours
ensure the svg file is wrapped around a <g id="img">
also ensure the image viewbox is within 0 0 400 20 (not sure of the exact size)
all this can be set when svg file is opened with visual studio.
Hi I cloned traccar-web from git on visual studio changed logo.svg with custom same size logo but i am stuck now what do i have to do to compile? How do i run npm form where.
Thanks
HI, I know this sounds cliche, but i am completely naive to React. i would like to simply change the logo of traccar in modern app, and also some background colors, or add some background image to my login. Please who can point me in the right direction.
Thanks