6 comments found

Hi Madalin, I’m trying one more time to solve the issue of Service item boxes and images (Team, Portfolio, Blog) not colorizing on my mobile devices, before switching hosts. You had mentioned adding this line to my htaccess file:

AddType image/svg+xml svg

Did I do it correctly? Here is my .htaccess file:

  1. BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ – [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>
  2. END WordPress

AddType image/svg+xml svg <FilesMatch ”.(eot|ttf|otf|woff|svg)”> Header set Access-Control-Allow-Origin ”*” </FilesMatch>

OR …should the line be added before # END Wordpress?


I’ve uploaded and SVG version of the logo. It works fine on my monitor but it isn’t displaying on my mobile devices. I’ve uploaded other SVG’s in the site and they’re displaying, it just seems to be the logo.

Can you advise?





Please share with me a link to your website so I can take a look at the .svg logo.


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

T3R Purchased


I finally decided to buy Patti for my portfolio design and I must say I’m really happy with it. The level of detail and possibilities to customize are awesome, thanks for such good work (and I’ve worked with many templates so far).

However, I’m having some real trouble with the Visual Composer:

When I create a new portfolio item, the VC is missing, although it is checked as ‘visible’ in the Screen Options. I tried to uncheck and then check it again, and it worked, now I can see and use the Visual Composer. So I create the portfolio item and publish it. But, the problem is, that whenever I go back to that same project, to edit something, the VC is missing again (and again, it’s checked at the Screen Options panel).

At this point, I try the same trick as when creating the item from scratch, (uncheck->check) and the VC appears, but now it is empty. All the items I created inside, all the rows, images, everything, all the work has disappeared.

I noticed I could “save the current page as template,” but I can’t work saving every little change I make, because I will end up crazy with 20 versions of templates for every project.

The strange thing is, that when I edit one of the Demo Portfolio Items, the VC loads successfully. But it doesn’t work with any of the items I create for scratch.

I updated my WP version to 4.0 but it didn’t fix the bug.

Also, another problem I found inside the VC is that when I choose a background color for a row (inside the row edit options), it doesn’t work. And if I enter again the row edit panel, the bg color is blank as if I hadn’t done anything.

Maybe it’s all coming from the same VC trouble…?

I’d really appreciate your help to be able to continue using the theme,

Thanks!! Teresa.



Let`s start from the beginning:

The current gradient effect for the theme can be changed with a sepia effect and you can do it with a bit of CSS. Add inside Appearance->Theme Options->Styling: Custom CSS:

.portfolio li a img, .team-member img, .post-masonry a img, .client-item img, iframe{-webkit-filter: sepia(100%); -moz-filter: sepia(100%); -ms-filter: sepia(100%); -o-filter: grayscale(100%); filter: sepia(100%);  }

If you set an id for the section, then you can use that id for something else too, like so:

#about body {
    font-size: 14px !important;

It seems like the project high thumbnails are not cropped properly. What happens if you upload a bigger thumbnail?

And for the final one, please try this way: add inside the .htaccess file:

<FilesMatch ".(eot|ttf|otf|woff)">
        Header set Access-Control-Allow-Origin "*" 

AddType image/svg+xml svg
These should keep you out of trouble on the future too!

Thank you!