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
Related
I am using PHP sessions to to provide specific forms on a page and need to toggle between a "show form" link and the form. I have this working using jQuery toggle(), but I cannot figure out how to prevent the "show form" link from displaying in both toggle states.
I have experimented with jQuery hide() after toggle(), but this made everything disappear, and I have tried using CSS visibility: hidden (which also just caused everything, including the PHP content, to disappear).
<div id="togLink">
<?php echo $JQclick; ?>
</div>
<div id="showForm">
<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/formInc.php'; ?>
</div>
<script>
function toggleForm() {
$("#showForm").toggle();
$("#togLink").toggle();
}
$("#togLink").click(function() {
toggleForm();
});
$("#showForm").click(function() {
toggleForm();
});
</script>
The above code works, but the PHP output is displayed in both toggle states (which, I know, is the expected behaviour). As I said above, I need some way of making the toggle state "either or" - clickable link or form, not both. Can anyone offer any suggestions for this?
...
...
CSS code:
#font-face {
font-family: 'blair_capsregular';
src: url('../.typefaces/blair_caps-webfont.woff2') format('woff2'),
url('../typefaces/blair_caps-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#ExBox {
width: 600px;
margin: 50px auto 0 auto;
text-align: justify;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 1.6;
}
.titleBar {
width:100%;
}
.Tbox {
float:left; height:25px;
text-align: center;
font-size: 15px;
font-family: 'blair_capsregular';
}
#box {
border: 2px solid blue;
margin: 0;
position: static;
padding: 0 2px 0 2px;
text-decoration: none;
}
#box a:link {
color: orange;
text-decoration: none;
}
#box a:visited {
color: orange;
text-decoration: none;
}
.Tbox:nth-child(1) {
width:33.3%;
}
.Tbox:nth-child(2) {
width:33.3%;
}
.Tbox:nth-child(3) {
width:33.3%;
}
.clearRed {
clear: both;
color: red;
}
.Tbox a:link {
color: black;
text-decoration: none;
}
.Tbox a:visited {
color: black;
text-decoration: none;
}
.Tbox a:hover {
color: red;
text-decoration: none;
}
.Tbox a:active {
color: hotpink;
text-decoration: none;
}
.Tbox a:focus {
color: hotpink;
text-decoration: none;
}
/* FORM CSS - Placeholder colors */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #9b9b9b;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #9b9b9b;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #9b9b9b;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #9b9b9b;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #9b9b9b;
}
textarea::placeholder { color: #9b9b9b; font-family: arial; }
/* Colors for focused fields */
input[type=text], input[type=email], textarea {
outline: none;
border: 1px solid #9b9b9b;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
border: 1px solid #00C5BE;
}
/* Input styling */
textarea {
font-family: arial;
width: 27rem;
font-size: 1rem;
padding: 0.6rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input {
display: block;
font-size: 1rem;
width: 27rem;
padding: 0.6rem;
margin: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input[type=submit] {
width: auto;
background-color: #00C5BE;
border: none;
color: #fff !important;
font-size: 1em;
padding: 10px 50px;
text-transform: uppercase;
font-weight: normal;
}
/* Hide the fake field */
#m66 {
display: none;
}
/* VERTICAL SLIDER */
* { margin:0; padding:0; }
a { text-decoration: none; }
.expand {
background: #fff;
overflow: hidden;
color: #000;
line-height: 50px;
transition: all .5s ease-in-out;
height: 0;
}
.expand:target {
height: 50px;
}
.close {
max-height: 0;
}
/* JQUERY TESTING */
.box{
display:none;
}
#showForm {
display: none;
}
...
...
Thanks to Grant Noe this is almost working. With the above code everything works perfectly ...except that clicking on the form causes it to disappear. Grant has since revised the code (again, thanks); but the revised code, whilst addressing the problem of the disappearing form, has a visible "contact form" link in both toggle states and loads the form first, not the link. The latter should be simple to fix; but I cannot figure out how to show either the contact form link or the form, not both in both toggle states.
The code, when using Grant's revised code, is as follows:
<div id="togLink">
<?php echo $JQclick; ?>
</div>
<div id="showForm">
<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/form.php'; ?>
</div>
<script>
$("#togLink").click(function() {
$("#showForm").toggle();
$("#contactForm").toggle();
});
</script>
#font-face {
font-family: 'blair_capsregular';
src: url('../.typefaces/blair_caps-webfont.woff2') format('woff2'),
url('../typefaces/blair_caps-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#ExBox {
width: 600px;
margin: 50px auto 0 auto;
text-align: justify;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 1.6;
}
.titleBar {
width:100%;
}
.Tbox {
float:left; height:25px;
text-align: center;
font-size: 15px;
font-family: 'blair_capsregular';
}
#box {
border: 2px solid blue;
margin: 0;
position: static;
padding: 0 2px 0 2px;
text-decoration: none;
}
#box a:link {
color: orange;
text-decoration: none;
}
#box a:visited {
color: orange;
text-decoration: none;
}
.Tbox:nth-child(1) {
width:33.3%;
}
.Tbox:nth-child(2) {
width:33.3%;
}
.Tbox:nth-child(3) {
width:33.3%;
}
.clearRed {
clear: both;
color: red;
}
.Tbox a:link {
color: black;
text-decoration: none;
}
.Tbox a:visited {
color: black;
text-decoration: none;
}
.Tbox a:hover {
color: red;
text-decoration: none;
}
.Tbox a:active {
color: hotpink;
text-decoration: none;
}
.Tbox a:focus {
color: hotpink;
text-decoration: none;
}
/* FORM CSS - Placeholder colors */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #9b9b9b;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #9b9b9b;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #9b9b9b;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #9b9b9b;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #9b9b9b;
}
textarea::placeholder { color: #9b9b9b; font-family: arial; }
/* Colors for focused fields */
input[type=text], input[type=email], textarea {
outline: none;
border: 1px solid #9b9b9b;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
border: 1px solid #00C5BE;
}
/* Input styling */
textarea {
font-family: arial;
width: 27rem;
font-size: 1rem;
padding: 0.6rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input {
display: block;
font-size: 1rem;
width: 27rem;
padding: 0.6rem;
margin: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input[type=submit] {
width: auto;
background-color: #00C5BE;
border: none;
color: #fff !important;
font-size: 1em;
padding: 10px 50px;
text-transform: uppercase;
font-weight: normal;
}
/* Hide the fake field */
#m66 {
display: none;
}
/* VERTICAL SLIDER */
* { margin:0; padding:0; }
a { text-decoration: none; }
.expand {
background: #fff;
overflow: hidden;
color: #000;
line-height: 50px;
transition: all .5s ease-in-out;
height: 0;
}
.expand:target {
height: 50px;
}
.close {
max-height: 0;
}
/* JQUERY TESTING */
.box{
display:none;
}
#togLink {
color: blue;
cursor: pointer;
}
#togLink:hover {
text-decoration: underline;
}
#showForm,
#contactForm {
width: 425px;
height: 550px;
}
#showForm {
background-color: #DDD;
}
#contactForm {
background-color: #AAA;
display: none;
}
I have not added-in contactForm to the HTML side of things, because it does not fix the persistent "contact form" link and leaves an ugly background-colour box behind even when hiding the form but failing to hide the link.
...
...
26 May 2019: with reference to a reply by rg88 [ How do I hide a part of a form and make it visible only on clicking a "Add another" button? ] this is what finally worked:
<a id="togLink" href="#"><?php echo $formClick; ?></a>
<div id="togForm"><?php require_once $_SERVER["DOCUMENT_ROOT"] . '/form.php'; ?>
</div>
<script>
$( "#togLink" ).on( "click", function() {
$('#togForm').toggle();
});
</script>
#togForm {
display: none;
}
There is still the issue of not being able to make the words "Contact Form" disappear when the form is loaded or being able to replace the words with something else, but it appears that it is not possible to make this happen because the Contact Form link (in this case) is the toggle point and therefore has to remain constant in all toggle states.
You're toggling just the one element right now, given this format: $(toggled-element).toggle();. You'll need to toggle both elements like this:
$('#togLink').click(function(){
$('#showForm').toggle();
$('#contactForm').toggle();
});
If you initially want the link showing and the form hidden, you could hide the form with css with display: none;, or at the top of your html in a script with $('#showForm').hide();. So the total result would be something like this:
$("#togLink").click(function() {
$("#showForm").toggle();
$("#contactForm").toggle();
});
#togLink {
color: blue;
cursor: pointer;
}
#togLink:hover {
text-decoration: underline;
}
#showForm,
#contactForm {
width: 425px;
height: 550px;
}
#showForm {
background-color: #DDD;
}
#contactForm {
background-color: #AAA;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="togLink">Toggle Form</div>
<div id="showForm"></div>
<div id="contactForm"></div>
Let me know if I missed something.
Changelog:
I added the #contactForm div that's not seen in OP to adjust to OP use-case requests. The clarification occurred in the comments on my answer.
Placing the PHP in an HTML element allows you to have separate control over that element:
<div id="togLink">foo
<?php echo $JQclick; ?>
</div>
<div id="showForm">bar
<span>glorp<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/formInc.php'; ?></span>
</div>
Use CSS to hide the element:
span {
display: none;
}
Then avoid the element to be toggled, using .not():
$('#togLink').click(function(){
console.log('click');
$('#showForm').not('span').toggle();
});
Here is a DEMO
I have been working on a contact system - I got it to work, replies, everything - But the margins are way out of wack - see pic - Does anyone have any ideas what I am doing wrong? It is also centered and I want it to the left.
I have listed my index.php and styles.css below. I have to integrate it into an existing website - www.londonontariomortgages.ca/blog.html - So I am thinking of doing iFrame - However, with it not creating a new line when past the margin it looks dumb.
index.php
<?php require_once 'php/connect.php'; require_once 'php/functions.php'; ?>
<!doctype html>
<html>
<head>
<title>YouTube Comment System Series</title>
<meta charset="UTF-8" lang="en-US">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/global.js"></script>
</head>
<body>
<p>
<div class="page-container">
<?php
get_total();
require_once 'php/check_com.php';
?>
<form action="" method="post" class="main">
<label>enter a brief comment</label>
<textarea class="form-text" name="comment" id="comment"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="post">
</form>
<?php get_comments(); ?>
</div>
</p>
</body>
</html>
styles.php
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
/* resets */
* {
margin:0px;
padding:0px;
box-sizing:border-box;
font-family:'Calibri', sans-serif;
outline:none;
}
/* Animations */
#keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
/* body, html */
html, body {
background-color:#edf1f5;
}
/* content */
.page-container {
width:80%;
height:auto;
min-height:100vh;
margin:0 auto;
padding:50px 10px 0px 10px;
}
.comment {
width:45%;
height:auto;
padding:7px 23px;
margin:0px auto;
margin-bottom:10px;
text-align:left;
}
.child {
margin-top:10px;
margin-left:30px;
padding-left:5px;
}
.child-comments {
border-left:1px solid rgba(1,1,1,0.2);
}
form.main {
width:45%;
margin:0 auto;
margin-top:5px;
}
.form-input {
border:1px solid rgba(1,1,1,0.3);
width:50%;
padding:4px 7px;
font-size:13px;
line-height:24px;
resize:none;
}
.form-text {
border:1px solid rgba(1,1,1,0.3);
width:100%;
padding:4px 7px;
margin-top:5px;
font-size:13px;
line-height:24px;
resize:none;
transition:ease 0.2s all;
outline:none !important;
}
.form-text-error {
border-color:rgba(237,28,36,0.7);
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.form-text:focus {
border-color:rgba(0,114,188,0.7);
}
.form-submit {
text-transform: uppercase;
border:1px solid rgba(1,1,1,0.3);
cursor:pointer;
padding:5px 13px;
margin-top:5px;
}
/* fonts */
.user, .time {
display:inline-block;
}
.user {
font-size:13px;
color:#0072bc;
text-decoration: none;
word-break: break-all;
line-height:17px;
}
.time {
font-size:11px;
color:#b2b1b1;
transition:ease 0.2s all;
}
.comment:hover .time {
color:#767676;
}
.comment-text {
font-size:13px;
line-height:17px;
color:#222;
margin:0px 10px;
}
a {
font-size:11.2px;
text-transform: uppercase;
text-decoration: none;
color:#222;
cursor:pointer;
transition:ease 0.3s all;
}
a:hover {
color:#0072bc;
}
.link-reply {
color:#767676;
margin-left:20px;
}
h1 {
width:45%;
height:auto;
margin:0px auto;
font-size:16px;
font-weight:300;
text-transform: uppercase;
border-bottom:1px solid rgba(1,1,1,0.2);
}
label {
font-size:13px;
text-transform: uppercase;
vertical-align: bottom;
}
See updated CSS, I removed margin: auto from the .page-container and form.main and ".comment"
That was causing the centering of form on the page instead of default left alignment.
Add this CSS for fixing the text not wrapping issue
.comment-text {
font-size: 13px;
line-height: 17px;
color: #222;
margin: 0px 10px;
word-break: break-all;
}
Your comments do not wrap because there is no space in them. So to break elements with no space in them, you need to add word-break: break-all property to break them explicitly.
In ideal world scenario, your comments will definitely have spaces in them and you wont need it(word-break), but the testers(testing your website ) will test it with any dummy data, so you need to be prepared for that and apply fix generally for this issue.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
/* resets */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Calibri', sans-serif;
outline: none;
}
/* Animations */
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
/* body, html */
html,
body {
background-color: #edf1f5;
}
/* content */
.page-container {
width: 80%;
height: auto;
min-height: 100vh;
padding: 20px 10px 0px 10px;
}
.comment {
width: 45%;
height: auto;
padding: 7px 0;
margin-bottom: 10px;
text-align: left;
}
.child {
margin-top: 10px;
margin-left: 30px;
padding-left: 5px;
}
.child-comments {
border-left: 1px solid rgba(1, 1, 1, 0.2);
}
form.main {
width: 45%;
margin-top: 5px;
}
.form-input {
border: 1px solid rgba(1, 1, 1, 0.3);
width: 50%;
padding: 4px 7px;
font-size: 13px;
line-height: 24px;
resize: none;
}
.form-text {
border: 1px solid rgba(1, 1, 1, 0.3);
width: 100%;
padding: 4px 7px;
margin-top: 5px;
font-size: 13px;
line-height: 24px;
resize: none;
transition: ease 0.2s all;
outline: none !important;
}
.form-text-error {
border-color: rgba(237, 28, 36, 0.7);
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.form-text:focus {
border-color: rgba(0, 114, 188, 0.7);
}
.form-submit {
text-transform: uppercase;
border: 1px solid rgba(1, 1, 1, 0.3);
cursor: pointer;
padding: 5px 13px;
margin-top: 5px;
}
/* fonts */
.user,
.time {
display: inline-block;
}
.user {
font-size: 13px;
color: #0072bc;
text-decoration: none;
word-break: break-all;
line-height: 17px;
}
.time {
font-size: 11px;
color: #b2b1b1;
transition: ease 0.2s all;
}
.comment:hover .time {
color: #767676;
}
.comment-text {
font-size: 13px;
line-height: 17px;
color: #222;
margin: 0px 10px;
}
a {
font-size: 11.2px;
text-transform: uppercase;
text-decoration: none;
color: #222;
cursor: pointer;
transition: ease 0.3s all;
}
a:hover {
color: #0072bc;
}
.link-reply {
color: #767676;
margin-left: 20px;
}
h1 {
width: 45%;
height: auto;
margin: 0px auto;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(1, 1, 1, 0.2);
}
label {
font-size: 13px;
text-transform: uppercase;
vertical-align: bottom;
}
<html>
<head>
<title>YouTube Comment System Series</title>
<meta charset="UTF-8" lang="en-US">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/global.js"></script>
</head>
<body>
<p>
<div class="page-container">
<?php
get_total();
require_once 'php/check_com.php';
?>
<form action="" method="post" class="main">
<label>enter a brief comment</label>
<textarea class="form-text" name="comment" id="comment"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="post">
</form>
<?php get_comments(); ?>
</div>
</p>
</body>
</html>
Hi there I have two forms that display results based on user inputed data (php/database query) into tabular format. My problem is that both of the forms are positioned on the left hand side of the page and when i run the second form it places the table in the position where the the first query should be. I would like the second form to be placed to the right hand side of the page so that the first form table displays on the left hand side of the page and the second form table displays on the right hand side of the page. I have used methods like "align=right" but this hasnt worked. Any idea on how i can achieve this. Here is my code.
$table .= '<tr>';
$table .= '<td><strong><font color="#000000">ID</font></strong></td>';
$table .= '<td><strong><font color="#000000">Name</font></strong></td>';
$table .= '<td><strong><font color="#000000">Contact</font></strong></td>';
$table .= '<td><strong><font color="#000000">Start Date</font></strong></td>';
$table .= '<td><strong><font color="#000000">End Date</font></strong></td>';
$table .= '<td><strong><font color="#000000">Facility ID</font></strong></td>';
$table .= '</tr>';
foreach ($events as $event) {
$table .= '<tr>';
$table .= '<td>' . $event['id'] . '</td>';
$table .= '<td>' . $event['name'] . '</td>';
$table .= '<td>' . $event['contact'] . '</td>';
$table .= '<td>' . $event['start'] . '</td>';
$table .= '<td>' . $event['end'] . '</td>';
$table .= '<td>' . $event['resource_id'] . '</td>';
$table .= '</tr>';
}
$table .= '</table>';
echo $table;
}
}
?>
<form method="POST">
Start DATE: <input type="text" name="start" /><br />
End DATE: <input type="text" name="end" />
<input type="submit" name="submit" />
</form>
<form method="POST">
<h3 style="font-family:verdana;"> <u>Search a name</u></h3>
Name: <input type="text" name="name" /><br />
<input type="submit" name="submit" />
</form>
Wrap the two forms in a div
<div class="forms">
<form></form>
<form></form>
</div>
Use the flex property
.forms{
display:flex;
justify-content: space-between;
flex-wrap: wrap
}
For more information on flexbox, visit https://flexbox.io/ or https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
I think, what you need is css... try using Skeleton or bootstrap.
Also you have to Echo the result of the php code below the forms.
if you use Skeleton you might have something like this:
/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }
/* For devices larger than 400px */
#media (min-width: 400px) {
.container {
width: 85%;
padding: 0; }
}
/* For devices larger than 550px */
#media (min-width: 550px) {
.container {
width: 80%; }
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%; }
body {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222; }
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
/* Larger than phablet */
#media (min-width: 550px) {
h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; }
h4 { font-size: 3.0rem; }
h5 { font-size: 2.4rem; }
h6 { font-size: 1.5rem; }
}
p {
margin-top: 0; }
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: #1EAEDB; }
a:hover {
color: #0FA0CE; }
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: #333;
border-color: #888;
outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
background-color: #33C3F0;
border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB; }
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33C3F0;
outline: 0; }
label,
legend {
display: block;
margin-bottom: .5rem;
font-weight: 600; }
fieldset {
padding: 0;
border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
display: inline; }
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal; }
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
list-style: circle inside; }
ol {
list-style: decimal inside; }
ol, ul {
padding-left: 0;
margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%; }
li {
margin-bottom: 1rem; }
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px; }
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre; }
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
padding-left: 0; }
th:last-child,
td:last-child {
padding-right: 0; }
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem; }
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
width: 100%;
box-sizing: border-box; }
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
.u-pull-right {
float: right; }
.u-pull-left {
float: left; }
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #E1E1E1; }
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both; }
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<div class="row">
<div class="six columns" >
<div class="row">
<div class="columns" >
<h4>Form 1</h4>
<hr/>
<form method="POST">
Start DATE: <input type="text" name="start" /><br />
End DATE: <input type="text" name="end" /><br />
<input type="submit" name="submit" />
</form>
</div>
</div>
</div>
<div class="six columns" >
<div class="row">
<div class="columns" >
<h4>Form 2</h4>
<hr/>
<form method="POST">
<h3 style="font-family:verdana;"> <u>Search a name</u></h3>
Name: <input type="text" name="name" /><br />
<input type="submit" name="submit" />
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="twelve columns" >
<div class="row">
<div class="columns" >
<h4>My result</h4>
<hr/>
<!-- Php Code here -->
Php Code here
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Long story short I was using in-line CSS directly in the page for the longest time, but decided to put it all in one file for my own sanity. I have tried the typical
<link rel="stylesheet" href="URL">
method and it loaded, but looked extremely weird, so I decided to include it with a PHP like
<?php include("assets/style.php"); ?>
and it works perfectly fine on all of my desktop browser like Chrome and IE, but on mobile safari the entire page is a mess.
This is my page.
<!DOCTYPE html>
<html>
<head>
<title>EPICMC</title>
<meta http-equiv=Content-Type content="text/html;charset=UTF-8">
<meta name="description" content="EPICMC is a service that lets you interact with your favorite servers in a new and exciting way.">
<meta name="keywords" content="epicmc,epic mc,epicmc server,epicmc/register,epicmc mcpe,epicmc vote,epicmcs vote,epicmc twitter,epicmc register,epicmcgaming,epicmc mcpe,epicmcpixels,epicmc donate,epicmcs donate,epic mc admin,epic mc builds">
<meta name=viewport content="width=device-width, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Days+One&text=EPICM" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Numans' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="https://epicmc.us/dist/css/ripples.min.css" rel="stylesheet">
<link href="https://epicmc.us/dist/css/material-wfont.min.css" rel="stylesheet">
<?php include("assets/style.php"); ?>
</head>
<body>
<?php include("assets/header.php"); ?>
<hgroup>
<h1 class="logo">EPIC<font color="#00aa00">MC</font></h1>
</hgroup>
<form id="statsform" action="stats.php" method="GET">
<div class="group">
<input type="text" name="player" id="CAPSINPUT" placeholder="USERNAME" autocomplete="off"><span class="bar"></span>
</div>
<center><input type="submit" value="CHECK STATS" class="load-more"></a></center>
</form>
</div>
</div>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- BANNER -->
<center><ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-4863164385597709"
data-ad-slot="3088967678"></ins></center>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://epicmc.us/dist/js/textbox.js"></script>
<script src="https://epicmc.us/dist/js/loadingbutton.js"></script>
<script src="https://epicmc.us/dist/js/ripples.min.js"></script>
<script src="https://epicmc.us/dist/js/material.min.js"></script>
<script>
$(document).ready(function() {
$.material.init();
});
</script>
</body>
</html>
This is my style.php
<style type="text/css">
#charset "UTF-8";
* { box-sizing: border-box;
}
p {
display: inline;
}
form {
width: 300px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
font-family: 'Numans', sans-serif;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
background: transparent;
}
input:focus {
outline: none;
}
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75);
left: -2px;
color: #00aa00;
}
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #00aa00;
transition: all 0.2s ease;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before, input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
a:link,a:visited,a:hover,a:active {
color: #636363;
text-decoration: none;
}
body {
font-family: 'Numans', sans-serif;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align: center;
margin-top: 4em;
}
h1 {
color: #636363;
}
h2 {
font-family: 'Numans', sans-serif;
font-size: 12px;
}
#error {
font-family: 'Numans', sans-serif;
font-size: 15px;
text-align: center;
margin-top: -15px;
margin-bottom: 20px;
}
#username, h5 {
font-family: 'Numans',sans-serif;
font-size: 18px;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
text-transform: uppercase;
}
.logo {
font-family: 'Days One', sans-serif;
font-weight: lighter;
font-size: 48px;
margin-bottom: 35px;
text-align: center;
}
.alert-info, .alert-danger, .alert-warning, .alert-success {
margin-top: -20px;
background-color: #323232;
}
.container {
text-align: center;
}
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
border-bottom: none;
}
.load-more.load-more--loading {
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
};
}
#CAPSINPUT, .CAPSINPUT {
text-transform: uppercase;
}
#stats {
width: 300px;
margin: 4em auto;
padding: 1.5em 1.5em 1.5em 1.5em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
#statsform {
background: #fafafa;
}
#search {
background: transparent;
}
table {
color: #333;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid #ebebeb;
cursor: pointer;
}
td, th {
border: 1px solid transparent;
/* No more visible border */
height: 30px;
transition: all 0.3s;
/* Simple transition for hover effect */;
}
th {
background: #DFDFDF;
/* Darken header a bit */
font-weight: bold;
}
td {
background: #FAFAFA;
text-align: center;
width: 33.33%;
border-left: 2px solid #ebebeb;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td {
background: #FEFEFE;
}
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td {
background: #F1F1F1;
}
tr td:hover {
background: #666;
color: #FFF;
} /* Hover cell effect! */
.fa-stack {
color: #00aa00;
}
#container-avatar img {
background: url('https://epicmc.us/images/herobrine.png');
background-repeat: no-repeat;
background-position: center;
display: block;
height: 85px;
width: 85px;
pointer-events: none;
}
#container-avatar #badge {
font-size: 12px;
margin: -22px 0 0 130px;
position: absolute;
text-align: center;
width: 68px;
}
</style>
the href should be "style.css" and rename the style.php to style.css and remove the tag
I am working with wordpress, when I add
<?php bsg_head(); ?>
to the header all the content on the page disappears. The formatting from the stylesheet is still applied though as it changes the background colour. Can anyone help me work out why?
single.php
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php bloginfo('name'); ?> | <?php bloginfo('title'); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<?php bsg_head(); ?>
</head>
<body>
<div class="container_12" id="singlepost">
<div class="grid_12">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
</div>
<div class="clear"></div>
</div>
</body>
</html>
style.css
/*
Theme Name:
Theme URI: http://www..co.uk
Description:
Version: 2
Author: Alex Sadler
Author URI: http://www..co.uk
*/
#charset "UTF-8";
/* CSS Document */
#import url("css/grid.css");
#import url("css/fonts/fonts.css");
#import url("css/coda-slider.css");
#import url("css/jquery.fancybox.css");
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
body {
background-color: #3D341A;
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
a:link {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #CCCCCC;
text-decoration: underline;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
font-family: nexa_boldregular, Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 5px 0px 5px;
padding: 0px;
}
h1 {
font-size: 18px;
color: #FFFFFF;
}
h2 {
font-size: 12px;
color: #FFFFFF;
}
h3 {
font-size: 10px;
color: #FFFFFF;
}
P {
margin: 0px;
padding: 0px;
}
IMG {
border: 0px;
}
.center {
text-align: center;
}
#contentwrapper {
padding-bottom: 20px;
}
#header {
padding-top: 20px;
position: fixed;
width: 100%;
padding-bottom: 20px;
z-index: 99;
}
#title h1 {
font-size: 24px;
}
#info {
text-align: right;
text-transform: uppercase;
font: normal 12px nexa_lightregular, Arial, Helvetica, sans-serif;
}
#info .headerphone {
font-family: nexa_boldregular, Arial, Helvetica, sans-serif;
}
#slogan {
padding-top: 350px;
text-shadow: 0px 0px 2px #000;
}
#slogan h1 {
margin: -30px 0px 0px;
padding: 0px;
font: small-caps 120px nexa_boldregular, Arial, Helvetica, sans-serif;
}
#slogan h2 {
margin: 0px;
padding: 0px;
font: small-caps 60px nexa_boldregular, Arial, Helvetica, sans-serif;
}
.block {
height: 170px;
width: 260px;
padding: 20px;
background: #525055 no-repeat center center;
float: left;
}
.portfolioblock {
height: 210px;
width: 300px;
background: #525055 no-repeat center center;
float: left;
overflow: hidden;
}
.portfolioblock .rollover {
height: 170px;
width: 260px;
padding: 20px;
background: url(img/rolloverbg.png);
margin-top: 210px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.portfolioblock:hover .rollover {
float: left;
margin-top: 0px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.portfolioblock img {
margin-bottom: 20px;
}
.text h1 {
margin-left: 55px;
margin-top: 25px;
}
#socialmedia {
text-align: right;
}
#singlepost {
padding-top: 20px;
padding-bottom: 20px;
}
#blog a {
font-weight: normal;
}
As far as i'm aware, you need <?php wp_head(); ?>. Don't forget <?php wp_footer(); ?> in your footer, before your </body> tag, which is generally used for plugins echoing javascript libraries.
Enable the error reporting in php, so that you can see the exact error
Add the below code
<? error_reporting(E_ALL); ?>
For more PHP updates visit http://www.phpsyntax.blogspot.in/