Set CSS Path As Absolute?

I Need Help
1

I have a head scratcher over here that I suspect one of you fine folks have likely already run into and solved.

Synopsis

Is there a way to set the CSS in Blocs to be absolute instead of relative?

For example instead of:

<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css?5691">

…use this instead (.. removed):

<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css?5691">

Background

I’ve created a 404 in Blocs and in nginx have set things up to point to it. Everything works great except once I start going into subfolders in my site hierarchy. For example something like:

https://mysite.com/support/somethingThatDoesNotExist

…comes back with the 404 file being loaded but due to the internal CSS being relative, the style sheets never load. I could of course do a rewrite in nginx but I’m looking for a Blocs specific solution.

I tried adding this to the header:

<base href="https://mysite.com/">

…but unfortunately Blocs adds this after the CSS lines. Things do work if I add this to the Page - Before code section in Blocs, but this is bad HTML form.

2

I can’t think of a native solution using Blocs,
Off the top of my head, the first thing that comes to mind is .htaccess and redirects using mod_rewrite. I’m sure there are people (@brechtryckaert) :wink: here on the forum who know more about .htaccess.

The .htaccess file can be edited directly in the Blocs code editor, so it’s somewhat native to Blocs :wink:

1 Like
3

Many thanks and dealing with this at the web server level would definitely be an option.

I’m starting to wonder though if this might even be a bug or maybe feature request. At least in the projects I have, the style sheets live at /css, JavaScript at /js, etc.

If this hierarchy is consistent across Blocs projects, maybe this should always be an absolute path instead of a relative one?