3 comments found

Hi! Great theme! I absolutely love it and I want to thank you so much for making such a beautifully crafted wordpress theme.

I have only one question so far…

Is there any way I can use an SVG image for my logo? I don’t like how it doesn’t look crisp and clean on mobile devices.

I look forward to your help.

Thank you!!! ~Jen


Hi Jen,

I`m very happy that you like my theme.

Regarding your question, the theme offers support for retina devices. In order to have a clean, crisp logo for the website, you need to create a version of the logo, 2 times bigger, than the original one. If your current logo is 150×40px, the new one has to be 300×80px.

Then you need to rename it like so: if the current logo is named logo.png, the retina version logo should be named logo@2x.png

Then you need to upload the retina logo on the same folder where the current logo is(very likely, inside wp-content/uploads/2014/03/).

That`s it. Now, when you`ll open the website on a mobile phone, the theme will serve the retina version of the logo(make sure to clear browser`s cache in case you don`t see the change immediately).

Because the theme is working with the width and height values of your logo and because svg files aren`t supported natively by WordPress, you can`t use an svg file for the logo at this moment.

Let me know how it goes.

Thank you! Madalin


Thanks Madalin!

It’s a bummer wordpress doesn’t support svg’s. Is there any way I can just disable the entire header part? I’m not going to use it for anything but to display my logo and I can work around that if I just removed that header. :)

Thank you so much, and thanks again for a great theme!


Hello DT,

I’m tweaking Patti like it much, but I don’t manage bringing Google Maps Widget to work on Firefox yet. The widget works on Chrome, Safari without problems. When I tested in IE I noticed that Google Map is colored and not gray-scaled. So I thought about filter in css and found out that there’s a grayscale section in functions.php. After I commented that section out Firefox is showing a colored map. Which is okay for me but why does that css line not work in Firefox:

.map-wrapper [id^="google_map_"], .portfolio li a img, .team-member img.team-avatar, .post-masonry a img, .client-item img, iframe { filter: url("http://test.naturalflowyoga.de/wp-content/themes/patti/images/grayscale.svg#greyscale"); }

Do you have any idea?

Thank you, Michael



IE is a very not-so-web-dev-friendly browser. The technology that I use for the grayscale effect is not supported by all IE versions and that`s why you see the google map colored in it.

The problem that you have is actually related to your server, which doesn`t support .svg images. If you access the URL: http://test.naturalflowyoga.de/wp-content/themes/patti/images/grayscale.svg#greyscale , you get a few lines of text, instead of an image. This means that your server interprets svg files as text, rather than as images. (Check out my url: http://demo.deliciousthemes.com/patti/wp-content/themes/patti/images/grayscale.svg#greyscale – the page is blank but it`s actually displaying the grayscale.svg file).

To fix this problem, follow the solution from this comment: http://goo.gl/CZIjjI

Let me know how it goes!

Thank you!


Hi back, thank you it works….

I added

AddType image/svg+xml .svg

to httpd.conf for making it global on the webserver.

So let’s state that Chrome and Safari recognize .svg as images without a properly set MIME-Type and Firefox doesn’t.

Well done! :-)

Hi, Great theme ! I love it . For the portfolio thumbnails on the homepage I’d just like to know how I can change the size of the title when I mousehover ? Is it possible to organise this text like for example : “Author – Composer – Musician” but on separates lines ? Many thanks Pierre



I guess you have the problem on Firefox.(in Chrome it should look ok).

This is a server-side issue. The grayscale effect uses an svg file which is not interpreted correctly by your server.

So, the grayscale effect for Firefox is generated by a line of code in style.css:

filter: url(images/grayscale.svg#greyscale); /* Firefox 4+ */

The way that servers are interpreting SVG files is “image/svg+xml”. Your server probably sees the SVG file as “text/plain”, aspect that makes it not working properly. The easiest way to fix this is through a .htaccess file.

This is a configuration file that is often hidden, so make sure to have the option for displaying hidden files active on your FTP software. If your server does not have such a file, create a file and name it ”.htaccess”. The line you should add inside .htaccess is:

AddType image/svg+xml svg

This hack should make the server see the svg file and interpret it correctly.

Let me know if it works!

Thank you! Madalin