On my index.php file I included a PHP file (test1.php) that echo's some strings and generates a <h3> element and a <p> element with some content. Upon loading my site I noticed that those element were not reacting to my CSS but all other elements worked just fine.
I don't understand why not. I got it to work by reloading the CSS, but I don't understand why I would have to do that. Isn't PHP generating a complete HTML DOM tree before it sends it to the browser?
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>PHP & SQL Start AMPPS</title>
<meta charset="utf-8">
<meta name="keywords" content="PHP, SQL, Start">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Tomorrow&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="Style/normalize.css">
<link rel="stylesheet" type="text/css" href="Style/main.css?v=<?php echo time();?>">
<!-- The echo time forces the css to reload everytime -->
</head>
<body>
<header id="pageheader">
<h1>AMPPS Server</h1>
<p>Let's do some PHP & SQL</p>
</header>
<article id="HelloWorld-PHP" class="PHP-test" >
<h2>PHP test: Hello World</h2>
<?php include 'PHP/helloWorld.php';?>
</article>
<article id="php-test1" class="PHP-test">
<h2>PHP test: 1</h2>
<?php include 'PHP/test1.php';?>
</article>
</body>
</html>
Here is the test1.php file I include:
<?php //test1.php
$username = "Fred Smith";
echo "Username = " . $username;
echo "<br>";
$current_user = $username;
echo "Currentuser = " . $current_user;
echo "<br>";
echo "<h3>Sam's Corner</h3> <p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit. </p>"
?>
This is my CSS:
::root {
--kleur-snow: rgb(255,250,250);
}
body {
width: 80%;
margin: auto;
background-color: var(--kleur-snow);
font-family: "Tomorrow", "sans-serif";
}
#pageheader {
font-family: "Orbitron", "sans-serif";
background-color: teal;
color: white;
margin: 1em 0 1em 0;
padding: .4em;
border: solid 2px black;
}
#pageheader h1 {
margin: 0 0 0 0;
}
#pageheader p {
margin: .5em 0 0 0;
}
.PHP-test {
background-color: lightgrey;
margin: 0 0 .4em 0;
padding: .5em;
}
.PHP-test h2 {
margin: 0 0 .3em 0;
}
.PHP-test h3 {
margin: .5em 0 .3em 0;
}
.PHP-test p {
margin: 0 0 .2em 0;
}
Related
Firstly, I am writing because I have excercise to do wordpress plugin, so this is why I am putting this code into wordpress plugin(I know the plugin idea is different).
Okay so, I have code like this:
if($currentpage == $homepage or $currentpage == 'index.php') {
echo'
<html>
<head>
<style>
.coupon {
border: 5px #bbb;
width: 60%;
border-radius: 15px;
margin: 0 auto;
max-width: 900px;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: red;
}
</style>
<title>Konkurs Designerski</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="coupon">
<div class="container">
<h3><center>Zapraszamy do wzięcia udziału w konkursie</center></h3>
</div>
<img src="http://homeonthehill.pl/wp-content/uploads/2017/04/jak-urzadzic-balkon-w-bloku-1.jpg" alt="kolor" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>Prosimy zgłaszać się do konkursu pod adresem mailowym konkurs#iwb.pl</b></h2>
</div>
<div class="container">
<p class="expire">Zgłoszenia prac konkursowych trawją do 26 kwietnia. Zasady w regulaminie na stronie głównej</p>
</div>
</div>
</body>
</html>
';
}
else
{
}
?>
It works fine, but I NEED add some extra function(more advanced).
So how I can define user, who is logged? I wanna make personalized container, like Hello $user(when he's logged in wordpress account or hello Anynomous for guest).
Really thanks for help
It is needed to change this from echo all? It will works if i put it into this long echo statement?
Try to use below function to check user login.
<?php
if ( is_user_logged_in() ) {
echo 'Welcome, registered user!';
} else {
echo 'Welcome, visitor!';
}
?>
I am trying to include an external css into my PHP file:
<head>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
my CSS File:
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
display: block;
margin-top:50px;
}
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
overflow-y:hidden;
}
.container-fluid {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWklEQVQoU2P8P5PhPwMDAwNjOgMjiMYFGIlWiM2E1oMvwbZU24vDbUFYN/P/f4Z0RjAfv0J8DgT5AUM3ksnIejEV4jAZa5B8mhkH9gxf+iIsnkEyiWiF2GwHAGuiJAtmjT1hAAAAAElFTkSuQmCC);
repeat;
position: relative;
padding-bottom: 70px;
}
p{
}
.btn-success {
background-color: #85C1E9;
border:0;
}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.navbar {
padding-top: 0px;
padding-bottom: 0px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 15px;
letter-spacing: 4px;
}
col-sm-4:hover {
color:#85C1E9;
}
.navbar-nav li a:hover {
color: #85C1E9 !important;
}
.helper {
margin:auto;
padding-top: 50px;
}
.col-sm-4:hover {
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJklEQVQYV2OMq7zlw4ADMIIkF7WrbUGX/3+G4f+ASS4MVtuMzcEAiGEnwSwsT0sAAAAASUVORK5CYII=")
repeat;
}
The stylesheet is obviously used, but the plaintext is also seen in the PHP file. If tried adding type or leave it away, href as /css/base.css and without leading /, but somehow I won't get rid of the plain text in my file. Any Idea whats causing it?
The PHP File:
<html>
<head>
<title>Awesome Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/my.js"></script>
<script>
...
</script>
<header id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
...
</head>
</header>
<body>
..
</body>
EDIT:
Found the error, there was a sneaky include(css/base.css)
I tried to validate your css using the W3 Css validator and it told me there's a parse error in your css. Namely you're closing the background-image: with a semicolon while on the line below theres a repeat;. This is a syntax error, and I think because it can't parse the css, it's just displayed as plain text.
You should know if you want to give styles to php output commands, like echo or print you have to type all of your html codes .
And type your php codes middle of body tags in HTML format . Like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<?php
$text = "Hello World !";
echo "<p>" . $text . "</p>";
?>
</body>
</html>
But another problem that your code has is you typed a header tag inside head tags and close it after head closing tag and this will break the html programming grammar .
i recently debugged all the errors on the connection of my headers css and js, there are no errors anymore, but css still isnt working. but the format of my view is changed, but not as i wanted.
login.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login extends CI_Controller {
public function index(){
$data['main_content'] = 'login_view';
$this->load->view('includes/viewtemplates',$data);
}
viewTemplates.php
<?php $this->load->view('includes/header'); ?>
<?php $this->load->view($main_content); ?>
<?php $this->load->view('includes/footer'); ?>
header.php
<!--DOCTYPE html-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Login</title>
<link rel="stylesheet" href="<?php echo base_url();?>public/css/bootstrap-responsive.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="<?php echo base_url();?>public/css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="<?php echo base_url();?>public/js/jquery.js"></script>
<script src="<?php echo base_url();?>public/js/bootstrap.js"></script>
</head>
<body>
<header>
</header>
bootstrap-responsive.min.css
body {
background: #F0F0F0 ;
margin: 0;
padding: 0;
font-family: 'times-new roman';
}
#login_form {
width: 300px;
background: 3333FF;
border: 1px solid white;
margin: 100px auto 0;
padding: 1em;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
h1, h2, h3, h4, h5 {
margin-top = 0;
text-align: center;
color: 000033;
text-shadow: 0 1px 0;
}
Make sure you have to loaded the URL Helper Class in your controller or in autoload.php because to use base_url() (shorthand) you need to load URL Helper
$this->load->helper('url');
Than you can use shorthand base_url():
<?php echo base_url();?>
And i didn't see the URL helper loaded in your controller.
Also check HTML view source and hit the URL you will get the better understanding.
You can also check either ending slash / available in base_url() or not
This will also not work, if your URL looks like this:
<script src="<?php echo base_url();?>public/js/jquery.js"></script>
// example.compublic/js...
there is a problem in website images it will not load correctly
you can use base tag for this(you need to add <base> tag in <head>) ...
<base href="<?php echo base_url();?>public/">
and make sure image floder is in public directory
I'm trying to set up a universal navigation bar. I'm using include to import menu.php into index.php. When I do, it works fine; however, when I add something after the menu.php include, the menu's CSS rules carries on.
index.php
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Home | Website</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
menu.php
<head>
<title>Menu | Website</title>
<style>
// menu-only styles...
</style>
</head>
<body>
Home
</body>
<?php return; ?>
You're essentially including an HTML page within an HTML page doing it your way.
To get your CSS to target only your menu, keep it in your style.css file, but make your div have a "menu" class.
Something like this should do what you're looking for, I believe.
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
style.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
.menu {
/* padding: top&&bottom left&&right; */
padding:10px 0;
background-color: #7786ff;
text-align: center;
}
.menu a {
/* merge transitions into one line to make both functional */
transition: background-color .25s ease-in-out, padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
/* padding:top right bottom left */
padding:10px 10px 5px 10px;
}
.menu a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
menu.php
<div class="menu">
Home
</div>
This is not a PHP issue
Your CSS in menu.php comes later in the DOM than your actual stylesheet and therefore is being overwritten. Either scope your menu.php styles with some containing element or put your menu CSS code earlier in the DOM (like before style.css)
You are almost a bit closer to what you code. A HTML page can have only one html,head,title,body tag.
Just remove these html,head,title,body tags from menu.php
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test
</body>
</html>
style.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
menu.php
<style>
body {
padding-top: 10px;
padding-bottom: 10px;
background-color: #7786ff;
text-align: center;
}
a {
transition: background-color .25s ease-in-out;
transition: padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
</style>
Home
<?php return; ?>
I have a few pages which I'd like to have the same background across, so I figured an external style sheet would be the way to go. However, the background changes depending on the time of day, so I had to mix some PHP into the CSS. So now I have a file, background.php:
<html>
<style type="text/css">
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
</style>
</html>
Which is being called from two different pages. One page works perfectly fine, but the other page completely broke when I added the line require_once 'background.php', by which I mean nothing displays at all anymore. The offending page is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Penelope's Conquests</title>
<?php require_once 'background.php'; ?>
<style type="text/css">
table {
margin: 10px;
margin-left: 50%;
margin-right: 50%;
padding: 12px;
border: 10px;
text-align: center;
background-color: #fffb40;
border-style: ridge;
border-collapse: separate;
border-color: #9c6ad6;
outline-style: inset;
}
td.cap {
text-transform: capitalize;
font-variant: small-caps;
}
td.str {
font-weight: bolder;
font-size: 1.4em;
}
</style>
</head>
<body>
<h2>To date, Queen Penelope has destroyed:<br /><br /></h2>
<?php
require_once 'victims.php';
require_once 'mysqlSheep.php';
echo '<table border="3"
frame="box"
cellpadding="5">
<caption>Penelope\'s Victims.</caption>
<tr><th>Victim</th><th>Times Zapped</th>';
$hits = mysql_query("
SELECT *
FROM victims
ORDER BY amount
");
if( $hits )
{
while( $row = mysql_fetch_array($hits) )
{
echo '<tr><td class="cap">'.$row['victim'].'</td>
<td>'.$row['amount'].'</td></tr>';
}
}
else
{
echo '<p>' . mysql_error() . '</p>';
}
echo '</tr></table><br /><br />';
echo '<table border="3"
frame="box"
cellpadding="5">
<caption>Button Clicks.</caption>
<tr><th>Hour of day</th><th>Times Clicked</th>';
$time = mysql_query("
SELECT *
FROM time
ORDER BY hits
");
while( $row = mysql_fetch_array($time) )
{
print "<tr><td class='str'>".$row['hour']."</td>";
print "<td>".$row['hits']."</td></tr>";
}
?>
</body>
</html>
Why doesn't the page want to behave with the style sheet?
Another option is to attach your css file with the <link> attribute.
So in your background.php place
<?php
header("Content-type: text/css");
?>
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
And then call it using
<link rel="stylesheet" type="text/css" href="background.php" />
Placing this in 1 answer would get messy which is why I've added another one.
You've got an <html> tag inside your PHP stylesheet, which means you will get duplicate <html> tags.. not nice
Remove that and just use the <style> tags..
background.php
<style type="text/css">
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
</style>
Ohhh, the issue is that the function day() is defined in a separate file, I forgot to move it over when I was reorganizing the site.
Come on Marko, it was super fantastic script!!! I used your way in order to set custom width inside an external css file and it works great.
I do all php stuff if needed any in here:
<?php
header("Content-type: text/css");
$width= $_COOKIE['scr_width']-10;
?>
then I use the variables below inside the css file like this:
width:<?PHP echo $width."px;";?>
and I have done the include like this:
<head>
<link rel="stylesheet" href="<?PHP echo myLocVars::$mySpacePath."style.php";?>">
</head>
Including CSS can be very tricky because unfortunately it doesn't throw an error (at least I don't know how to..), and it can be a trouble. That's why I give the full path because it is a local CSS included by a local file included itself from index.php.
If you are testing your site on localhost, then try
require_once(dirname(background.php) . "/background.php");
instead of require_once(background.php);