SVG and CSS based on current page

[stdhd]

Hi Armin,

I've read your documentation about http://laytheme.com/documentation.html#css-based-on-current-page CSS based on current page.

It works fine with site title text logo. Is there any solution for SVG logos as well? Maybe you know a solution?

Thank you!

[arminunruh]

Hey!
What exactly do you want to do? Like have a svg logo for one page and another type of logo for another page?

[stdhd]

Looking for a solution to change color of SVG logo on different pages.

Example:

---

PAGE 1

.sitetitle img svg
{
fill: #green;
}

---

PAGE 2

.id-123 .sitetitle img svg
{
fill: #red;
}

---

Is this possible?

[arminunruh]

ah
So you want to change the color of the svg. This is not easily possible. Lay theme uses this markup for showing an svg image:
<img src="http://laytheme.dev/wp-content/uploads/2016/10/Bugger_King_Logo.svg" alt="Lay  Theme">

If you open the svg with a texteditor you see the svg's markup which looks just a bit like HTML markup. If you copy that markup into "Custom HTML at top" (in "Custom html and css") you will have the svg markup directly in your website. Of course this is not the site title and you would need to position this svg by yourself using css. Example:

.your-svgs-class{
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}

Now that you got your svg markup in your website you can do things like:

svg path{
fill: blue!important;
}

Here's more info on css and svg
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS

[Wynz]

Hey Armin,
is there a better way now for this problem? Would love to change the color of my title SVG on a specific site.

[arminunruh]

Hey, SVG colors can only be changed if you insert the SVG code into your website and style the SVG with CSS. It's not possible if you just insert the SVG as an image tag like <img src=

This is just a general HTML and SVG restriction. It's nothing to do with Lay Theme specifically.