We are converting an HTML theme to C5 for a new client which we have have done many times in the past. But we ran into a problem that I hope someone can help with.
In our CSS we have this (it’s a preloader gif):
background: #fff url(‘…/images/preloader.gif’) no-repeat center center;
Obviously this won’t work, and we have tried every combination for getting the gif to load with zero success.
Here is the last thing we tried, using the absolute FQDN path with of course the URL in front:
driveroot/Full Path To C5 Folder/application/themes/theme_name/assets/images/
Does anyone have an idea. I know we’ve done this in the past, but can’t recall which site(s) and of course thinking that it was a simple fix did not document what we did to resolved it.
“Full Path to C5 Folder” sounds like your webroot. You’d want to specify the full path from the webroot: /application/themes/theme_name/assets/images/preloader.gif
Or make it relative to wherever your CSS is being served from. I assume it’s in /application/themes/theme_name/assets/css/main.css or something like that. In that case, ../images/preloader.gif should work (two dots to go up one directory, not three; I’m not even sure that three dots has a valid meaning).
Thanks for the pointers. I didn’t want to clutter up the thread so kept to a minimum. I tried those steps as well.
The original CSS has:
background: #fff url(‘…/images/preloader.gif’) no-repeat center center; - the 3 dots was a copy paste/edit error - sorry
I did try the relative path as you suggested at the end as well - no go either. The full path from the webroot was a desperation step. Upon further thinking (somewhere in my grey matter) I had to unminify a bootstrap.css or .js file that had some url entries. I’ll run filelocator on the entire html theme and see what gives.
Hmmm, I know I’ve done this before, maybe rummage around notes for previous websites…
you should look at the browser’s developer console and see which CSS is actually being loaded. You may not be editing the right one as you suggested. Also, once you establish which CSS file it is, you should be able to make a relative path from there.
The actual css url path is:
url(‘./…/
url(’…/ doesn’t seem to work, takes me to the wrong folder from the C5 site root as depicted by $view->getThemePath().
If I recall my OLD dos/unix days, url(‘./…/ script execution means starting FROM the current folder and to find the resources from the Current folder, you need to stay in the current folder (url(’.), then go up one level then down one level (url('…/). I think (I’m old school so could be wrong), if a script is running (current folder i.e. “.”) it has resolve the dest folder from the location it is executing from, then go UP one level, then down one level to the final destination to find the resources.
Interestingly from a cmd prompt, from the current folder:
cd …/dest folder and cd ./…/dest folder both work, So I think my supposition of script execution seems to be correct. Any other combination doesn’t work and it also seems to hold true for js execution.
Again, old school and some google chrome dev tool work and trying different combos resolved it.
Or I had way too many coffees…
If anyone has more accurate or on point info please advise.
tx all.
Edit, BTW: I did enter …/dest but the post shows 3 dots…
interesting. I assumed the same, but I guess it kind of makes sense that you need to specify the current directory first.
FYI, if you put your code or literal CSS rules in backticks (``), you can avoid the auto formatting of the browser or web app (which ever is doing it). So .. is typed as: