I am loading css using the following in <head> tag
<link rel="stylesheet" type="text/css" href="{{ asset('css/materialize.css') }}" media="screen" />
The page is not able to find the fonts used in the css file in the fonts directory mentioned under public folder. How am i supposed to load these for the css files ?
Image of Folder Struxture & Calling of font-face in the css file:
it seems you wrote "font", but it is "fonts" in directory structure.
Related
The file structure in my GitHub repo is
--root
index.html
resume.css
--folder assets
resume.css
(yes I made two identical css file just in case one of them works but none of them works...)
I tried to reference css file as
<link rel="stylesheet" type="text/css" href="resume.css" media="all" />
or
<link rel="stylesheet" type="text/css" href="assets/resume.css" media="all" />
But again none of them works..
When I download the entire GitHub repo as a .zip file on my computer and unzippit, the website can display normally.
Is it something else I could do?
The webpage shows on my local file
and webpage on github
Can you check where you placed the <link> tag?
It should be inside the <head> tag
EDIT:
You can move highlighted section in here to parent <head> tag and remove <head> tag inside <div> tag
I have a ASP.NET MVC project which uses JQuery Datatables to show a table.
The problem: the css stylesheet isn't applied when links to local css file. I've tried the following:
<link rel="stylesheet" type="text/css" href="~/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="../Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="Content/datatables.min.css" />
But this one (at the same place of my HTML) is working:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
Even current sorting column highlight from this css doesn't work!
Of course, the CSS file exists in my project's Content folder, and its contents is totally the same, because I even try to copy the file from https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css and put it in project's Content folder.
So, the question is why doesn't the first HTML link snippet work?
Maybe, a bug in the MVC (it's up to date)?
jQuery DataTables distribution includes CSS, JS and image files (in the images folder).
Use Download builder, select Download tab and download all required files.
Also you should not use ~ in your URL. Most likely that is the reason why CSS is not applied. Use absolute URL /Content/datatables.min.css or relative URL Content/datatables.min.css instead.
I'm currently working on an email template with thymeleaf in a jhipster application.
My problem is that i can't use bootstrap css in thymeleaf template.
I understand that thymeleaf is a server-side technology and cannot load bootstrap css that exists on client-side (via node_modules), but when i saw answers to these two questions question1 and question2 i tried by similarty to import my css like this
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/vendor.css|}" />
but thymleaf still can't load this two files, i have no errors on console but css classes (bootstrap and mine) are just ignored.
PS : global.css contains my css classes, and vendor.css is the default jhipster file that calls bootstrap
vendor.css
#import '~bootstrap/dist/css/bootstrap.min.css';
#import '~font-awesome/css/font-awesome.css';
My template is located under
/src/main/resources/mails/applicationReport.html
My css is located under
/src/main/webapp/content/css/vendor.css
/src/main/webapp/content/css/global.css
So how can i use css classes from global.css and vendor.css in thymleaf?
UPDATE
After Gaël Marziou's answser i added these two lines to /demain/webpack/webpack.common.js
{ from: './src/main/webapp/content/css/global.css', to: 'global.css' },
{ from: './src/main/webapp/content/css/vendor.css', to: 'vendor.css' },
and in /src/main/resources/mails/applicationReport.html i call these two files like that
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/vendor.css|}" />
but Thymleaf stills ignore my css classes
Your CSS files are bundled by webpack, so content/css/global.css does not exist in your built webapp and cannot be accessed by URL, check it by unzipping your war file.
However, you could have both bundled stylesheets and original css files in your war file by adding these files to the configuration of CopyWebpackPlugin see in webpack-common.js file.
my css is not working correctly on my github page. This is my repo. This is my website. I created this portfolio website without Github pages and it works correctly. I am very new to github , so there is a good chance I'm missing something. I usually localize all my css/jscript but for simplicity reasons I changed all my css/javascript to the html link.
<!doctype html>
<html>
<head>
<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="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css\main.css">
</head>
I had the same problem with my HTML file and my CSS file. I fixed it like this:
I had a repo with the index.html and a folder call "style" with the style.css file in it.
Deploy my index.html with the link tag within the head tag like this:
<link rel="stylesheet" href="./style/style.css" type="text/css">
Pay attention to the href attribute: "./style/style.css".
Andy.-
Like #TarasYaremkiv mentioned remove your './css/bootstrap-3.3.7/' folder.
The reason why it's happening is because Jekyll engine is looking for the includes present in the file 'bootstrap-3.3.7/docs/components.html'
For example: this file {% include components/glyphicons.html %} is not present in the components directory of your bootstrap folder. Hence the error.
You can avoid these kind of error's by downloading only the necessary compiled files or use cdn links
Change
<link rel="stylesheet" type="text/css" href="css\main.css">
to
<link rel="stylesheet" type="text/css" href="/css/main.css">
original post - External CSS not working with Github Pages
Here is my structure within the root folder: css/fonts/ and books/book1.html
Within the css folder I have a stylesheet which has a link to the fonts folder like: src: url('/font/fontName.ttf');
In the books folder, I link the stylesheet through: <link rel="stylesheet" href="../css/stylesheet.css" type="text/css" charset="utf-8">
I have a:
body { color: red } in the stylesheet and all the color was effected as intended. However, for some reason the fonts were not loaded. When I moved the book1.html outside the books folder, and changed the stylesheet link to : <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8">
Can someone please help ?
If you change the following:
url('/font/fontName.ttf');
To:
url('/css/fonts/fontName.ttf');
It will work no matter where your css file is in the directory structure.
It's hard to fully understand your file/folder structure from your image, but does this work in your css?
src: url('./font/fontName.ttf');
(I added a dot before your forward slash)