I want to send an email but email show pure html:
public function build(){
return $this->subject('finish service')
->view('emails.subscribers',['msg'=>$this->msg]);
}
my template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>آریانت</title>
<style>
* {
margin: 0;
padding: 0;
}
* {
font-family: IRANYekan, Helvetica, Tahoma, Arial, sans-serif;
}
img {
max-width: 100%;
vertical-align: middle;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
direction: rtl;
font-size: 15px;
background-color: #F1F3F4;
}
a {
color: #2ba6cb;
text-decoration: none;
}
.table-wrapper {
width: 100%;
background-color: #F1F3F4;
max-width: 700px;
margin: 0 auto;
direction: rtl;
padding: 0 40px;
}
.table-header,
.table-body,
.table-footer {
width: 100%;
background-color: #fff;
}
.table-header {
background-image: url(https://www.ariaservice.net/app/uploads/email/bg-header.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
padding: 10px 15px;
}
.logo > img {
height: 50px;
}
.table-nav {
margin: 0;
padding: 0;
list-style: none;
text-align: left;
}
.table-nav > li {
display: inline-block;
}
.table-nav > li + li {
margin-right: 15px;
}
.table-nav > li > a {
font-weight: bold;
color: #fff;
}
.table-nav > li > a:hover {
opacity: 0.7;
}
.table-body {
padding: 15px 15px 40px;
}
.table-price th,
.table-body td {
padding: 10px;
}
.btn {
background-color: rgb(63, 141, 247);
font-weight: bold;
color: #fff;
padding: 0 20px;
border-radius: 37px;
height: 37px;
line-height: 37px;
white-space: nowrap;
display: inline-block;
}
.btn:hover {
background-color: rgb(87, 190, 146);
color: #fff;
}
.table-price {
width: 100%;
border-collapse: collapse;
}
.table-price th,
.table-price td {
border: 1px solid #000;
}
.table-footer {
background-image: url(https://www.ariaservice.net/app/uploads/email/bg-footer.png);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
padding: 0 50px 70px;
}
.btn-sup {
border-radius: 20px;
background-color: rgb(87, 190, 146);
color: #fff;
position: relative;
text-align: center;
width: 100%
}
.btn-sup > img {
width: 100px;
}
.social-nav {
margin: 30px 0 0;
padding: 0;
list-style: none;
}
.social-nav > li {
display: inline-block;
}
.social-nav > li + li {
margin-right: 15px;
}
.social-nav > li > a:hover {
opacity: 0.7;
}
.social-nav > li > a > img {
height: 32px;
}
.bg-blue {
background-color: rgb(63, 141, 247);
}
.bg-green {
background-color: rgb(87, 190, 146);
}
</style>
</head>
<body>
<table class="table-wrapper">
<tr>
<td>
<table class="table-header">
<tr>
<td>
<img src="https://www.ariaservice.net/app/uploads/email/logo.png" alt="">
</td>
<td>
<ul class="table-nav">
<li>خانه</li>
<li>هاست لینوکس</li>
<li>خرید دامنه</li>
</ul>
</td>
</tr>
<tr>
<td colspan="1000" align="center">
<img src="https://www.ariaservice.net/app/uploads/email/icon-header.png" alt="">
</td>
</tr>
</table>
<table class="table-body">
<tr>
<td>
{{$msg}}
</td>
</tr>
</table>
<table class="table-footer">
<tr>
<td>
<table class="btn-sup">
<tr>
<td width="100">
<img src="https://www.ariaservice.net/app/uploads/email/icon-support.png" alt="">
</td>
<td>
<p>پشتیبانی آنلاین ، آماده پاسخگویی به شماست</p>
<strong dir="ltr">021 9101 2601</strong>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<ul class="social-nav">
<li><img src="https://www.ariaservice.net/app/uploads/email/icon-twitter.png" alt=""></li>
<li><img src="https://www.ariaservice.net/app/uploads/email/icon-facebook.png" alt=""></li>
<li><img src="https://www.ariaservice.net/app/uploads/email/icon-instagram.png" alt=""></li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You need to use ->with() according to docs for laravel 8.
So your code is:
/**
* Build the message.
*
* #return $this
*/
public function build()
{
return $this->subject('finish service')
->view('emails.subscribers')
->with([
'msg' => $this->msg,
]);
}
Related
Here is the problem -> Problem
I'm trying to put that piece of text under the table but it is overlapping on the table.
And i cannot get it to the bottom. I think its because on condition it is making the <tr> and because of that the text part gets rendered before the loop has been finished.
And here is my code ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Records</title>
</head>
<body>
<style>
.pdfContainer {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
table {
width: 100%;
text-align: center;
margin-right: auto;
margin-left: auto;
float: bottom;
border: none;
}
td {
text-align: center;
font-size: 0.95em;
color: #252a34;
font-weight: 500;
background-color: #fff;
white-space: nowrap;
}
th,
td {
padding: 15px;
border: 1px solid #252a34 !important;
border-collapse: collapse;
border-spacing: 0;
}
th {
text-align: center;
font-size: 0.95em;
font-weight: 800;
border: none;
white-space: nowrap;
}
.attdStatusTdpresent {
color: #18a14f;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-weight: 600;
font-size: 0.95em;
font-family: "Merriweather Sans", sans-serif;
}
.attdStatusTdabsent {
color: #b82348;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-weight: 600;
font-size: 0.95em;
font-family: "Merriweather Sans", sans-serif;
}
.attdStatusTdlate {
color: #ff2e63;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourExcellent {
color: #289672;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourGood {
color: #00bfa6;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourAverage {
color: #ffc947;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourBad {
color: #ff2e63;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressExcellent {
color: #289672;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressGood {
color: #00bfa6;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressNeed {
color: #ffc947;
padding: 8px;
width: 140px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
white-space: nowrap;
}
.attProgressprogressive {
color: #185adb;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.pdfContainer {
width: 100%;
display: flex;
align-items: flex-start;
box-sizing: border-box;
}
.logo>img {
width: 100%;
min-height: 30px;
}
.nameContainer {
width: 100%;
text-align: center;
}
</style>
<div class="logo">
<img src="<?php echo Illuminate\Support\Facades\URL::to('/') . '/' ?>images/l.jpg" alt="">
</div>
<div class="nameContainer">
<h2> {{$studentName}} </h2>
</div>
<div class="pdfContainer">
<table>
<tr>
<th> PRÉSENCE </th>
<th> COMPORTEMENT </th>
<th> PROGRES </th>
<th> DATE DE L’ATELIER </th>
</tr>
#foreach($records as $record)
<tr>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
<p> {{$record['customDate']}} </p>
</td>
</tr>
#endforeach
</table>
</div>
<div class="termContainer">
<strong> Term Report: </strong>
<p>{{ !empty($termReport->text) ? $termReport->text: '' }} </p>
</div>
<div class="footerImage">
<img src="<?php echo Illuminate\Support\Facades\URL::to('/') . '/' ?>images/fol.jpg" alt="">
</div>
</body>
</html>
Any solution?
style='margin:auto; Do not use this CSS property. You give the margin size in px, rem etc. If you give percentage (%) EX: 50%, 25%, auto in dompdf it will not be captured
dompdf is mostly CSS 2.1 compliant, which means things like flexbox are not supported.
enter link description here
I have a table called admin tickets. I have this situation were one of these mails, which are on the left of the screen is clicked. Then I want to fetch subject/text, to this mail.
For example I'm clicking qweqweqwe#wp.pl, and it gives me 123123123123123.
The table looks like this:
For now the page looks like this, because I'm iterating over the whole table to the end. This looks good. The only change I want to make is as I said, I want to click the mail on the left, and get subject/text of this mail.
How can I achieve it?
Html+php:
<?php
require_once '../../services/LoggedInUserService.php';
require_once '../../services/LoggedInAdminService.php';
require_once '../../db/connect.php';
$connect = new mysqli($host, $db_user, $db_password, $db_name);
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="../../css-images/style-admintickets.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"><img src="../../css-images/dingdog-logo.png"></ul>
<ul class="main-nav">
<li style="padding-left:10px">TICKETS</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
$subject = $row['subject']; ?>
<label> <input readonly id="fi" style="margin-top: 50px;" type="text" placeholder="Example"
name="custom" value="<?php echo $emailLogin; ?>"></label><br>
<div class="container" style='position:absolute;left:0px; top:0px;'>
<h1 id="avatar">Title:</h1>
<div class="title" style='position:absolute;left:0px; top:0px;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'><?php echo $subject; ?></h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style='margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;' rows="5" cols="10"><?php echo $row['text']; ?></textarea>
</div>
<?php }
} ?>
</article>
</section>
</header>
<footer>
<img src="../../social/instagram.png"/>
<img src="../../social/twitter-white-logo.png"/>
<img src="../../social/facebook.png"/>
</footer>
</body>
</html>
Css:
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign
{
margin-top: 200px;
margin-left: 80px;
font: Bold 57px/46px Georgia;
font-weight: bold;
color: black;
}
article input
{
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 120;
border-style: none;
padding: 5px;
width: 240px;
height: 39px;
background-color: black;
}
#fi
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 161px;
}
.container {
margin-top: 300px;
height: 447px;
width: 1028px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 480px;
}
.title {
margin-top: 35px;
width: 686px;
height: 37px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 145px;
}
#avatar
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
#tytul
{
font: Bold 20px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 8px;
margin-left: 25px;
}
#subject
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
.subjectContainer
{
margin-top: 100px;
height: 264px;
width: 683px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 170px;
border-radius: 20px;
margin-top: 300px;
}
#subjectTitle
{
text-align: left;
font: Regular 20px/24px Arial;
letter-spacing: 0;
color: #000000;
padding-left: 5px;
}
#textare{
height: 600px;
width: 683px;
}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 70%);
background-size:100% 3000px;
width: auto;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 20px;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 31px/15px Arial;
padding: 5px;
}
#logo img
{
margin-left: 350px;
text-align: center;
width: 500px;
}
#profilesign
{
margin-top: 350px;
font-size: 90px;
margin-left: 360px;
width: 900px;
}
#tytul
{
font: Bold 40px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 20px;
margin-left: 25px;
}
#subjectText
{
font-size: 40px;
}
#fi
{
width: 500px;
margin-top: 500px;
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 401px;
}
.container {
margin-top: 1000px;
height: 847px;
width: 1228px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 20px;
}
.subjectContainer
{
margin-top: 150px;
height: 564px;
width: 883px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
border-radius: 20px;
}
#avatar
{
font: Bold 55px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 40px;
}
#subject
{
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 5px;
}
.title {
margin-top: 55px;
width: 686px;
height: 67px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
}
}
Hope This will help you
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
echo '<form>
<label> <input id="fi" style="margin-top: 50px;" type="submit" placeholder="Example"
name="custom" value="'.$emailLogin.'"></label><br>
</form>';
}
}?>
<?php
if(isset($_GET['custom']))
{
$text = $_GET['custom'];
$result2 = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin = '".$text."' ");
if ($result2->num_rows > 0) {
while ($row = $result2->fetch_assoc()) {
echo ' <div class="container" style="position:absolute;left:0px; top:0px;">
<h1 id="avatar">Title:</h1>
<div class="title" style="position:absolute;left:0px; top:0px;">
<h1 id="tytul" style="position:absolute;left:0px; top:0px;">'.$subject.'</h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style="margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;" rows="5" cols="10">'.$row['text'].'</textarea>
</div>';
}
}
}
?>
</article>
</section>
I would probably use Ajax for this, and then get the information that way. So when you click one of the mails on the left, then you make a Ajax call to another .php, like this.
Lets say the mail is this image.
echo'<img class="MAILyouWantToAttach" data-id = "'.$MAILyouWantToAttach.'" src = "../text.png">';
The Ajax success respons has to change the textareas content by its value.
$(document).on("click", ".Unflagging", function(){
var text= $(this).data("id");
$.ajax({
method: "post",
url: "AnotherFile.php",
data: { text: text},
success: function(data) {
$("#myTextarea").val(data);
},
error: function(data) {
alert("Error occurs!")
}
});
});
Then the other php file you want something like this, the echo is to print the text in the success area of the Ajax in the other .php.
$receiver = $_POST["text"];
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin= $receiver ");
while ($row = $result->fetch_assoc()) {
echo $row['text'];
}
This is just a guide, but i hope it helps you on your way to success.
How can I select "SUBMIT TO FACEBOOK FOR REVIEW" value and then "SUBMIT" without clicking buttons using php cURL
Here's the URL:
https://mbasic.facebook.com/nfx/basic/question/?context_str=%7B%22type%22%3A%222%22%2C%22initial_action_name%22%3A%22REPORT_CONTENT%22%2C%22story_location%22%3A%22page%22%2C%22entry_point%22%3A%22unknown%22%2C%22breadcrumbs%22%3A%5B%22offensive%22%2C%22hatespeech%22%2C%22religious%22%5D%2C%22reportable_ent_token%22%3A%22645850285587588%22%7D&redirect_uri=%2Fweirdgeometry&prev_action_info=%7B%22action_name%22%3A%22REPORT_CONTENT%22%2C%22completed_title%22%3A%22Submitted+to+Facebook+for+Review%22%2C%22completed_subtitle%22%3A%22You+have+submitted+a+report.%22%7D#_=_
Here's the source code :
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Report</title>
<meta name="referrer" content="default" id="meta_referrer" />
<style type="text/css">
/*<![CDATA[*/
.c .k {
border: 0;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
}
.c .k tbody {
vertical-align: top;
}
.c .ba>tr>td,
.c .ba>tbody>tr>td,
.c .k td.ba {
vertical-align: middle;
}
.c .k td {
padding: 0;
}
.c .k td.z {
padding: 4px;
}
.c .k td.m {
padding: 6px;
}
.c .l {
width: 100%;
}
.n {
background-color: #3b5998;
color: #fff;
}
.be {
display: inline-block;
margin: 6px 0 6px 6px;
}
._ li:not(:last-child) {
border-bottom: 1px solid #e5e5e5;
}
.c .z {
padding: 4px;
}
.c .m {
padding: 6px;
}
.o {
font-size: 16px;
line-height: 20px;
}
.bg {
font-weight: normal;
}
form {
margin: 0;
border: 0;
}
.r {
border-color: #ccced3 #c4c6ca #b4b6ba;
border-style: solid;
border-width: 1px;
}
.q>*,
.q.q>* {
border-bottom: 1px solid #e5e5e5;
}
.q>:last-child {
border-bottom: none;
}
.q+.q {
border-top: 1px solid #e5e5e5;
}
.p {
background: #fff;
}
.j {
background: #e9ebee;
}
.h {
background-color: #fff;
}
.s {
background-color: #fffbe2;
color: #7f7212;
}
.t {
padding: 2px 3px;
}
.u {
border-bottom: 1px solid;
}
.h {
border-color: #e9e9e9;
}
.s {
border-color: #e2c822;
}
.bd {
color: #000;
}
.v {
color: gray;
}
body,
tr,
input,
textarea,
.i {
font-size: medium;
}
.w {
-moz-appearance: none;
border: none;
margin: 0;
min-width: inherit;
padding: 0;
}
.y {
display: block;
}
.bh {
-moz-appearance: none;
background: none;
display: inline-block;
font-size: 12px;
height: 28px;
line-height: 28px;
margin: 0;
overflow: visible;
padding: 0 9px;
text-align: center;
vertical-align: top;
white-space: nowrap;
}
.c .bh {
border-radius: 2px;
}
.bk,
a.bk,
.c a.bk,
.c a.bk:visited {
background-color: #f5f6f7;
color: #4b4f56;
}
.c a.bk:hover,
.c .bk:hover {
background-color: #ebedf0;
color: #4b4f56;
}
.c .bk {
border: 1px solid #bec3c9;
}
.bk[disabled] {
color: #bec3c9;
}
.c .bk[disabled]:hover {
background-color: #f5f6f7;
color: #bec3c9;
}
.bj,
a.bj,
html .c a.bj {
color: #fff;
}
.c .bj {
background-color: #4267b2;
border: 1px solid #365899;
}
.c a.bj:hover,
.c .bj:hover {
background-color: #465e91;
}
.bj[disabled] {
color: #899bc1;
}
.c .bj[disabled]:hover {
background-color: #4267b2;
}
.bi {
font-size: 14px;
height: 36px;
line-height: 36px;
padding: 0 16px;
}
.c a.bh::after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.c .bh {
padding: 0 8px;
}
.c a.bh {
height: 26px;
line-height: 26px;
}
.c .bi {
padding: 0 15px;
}
.c a.bi {
font-size: 14px;
height: 34px;
line-height: 34px;
}
.c a,
.c a:visited {
color: #3b5998;
text-decoration: none;
}
.c a:focus,
.c a:hover {
background-color: #3b5998;
color: #fff;
}
body {
text-align: left;
direction: ltr;
}
body,
tr,
input,
textarea,
button {
font-family: sans-serif;
}
body,
p,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dd,
dt {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1em;
font-weight: bold;
}
ul,
ol {
list-style: none;
}
article,
aside,
figcaption,
figure,
footer,
header,
nav,
section {
display: block;
}
.f #viewport {
margin: 0 auto;
max-width: 600px;
}
#page {
position: relative;
}
/*]]>*/
</style>
</head>
<body tabindex="0" class="b c d e f g h">
<div class="i">
<div id="viewport">
<div id="objects_container">
<div class="j" id="root" role="main">
<table class="k" role="presentation">
<tbody>
<tr>
<td class="l">
<div class="m n"><span class="o">Report</span></div>
<form method="post" action="/nfx/basic/handle_action/?context_str=%7B%22type%22%3A%222%22%2C%22initial_action_name%22%3A%22REPORT_CONTENT%22%2C%22story_location%22%3A%22page%22%2C%22entry_point%22%3A%22unknown%22%2C%22breadcrumbs%22%3A%5B%22offensive%22%2C%22hatespeech%22%2C%22religious%22%5D%2C%22additional_data%22%3A%7B%7D%2C%22reportable_ent_token%22%3A%22645850285587588%22%7D&is_direct=0&redirect_uri=%2Fweirdgeometry&prev_action_info=%7B%22action_name%22%3A%22REPORT_CONTENT%22%2C%22completed_title%22%3A%22Submitted+to+Facebook+for+Review%22%2C%22completed_subtitle%22%3A%22You+have+submitted+a+report.%22%7D&"
id="actions-form"><input type="hidden" name="fb_dtsg" value="AQGWXiUi42rn:AQE8P18qBIuU" autocomplete="off" /><input type="hidden" name="jazoest" value="265817187881058510552501141105865816956804956113667311785" autocomplete="off" />
<div class="p q r">
<div>
<div class="s t u"><span class="i">Submitted to Facebook for Review</span><br /><span class="v">You have submitted a report.</span></div>
</div>
<fieldset class="w q"><label class="x y"><div class="z"><table class="k ba" role="presentation"><tbody><tr><td class="bb" style="align-self:flex-start; margin-top: 20px;" id="m_check_list_aria_label"><input aria-labelledby="m_check_list_aria_label" class="bc" type="radio" name="action_key" value="REPORT_CONTENT" /></td><td class="l"><div class="z"><div><span class="bd">Submit to Facebook for Review</span><div><span class="v">Report this Page if it violates our <a target="_blank" href="/communitystandards">Community Standards</a>.</span></div></div></div></td></tr></tbody></table></div></label>
<label
class="x y">
<div class="z">
<table class="k ba" role="presentation">
<tbody>
<tr>
<td class="bb" style="align-self:flex-start; margin-top: 20px;" id="m_check_list_aria_label"><input aria-labelledby="m_check_list_aria_label" class="bc" type="radio" name="action_key" value="BLOCK_PAGE" /></td>
<td class="l">
<div class="z">
<div><span class="bd">Block Weird Geometry</span>
<div><span class="v">You won't be able to see or contact each other.</span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</label><label class="x y"><div class="z"><table class="k ba" role="presentation"><tbody><tr><td class="bb" style="align-self:flex-start; margin-top: 20px;" id="m_check_list_aria_label"><input aria-labelledby="m_check_list_aria_label" class="bc" type="radio" name="action_key" value="UNSUBSCRIBE" /></td><td class="l"><div class="z"><div><span class="bd">Hide all from Weird Geometry</span><div><span class="v">Stop seeing posts from this Page</span></div></div></div></td></tr></tbody></table></div></label></fieldset>
</div>
<div class="be"><input value="Submit" type="submit" name="submit" class="bf bg bh bi bj" /></div>
<div class="be"><input value="Done" type="submit" name="done" class="bf bg bh bi bk" /></div>
</form>
</td>
</tr>
</tbody>
</table>
<div></div>
</div>
</div>
</div>
</div>
</body>
</html>
Screenshot
I have a mailable I am trying to send out, but for some reason, the one and only variable presented in the email is holding it up. Sparkpost won't send it if the {{$doorNumberDest}} is present (will explain later in the post), but without it, it sends fine.
So I have my controller:
public function sendDriverNotificationEmail(Request $request){
$emailDriver = $request->emailDriver;
$doorNumber = $request->doorNumber;
Mail::to($emailDriver)->send(new arrivalDriverNotify($emailDriver, $doorNumber));
}
This leads to my mail class "arrivalDriverNotify" - at this point, all variable have been successfully continued on into this mail class.
Now my mail class:
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Queue\ShouldQueue;
class arrivalDriverNotify extends Mailable
{
use Queueable, SerializesModels;
/**
* Create a new message instance.
*
* #return void
*/
public $emailDriver, $doorNumber;
public function __construct($emailDriver, $doorNumber)
{
$this->doorNumber = $doorNumber;
$this->email = $emailDriver;
}
/**
* Build the message.
*
* #return $this
*/
public function build()
{
return $this->from('office#cmxtrucking.com')
->cc('office#cmxtrucking.com')
->subject('CMX Dispatch - Driver Open for Details - Pull to Door '. $this->doorNumber)
->view('emails.arrivals.driverNotify')
->with([
'doorNumberDest' => $this->doorNumber,
]);
}
}
Now, the odd part here is that in my subject, as a test, I have included the $this->doorNumber to see if the value is still be passed along, and after I sent it, it worked, the door number (12) was in the subject like, but as you can see I have a with statement after my view in the mail class.
For whatever reason, I can't send the email through Sparkpost if it has this line:
<p>
CMX DISPATCH - We're ready for you. Please back into Dock Door {{$doorNumberDest}} with your doors open. Please come to the office with any questions.
<br>
Cheers
but if I remove the {{$doorNumberDest}}, it sends fine, just without the variable...
Below is my full template, just in case there might be something there.
Full email template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 14px;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
line-height: 1.6;
}
/* Let's make sure all tables have defaults */
table td {
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
body {
background-color: #f6f6f6;
}
.body-wrap {
background-color: #f6f6f6;
width: 100%;
}
.container {
display: block !important;
max-width: 600px !important;
margin: 0 auto !important;
/* makes it centered */
clear: both !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
padding: 20px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #fff;
border: 1px solid #e9e9e9;
border-radius: 3px;
}
.content-wrap {
padding: 20px;
}
.content-block {
padding: 0 0 20px;
}
.header {
width: 100%;
margin-bottom: 20px;
}
.footer {
width: 100%;
clear: both;
color: #999;
padding: 20px;
}
.footer a {
color: #999;
}
.footer p, .footer a, .footer unsubscribe, .footer td {
font-size: 12px;
}
/* -------------------------------------
GRID AND COLUMNS
------------------------------------- */
.column-left {
float: left;
width: 50%;
}
.column-right {
float: left;
width: 50%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #000;
margin: 40px 0 0;
line-height: 1.2;
font-weight: 400;
}
h1 {
font-size: 32px;
font-weight: 500;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 14px;
font-weight: 600;
}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
}
p li, ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* -------------------------------------
LINKS & BUTTONS
------------------------------------- */
a {
color: #348eda;
text-decoration: underline;
}
.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 5px;
text-transform: capitalize;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
.aligncenter {
text-align: center;
}
.alignright {
text-align: right;
}
.alignleft {
text-align: left;
}
.clear {
clear: both;
}
/* -------------------------------------
Alerts
------------------------------------- */
.alert {
font-size: 16px;
color: #fff;
font-weight: 500;
padding: 20px;
text-align: center;
border-radius: 3px 3px 0 0;
}
.alert a {
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 16px;
}
.alert.alert-warning {
background: #247aa9;
}
.alert.alert-bad {
background: #d0021b;
}
.alert.alert-good {
background: #68b90f;
}
/* -------------------------------------
INVOICE
------------------------------------- */
.invoice {
margin: 40px auto;
text-align: left;
width: 80%;
}
.invoice td {
padding: 5px 0;
}
.invoice .invoice-items {
width: 100%;
}
.invoice .invoice-items td {
border-top: #eee 1px solid;
}
.invoice .invoice-items .total td {
border-top: 2px solid #333;
border-bottom: 2px solid #333;
font-weight: 700;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 640px) {
h1, h2, h3, h4 {
font-weight: 600 !important;
margin: 20px 0 5px !important;
}
h1 {
font-size: 22px !important;
}
h2 {
font-size: 18px !important;
}
h3 {
font-size: 16px !important;
}
.container {
width: 100% !important;
}
.content, .content-wrapper {
padding: 10px !important;
}
.invoice {
width: 100% !important;
}
}
</style>
</head>
<body>
<table class="body-wrap">
<tr>
<td></td>
<td class="container" width="600">
<div class="content">
<table class="main" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="alert alert-warning">
<img width="200px" src="https://www.cmxtrucking.com/wp-content/uploads/2017/11/CMXlogoNew.png">
</td>
</tr>
<tr>
<td class="content-wrap">
<div class="contentEditable" align='center'>
<p>
CMX DISPATCH - We're ready for you. Please back into Dock Door {{$doorNumberDest}} with your doors open. Please come to the office with any questions.
<br>
Cheers,
<br>
<span style='color:#222222;'>Colorado Motor Express Dispatch</span>
</p>
</div>
</td>
</tr>
</table>
<div class="footer">
<table width="100%">
<tr>
<td class="aligncenter content-block"><a>Unsubscribe</a> from these alerts.</td>
</tr>
</table>
</div></div>
</td>
<td></td>
</tr>
</table>
</body>
</html>
Files need to be saved as .blade.php to make use of the Blade Templating Engine {{ }}, {!! !!}, #..., etc etc.
Rename
resources/view/emails/arrivals/driverNotify.php
To
resources/view/emails/arrivals/driverNotify.blade.php
I am trying to make a web application in PHP and I have designed my initial index.php with a login page with other header and footer design.
I want to keep the header and footer design throughout the pages and just want to change the included .phpfile as per the user redirection.
Please see the snippets below.
P.S. it is not complete code and it is work in progress.
session_start();
ob_start();
header('Content-Type: text/html; charset=utf-8');
header('Cache-Control: private');
require_once ('lib/php/connection.php');
require_once ('lib/php/global.php');
require_once ('lib/php/session.php');
require_once ('lib/php/function.php');
$aController = array_values( array_diff( explode('/', $_SERVER['REQUEST_URI']), explode('/', $_SERVER['SCRIPT_NAME'])));
if (isset($aController[0])) {
switch (strtolower($aController[0])) {
/*case 'login';
$setPage = 'dir_login/index.php';
$setTitle = 'Login';
break;*/
case 'forgot-password';
$setPage = 'dir_content/forgotPassword.php';
$setTitle = 'Forgot your password';
break;
default:
$setPage = 'dir_content/error.php';
$setTitle = '404 Error';
break;
}
} else {
//for all the default cases
$setPage = 'dir_login/index.php';
$setTitle = 'Login';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
echo '<title>';
if (isset($setTitle)) {
echo $setTitle;
echo ' - ';
}
echo D_COMPANY_NAME;
echo '</title>';
if (defined ('D_PROJECT_TITLE')) {
echo '<meta name="project-title" lang="en" content="'.htmlspecialchars(D_PROJECT_TITLE, ENT_QUOTES).'" />';
}
if (defined ('D_PROJECT_DESCRIPTION')) {
echo '<meta name="project-description" lang="en" content="'.htmlspecialchars(D_PROJECT_DESCRIPTION, ENT_QUOTES).'" />';
}
echo '<meta name="publisher" content="'.htmlspecialchars(D_COMPANY_OWNER, ENT_QUOTES).'" />';;
echo '<meta name="copyright" content="'.htmlspecialchars(D_COMPANY_NAME, ENT_QUOTES).'" />';
?>
<meta name="author" content="Saurabh Gupta, IT System Developer # Somex Automation Ltd." />
<meta name="language" content="english" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/css/custom.css"/>
<script language="JavaScript" type="text/javascript" src="lib/js/modernizr.custom.18450.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/js/cookie.js" ></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.2.min.js" ></script>
<script language="JavaScript" type="text/javascript" >
<!-- Google Tag, Hotjar Tag -->
</script>
</head>
<body>
<?php
$aBgImages = array(
'signup_bg.png'
);
?>
<div id="header"<?php echo ((!isset($aController[0]) || (strpos($aController[0], '?') !== false)) ? ' class="front" style="background-image: url(gfx/'.getRandomImage($aBgImages).'"' : ''); ?>>
<div id="top">
<div id="nav">
<?php
echo '<div id="logo-position">';
echo ' <img src="gfx/logo.png" style="margin-left: 10%; margin-top: 2%; padding-bottom: 20px;" />';
echo '» Home';
echo '</div>';
?>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="wrapper" <?php echo ((!isset($aController[0]) || (strpos($aController[0], '?') !== false)) ? ' class="front"' : ''); ?>>
<?php
include ($setPage);
?>
</div>
<div class="clearfix"></div>
<div id="footer">
<div class="clearfix"></div>
<div id="copyright">
<span>
<div="footer-back">
Phone: +353 (0) 26 65770 Email: automation#somexautomation.ie<br />
Fax: +353 (0) 26 65780 ©<?php echo date('Y').' '. D_COMPANY_NAME; ?> - Reg No. 584538<br />
</div>
</span>
</div>
</div>
</body>
</html>
My dir_login->index.php is populated on the index.php as a start page.
<?php
/**
* Created by PhpStorm.
* User: sgupta
* Date: 28/09/2017
* Time: 15:46
*/
$pageName = 'dir_login/index.php';
$pageLink = '/';
if (isset($_SESSION['sEmployeeID'])) {
header('Location: /');
exit();
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$aErrorClass = ' class="text-error"';
$aError = array();
if (!isset($_POST['employeeID']) || trim($_POST['employeeID']) == '') {
$aError['employeeID'] = 'Please type in your Employee ID';
}
if (!isset($_POST['password']) || trim($_POST['employeeID'])) {
$aError['password'] = 'Please type in your password';
} elseif (!isset($_POST['password']) || (strlen($_POST['password']) < 5)) {
$aError['password'] = 'This password is wrong';
}
if (count($aError) == 0) {
$sQueryLogin = "
SELECT employeeID, name, rate, payRate. password, level, email, type
FROM tblemployees
WHERE employeeID = ? AND
password = ?
";
if ($stmtLogin = $mysqli->prepare($sQueryLogin)) {
$sEmployeeID = $_POST['employeeID'];
$sPassword = $_POST['password'];
$stmtLogin->bind_param('ss', $sEmployeeID, $sPassword);
if ($stmtLogin->execute() === false) {
trigger_error('stmtLogin execution failed '.$stmtLogin->error, E_USER_ERROR);
}
$stmtLogin->store_result();
$numLogin = $stmtLogin->num_rows;
$stmtLogin->bind_result($employeeID, $name, $rate, $payRate, $password, $level, $email, $type);
$stmtLogin->fetch();
if ($numLogin == 1) {
}
}
}
}
//echo 'This Page';
?>
<h1>Log in your Somex Timesheets account</h1>
<form action="<?php echo $pageLink; ?>" method="post" enctype="multipart/form-data" name="loginForm" class="shadow">
<?php echo (isset($sLoginError) ? '<h2 class="text-error">'.$sLoginError.'<h2>' : ''); ?>
<ul>
<li>
<label for="employeeID" <?php echo (isset($aError['employeeID'])? $aErrorClass : ''); ?>>Your Employee ID</label>
<input type="text" name="employeeID" id="employeeID" value="<?php (isset($_POST['employeeID']) ? htmlspecialchars($_POST['employeeID'], ENT_QUOTES) : ''); ?>" />
<?php echo (isset($aError['employeeID']) ? '<div class="info-line">'.$aError['employeeID'].'</div>' : ''); ?>
</li>
<li>
<label for="password"<?php echo (isset($aError['password']) ? $aErrorClass : ''); ?>>Your password</label>
<input type="password" name="password" id="password" />
<div class="info-line"><?php echo (isset($aError['password']) ? $aError['password'].'<br />' : ''); ?>I forgot my password</div>
</li>
</ul>
<div class="clearfix"></div>
<input name="send" type="submit" class="button" value="» Log in"/>
<div class="clearfix"></div>
</form>
The initial page works fine but when I switch to other pages like forgetpassword.phpor error.php, the page gets populated with the code but design is not maintained.
Regardless the undefined links are populating with the design.
The default case in the switch statement is working as per I want but not the other pages.
CSS:
body {
font-size: 12pt;
font-family: Verdana, Geneva, sans-serif;
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
h1, h2, h3, label, input, textarea, #nav, .button, #footer, .item, .availability, #place .desc {
font-family: Arial, Helvetica, sans-serif;
}
.button {
padding: 0 20px;
background-color: #ff6801;
font-size: 1.1em;
color: #fff;
text-align: center;
line-height: 40px;
text-decoration: none;
display: block;
border: 0;
border-radius: 10px;
}
.button:hover {
background-color: #ff1700;
}
.button.fright {
margin-left: 20px;
}
.fright {
float: right !important;
}
.button.fright {
margin-left: 20px;
float: right;
margin-right: 18%;
margin-top:60px;
}
#wrapper.front {
padding: 100px 0;
}
#footer {
margin-top: 60px;
text-align: center;
padding: 40px 0;
font-size: large;
background: url(/gfx/signup_bg.png);
background-repeat: no-repeat;
background-size: 100%;
height: 50px;
}
#header {
background: url(/gfx/signup_bg.png);
background-repeat: no-repeat;
background-size: 100%;
}
.shadow {
/*
box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
-webkit-box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
-moz-box-shadow: 0 0 7px 2px rgba(0,0,0,.35);
*/
border: 1px solid #D6D6D6;
}
.text-error, .error {
color: #e84b31;
}
.text-success, .success {
color: #2aa00b;
}
input[type="text"]:disabled, select:disabled {
/*border: 1px solid transparent !important;
background: transparent;*/
cursor: not-allowed;
}
input[type="text"]:disabled:hover, select:disabled:hover {
border: 1px solid #e84b31;
}
input[type="text"], input[type="password"], input[type="file"], textarea {
width: 400px;
}
input[type="text"], input[type="password"], input[type="file"], textarea, select {
font-size: 1em;
border: 1px solid #000;
padding: 10px;
}
select {
padding: 8px 8px 9px !important;
float: left;
}
input[type="checkbox"], input[type="radio"] {
margin: 15px 15px 15px 340px;
float: left;
}
input[type="checkbox"] + label, input[type="radio"] + label {
float: left;
width: 450px !important;
text-align: left;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="file"]:hover, textarea:hover, select:hover,
input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus, textarea:focus, select:focus,
input[type="text"]:active, input[type="password"]:active, input[type="file"]:active, textarea:active, select:active {
border: 1px solid #00CC66;
}
input[type="text"], input[type="password"], textarea {
cursor: text;
}
input[type="submit"] {
padding: 0 30px;
cursor: pointer;
}
form {
background-color: #f5f6f6;
border: 1px solid #f1f3f3;
}
form {
border: 0;
padding: 30px;
}
.front form {
width: 920px;
}
.intro {
margin: 40px 0;
text-align: center;
font-size: 1.25em;
}
.front form h1 {
margin: 40px 0 20px !important;
}
form h2 {
margin-bottom: 60px;
}
.front .column h2 {
background: #6db7da url(/gfx/arc-small.png) no-repeat center top;
text-align: center;
display: block;
padding: 30px 20px 20px;
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;
}
#search h2 {
color: #053c71;
}
#search h2, #search h3 {
margin-bottom: 10px;
}
form ul li {
vertical-align: middle;
margin: 0 30px 30px 0;
}
.front form ul li {
float: left;
margin: 0 30px 30px 0;
}
.front form ul li:last-child {
margin-right: 0;
}
form li.header {
padding: 40px 0 0 340px;
border-top: 1px solid #D6D6D6;
margin: 40px 0 0 !important;
}
form li.header.no-line {
border-top: 0;
padding-top: 0;
}
form input[type="submit"] {
text-align: center;
width: 100%;
}
form .info-line {
font-size: 0.9em;
padding: 10px 0 10px 340px;
line-height: 150%;
}
.front form .info-line {
padding: 10px 0 0 0 !important;
width: auto;
margin-right: 0;
}
h1 {
font-size: 1.6em;
margin-bottom: 40px;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
h1 + h2, h1 + h3 {
margin-top: -20px;
}
p {
line-height: 200%;
font-size: 1em;
font-family: Verdana, Geneva, sans-serif;
margin: 20px 0;
}
p.warning {
background-color: #f9f99b;
padding: 10px 20px;
}
ul.warning {
line-height: 200%;
font-size: 0.9em;
display: block;
background-color: #f9f99b;
padding: 20px 30px;
list-style: square inside;
margin: 20px 0;
}
ul.warning li.header {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
}
#nav ul {
list-style: none;
display: inline-block;
padding: 0;
overflow: hidden;
margin: 16px 0;
}
#nav ul li {
float: left;
}
strong {
font-weight: bold;
}
i {
font-style: italic;
}
.front p {
margin: 0;
}
#wrapper {
width: 980px;
margin: 0 auto;
padding: 20px 0 100px;
}
#wrapper.front {
padding: 100px 0;
}
label {
display: block;
font-size: 1.1em;
float: left;
width: 300px;
text-align: right;
margin-right: 40px;
line-height: 40px;
}
.front label {
float: none;
width: auto;
text-align: left;
margin-right: 0;
}
.front form h1 {
margin: 40px 0 20px !important;
}
form h2 {
margin-bottom: 60px;
}
form ul li {
vertical-align: middle;
margin: 0 30px 30px 0;
}
.front form ul li {
float: left;
margin: 0 30px 30px 0;
}
.front form ul li:last-child {
margin-right: 0;
}
#menu ul {
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
overflow: hidden;
}
#menu ul li {
float: left;
}
.filter ul {
padding: 20px;
border-top: 1px solid #3cb3e7;
}
.filter ul li {
margin: 0 0 8px 0;
display: block;
}
#booking ul {
padding: 20px;
border-top: 1px solid #62a903;
}
#booking ul li {
margin: 0 0 8px 0;
display: block;
}
#booking ul li.availability {
padding-top: 15px;
line-height: 140%;
font-size: 1.2em;
text-align: center;
}
#booking ul li.dates {
font-size: 0.8em;
text-align: center;
}
#booking ul li.subtotal-price, .subtotal-price {
padding-top: 10px;
line-height: 140%;
font-weight: bold;
}
#booking ul li.total-price, .total-price {
padding-top: 10px;
line-height: 140%;
font-size: 1.3em;
font-weight: bold;
}
#booking ul li span {
display: block;
float: right;
}
#message-reply ul li {
margin: 0 0 30px 0;
display: block;
}
.filter ul li.item {
font-weight: bold;
padding-bottom: 10px;
line-height: 140%;
}
form li.header {
padding: 40px 0 0 340px;
border-top: 1px solid #D6D6D6;
margin: 40px 0 0 !important;
}
form li.header.no-line {
border-top: 0;
padding-top: 0;
}
form input[type="submit"] {
text-align: center;
width: 100%;
}
form .info-line {
font-size: 0.9em;
padding: 10px 0 10px 340px;
line-height: 150%;
}
.front form .info-line {
padding: 10px 0 0 0 !important;
width: auto;
margin-right: 0;
}
Apologies for my English.
Need help
Added Screenshots: index.php, forgotpassword.php