I am using barryvdh/laravel-dompdf for quite long.
Using external CSS (From local) and font (From CDN), It was working fine and suddenly the design collapsed, also the font not working so I've checked in the view and came to know the view is not loading the CSS & fonts.
I am using Laravel 5.5 and barryvdh/laravel-dompdf version is 0.8.6.
Tried in Laravel 8 with barryvdh/laravel-dompdf version 0.9.0 also not working.
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Receipt | {{ Auth::user()->name }} - {{ $setting->name }}</title>
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" type="text/css" media="all" />
<link href="{{ asset('css/main.css') }}" rel="stylesheet" type="text/css" media="all" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
/* Another font (Chinese) loaded from local folder for particular tags */
#font-face {
font-family: SimHei;
src: url('{{asset('fonts/simhei.ttf')}}') format('truetype');
}
body{
font-family: Open Sans, Sans-serif; line-height: 1;
}
p {
font-size: 18px;
margin-bottom: 0 !important;
}
</style>
</head>
For CSS, I have tried to update
<link href="{{ asset('css/main.css') }}" rel="stylesheet" type="text/css" media="all" />
to
On Local:
<link href="{{ public_path('css/main.css') }}" rel="stylesheet" type="text/css" media="all" />
<link href="{{ base_path().'/css/maincss' }}" rel="stylesheet" type="text/css" media="all" />
<link href="http://127.0.0.1:8000/css/main.css' }}" rel="stylesheet" type="text/css" media="all" />
On server:
<link href="var/www/html/project/public/css/main.css" rel="stylesheet" type="text/css" media="all" />
For the font, I have tried to have it in a local folder as a .ttf file, and importing in style still doesn't work.
I've managed to solve this issue.
Posting here incase it can help someone.
Replaced barryvdh/laravel-dompdf with barryvdh/laravel-snappy
Package Link : https://github.com/barryvdh/laravel-snappy
My external styles, images & fonts are not loaded.
For styles i have created a blade file, updated it with css codes and included it in the pdf template blade.
For images i have created an absolute path
<img src="{{ public_path('images/img1.jpg')}}" alt="No Image" />
For font i have installed the font on the server,
I am using ubuntu 16.04, I have installed open sans and SimHei (Chinese font) and updated the font-family to open sans & simhei in my application.
Related
I use laravel 8, I'm creating a blog. The problem is when i click one of my posts for seeing the single blog page, the page don't come due to problem to see all the css.
'''
<!-- Bootstrap Css -->
<link rel="stylesheet" href="{{url('css/bootstrap.min.css')}}">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="{{url('css/font-awesome.min.css')}}">
<!-- Slick Nav CSS -->
<link rel="stylesheet" href="{{url('css/slicknav.min.css')}}">
<!-- Cube Portfolio CSS -->
<link rel="stylesheet" href="{{url('css/cubeportfolio.min.css')}}">
<!-- Magnific Popup CSS -->
<link rel="stylesheet" href="{{url('css/magnific-popup.min.css')}}">
<!-- Fancy Box CSS -->
<link rel="stylesheet" href="{{url('css/jquery.fancybox.min.css')}}">
<!-- Nice Select CSS -->
<link rel="stylesheet" href="{{url('css/niceselect.css')}}">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="{{url('css/owl.theme.default.css')}}">
<link rel="stylesheet" href="{{url('css/owl.carousel.min.css')}}">
<!-- Slick Slider CSS -->
<link rel="stylesheet" href="{{url('css/slickslider.min.css')}}">
<!-- Animate CSS -->
<link rel="stylesheet" href="{{url('css/animate.min.css')}}">
<!-- Radix StyleShet CSS -->
<link rel="stylesheet" href="{{url('css/reset.css')}}">
<link rel="stylesheet" href="{{url('style.css')}}">
<link rel="stylesheet" href="{{url('css/responsive.css')}}">
<!-- Radix Color CSS -->
<link rel="stylesheet" href="{{url('css/color/color1.css')}}">
<link rel="stylesheet" href="#" id="colors">
'''
[What my single blog page looks like ][1]
if i don't use the stylesheets 'reset.css' it looks like :
single blog page without stylesheet reset.css
You can use asset helper instead of url
<link rel="stylesheet" href="{{asset('css/reset.css')}}">
CSS File path is true but still couldn't found..
CSS File Path;
public/assets/demo/default/base/style.bundle.css
In Blade;
<link href="{{asset('assets/demo/default/base/style.bundle.css')}}" rel="stylesheet" type="text/css" />
Where do I mistake ?
the second assets shouldn't be needed if your css is in resources/assets.
<link href="{{asset('demo/default/base/style.bundle.css')}}" rel="stylesheet" type="text/css" />
Im hosting a laravel app on a CentOS VPS and I use git, after pushing some modifications and checking the site suddenly the site stoped loading local files like css and js (404 not found) but yet loading external files from CDNS like bootstrap and jquery...
Please advice
snippet of code from the head of master page
<link rel="apple-touch-icon" sizes="57x57" href="{{asset('assets/favicons/apple-icon-57x57.png')}}">
<link rel="apple-touch-icon" sizes="60x60" href="{{asset('assets/favicons/apple-icon-60x60.png')}}">
<link rel="apple-touch-icon" sizes="72x72" href="{{asset('assets/favicons/apple-icon-72x72.png')}}">
<link rel="apple-touch-icon" sizes="76x76" href="{{asset('assets/favicons/apple-icon-76x76.png')}}">
<link rel="apple-touch-icon" sizes="114x114" href="{{asset('assets/favicons/apple-icon-114x114.png')}}">
<link rel="apple-touch-icon" sizes="120x120" href="{{asset('assets/favicons/apple-icon-120x120.png')}}">
<link rel="apple-touch-icon" sizes="144x144" href="{{asset('assets/favicons/apple-icon-144x144.png')}}">
<link rel="apple-touch-icon" sizes="152x152" href="{{asset('assets/favicons/apple-icon-152x152.png')}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/favicons/apple-icon-180x180.png')}}">
<link rel="icon" type="image/png" sizes="192x192" href="{{asset('assets/favicons/android-icon-192x192.png')}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/favicons/favicon-32x32.png')}}">
<link rel="icon" type="image/png" sizes="96x96" href="{{asset('assets/favicons/favicon-96x96.png')}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{asset('assets/favicons/favicon-16x16.png')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/shutter-modal.css')}}">
<link rel="manifest" href="{{asset('assets/favicons/manifest.json')}}">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{{asset('assets/favicons/ms-icon-144x144.png')}}">
<meta name="theme-color" content="#ffffff">
<meta name="_token" content="{{csrf_token()}}">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
{{-- <link rel="stylesheet" type="text/css" href='{{asset("assets/css/all.css")}}'> --}}
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/themify-icons.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/font-awesome-4.7.0/css/font-awesome.min.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/magnific-popup.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/owl.carousel.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/owl.theme.default.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/animate.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/bootstrap.min.css")}}'>
<link rel="stylesheet" type="text/css" href='{{asset("assets/css/style-MF.css")}}'>
and as I said this was ok and I didnt touch it in any way !
If you are using root to update your code, change owner of your files to website user. You can use chown command to change owner and -R argument for applying recursively.
chown -R groupname:username *
Note: In most of time, groupname and username are same!
When i am including the file head.blade.php in views.home, JS and Bootstrap are working properly. But when i am trying to include head.blade.php in views.posts.create JS and bootstrap are not working. I found in previous questions that i shoult include them like that:
<link rel="stylesheet" href="rel="stylesheet" {{URL::asset('css/responsive.css')}}"> but didn't helped.
This are my routes:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
how it is
How should be
Try adding a / to the front of your url:
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/animate.min.css" rel="stylesheet">
<link href="/css/prettyPhoto.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<link href="/css/responsive.css" rel="stylesheet">
Note: folder path should be "project/public/css/"
This can also be done with the url() helper function:
<link href="{{ url('/css/responsive.css') }}" rel="stylesheet">
Take a look at the Laravel URL helper functions documentation for more information.
i'm implementing a responsive website with twitter bootstrap but on iexplorer 8 and below can't use media queries.
I create a simple example for try respond.js but mediaqueries continue not working on iexplorer 7-8, here is the html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<meta name="Description" content="Web description here" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="./css/styles.css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="./img/favicon.png">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="./js/respond.min.js"></script>
<script src="./js/scripts.js"></script>
</body>
</html>
and here is the style.css:
#media only screen and (max-width: 38.75em) {
body {
background: green;
}
}
Regards
https://github.com/scottjehl/Respond#cdnx-domain-setup
CDN/X-Domain Setup
Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.
See cross-domain/example.html for a demo:
Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your origin domain
Reference the file(s) via <link /> element(s):
<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>
If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.
Note: HUGE thanks to #doctyper for the contributions in the cross-domain proxy!
You need to include <script src="./js/respond.min.js"></script> above the </head> tag.
If you don't want to add any code related with respond.js, load bootstrap.min.css through CDN except for IE 8. For IE 8, use local static file.
<!--[if lte IE 8]>
<link rel="stylesheet" href="/path/to/bootstrap.min.css' %}" />
<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" href="{CDN Address}" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" href="{CDN Address}" />
<!--<![endif]-->
Tested on IE 8 ~ 11 and other webkit browsers.