This is an academic query as I basically have things working two ways but surely one should fail. No? (Sorry I don't know why but I always struggle with paths and this has me flummoxed.)
I have just moved the HTML of three sections out of the main file and am now using an include.
Structure now is:
root - vendor - datepicker - dist -etc- datepicker.css
- beta - main.php
- static - date.inc
In the main.php file I used to have a
<link rel="stylesheet" href="../vendor/
bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
When I moved the link up to the .inc file in the static directory (one level up) I thought I should add an extra ../ but was not sure if the css would be called in the new file or in the main.php where the include is called. So I tested both
<link rel="stylesheet" href="../vendor/
bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
and
<link rel="stylesheet" href="../../vendor/
bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
BOTH worked. I inspected in chrome and then tried ../../../ and that worked fine too.
I thought the directory form of ../ meant down one from the current level.
To quote on page I just looked at:
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
I realize this is an idiot question and I know I have to sort out proper document paths at some stage but this has me completely confused.
the page you looked at is right ./ means from current working directory, and ../ means go up one directory, ../../ up 2 dir's and so on.. but what happens if 1 directory up is your root folder and you do a ../../? the answer is you'll still be in the root directory, you can only go so far up. this is precisely what happened to you check out your structure, "root - vendor - datepicker" I can elaborate further if you wish. I hope this helps.
Related
Icons not showing , So I've this problem.
I'm using some weather icons provided by erikflowers on github.
They are working and showing up fine when I've opened my app through the live server extension in Visual Studio Code. However, when I open my index.html manually from the folder, they are showing up as blank squares.
Anyone have any clue why this might be?
Thanks in advance
EDIT:
Directory:
<link rel="stylesheet" href="./weather-icons-wind.css">
<link rel="stylesheet" href="./weather-icons.css">
I did try changing to ./ no help
It says it can't find the files but they are there
Your pathing is wrong. As u wrote by urself in a comment -
"To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type ""<i class="wi wi-night-sleet""> "
You dont have a CSS directory.
Also look at your console error.
The route is wrong.. your Project Name is missing.
"../JavaScript/Projects/fonts/weather..", where is your Folder "Weather API"?
I would suggest to create a CSS folder (your styles.css stays in the project root), with your icon stylesheet files in it. That should fix your problems.
How are you accessing those icons? CDN? Or do you have them stored locally in some separate folder? Also, share your index.html and folder structure.
For example, you have them in a folder called icons, say a file called cloud.png. Then there are 2 ways to access them in your HTML file:
Using icons/cloud.png
Using ./icons/cloud.png
Both of these approaches work in Live Server, but sometimes we have to use the 2nd one when opening index.html directly or when hosting on Github Pages.
So try both of them and see which one works for you.
I have a question about how to solve the following situation:
In my sass-files I use absolute path variables in my main include files, e.g. fonts are located in /assets/fonts/... and icons are located in /assets/icons/... and so on. Now these paths are obviously working only when the domain is in root.
The environment I wish my application to run on has a different folder structure which goes a few levels deep.
Here is an example of the file structure in my development environment:
/root
assets
icons
...
home
home.scss
page1
module
module.scss
Here is an example of the file structure in the new environment:
/root
various
subfolders
assets
icons
...
css
home
home.css
page1
module
module.css
As can be seen: The compiled CSS gets created in subfolders which can become quite deep, i.e. like 8 stories deep. The root declaration in my css will no longer work because of the new tree structure.
My options are as follows:
adjust my sass so that at all paths are relative (don't like to do that, will make my sass more complicated, everything seems to be good the way it is)
adjust my .htaccess so that this is covered (don't like that either, have to adjust everytime I switch the environment, seems "hacky")
create/use a gulp task that fixes my compiled css files so that the relative paths are added to all findings of url("/assets
I have searched quite a lot, looked into thread2, gulp-tap and gulp-replace. But somehow I can't quite get it right. For instance: The obvious solution, gulp-replace, is not working as I need it to because I need to get information about the file that is currently in the pipe (to get its file.path and thus find out how many stories the file has climb up to reach the assets folder).
Does anyone has ever done this? Or maybe has an idea how to solve this?
Alright, solved it myself. I have created a gulp-plugin for this:
https://www.npmjs.com/package/gulp-css-adjust-url-path
I wanted to post out to the community in an effort to try and pin down a recent issue I've been having in regards to pulling in custom fonts.
When I initially set up my site to try and import a custom font, I followed the guide here (http://www.concrete5.org/documentation/how-tos/designers/how-to-add-a-custom-font-face-to-your-theme/) and thankfully I was able to pull in my fonts.css file that I needed.
Unfortunately, just recently I went ahead and made some customizations to the theme I was using (Under Page Settings > Design). After I had saved those changes however, I noticed that my fonts we're no longer being referenced and I was getting 404 errors when trying to pull that fonts.css file.
Now in my header file, I was referencing the fonts.css file relatively which worked until I made the customizations to the theme. Now it seems as though it's changed the 'location/directory' of where these pages, or at least the header file is. The differences in what I've put into the header file, and what's being appended are below.
Before:
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('../fonts/raleway/fonts.css')?>" />
Now:
<link rel="stylesheet" type="text/css" href="/index.php/ccm/system/css/page/157/../fonts/raleway/fonts.css" />
In particular, I'm noticing that
/index.php/ccm/system/css/page/157/
is now being appended, which is obviously causing the reference to fail. My question is, is there any way that I can reset concrete5 so that I will stop appending this reference, or a way to set a direct path (which is /application/files/cache/css/fonts/raleway/fonts.css) in my header file?
As for other information, I do have Pretty URL's enabled all appropriately (as far as I can tell). And I've set the location of all my pages within their own page, rather than all being built from the index.php page.
If there's anything you guys might need from me, just feel free to let me know. Again, if there's any way that I can get this resolved, I'd greatly appreciate it!
Despite its name, getStylesheet in concrete 5.7 and greater only works with LESS files, not .css files. It's also not set up to handle ".." in the path of files. If you pass a .css file to getStylesheet it will run the file through the LESS parser, which may double-encode things. You might not notice any problems with this, but it's best to avoid it altogether if possible.
Here's how I would add a custom font face to my theme.
First, make sure your theme's directory contains the "fonts/fonts.css" file with your custom font face directives in it.
Then, include the file this way in your theme:
<link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/fonts/fonts.css" />
This will only work if "fonts" the directory appears at the root level within your theme's directory – but it should be all you need to do.
My pages in pretty basic html hold styling when kept in the root folder. Created a new folder for a group, but when I move pages to that folder they seem to lose connection to the css file.
Thought the problem might be the link since it now had to move up one folder. So I changed this:
link href="assets/css/readable/bootstrap.css" rel="stylesheet"
To this:
link href="http://www.example.com/assets/css/readable/bootstrap.css" rel="stylesheet"
but that changed nothing. Still page works fine in root folder, but not in /new folder.
Thank you for pointing out the basic premise I could be missing.
link href="/assets/css/readable/bootstrap.css" rel="stylesheet"
Add a / at the beginning of the path to refer to the Document Root instead of using a relative path.
Nine times out of ten I'll write:
background:url(../images/nameofimage.jpg);
However, I've just run into an issue where my CSS is only working when the syntax is:
background:url(images/nameofimage.jpg);
I'm almost positive I've run into this before where I suddenly needed to add the periods and slashes in CSS.
Let say you have a directory structure like this:
~ Root
- Styles
* site.css
- Images
* nameofimage.jpg
Then its not posible to write in your style.css
background:url(images/nameofimage.jpg); because you search for ~/styles/images/nameofimage.jpg and this file does not exits.
When you write background:url(../images/nameofimage.jpg); you go back one folder and then search for images/nameofimage.jpg so it goes to the file ~images/nameofimage.jpg.
With ../ you can browse back in folders.
'../' means you go up a directory
When you say background:url(../images/nameofimage.jpg); it means you are pointing to the parent directory images directory.
When you say background:url(images/nameofimage.jpg); it means you are pointing to the images directory in the same folder (the folder in which your css has).