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
Related
I'm building a page using Spring Boot and Thymeleaf and I want to use material components for web UI. So far everything is okay using the CDN.
<head>
<title th:text="${page?.name}">Temporary Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Required styles for MDC Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.css">
<!-- Required MDC Web JavaScript library -->
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.js"></script>
</head>
However, I wish to personalize the theme colors. I found this link, but it seems to use the npm.
Are there any other way to generate the theme css files without npm?
The material-components-web css uses custom properties for all colors. All of them default to some color, but you can easily overwrite those defaults like this:
<head>
<!-- ... -->
<style>
:root {
--mdc-theme-primary: #ff0000;
// ...
}
</style>
</head>
Be aware that there's a whole bunch of properties to set. For example, if changing the primary color like in the code above, there's also properties for the desired foreground color on primary background and so on.
For a list of custom properties you can set refer to the documentation.
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.
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
I am learning about how to use Jekyll and Github recently and I am having a hard time getting my website to display correctly online but it does display correctly locally when I run:
jekyll serve --baseurl ''
My Github repo that I am working on is http://yungkickz.github.io/kingwizard
Github Tree
Any help or hints would be super helpful.
Edit: Basically this entire website is missing the correct CSS and links are pointing to the wrong place; especially the first Home and About link as any the other links were made to just test.
My config.yml:
name: kingwizard
description: wizardly blog
paginate: 5
url: "http://yungkickz.github.io"
baseurl: /kingwizard
markdown: rdiscount
Also here I've added the beginning of the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ site.description }}">
<meta name="author" content="">
<title>{{ site.name }}</title>
<!-- Bootstrap core CSS -->
<link href="{{ site.baseurl }}/css/bootstrap.css" rel="stylesheet">
<!-- Custom Arreis Style -->
<link href="{{ site.baseurl }}/css/custom-style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="{{ site.baseurl}}js/html5shiv.js"></script>
<script src="{{ site.baseurl}}js/respond.min.js"></script>
<![endif]-->
</head>
Judging from the source code of your site, I have noticed some issues:
Many of your references to HTML, CSS, and JavaScript files begin with //. It seems like site.baseurl is set to / on GitHub for some reason, despite the setting in your config file. However, you often add addition slashes after site.baseurl in paths, which causes the second slash to appear.
Because site.baseurl is /, browers will expect to find your files at http://yungkickz.github.io/SOME_PATH. However, your site is actually deployed to http://yungkickz.github.io/kingwizard, so your links should be pointing to http://yungkickz.github.io/kingwizard/SOME_PATH instead.
Because of the 404 errors, your CSS styles are not loaded, which is why your site looks like it isn't formatted correctly.
Before:
<link href="{{ site.baseurl }}/css/bootstrap.css" rel="stylesheet">
After:
<link href="/kingwizard/css/bootstrap.css" rel="stylesheet">