So, I've been working on optimizing my website. Right now, I have a very nice template going. It looks something like this:
<!doctype html>
<html class="no-js" lang="">
<head>
<!-- shiny optimizations -->
...
<!-- Ooh look! An important example that will help you understand my question! -->
<link rel = "stylesheet" href = "release/base/css/normalize.css">
include "page/head.html"
</head>
<body>
include = "page/body.html"
</body>
</html>
So in each page, it has a makeup of the following
/release: a directory where minified, compressed files are put
/source: a directory where the source files are
Now, I have a directory called /base (in the root) and it contains optimizations and other shiny stuff, like normalize, browser compatibility things, etc.
Base is going to stay the same in all projects, and so is the template file, but the locations of the projects will change. Take the following file structure for example.
base
favicon.ico
/css
...
/js
...
source
...
release
...
foo
/release
...
/source
...
index.html
/foobar
/release
...
/source
...
index.html
bar
/release
...
/source
...
index.html
baz
/release
...
/source
...
index.html
So baz, bar, and foo need to reference the optimizations through
../base
Foobar needs to reference it through
../../base
And root just needs to get it through
base
So based on how many files deep something is, I want to change it from
<link rel = "stylesheet" href = "{changeMeBasedOnFileDeepness}/base/css/normalize.css">
To
<link rel = "stylesheet" href = "../../../base/css/normalize.css">
tl;dr: I want to allow files to reference the base directory from wherever they are.
This is being done on github pages, you can view the repo here
Cheers,
TheGenieOfTruth
Turns out this was an XY problem. All I needed to do was get some shiny notation that looked like this:
/base/css/...
That was about to get painfully complex
So in short:
When using a webserver, the /foo/bar notation will get you to the root directory
Related
I looked over some of the same questions on stack overflow and tried all the best answers. None of them worked.
I am learning html5 with CSS stylesheet. I looked over a website tutorial of building a web page with login form by flask.
So it has this base.html file which has some code links to a css file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RELAX AND WORKOUT</title>
<link rel="stylesheet" href="bulma.css" />
</head>
Originally, followed by 'href' was a http link and it worked. But I downloaded the same css file and put it in the same folder as the base.html file so I can play with this css file.
They are both at ./project/templates/the_file
This is the link to download the css file: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css
It was also originally the tutorial author put after 'href='. But when I changed it to my local file name 'bulma.css', it does not load the stylesheet at all.
I also tried absolute path and relative path. Neither of them worked.
I'm running it on Windows 10. Using Python 3.7 and flask.
So in my case, how do I make the html load this local css file?
Edit:
Ok, I made it work eventually.
I made a new folder called "static" and put the css file inside it. Then I changed the path to this:
<link rel="stylesheet" href="../static/bulma.css" />.
Does it mean flask treats the "templates" folder as a special folder only for html templates, it does not recognize other file formats?
But I saw a question which the person put his css file in the same directory. The answer is to just add a dot and it worked. That was why I put it with all the other html templates in my templates folder. But it never worked in my case.
From flask docs:
Flask automatically adds a static view that takes a path relative to the flaskr/staticdirectory and serves it. The base.htmltemplate already has a link to the style.cssfile:
{{ url_for('static', filename='style.css') }}
You need to create a folder called static inside your flask app directory with your static files inside, ex.: CSS, images, etc.
In your html code use:
<head>
<link rel="stylesheet" href= {{ url_for('static', filename='bulma.css') }}>
</head>
Try changing your href="bulma.css" to href="./bulma.css" and see if it works.
Are you sure you don't have to go into the templates folder? "/templates/bulma.css"
Hit F12 to open up the development pane. Go to the network tab. Refresh the page. Is the file listed in that list? You may have to refresh your cache to have it take effect. To do that: CTRL+SHIFT+R. If the file is listed in there you can view the preview to make sure it's current, if not you will still need to do a force refresh on the cache.
As for URL's you can also use an absolute file path starting at the root with href="../project/templates/filename.css" (use 2 periods). The following is a website for more info on this:
https://www.w3schools.com/html/html_filepaths.asp
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>HTML Document</title>
<meta charset="UTF-8" />
</head>
<body>
A Directory
</body>
</html>
By default when I open this link in my internet browser it shows a white page with the items in the directory. Can I change the Directory's Page. For example: http://www.aq.com/gamedesignnotes/ see how the URL points to a directory and not a HTML Document but still shows a page.
Most webhosts will show an index.html if you navigate to a directory. You could just create a new file inside your directory called index.html and put your HTML there.
Then you can go to http://yoursite.com/directory and it will show the index.html file in that directory (http://yoursite.com/directory/index.html).
Here is a link to learn more
It depends on your webserver. Apache HTTPD generates them using mod_autoindex which gives you some control over the apearence via directives such as IndexHeadInsert.
Your question is how to make pretty (seo friendly) urls right?
How to make http://website.com/something show a specific html page?
This can be done using mod rewrite using .htaccess files.
Here's a stack overflow topic on mod rewrite:
Semantic URLs for static HTML files with .htaccess and mod_rewrite
Here are some tutorials on pretty urls:
http://zenverse.net/seo-friendly-urls-with-htaccess/
http://net.tutsplus.com/tutorials/other/using-htaccess-files-for-pretty-urls/
I have the following folders projectCss and inside it i have the folder languageReference,*css* and js.Inside the css folder i have the file style.css.
Inside the languageReference i have the three folders namely iframes,*docs* and cssFiles.Inside the iframes folder,i have the folders codeSamples and htmlFiles.Inside the htmlFiles folder,i have a html file called index.html.
My project setup looks like this visually.
projectCss
*css - style.css
*langugeReference
*docs
*cssFiles
*iframes
*codeSamples
*htmlFiles
*index.html
I am trying to figure out how my path will look like but nothing works.Can i get the path without resulting to serving the page on a web server?.
As Charlie said in the comments, you need to go "up" three folders (../../../) then select the folder and file like so:
<link href="../../../css/style.css" ... />
Alternatively, you could go from the "root", assuming your layout is the root, the following would work too:
<link href="/css/style.css" ... />
Use relative paths :
<link rel="stylesheet" type="text/css" href="../../../css/style.css">
I have an asp.net application containing pages that lie in multiple folder. I have my .js files also in one "JS" folder and I have added their reference in head of master page like:
<script type="text/javascript" src="JS/jquery.min.js"></script>
Now when I am on home page, the script loads fine. But when I am on some other page that is present in another folder(Physics for example), the path gets appended and hence I get the error:
Failed to load resource: the server responded with a status of 404
(Not Found)
Similar thing is happening for my image paths and <a> tags also.
Now I want to give paths with respect to root path something like:
~/JS/VerticalMenu.js
But this ~ is not taking me to the root of my application. Do I need to set where ~ should lead to? And if yes then where and how??
The #Charlie Kilian answer is a workable solution however you can also specify a base URL for all the relative URLs in your page by base tag in head of your html page.
<head>
<base href="http://www.yourdomain.com/anyvirtualdirectory/" />
</head>
Try this:
<script type="text/javascript"
src="<%=Page.ResolveUrl("~/JS/VerticalMenu.js")%>"></script>
If it's an ASP.NET application, you can access the root by prefixing the path ~/:
<script src="~/common/scripts/safeguard.common.js" type="text/javascript"></script>
You can also try prefixing the path with just /:
<script src="/common/scripts/safeguard.common.js" type="text/javascript"></script>
Good Day, I'm learning CodeIgniter with Smarty. My CSS file is stored in
/App01/application/views/css/main.css
To link my CSS I use:
<link rel="stylesheet" type="text/css" href="http://localhost:88/APP1/application/views/css/layout.css" media="screen" />
But CSS is not applied on my page. When I open CSS URL, I get a message:
Forbidden
You don't have permission to access /APP1/application/views/css/layout.css on this server.
Please, what am I doing wrong? I'd like to keep my CSS together with the view because in future I'd like to learn how to create multiple themes and I thing the CSS should be kept within the theme folder.
Can I replace URL path to CSS file with some Smarty variable so that when I move my application I do not need to change CSS URL path in templates manually?
Thank you in advance! Vojtech
Anything in the /application folder of CodeIgniter should be considered out-of-bounds. For the best security, you should actually consider keeping /application above your www or public_html folder in a structure such as this:
– application
– controllers
– models
– views
– ...
– system
– core
– libraries
– ...
– public_html
– index.php
This makes your application code safer.
I’d advise creating your client-side scripts and CSS in a public folder. For example public_html/css and public_html/js. Or, if you wanted to go down the theme route, possibly name each CSS file as the name of the theme, so you’d have css/theme1.css and css/theme2.css.
If your site will always work from the root of a domain, then you can just use:
<link rel="stylesheet" type="text/css" href="/css/layout.css" media="screen" />
But if you feel that you’re going to be moving all sorts of things around, then consider preparing the file location in your controller before sending it to Smarty.
$this->load->helper('url');
$this->smarty->assign('css_file', base_url("css/theme1.css"));
That will return:
http://localhost/app1/css/theme.css
Or whatever your CodeIgniter URL is.
This will help to link css to codeigniter.
The link_tag is used to link resources and you can use helper function.
For example html helper, url helper, email helper, etc.
In your controller you have to create a function something like
<?php
class Home extends CI_Controller{
public function helper(){
$this->load->helper('html');
$this->load->view('index');
}
}
?>
And your index.php in view folder use link_tag keyword.
<html>
<head>
<title></title>
<?php echo link_tag('App01/application/views/css/main.css');?>
</head>
<body>
<?php
.......
?>
</body>
</html>
Try adding a symlink to your servers document root folder. (www/public_html/htdocs)
cd (document root folder)
ln -s (/App01/application/views/css) .
This way you can access your css folder and keep the current structure.