I am using OctoberCMS DynamicPDF Plugin which is working absolutely fine as per my requirement.
Howerver, I have dynamic PDF header text content and I am trying to Overwrite my Header Content but its not working. Here is what I have tried so far.
Template file
{% set headerTExt = 'asdf' %}
Layout file
<html>
<head>
<style type="text/css" media="screen">
{{ css|raw }}
</style>
<title>Regency Brochure</title>
</head>
<div id="header">
<div style="display: inline-block; position: absolute; left: 2.5%; top: 12px;">
<img src="{{ logo }}" style="width: 60px; height:auto; margin-top:5px;"/>
</div>
<div style="text-align: right; font-size: 20px; color: #b49132; text-transform: uppercase; font-family: 'Montserrat-Bold'; position: absolute; right: 3.5%; top: 25px;">
{{ headerTExt }}
</div>
</div>
<div id="footer">
<div class="footerText">www.regencycorporate.com.au</div>
</div>
{{ content_html|raw }}
</html>
Layout File CSS
#page { margin:25mm 0px 8mm 0px;}
header { position: fixed; left: 0px; top:-25mm; right: 0px; height: 22mm; background-color: #fff; border-bottom: solid 1px #d8d8d8;}
footer { position: fixed; left: 0px; bottom:-8mm; right: 0px; background-color: #b49132; height: 11mm; }
footer .footerText { font-size: 14px; text-align: center; color: white; font-family: 'Montserrat-Medium'; font-weight:400; padding-top:8px; }
content{
height:645px;
padding:0px 30px;
}
As you can see, I am trying to put dynamic header text by using {{ headerTExt }} by setting it inside my Template file with variable {% set headerTExt = 'asdf' %} but its not working. If I put static text, its working but dynamic not working.
Can someone guide me how can I make it work
You're looking for {% placeholder %}: https://octobercms.com/docs/markup/tag-placeholder
Template File:
{% put headerText %}Test{% endput %}
Layout File:
<html>
<head>
// etc
</head>
<body>
<div id="header">
{% placeholder 'headerText' %}
</div>
</body>
</html>
Related
I am creating pdf by passing html to dompdf. I am trying to add header and footer on every page of the pdf. The issue is that the pdf has multiple pages. The header is created on the first page and footer on the last page. I need them both on every page.
#page {
margin: 0cm 0cm;
}
body {
margin-left: 1cm;
margin-right: 1cm;
margin-top: 1cm;
margin-bottom: 1cm;
}
header {
position: fixed;
top: 0cm;
left: 0cm;
right: 0cm;
height: 1cm;
padding: 10px;
background-color: #0011ff;
}
footer {
position: fixed;
bottom: 0cm;
left: 0cm;
right: 0cm;
height: 1cm;
padding: 10px;
background-color: #0011ff;
}
<header>
<p>Header</p>
</header>
<div>
<p>main content. This is just an example of how I am creating the document. This div's content spans on multiple pages.</p>
</div>
<footer>
<p>Footer</p>
</footer>
I got the solution from here and added bottom: 0px; to the footer style.
Here is the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#page{
margin-top: 150px;
margin-bottom: 150px;
}
header{
position: fixed;
left: 0px;
right: 0px;
height: 150px;
margin-top: -150px;
}
footer{
position: fixed;
left: 0px;
right: 0px;
height: 150px;
bottom: 0px;
margin-bottom: -150px;
}
</style>
</head>
<body>
<header>
<img src="{{public_path("images/header.jpg")}}" style="width: 100%" >
</header>
<footer>
<img src="{{public_path("images/footer.jpg")}}" style="width: 100%">
</footer>
<main>
<!-- content here -->
</main>
</body>
</html>
The generated PDF had the header and footer images on all pages.
Please add proper html tags like; You need to wrap with html and body tag to make it work. This will print header and footer in each pdf pages.
<html>
<body>
<header>
<p>Header</p>
</header>
<footer>
<p>Footer</p>
</footer>
<div>
<p>main content. This is just an example of how I am creating the document. This div's content spans on multiple pages.</p>
</div>
</body>
</html>
I'm discovering Laravel and VueJs
I just intalled it using laravel installer
I think blade is not working because when i do npm run dev, the welcome.blade.php looks like that:
As you can see, the blade directives appear...
I didn't change the code give but it looks like this:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
Vapor
GitHub
</div>
</div>
</div>
</body>
</html>
If someone have an idea to fix that ;)
I'm creating the layout for export meeting details in PDF. there is a problem during layout. I want to display divs as a column. for example image display: flex not working, I'm trying table, table-cell, table-flex and table-grid but not working. Main content shifts down sidebar length.
My all blade html codes;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,500,700&display=swap" rel="stylesheet">
<style media="screen">
#font-face {font-family: "Roboto-Light"; font-style: normal; font-weight: 300; src: url({{ url('fonts/Roboto-Light.ttf') }})}
#font-face {font-family: "Roboto-Regular"; font-style: normal; font-weight: normal; src: url({{ url('fonts/Roboto-Regular.ttf') }})}
#font-face {font-family: "Roboto-Bold"; font-style: normal; font-weight: bold; src: url({{ url('fonts/Roboto-Bold.ttf') }})}
body { font-family: 'Roboto-Regular'; }
* { margin: 0; padding: 0; }
.sidebar {
position: relative;
left: 0.9cm;
width: 5cm;
}
.page-break-after {
page-break-after: auto;
}
body {
padding-top: 3cm;
padding-bottom: 100px;
}
.wrapper {
position:relative;
width: 21cm;
display: table;
}
</style>
</head>
<body style="background: url({{ url('pdf-export-background.png') }});background-size: 100% 100%;">
<div class="wrapper">
<div class="sidebar" style="">
<p style="text-align:center;font-size:8px;">{{ $meeting['place'] }}</p>
<!-- List Item -->
<p style="margin-top: 15px;">
<h4 style="margin-left:5%;font-family:'Roboto-Bold' !important;font-size:10px;">
<span style="border-bottom: 1px solid #000;">Düzenleyen</span>
</h4>
<p style="padding-left: 5%;">
<span style="font-size:9px;">{{ $meeting['created_user']['name'] }}</span>
<span style="font-size:7px;font-weight:300;line-height:9px;">{{ $meeting['job_title_name'] }}</span>
</p>
</p>
<!--#List Item -->
</div>
<div style="position: relative;width: 5.7cm;">
THE MAIN CONTENT
</div>
</div>
</body>
</html>
Dompdf does not support flexbox as of this writing (current release is 0.8.4). Refer to issue 971 for more information.
You can generate that layout with a variety of stylings, but if your content goes beyond a page in length you'll run into some quirkiness around the Dompdf rendering process. I'd suggest floating the sidebar to the left and set a left margin on the main content.
Something like this:
<div>
<div style="float: left; width: 25%; height: 80%; background-color: #cc6633;"></div>
<div style="margin-left: 35%; width: 65%; height: 80%; background-color: #3366cc;"></div>
</div>
I want to make a watermark on a specific page on my project.
I write this in app.css
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("../images/SystemLogo.png");
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: repeat;
opacity: 0.7;
}
and this is my blade
#extends('layouts1.index')
#section('content')
<div class="container">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="watermarked">
<div class="text-center">
<h2 class="text-center"> Appri=oval report </h2>
<form method="post" action="/student/share-approval/{{$approval->uniid}}">
#csrf
<p lang="ar" dir="rtl">
// here is the approval report
</p>
<button type="submit" class="btn btn-primary">share the report </button>
</div>
</div>
</body>
</form>
</div>
#endsection
The problem is not showing the watermark as the image I want .. the result is a default background. How can I show the image as a background?
I think your HTML is formatted incorrectly. The ending form tag and div is below the body tag.
Try this:
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("https://en.opensuse.org/images/4/49/Amarok-logo-small.png");
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: repeat;
opacity: 0.7;
}
<div class="watermarked">
<div class="text-center">
<h2 class="text-center">Stuff here</h2>
<form method="post" action="/#">
<p>
A Form here
</p>
<button type="submit" class="btn btn-primary">Button</button>
</form>
</div>
</div>
I need to add margin to the top of every page except for the first page so that the text does not overlap the logo. Here is an example of the problem (scroll to the second page).
http://fsk.herrmanneasyedit.com/what-we-do/administrativeregulatory/pdf
I have looked at other examples on Stack Overflow, but nothing seems to apply directly.
Any help is greatly appreciated.
#page {
margin: 0.5in 0.5in 0.5in 0.5in;
}
html, body {
font-family: "Poppins", arial, helvetica, sans-serif;
font-size: 10px;
line-height: .8em;
}
.border {
border: 1px solid #d5d5d6;
position: fixed;
top: -0.18in;
left: -0.18in;
bottom: -0.18in;
right: -0.18in;
}
.border-url {
position: absolute;
bottom: 0.50in;
right: 0;
text-align: center;
color: #7D303B;
font-size: 11px;
font-weight: bold;
}
.logo {
padding-left:27px;
padding-top:20px;
width: 245px;
height: 37px;
}
.wrapper {
margin: 0.2in 0.2in 0.2in 0.2in;
page-break-after: always;
}
.wrapper:last-child {
page-break-after: avoid;
}
.text {
margin:0 20px;
}
.text p{
margin: 0.2em 0;
}
.row{
padding-top:62px;
position:relative;
}
.main-content{
}
HTML
<body>
<div class="border">
<img class="logo" src="" width="245" height="37" alt=""/>
<div class="border-url">
www.foulston.com
</div>
</div>
<div class="wrapper">
<div class="row">
<div class="full-photo">
<img src="" width="550" height="100" alt=""/>
<div class="page-title">
<div class="inner">
<h1>Title</h1>
</div><!--end inner -->
</div><!--end page-title -->
</div><!--end full-photo -->
</div><!--end row -->
<div class="main-content">
Main content goes here.
</div>
</div>
</body>