Hey there!
There’s an issue while using Newspaper Theme with tagdiv composer.
I have a problem with the color of my SVG logo in the header working with tagdiv composer.
My SVG file has two colors, but on Website it is only one color.
I exported SVG file from Adobe Illstrator, opened file in notepad++ for getting the code and added it to tagdivcomposer.
So far, everything works fine.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 29.3.1, SVG Export Plug-In . SVG Version: 9.03 Build 55982) -->
<svg version="1.1" id="PharmaNow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 634.96 130.39" style="enable-background:new 0 0 634.96 130.39;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1D1D1B;}
.st1{fill:#E20613;}
</style>
<g id="Now__x2F__x2F__x2F_">
<path class="st0" d="M486.59,63.86c-2.25-2.22-4.98-3.96-8.11-5.18c-3.13-1.22-6.57-1.85-10.24-1.85c-3.67,0-7.11,0.62-10.24,1.85
c-3.13,1.22-5.86,2.97-8.11,5.18c-2.25,2.22-4.05,4.89-5.33,7.95c-1.29,3.06-1.95,6.51-1.95,10.25c0,3.74,0.66,7.19,1.95,10.25
c1.29,3.06,3.09,5.74,5.34,7.95c2.25,2.21,4.98,3.96,8.11,5.18c3.13,1.22,6.57,1.84,10.24,1.84c3.67,0,7.11-0.62,10.24-1.84
c3.13-1.23,5.86-2.97,8.11-5.18c2.25-2.21,4.04-4.89,5.34-7.95c1.29-3.07,1.95-6.51,1.95-10.25c0-3.73-0.66-7.18-1.95-10.25
C490.63,68.75,488.84,66.08,486.59,63.86z M468.24,99.23c-2.49,0-4.76-0.45-6.76-1.33c-2-0.88-3.74-2.11-5.17-3.64
c-1.44-1.53-2.55-3.36-3.3-5.42c-0.75-2.06-1.14-4.35-1.14-6.78c0-2.43,0.38-4.72,1.14-6.78c0.75-2.06,1.86-3.88,3.3-5.42
c1.44-1.53,3.18-2.76,5.17-3.64c1.99-0.88,4.27-1.33,6.76-1.33c2.49,0,4.76,0.45,6.76,1.33c2,0.88,3.74,2.11,5.17,3.64
c1.44,1.54,2.55,3.36,3.3,5.42c0.76,2.07,1.14,4.35,1.14,6.78c0,2.43-0.38,4.71-1.14,6.78c-0.75,2.06-1.86,3.88-3.3,5.42
c-1.44,1.53-3.18,2.76-5.17,3.64C473,98.78,470.73,99.23,468.24,99.23z"/>
<polygon class="st0" points="558.38,58.04 547.85,93.8 535.64,58.04 526.8,58.04 514.78,93.8 504.15,58.04 494.63,58.04
510.23,106.08 518.88,106.08 530.63,70.25 543.87,106.08 552.2,106.08 567.7,58.04 "/>
<polygon class="st1" points="577.78,58.04 562.28,106.08 570.88,106.08 586.38,58.04 "/>
<polygon class="st1" points="596.46,58.04 580.96,106.08 589.56,106.08 605.06,58.04 "/>
<polygon class="st1" points="615.14,58.04 599.64,106.08 608.24,106.08 623.74,58.04 "/>
<polygon class="st0" points="422,93.8 409.79,58.04 400.95,58.04 383.9,105.55 383.71,106.08 393.03,106.08 404.78,70.25
418.02,106.08 426.35,106.08 441.85,58.04 432.53,58.04 "/>
</g>
<g id="Pharma">
<path class="st1" d="M110.12,34.57v29.98h0.2c1.78-4.65,7.31-7.71,13.44-7.71c12.85,0,17.79,7.12,17.79,22.24v26.98h-14.82V81.65
c0-8.99-2.67-11.76-7.71-11.76c-5.93,0-8.9,3.56-8.9,11.76v24.41H95.3V34.57H110.12z"/>
<path class="st1" d="M195.8,80.96v25.1h-13.64v-6.03h-0.2c-3.26,5.14-9.29,7.21-15.22,7.21c-8.89,0-17.1-5.14-17.1-14.82
c0-16.8,20.75-16.9,32.52-16.9c0-5.44-4.55-8.6-9.49-8.6c-4.84,0-8.89,2.17-12.06,5.73l-7.91-8.1c5.53-5.34,13.64-7.71,21.15-7.71
C190.47,56.84,195.8,65.04,195.8,80.96z M171,97.16c5.63,0,11.17-2.97,11.17-9.09v-3.06h-4.45c-4.45,0-13.84,0.69-13.84,6.92
C163.88,95.68,167.83,97.16,171,97.16z"/>
<path class="st1" d="M238.89,57.33v13.54c-2.17-0.59-4.05-0.99-6.33-0.99c-10.57,0-12.65,5.63-12.65,15.52v20.66h-14.82V58.03
h14.82v7.71h0.2c3.16-5.83,7.31-8.89,13.94-8.89C235.63,56.84,237.51,56.94,238.89,57.33z"/>
<path class="st1" d="M290.38,65.44c3.46-6.13,8.1-8.6,15.22-8.6c11.46,0,17,7.31,17,20.36v28.86h-14.82V77.89
c0-4.94-2.17-8.01-6.52-8.01c-6.13,0-8.99,4.05-8.99,10.48v25.7h-14.82V79.77c0-7.31-2.37-9.88-6.62-9.88
c-5.93,0-8.9,3.36-8.9,11.76v24.41h-14.82V58.03h14.23v6.52h0.2c2.67-4.84,8.01-7.71,14.03-7.71
C282.37,56.84,287.71,59.61,290.38,65.44z"/>
<path class="st1" d="M376.85,80.96v25.1h-13.64v-6.03h-0.2c-3.26,5.14-9.29,7.21-15.22,7.21c-8.89,0-17.1-5.14-17.1-14.82
c0-16.8,20.75-16.9,32.52-16.9c0-5.44-4.55-8.6-9.49-8.6c-4.84,0-8.89,2.17-12.06,5.73l-7.91-8.1c5.54-5.34,13.64-7.71,21.15-7.71
C371.52,56.84,376.85,65.04,376.85,80.96z M352.05,97.16c5.63,0,11.17-2.97,11.17-9.09v-3.06h-4.45c-4.45,0-13.84,0.69-13.84,6.92
C344.93,95.68,348.88,97.16,352.05,97.16z"/>
<g>
<g>
<path class="st1" d="M60.95,35.98H49.87H35.43v12.8v16.81c-10.57,1.2-22.57,5.54-22.57,19.76c0,13.15,11.21,14.95,11.21,25.26
c0,5.6-3.06,8.96-4.71,10.37c-0.26,0.22-0.05,0.64,0.28,0.57c3.05-0.67,10.87-3.98,10.87-14.74c0-8.38-6.77-10.44-6.77-19.01
c0-6.42,4.27-8.72,11.68-9.43c3.97-0.38,8.84-0.31,14.44-0.17c3.47,0.09,7.21,0.2,11.2,0.25c15.92,0.19,25.99-6.36,25.99-21.2
C87.07,42.81,77.77,35.98,60.95,35.98z M60.46,65.66c-4.25,0.06-6.8-0.18-10.59-0.35V49.06c4.64,0.01,8.31-0.02,8.31-0.02
c8.7,0,14.23,1.83,14.23,8.14C72.41,63.17,66.74,65.56,60.46,65.66z"/>
</g>
<g>
<path class="st1" d="M42.42,78.09c-0.37,0-0.73,0-1.09,0.01C41.69,78.09,42.05,78.09,42.42,78.09z"/>
<path class="st1" d="M47.3,78.14c0.2,0,0.4,0.01,0.61,0.01C47.71,78.15,47.51,78.14,47.3,78.14z"/>
<path class="st1" d="M43.42,78.09c0.24,0,0.48,0,0.73,0C43.9,78.09,43.66,78.09,43.42,78.09z"/>
<path class="st1" d="M45.3,78.1c0.23,0,0.46,0.01,0.7,0.01C45.76,78.11,45.53,78.11,45.3,78.1z"/>
<path class="st1" d="M39.47,78.13c0.35-0.01,0.71-0.02,1.07-0.03C40.17,78.11,39.82,78.12,39.47,78.13z"/>
<path class="st1" d="M35.43,78.36c0.52-0.05,1.06-0.09,1.61-0.13C36.49,78.27,35.95,78.31,35.43,78.36z"/>
<path class="st1" d="M49.82,80.32c-2.34-0.06-4.81-0.11-7.11-0.11c-2.9,0-5.15,0.09-7.07,0.27l-0.2,0.02v25.52h14.44V80.32
L49.82,80.32z"/>
<path class="st1" d="M37.63,78.21c0.37-0.02,0.74-0.04,1.12-0.05C38.36,78.17,37.99,78.19,37.63,78.21z"/>
</g>
<path class="st1" d="M33.31,48.58L33.31,48.58l0-12.65c-7.04-0.49-9.5-5.47-9.5-9.27c0-4,3.51-7.46,9.41-7.46
c4.09,0,8.13,2.55,9.85,3.36c1.95,0.93,3.84,2.34,7.92,1.95c3.63-0.34,6.95-1.4,9.84-2.8c1.89-0.91,2.51-1.75,2.69-3.05
c2.52,0.14,5.35,0.87,6.88,3.33c0.33,0.53,0.99,0.14,0.74-0.37c-0.94-1.95-2.46-2.94-4.17-3.66c-0.19-0.08-0.28-0.26-0.27-0.43
c-0.01-0.17,0.08-0.35,0.27-0.43c1.71-0.72,3.23-1.71,4.17-3.66c0.25-0.52-0.41-0.9-0.74-0.37c-1.53,2.46-4.36,3.2-6.88,3.33
c-0.19-1.27-0.82-2.1-2.68-3c-2.9-1.4-6.21-2.46-9.84-2.8c-4.08-0.39-5.7,1.23-7.86,1.23c-3.63,0-6.45-2.52-14.01-2.52
c-6.48,0-17.9,4.98-17.9,18.96C11.22,43.77,24.67,47.59,33.31,48.58z"/>
</g>
</g>
</svg>
When inserting to header, at first it has two colors (RGB: #e20613 and #000000), but after saving it apperas only in one Color (#e20613).
I also tryed to edit the SVG colors in tagdivcomposer > header logo style, but this does’t change anysthing.
I hope you can help me out with my problem!
Kind regards,
Melanie
Hello Melanie!
You can set the SVG color from the Style tab of the Header logo shortcode. The first square is for the primary color, and the second square is for the hover color. If you set the color from there, then maybe you should delete the fill color code from your SVG. Also, delete the colors set from the shortcode and let the ones from your code.
Thank you!
Dear Bettina,
unfortunatly this doesn’t work for showing the logo in two colors.
Is there any other possibilty to view the Logo as an SVG file in two colors?
I don’t want to use PNG/WEBP file, becaus of resolution issues on different devices and loading time issus.
Kind regards,
Melanie
Hello Melanie!
I’ve tested on my end, and I’ve added this SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 29.3.1, SVG Export Plug-In . SVG Version: 9.03 Build 55982) -->
<svg version="1.1" id="PharmaNow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 634.96 130.39" style="enable-background:new 0 0 634.96 130.39;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1D1D1B;}
.st1{fill:#E20613;}
</style>
<g id="Now__x2F__x2F__x2F_">
<path class="st0" d="M486.59,63.86c-2.25-2.22-4.98-3.96-8.11-5.18c-3.13-1.22-6.57-1.85-10.24-1.85c-3.67,0-7.11,0.62-10.24,1.85
c-3.13,1.22-5.86,2.97-8.11,5.18c-2.25,2.22-4.05,4.89-5.33,7.95c-1.29,3.06-1.95,6.51-1.95,10.25c0,3.74,0.66,7.19,1.95,10.25
c1.29,3.06,3.09,5.74,5.34,7.95c2.25,2.21,4.98,3.96,8.11,5.18c3.13,1.22,6.57,1.84,10.24,1.84c3.67,0,7.11-0.62,10.24-1.84
c3.13-1.23,5.86-2.97,8.11-5.18c2.25-2.21,4.04-4.89,5.34-7.95c1.29-3.07,1.95-6.51,1.95-10.25c0-3.73-0.66-7.18-1.95-10.25
C490.63,68.75,488.84,66.08,486.59,63.86z M468.24,99.23c-2.49,0-4.76-0.45-6.76-1.33c-2-0.88-3.74-2.11-5.17-3.64
c-1.44-1.53-2.55-3.36-3.3-5.42c-0.75-2.06-1.14-4.35-1.14-6.78c0-2.43,0.38-4.72,1.14-6.78c0.75-2.06,1.86-3.88,3.3-5.42
c1.44-1.53,3.18-2.76,5.17-3.64c1.99-0.88,4.27-1.33,6.76-1.33c2.49,0,4.76,0.45,6.76,1.33c2,0.88,3.74,2.11,5.17,3.64
c1.44,1.54,2.55,3.36,3.3,5.42c0.76,2.07,1.14,4.35,1.14,6.78c0,2.43-0.38,4.71-1.14,6.78c-0.75,2.06-1.86,3.88-3.3,5.42
c-1.44,1.53-3.18,2.76-5.17,3.64C473,98.78,470.73,99.23,468.24,99.23z"/>
<polygon class="st0" points="558.38,58.04 547.85,93.8 535.64,58.04 526.8,58.04 514.78,93.8 504.15,58.04 494.63,58.04
510.23,106.08 518.88,106.08 530.63,70.25 543.87,106.08 552.2,106.08 567.7,58.04 "/>
<polygon class="st1" points="577.78,58.04 562.28,106.08 570.88,106.08 586.38,58.04 "/>
<polygon class="st1" points="596.46,58.04 580.96,106.08 589.56,106.08 605.06,58.04 "/>
<polygon class="st1" points="615.14,58.04 599.64,106.08 608.24,106.08 623.74,58.04 "/>
<polygon class="st0" points="422,93.8 409.79,58.04 400.95,58.04 383.9,105.55 383.71,106.08 393.03,106.08 404.78,70.25
418.02,106.08 426.35,106.08 441.85,58.04 432.53,58.04 "/>
</g>
<g id="Pharma">
<path class="st1" d="M110.12,34.57v29.98h0.2c1.78-4.65,7.31-7.71,13.44-7.71c12.85,0,17.79,7.12,17.79,22.24v26.98h-14.82V81.65
c0-8.99-2.67-11.76-7.71-11.76c-5.93,0-8.9,3.56-8.9,11.76v24.41H95.3V34.57H110.12z"/>
<path class="st1" d="M195.8,80.96v25.1h-13.64v-6.03h-0.2c-3.26,5.14-9.29,7.21-15.22,7.21c-8.89,0-17.1-5.14-17.1-14.82
c0-16.8,20.75-16.9,32.52-16.9c0-5.44-4.55-8.6-9.49-8.6c-4.84,0-8.89,2.17-12.06,5.73l-7.91-8.1c5.53-5.34,13.64-7.71,21.15-7.71
C190.47,56.84,195.8,65.04,195.8,80.96z M171,97.16c5.63,0,11.17-2.97,11.17-9.09v-3.06h-4.45c-4.45,0-13.84,0.69-13.84,6.92
C163.88,95.68,167.83,97.16,171,97.16z"/>
<path class="st1" d="M238.89,57.33v13.54c-2.17-0.59-4.05-0.99-6.33-0.99c-10.57,0-12.65,5.63-12.65,15.52v20.66h-14.82V58.03
h14.82v7.71h0.2c3.16-5.83,7.31-8.89,13.94-8.89C235.63,56.84,237.51,56.94,238.89,57.33z"/>
<path class="st1" d="M290.38,65.44c3.46-6.13,8.1-8.6,15.22-8.6c11.46,0,17,7.31,17,20.36v28.86h-14.82V77.89
c0-4.94-2.17-8.01-6.52-8.01c-6.13,0-8.99,4.05-8.99,10.48v25.7h-14.82V79.77c0-7.31-2.37-9.88-6.62-9.88
c-5.93,0-8.9,3.36-8.9,11.76v24.41h-14.82V58.03h14.23v6.52h0.2c2.67-4.84,8.01-7.71,14.03-7.71
C282.37,56.84,287.71,59.61,290.38,65.44z"/>
<path class="st1" d="M376.85,80.96v25.1h-13.64v-6.03h-0.2c-3.26,5.14-9.29,7.21-15.22,7.21c-8.89,0-17.1-5.14-17.1-14.82
c0-16.8,20.75-16.9,32.52-16.9c0-5.44-4.55-8.6-9.49-8.6c-4.84,0-8.89,2.17-12.06,5.73l-7.91-8.1c5.54-5.34,13.64-7.71,21.15-7.71
C371.52,56.84,376.85,65.04,376.85,80.96z M352.05,97.16c5.63,0,11.17-2.97,11.17-9.09v-3.06h-4.45c-4.45,0-13.84,0.69-13.84,6.92
C344.93,95.68,348.88,97.16,352.05,97.16z"/>
<g>
<g>
<path class="st1" d="M60.95,35.98H49.87H35.43v12.8v16.81c-10.57,1.2-22.57,5.54-22.57,19.76c0,13.15,11.21,14.95,11.21,25.26
c0,5.6-3.06,8.96-4.71,10.37c-0.26,0.22-0.05,0.64,0.28,0.57c3.05-0.67,10.87-3.98,10.87-14.74c0-8.38-6.77-10.44-6.77-19.01
c0-6.42,4.27-8.72,11.68-9.43c3.97-0.38,8.84-0.31,14.44-0.17c3.47,0.09,7.21,0.2,11.2,0.25c15.92,0.19,25.99-6.36,25.99-21.2
C87.07,42.81,77.77,35.98,60.95,35.98z M60.46,65.66c-4.25,0.06-6.8-0.18-10.59-0.35V49.06c4.64,0.01,8.31-0.02,8.31-0.02
c8.7,0,14.23,1.83,14.23,8.14C72.41,63.17,66.74,65.56,60.46,65.66z"/>
</g>
<g>
<path class="st1" d="M42.42,78.09c-0.37,0-0.73,0-1.09,0.01C41.69,78.09,42.05,78.09,42.42,78.09z"/>
<path class="st1" d="M47.3,78.14c0.2,0,0.4,0.01,0.61,0.01C47.71,78.15,47.51,78.14,47.3,78.14z"/>
<path class="st1" d="M43.42,78.09c0.24,0,0.48,0,0.73,0C43.9,78.09,43.66,78.09,43.42,78.09z"/>
<path class="st1" d="M45.3,78.1c0.23,0,0.46,0.01,0.7,0.01C45.76,78.11,45.53,78.11,45.3,78.1z"/>
<path class="st1" d="M39.47,78.13c0.35-0.01,0.71-0.02,1.07-0.03C40.17,78.11,39.82,78.12,39.47,78.13z"/>
<path class="st1" d="M35.43,78.36c0.52-0.05,1.06-0.09,1.61-0.13C36.49,78.27,35.95,78.31,35.43,78.36z"/>
<path class="st1" d="M49.82,80.32c-2.34-0.06-4.81-0.11-7.11-0.11c-2.9,0-5.15,0.09-7.07,0.27l-0.2,0.02v25.52h14.44V80.32
L49.82,80.32z"/>
<path class="st1" d="M37.63,78.21c0.37-0.02,0.74-0.04,1.12-0.05C38.36,78.17,37.99,78.19,37.63,78.21z"/>
</g>
<path class="st1" d="M33.31,48.58L33.31,48.58l0-12.65c-7.04-0.49-9.5-5.47-9.5-9.27c0-4,3.51-7.46,9.41-7.46
c4.09,0,8.13,2.55,9.85,3.36c1.95,0.93,3.84,2.34,7.92,1.95c3.63-0.34,6.95-1.4,9.84-2.8c1.89-0.91,2.51-1.75,2.69-3.05
c2.52,0.14,5.35,0.87,6.88,3.33c0.33,0.53,0.99,0.14,0.74-0.37c-0.94-1.95-2.46-2.94-4.17-3.66c-0.19-0.08-0.28-0.26-0.27-0.43
c-0.01-0.17,0.08-0.35,0.27-0.43c1.71-0.72,3.23-1.71,4.17-3.66c0.25-0.52-0.41-0.9-0.74-0.37c-1.53,2.46-4.36,3.2-6.88,3.33
c-0.19-1.27-0.82-2.1-2.68-3c-2.9-1.4-6.21-2.46-9.84-2.8c-4.08-0.39-5.7,1.23-7.86,1.23c-3.63,0-6.45-2.52-14.01-2.52
c-6.48,0-17.9,4.98-17.9,18.96C11.22,43.77,24.67,47.59,33.31,48.58z"/>
</g>
</g>
</svg>
I saved it, which displayed like this on my end: https://app.screencast.com/z0qPMDN98CRJk. So, it should work well for you, too. Make sure your save button from Composer works.
If not, please delete the tagdiv Composer, clear the cache, install it, and activate it.
Thank you!
