How to Change Logo and Background in Modern interface

Oluwatobi2 years ago

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

marvin2 years ago

try to search logo on your editor
or Go to /modern/src/

Oluwatobi2 years ago

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?

Anton Tananaev2 years ago

You need to download the source from the GitHub repository.

Alexis2 years ago

Hi, were you able to change the logo?

Oluwatobi2 years ago

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

Anton Tananaev2 years ago

You need to have "img" group in your SVG.

Oluwatobi2 years ago

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>
Anton Tananaev2 years ago

The size is massive. You should probably reduce the size.

Oluwatobi2 years ago

please whats your recommended width/height sizes

Anton Tananaev2 years ago

Check the original logo. Also if you change the size you need to update in the code as well.

Oluwatobi2 years ago

Great. Thanks its working now... there are still alot i need to read on react.

pi0072 years ago

hi @Oluwatobi pls what did you do finally it's still not working for me

Oluwatobi2 years ago

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.

ken2 years ago

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