I have been searching for an answer to this question with no luck. This is my second day using laravel and I'm trying to create a custom 404 error page. I don't know where/how to include my .css file. Can someone please help me with this?
Place your css files inside public folder and use link tag in html document (or 404 template)
Example
<link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" />
The best way is using blade syntax with the laravel helper for what you need
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
this folder css or whatever you named it, must be placed inside your public folder.
Search for Public folder in Laravel.
Create css folder (that contains stylesheet files of your project), javascript and Images folder (contains images that you will use in your project).
Go to layouts in app.blade.php file update html code using blade syntax:
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
and JS:
<script src="{{ asset('pickadate/lib/picker.js')}}"></script>
1. put your CSS file in directory [PUBLIC/CSS]
2. in your FileName.blade.php in file just write :
<head> <link rel="stylesheet" href={{ asset('css/article.css')}}> </head>
Note Again : Don't Write asset('public/css/article.css') this wrong
put it in your public file and the html tags in view then to connect them with the css use
<link rel="stylesheet" href="{{ URL.asset('css/style.css') }}">
<link rel="stylesheet" href="css/app.css">
simply add this your blade.php file
Related
LARAVEL 9: I am using a template in Laravel 9 and I cannot reach my CSS file code anytime I have a double URL like this : /user/profile. However, It only works when I have a single URL like this: /profile. But I want to be able to reach my CSS files when I have double URLs. How can I solve this? Any suggestions?
Did you put the files correctly in the public folder?
Do you invoke it correctly within the blade as the following example:
<link href="{{URL::asset('assets/plugins/fontawesome-free/css/all.min.css')}}" rel="stylesheet">
Have you checked the error by inspecting your browser?
You can check this link contains many useful examples for your case
Put a slash "/" at the beginning of the css address. For example if you have somethin like this:
<link rel="stylesheet" type="text/css" href="css/style.css">
Change it to this:
<link rel="stylesheet" type="text/css" href="/css/style.css">
I put my css files into the public\assets\css folder, and into my view I'm doing this :
<link rel="stylesheet" href="{{ asset('css/admin/article/admin_ajouter_article.css') }}">
When I go to localhost and do inspect, I've this : <link rel="stylesheet" href="http://localhost/css/index/index_site.css">
Does someone know why I've no css displaying please ?
Cordially
EDIT: Into the console I've this : localhost/:21 GET http://localhost/img/logo_no_text.png 404 (Not Found)
just update the path to
<link rel="stylesheet" href="{{ asset('assets/css/admin/article/admin_ajouter_article.css') }}">
because asset function start looking from public folder not assets
Note: if it still not showing your style after updating the path clear your browser cache by click ctrl + shift + R inside your browser
I am using Twig with my CodeIgniter 4 project. I need to generate pdf reports and I am providing the HTML via Twig. The problem I am facing is that dompdf is not getting the stylesheets included in the Twig file.
When I do
return $this->response->setBody($this->twig->render('customers/quotation_request.html.twig'));
the HTML appears with the correct styling on the browser; so I know there is no problem in the way I included the stylesheets.
I included the stylesheets as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap Css -->
<link href="{{ 'css/bootstrap.min.css' | _base_url }}" id="bootstrap-style" rel="stylesheet" type="text/css"/>
<!-- Icons Css -->
<link href="{{ 'css/icons.min.css' | _base_url }}" rel="stylesheet" type="text/css"/>
</head>
Here's my code to generate the PDFs:
$dompdf = new Dompdf();
$dompdf->getOptions()->setChroot(ROOTPATH . 'public');
$dompdf->loadHtml($this->twig->render('customers/quotation_request.html.twig'));
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream();
As per dompdf's documentation you need to set $dompdf->getOptions()->setChroot(-->public folder location here<--); to the project's public folder so that dompdf get access to it but that code doesn't seem to work. The PDFs are being generated without any styling.
Use inline CSS i.e inside a tag
<a style="color:red">hello</a>
or
Use Style tags
a{
color:red;
}
</style>
DOMPDF doesn't support links to css files. You can check it in official docs of DOMPDF
In spring-boot application, pointed all css, js, images are in below structure:
JSP page is loading with all css/js/images when the URL is like this http://localhost:8080/request/
But when the URL is like this http://localhost:8080/request/rt/home
(css/image/js are not loading).
When I click the url of bootstrap.min.css from view source page, it is showing like below:
http://localhost:8080/request/rt/public/css/bootstrap.min.css
"rt" is adding in between the url.
How to omit the "rt" from path.
so that will get path like http://localhost:8080/request/public/css/bootstrap.min.css
It will load css/js/images
Please suggest
Without seeing your jsp, according to your statements of how it behaves, I would say that you are declaring your stylesheet and resources reference this way, without starting by a /:
<link href="public/css/bootstrap.min.css" rel="stylesheet">
<script src="public/css/bootstrap.min.js"></script>
This means that the resources are relative to the virtual directory of the url bar of the browser.
You should declare your references this way:
<link href="/request/public/css/bootstrap.min.css" rel="stylesheet">
<script src="/request/public/css/bootstrap.min.js"></script>
To avoid hardcoding the contextpath, you could use:
<link href="${pageContext.request.contextPath}/public/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/public/css/bootstrap.min.js"></script>
Whicho would resolve your context name
Try this way
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
or
<link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ URL::asset('/css/main.css') }}">
<script type="text/javascript" src="/js/main.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
Its in my view, and the HTML output is:
<style>.container{margin-top:55px}</style> main.css 's content
<script type="text/javascript">//<![CDATA[
$(function(){console.log('loaded');})
//]]></script> main.js content
And the external CSS or JS file stays as a link, that works properly.
I really hate it, what is the proper way of linking files WITHOUT getting parsed into the HTML output?
Use asset() helper function in your view file.
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<script type="text/javascript" src="{{ asset('js/main.js') }}"></script>
The files should be in public/ directory.
You culd also try elixir which provides many features like working with sass/less, sourcemaps, minification, versioning/cache busting, etc.