I have a problem with creating pdf file. I include css3 file into head section in view, but it's doesn't work.
Included file is twitter bootstrap css and main css of application theme.
...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" media="all" rel="stylesheet" href="packages/bootstrap/css/bootstrap.min.css">
<link type="text/css" media="all" rel="stylesheet" href="css/dashboard/style.min.css">
</head>
...
Have an idea?
Can you try to use a full path? (eg. use the asset() helper)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" media="all" rel="stylesheet" href="{{ asset('packages/bootstrap/css/bootstrap.min.css') }}">
<link type="text/css" media="all" rel="stylesheet" href="{{ asset('css/dashboard/style.min.css') }}">
</head>
I'm assuming you are using https://github.com/barryvdh/laravel-dompdf ?
An alternative is using wkhtmltopdf, which is possible with the same interface etc: https://github.com/barryvdh/laravel-snappy (but requires to install wkhtmltopdf)
I solve this problem by typing the public_path in href attribute, following instruccions from https://github.com/barryvdh/laravel-dompdf/issues/121#issuecomment-358245406:
<link href="{{ public_path('css/pdf.css') }}" rel="stylesheet">
NOTE: I'm using a local virtual server. I hope this works for you.
I solve this problem by using external CSS's full path. This one worked on my linux ubuntu server :
<link rel="stylesheet" href="/var/www/mysite/public/css/main.css" media="all" />
You also can solve not loaded image problem by using this solution.
Related
I have checked the other topics, they seem similar but won't solve my problem:
I am writing a web application using flask and bootstrap works fine but my custom stylesheet gets completely ignored and I can't figure out why.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="/static/styles.css" rel="stylesheet">
<title>C$50 Final_Project: {% block title %}{% endblock %}</title>
</head>
Use the Compiled CSS and JS instead?
https://getbootstrap.com/docs/4.3/getting-started/download/
and maybe try to use "url_for" for the file path
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/bootstrap.min.css') }}">
Browser cache needed to be cleared...
I am not sure why this question was downvoted so much, but I probably should have added, that the path for static.css is not the problem...
I have imported a html page into my laravel 4 project. I linked all the js and css files together. However, when loading the page the page just outputs plain html.
This is my internal folder structure:
In my main.blade.php site I link to my css like that:
<!-- CSS Files
================================================== -->
<link rel="stylesheet" href="{{asset('css/mainPage/bootstrap.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/jpreloader.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/animate.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/flexslider.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/plugin.css')}}" type="text/css">
Any recommendations what I am doing wrong?
I appreciate your answer!
As the others already pointed out, your missing the 'assets' at the beginning of your path. That's because it requires the full path relative to the public folder.
Besides that, I suggest you use the tools Laravel provides to generate the full link tag of your css includes. It makes your code a lot more cleaner.
{{ HTML::style('assets/css/mainPage/bootstrap.css') }}
And there's HTML::script('path') as well for javascript files
Use the following:
<!-- CSS Files
================================================== -->
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/bootstrap.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/jpreloader.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/animate.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/flexslider.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/plugin.css')}}" type="text/css">
give the full path of the directory under public folder:-
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/bootstrap.css') }}">
I've got 3 of this error when validating.
DOCTYPE: HTML5
Error: Element link is missing required attribute property.
<link type="text/css" href="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css" rel="stylesheet" />
<script src="/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js" type="text/javascript"></script>
<link rel="stylesheet" href="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
So I've used rel - type - href and one of them has the media attribute. What others I have to use in this case?
And I don't get why I don't get the same error for the other links I've used only with the same attributes...
Thanks for your time!
The information in the error message is outdated. Error messages are apparently not updated as fast as the basic functionality of the validator. The validator is actually validating against HTML5 + RDFa, and RDFa defines the property attribute.
Put you <link> in the <head> at the top of the document.
In HTML5 the link element is allowed in the document body but with an itemprop attribute.
Did you post all non-validating code? Because this validates, try it out:
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<link type="text/css" href="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css" rel="stylesheet" />
<script src="/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js" type="text/javascript"></script>
<link rel="stylesheet" href="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</head>
</html>
I used JQM's Themeroller to develop a theme for my application. Right now, I'm just trying to get it to work in Chrome.
I have the head of my HTML file set up like so:
<head>
<title>SafeRides</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
and my file director is as follows:
Application/
index.html
themes/
SafeRidesTheme.css
SafeRidesTheme.min.css
images/
Am I just missing something obvious in the layout of my files? If someone could help me realize what's going on here I'd greatly appreciate it.
When using custom theme made by Theme Roller, libraries should be loaded this way.
You should remove jQM defualt style sheet and load jQM structure style sheet before your custom one.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
I'm quite new to the Spring|Hibernate|Eclipse setup. For some reason, My index.jsp files are not picking on the css files (css & css01).
Any clue why?
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css">
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css">
You have not provided the end tag of the link tag. Provide it like this.
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css" />
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css" />
OR
<link rel="stylesheet" href="css/theme_switcher.css" type="text/css"></link>
<link rel="stylesheet" href="css01/job_blue.responsive.css" title="job_blue" type="text/css"></link>