F3 changes relative URi of css files - fat-free-framework

I am a newb experimenting with F3. My sample app is basically working but references to css files get changed and result in not being found. It looks like a .htaccess problem but I can't seem to fix it.
My css files are specified as
<link rel="stylesheet" href="ui/css/base.css" type="text/css" />
<link rel="stylesheet" href="ui/css/theme.css" type="text/css" />
<link rel="stylesheet" href="lib/code.css" type="text/css" />
My .htaccess file looks like
RewriteBase /blog/
RewriteCond %{REQUEST_URI} \.ini$
RewriteRule \.ini$ - [R=404]
RewriteCond %{REQUEST_FILENAME} !-l
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* index.php [L,QSA]
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]
This is in /blog under doc root and /ui and /lib are directories in /blog
Somehow the css files get referenced as /blog/view/ui/css when accessing a route template ('view' is the route name) I don't understand why this reference gets changed. Can you help?

It's because you're referencing your CSS files relatively. Either you add a "/" like the following
<link rel="stylesheet" href="/lib/code.css" type="text/css" />
or you use F3's internal variable to determine the base path which might be better if your app is inside a subdirectory. Thus you should write the following in your template (at least if you're using the Template class)
<link rel="stylesheet" href="{{#BASE}}/lib/code.css" type="text/css" />

Related

Time gap between .favicon and all all other requests?

We're seeing a consistent pattern across speed tests on GT Metrix for a site where there is a 150-250ms gap between all resources loading and then the favicon request initializing. This is extending the fully loaded time.
Any ideas why this might be happenening?
Favicon is referenced in the head of the HTML file as follows:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
The Drupal 7 .htaccess file refers to favicon as follows:
# Pass all requests not referring directly to files in the filesystem to
# index.php. Clean URLs are handled in drupal_environment_initialize().
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !=/favicon.ico
RewriteRule ^ index.php [L]
Screenshot of waterfall (note gap between penultimate and last request):
This is because the favicon is not needed to actually render the page, only to display in the title bar, so browsers postpone downloading it.
(I'm curious myself if it can be force-loaded quicker, apparently it's not trivial at all, even with preload or http/2 push it would just be loaded twice)

Removing .html using htaccess

I'm quite new to html and I want to remove the .html , i did some research and figured out i have to edit the .htaccess.
now i have this code:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html
But when i go to www.mywebsite.com/about it shows the html text (from the html file) in my webpage.
What i see is like this: <DOCTYPEHTML!>
<head>
<title>BETA-About me</title>
<meta charset="utf-8">
etc.
How can i use the .htacces to remove the .html part without showing plain html text?

Problems with CSS while using RewriteRule on .htaccess

I'm having some trouble while using RewriteRule on my local and remote servers.
Here's the situation I'm in right now:
localhost/puntvallesgit/index.php?seccion=nosaltres
this is the actual URL
I want it to be renamed to:
localhost/puntvallesgit/nosaltres
and
localhost/puntvallesgit/nosaltres/
Both urls work, meaning, it does not give me a 404 or something like that, but, with the second one (localhost/puntvallesgit/nosaltres/) there's no CSS nor JS loading correctly.
Looking the html code, I can see that while using the rule, the url path for JS and CSS gets changed to:
localhost/puntvallesgit/nosaltres/css/styles.css
yet the code itself has this:
<link href="./css/styles.css" rel="stylesheet">
I understand that sine I'm rewritting the url, to /nosaltres ... the html code adapts to that new folder structure, but that is not the expected behaviour.
Also, while using the url without the final slash (localhost/puntvallesgit/nosaltres) it works great (under localhost).
I could use absolute paths, yet, that is not the most ideal thing to do, since then paths would change from my localhost to my remote server
Here's the htaccess rewrite i'm using:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^([^/]*)$ index.php?seccion=$1 [NC]
RewriteRule ^([^/]*)/$ index.php?seccion=$1 [NC]
</IfModule>
Some advice please?
Thanks in advance
You can add the base tag between the <head> </head> section of your site. Then your asset folders will read from the root.
<base href="/">
Also rewritecond only works for the first rewrite following it. You can condense your rule this way.
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^([^/]*)/?$ index.php?seccion=$1 [NC,L]
</IfModule>
This is not htaccess related (although your rewrite rules are not optimal), but rather a problem in the way you load your stylesheet.
When browsing to http://localhost/puntvallesgit/nosaltres/, the browser will try to load your stylesheet from ./css/styles.css which translates to http://localhost/puntvallesgit/nosaltres/css/styles.css, while your stylesheet is probably at http://localhost/puntvallesgit/css/styles.css.
You should use /puntvallesgit/css/styles.css as the source of your stylesheet instead.

Effect Permalink .htaccess to load css file

i have
localhost/ctr/index.php?page=reload
and i use htaccess to convert them into
localhost/ctr/index/reload
htaccess it is
RewriteEngine on
RewriteRule index/([a-z]+) index.php?page=$1 [NC]
This work, the page with the url of the new format appears.
but there is a problem to load the css file as follows:
link href="templates/plugin/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"
I think the css file load is influenced arrangements that I made in htaccess.
how I can resolve this.
RewriteEngine on
RewriteCond %{DOCUMENT_ROOT} !-f
RewriteRule !\.(js|ico|gif|jpg|png|css|html|swf|flv|xml)$ index.php [QSA,L]
Try this rewrite-all-url-to-index-php-except-from-serene-assets
You need to change the link to make it absolute:
link href="/templates/plugin/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"
Or you need to add the proper URI base in page header:
<base href="/">

Favicon not showing, .htaccess to blame?

I'm having problems getting a favicon to work for my website.
I've got two domains pointing to one hosting account, one points to the root and the other (the one I'm talking about here) to a folder on the root.
They both have .htaccess files to deal with 404 requests, shortening the url and redirecting favicon requests. I'm using .htaccess files because it's relatively easy to do for me (I don't have the time to be changing it to something else).
But this website, the one in a folder on the root, won't show the favicon. Everything is in place as it should be. But it just doesn't show a favicon when I go on to it.
Here's the bit of html:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Here is the .htaccess file:
ErrorDocument 404 /404.php
RewriteEngine On
RewriteCond %{HTTP_HOST} !^getfilm.co.uk$ [NC]
RewriteRule ^(.*)$ http://getfilm.co.uk/$1 [L,R=301]
<ifmodule mod_rewrite.c>
RewriteCond %{REQUEST_URI} !^/favicon\.ico [NC]
RewriteCond %{REQUEST_URI} favicon\.ico [NC]
RewriteRule (.*) http://getfilm.co.uk/favicon.ico [R=301,L]
</ifmodule>
if you write href="favicon.ico" it means, your icon is located beside your page. if your page is in other folder you need to address the folder/icon.ico