SVG and CSS based on current page
-
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!
-
Hey!
What exactly do you want to do? Like have a svg logo for one page and another type of logo for another page? -
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
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it