Missing Images and CSS When Applying New Framework

[Siamese-Dream.Com]

When I apply a framework, I seem to be missing SOME of the images and SOME of the (customized) CSS.

What is the path to the css files and javascript that are used by the current framework?

Here is the store with the CORRECT CSS and Icons:

http://dev.thebuddhagarden.com/

And here is the store with the missing CSS and Icons:

http://dev2.thebuddhagarden.com/

Plus the Search icon appears as the letter j instead of a magnifying glass.

Is there an EASY and COMPREHENSIVE way to get those images and css over from one site to another?

Thanks in advance.

[satkins]

Re: Missing Images and CSS When Applying New Framework

Hello Mark,

I've seen the issue you're experiencing with the missing icons in the readytheme happen on sites that don't force www. Since you're on a development site that is a copy of your live site you should check to make sure you're not trying to force www on the development site or have any other sort of .htaccess rewrite conflict.

[Siamese-Dream.Com]

Re: Missing Images and CSS When Applying New Framework

So now my icons are missing on my production (live) site.

www.thebuddhagarden.com

I have the following fonts Suivant fonts in the httpdocs/fonts/ folder:

ElegantIcons.eot
ElegantIcons.svg
ElegantIcons.ttf
ElegantIcons.woff
Suivant.eot
Suivant.svg
Suivant.ttf
Suivant.woff

Any suggestions on what I need to do?

I should probably mention that this is the third time that I have encountered this problem. Not complaining, mind you, just thought that if others are experiencing this, then maybe something more universal is causing this (meaning, other than just me having a brain cramp).

[rajnishsi]

Re: Missing Images and CSS When Applying New Framework

Hi Mark,

Your font-files are being stopped by some rule related to query-strings in your .htaccess file, as you can view by visiting this URL : http://www.thebuddhagarden.com/fonts...t.woff?-d1oe69 and http://www.thebuddhagarden.com/fonts...nt.ttf?-d1oe69, normally it should open/download the font file, but it's saying access forbidden. Please check there as you can visit those URLs easily by going to them without query strings.

[Siamese-Dream.Com]

Re: Missing Images and CSS When Applying New Framework

Thanks for the note, rajnishi:

Can anyone help me spot what rule in my .htaccess file might be causing the problem? Here it is:

Options +FollowSymLinks

### The Following link should make the Merchant Store front the home page
DirectoryIndex index.php index.htm /mm5/merchant.mvc?

### Begin - Inserted by Miva Merchant

RewriteEngine On
RewriteCond %{QUERY_STRING} ^[^=]*$
RewriteCond %{QUERY_STRING} %2d|\- [NC]
RewriteRule .? - [F,L]
#
# fix URL with . and two spaces
RewriteRule ^(.*)\.\s\s$ /$1 [R=301,L]

# block Twenga Bot
RewriteCond %{HTTP_USER_AGENT} ^TwengaBot [OR]
RewriteCond %{HTTP_USER_AGENT} ^WWW-Mechanize
RewriteRule ^.* - [F,L]

RewriteRule ^mm5/admin.mvc? - [L]

RewriteCond %{HTTP_HOST} !^www.thebuddhagarden.com$ [NC]
RewriteRule ^(.*) http://www.thebuddhagarden.com/$1 [L,R=301]

### RewriteCond %{REQUEST_FILENAME} !-s
### RewriteRule ^product/([^/.]+).html$ /mm5/merchant.mvc?Screen=PROD&Product_code=$1 [QSA,L]

### RewriteCond %{REQUEST_FILENAME} !-s
### RewriteRule ^category/([^/.]+).html$ /mm5/merchant.mvc?Screen=CTGY&Category_code=$1 [QSA,L]

### Toolkit suggested links belwo this

RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^([^/]+)-p-([^/.]+).html$ /mm5/merchant.mvc?Screen=PROD&Product_Code=$1&Category_ Code=$2&%{QUERY_STRING}

RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^([^/.]+).html$ /mm5/merchant.mvc?Screen=TKSL&Code=$1&%{QUERY_STRING} [L]

### end tool kit suggested links

### RewriteCond %{REQUEST_FILENAME} !-s
### RewriteRule ^([^/]+)/([^/.]+).html$ /mm5/merchant.mvc?Screen=PROD&Category_code=$1&Product_ code=$2 [L]

### RewriteCond %{REQUEST_FILENAME} !-s
### RewriteRule ^([^/.]+).html$ /mm5/merchant.mvc?Screen=$1 [L]

### End - Inserted by Miva Merchant

[Siamese-Dream.Com]

Re: Missing Images and CSS When Applying New Framework

Ok, it seems to be these lines that were blocking the fonts:

RewriteCond %{QUERY_STRING} ^[^=]*$
RewriteCond %{QUERY_STRING} %2d|\- [NC]
RewriteRule .? - [F,L]

