I want to embed a company logo as SVG (attached) into a Wordpress website next to the existing title and subtitle (logo position marked as "XX" in attached "screenshot"). The website uses the FameThemes OnePress theme. The website uses a transparent header section (with a blue background picture from the "hero" section) which changes to a white background when scrolling down, so the logo should change from black to yellow/orange (#dd9933).
I suspect it will be necessary to make some amendments to the SVG file (e.g. bounding box etc) as well as some implement some custom CSS to enable the colour change. Ideally, no theme customisations are required. If possible, there would be a fall back to a PNG file for none-SVG supporting browsers, however as tidy fallback to a website with no logo is fine (and potentially preferable if it requires less custom code).
I can provide the Customizer export file (see plugins below and attachment), which would allow you to reproduce the setup (Wordpress+OnePress theme+theme customisation) locally/on test website. I will not provide access to production website. I would consider creating a copy of the production website, but I would suspect this is not necessary to work out what changes are required to SVG logo file, custom CSS and potentially theme files.
Please, note that I maintain this website in my spare time/evenings. So, I might not immediately respond to messages. So, please do not expect to have a super responsive client/super quick turnaround project. I should be able to respond to all queries within 12-24h and if some testing etc is required I should be able to do this within 24-36h.
Please, let me know how much work you expect this to be (hours) and how much testing/many iterations might be required between your proposed solution and me applying it.
- Wordpress 4.9.2–de_DE
- Theme: FameThemes OnePress 2.0.2 (used as child of a very basic parent theme shell to allow overriding one of the footer text functions - this will have no impact on the task at hand)
- Plug-ins (all latest version): SVG Support(!), plus others which shouldn't have an impact on the task (WP Super Cache, WordPress HTTPS, Custom Meta Widget, Open XML Sitemaps, WP MEta SEO, WP Statistices, Customizer Export/Import, Contact Form 7, Contact Form 7 Controls, Flamingo, WP Maintenance Mode)
- (if required) edited SVG file with an explanation of what changes needed to be made
- CSS code for accurate logo placement and enabling colour change of logo and explanation where to add this/how to apply (OnePress theme already allows for custom CSS via the Customizer. IF this isn't sufficient, we can consider the use of a plug-in like "Simple Custom CSS and JS" or "WP Add Custom CSS".)
- (if required) code for theme files (NB: these should be minimal, so that these can be applied to the main theme while the child theme can be continued to be updated)