How to set absolute css path as in jsp - css

Why we need absolute path and how I can set absolute path for css files which are included in my project.I am using spring mvc.The css files are in different folder which is inside web-inf folder in tomcat/webapp.Now i am using something like below
<link href="AllCSS/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
what should i need to do exactly?

Absolute in a webapp assumes starting from the webapp root context, in your case if /Allcss is a directory under root, absolute would mean
<link href="${pageContext.request.contextPath}/Allcss/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
if its a webapp context than
<link href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

Related

How to override bootstrap cdn in Django?

I'm new to Django, and even more so to CSS. In the base.html of my site I included a bootstrap cdn as follows:
<meta charset="UTF-8">
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
However, I want to make some modifictions to the css and I cannot because the cdn is an external file. It wouldn't work when I simply copy the content to a local css file because of proocol issues.
According to this previous thread I've tried to add another line so it would override the cdn, as follows:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}/bootstrap/css/style.css">
but it doesn't work. I tried also to write this line in a local html file (i.e. not in base.html) but no success.
My questions are:
How do I override the cdn file? That is, also where is it best to
place the other css file (I have static directories both in project
and app levels for some reason), and if it matters how it is named?
What makes a simple and safe test to see if it worked?
Most of all, I'm looking for a way two place to elements (say, an image and a menu) alongside instead of stacked. This one seemed relevant, but it requires modifications to the css file, which I can't seem to make.
Where should the css links be placed? Like I wrote or inside the meta section?
Make sure that you defined STATIC_URL in your settings file
STATIC_URL = '/static/'
I would recommend you to read about static file in django documentation, in a simple words you should have a structure of your static files, create one folder named "static" inside your project folder and put all of your static files inside decomposed it by folders as well, for example, all your .css files you will put to
/static/css/main.css
etc.
Then I would hightly recommend using django.contrib.staticfiles
Finally all you have to do would look like that
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static/css/bootstrap/style.css %)">
And remove your cdn link from your code
Simply put a CSS file under the bootstrap call and override any classes you need to in there.

Stylesheet (CSS) is not loading in my Sails application

I've placed a style sheet style.css inside the /assets/styles-folder and embedded it via <link rel="stylesheet" href="style.css" type="text/css"> in my something.ejs file.
But the stylesheet is not loading. Has anyone an idea?
Use the following to give the correct location of style sheet:
<link rel="stylesheet" href="../../assets/styles/style.css" type="text/css">
The first .. will take it to views folder, the next .. will take it to parent folder Employees, now you can give the path to your stylesheet.
This is because the path must always be relative to current .ejs or some other current file's location in the directory.

Linking to stylesheet in root directory

I am having a major issue trying to link to a stylesheet which is my root directory. I am connecting to it from a HTML file which is in a subdirectory of the root directory.
I would think this code would work (seeing as / means root directory)
<link type="text/css" rel="stylesheet" href="/style.css" />
However, it does not. Because the subdirectory is also only one folder down from the root directory, I also tried:
<link type="text/css" rel="stylesheet" href="../style.css" />
this also does not work.
Your first code line should work as "/" really means root :
<link type="text/css" rel="stylesheet" href="/style.css" />
This will find the file https://MY_DOMAIN/style.css
Are you sure that your file style.css is at the root of your project and not in another folder ?
Also you can try
<style>
#import url('/style.css');
</style>
I finally found a solution that works. For whatever reason, I could not link back to the root directory. I am still completely baffled about that, however, I did find a way to make it work.
I did it with this code:
<head>
<link type="text/css" rel="stylesheet" href="http://engagearcade.com/style.css" />
</head>

<link> tag does not import the .css

I'm having some issue with importing a .css file in my jsp within the eclipse using this tag
<link rel="stylesheet" href="css/style.css" type="text.css">
The structure of my pages is so
WEB-INF
>jsp
>css(folder)
>style.css
>home.jsp
So basically home.jsp and the css folder are parallels, a relative url like the one i'm using should be fine according to most tutorial.
Do you see some problem?
Thank you
<link rel="stylesheet" href="css/style.css" type="text/css" />
Change it to a slash.
In your structure the css folder is style and in your link it is css
<link rel="stylesheet" href="style/style.css" type="text/css">

How to specify a standard path (location) for stylesheets

Is there a way to specify a standard path for stylesheets (analogous to the "include_path" directive in the php.ini file that specifies the location of PHP includes files) such that you only need to specify the unqualified stylesheet filename in the href value of the link element? Example, just be able to write:
<link rel="stylesheet" href="main.css" />
in all files, regardless of their location on the website, without having to worry about where the main.css file is located?
Thank you
Start your path with a / and it will be interpreted relative to the root of your website and will work on any file regardless of its location:
<link rel="stylesheet" href="/main.css" />
or if main.css is not in root:
<link rel="stylesheet" href="/some_folder/main.css" />
Use the HTML-base-tag:
<base href="http://your.domain/and/path/here/" />
Now, all your links will start at that position, even URL's inside a <LINK>.

Resources