and further down:

RewriteCond %{HTTP_HOST} !^www.thebuddhagarden.com$ [NC]
RewriteRule ^(.*) http://www.thebuddhagarden.com/$1 [L,R=301]

Once I commented them out, then it worked fine at getting the fonts to show up.

However, now I am worried that since I have commented them out, it is going to break SOMETHIGN ELSE on my site...

[lesliekirk]

Re: Missing Images and CSS When Applying New Framework

I'm having the same issue but I don't have nearly the same amount of rewrites in place.

### Begin - Inserted by Miva Merchant

RewriteEngine On


RewriteRule ^mm5/admin.mvc? - [QSA,L]


RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^product/([^/.]+).html$ /mm5/merchant.mvc?Screen=PROD&Product_code=$1 [QSA,L]


RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^category/([^/.]+).html$ /mm5/merchant.mvc?Screen=CTGY&Category_code=$1 [QSA,L]


RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^product/([^/]+)/([^/.]+).html$ /mm5/merchant.mvc?Screen=PROD&Category_code=$1&Product_code=$2 [QSA,L]


RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^([^/.]+).html$ /mm5/merchant.mvc?Screen=$1 [QSA,L]


### End - Inserted by Miva Merchant

Could anything in the URI Management be causing this? It's currently set to default.

The real oddity is the icons worked perfectly before the site was flipped from the dev to live. The only difference in the .htaccess of the dev site was that the storefront was the home page.

[lesliekirk]

Re: Missing Images and CSS When Applying New Framework

I discovered the following:

Failed to load resource: the server responded with a status of 403 (Forbidden)
http://www.celebrate365.com/fonts/Suivant.woff?-d1oe69

Failed to load resource: the server responded with a status of 403 (Forbidden)
http://www.celebrate365.com/fonts/Suivant.ttf?-d1oe69

So how do I fix it?

[rajnishsi]

Re: Missing Images and CSS When Applying New Framework

I'm having the same issue but I don't have nearly the same amount of rewrites in place.

### Begin - Inserted by Miva Merchant

RewriteEngine On


RewriteRule ^mm5/admin.mvc? - [QSA,L]


RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^product/([^/.]+).html$ /mm5/merchant.mvc?Screen=PROD&Product_code=$1 [QSA,L]


RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^category/([^/.]+).html$ /mm5/merchant.mvc?Screen=CTGY&Category_code=$1 [QSA,L]


RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^product/([^/]+)/([^/.]+).html$ /mm5/merchant.mvc?Screen=PROD&Category_code=$1&Product_code=$2 [QSA,L]


RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^([^/.]+).html$ /mm5/merchant.mvc?Screen=$1 [QSA,L]


### End - Inserted by Miva Merchant

Could anything in the URI Management be causing this? It's currently set to default.

The real oddity is the icons worked perfectly before the site was flipped from the dev to live. The only difference in the .htaccess of the dev site was that the storefront was the home page.

Those rules are inserted by Miva when you go for SEO friendly URLs without URI management, this can't create that issue. There should be something down that which is causing the issue. Can you share the whole htaccess file content ?

[lesliekirk]

Re: Missing Images and CSS When Applying New Framework

That is the entire .htaccess file.

[rajnishsi]

Re: Missing Images and CSS When Applying New Framework

Hi,

If there is nothing related to that in htaccess file, there may be some server configuration which is preventing those files to be downloaded. For a quick work around, you can delete those query params in css file directly, this way you will have access to those files, and they will be cached by browser as well for later use.

In fonts.css file, you'll need to replace this block of content :

@font-face {
    font-family: 'Suivant';
    src: url('../fonts/Suivant.eot?-d1oe69');
    src: url('../fonts/Suivant.eot?#iefix-d1oe69') format('embedded-opentype'),
         url('../fonts/Suivant.woff?-d1oe69') format('woff'),
         url('../fonts/Suivant.ttf?-d1oe69') format('truetype'),
         url('../fonts/Suivant.svg?-d1oe69#Suivant') format('svg');
    font-weight: normal;
    font-style: normal;
}

With this :

@font-face {
    font-family: 'Suivant';
    src: url('../fonts/Suivant.eot');
    src: url('../fonts/Suivant.eot') format('embedded-opentype'),
         url('../fonts/Suivant.woff') format('woff'),
         url('../fonts/Suivant.ttf') format('truetype'),
         url('../fonts/Suivant.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

In this way, if you update your font files to a newer version in future, you'll need to rename them for updating instantly in all user's browsers, although I don't think this would be any issue.

[lesliekirk]

Re: Missing Images and CSS When Applying New Framework

Thanks, that did fix it. So it would seem that the

?-d1oe69

was doing the blocking. Still a mystery as to why it worked when the store was a subdomain dev.