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
Related
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;
}
I am using PHP to check a form. If the content is not filled in the PHP will echo an error message. I want that text to be effected by my style sheet. It is not. The CSS effects the rest of the page, just not that error text. I tried adding the span and class in with the echo and I tried adding the span and class to the html and just echo the text. No effect.
the HTML
<meta charset="utf-8">
<link rel="stylesheet" href="run.css" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
the PHP
<span class="errormsg2">
<?php
if(isset($notset)){
echo $notset;
}
?>
</span>
and the CSS
.pushme:hover{
background-color: #eb5300;
color: black;
text-shadow: none;
}
.errormsg2{
text-align: center;
color: red;
font-weight: bold;
}
The PHP example I provided was from my attempt to put the span and class into the HTML and just echo out the text content.
I believe that the problem is that your file extension should be filename.php instead of filename.html
and because php is a server side language you will have to run your code in a localhost mode to see the change.
if you try to run php code in a filename.html the browser will comment your your php code.
// filename.php file, this will work for you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<style>
.errormsg2{
text-align: center;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<span class="errormsg2">
<?php
$notset = "test";
if(isset($notset)){
echo $notset;
}
?>
</span>
</body>
</html>
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 am trying to design my own checkout page.
I wanted a blank page with no header, no side bars... So I saved a new page template in my child theme folder (code below).
<?php
/**
Template Name: Page with background only
*/
?>
<html>
<head>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<style type="text/css">
body { background-color: #cccccc; background-image: url('http://uffekirkegaard.dk/wp-content/uploads/2010/10/bg.jpg'); background-repeat: repeat-y; background-position: top center; background-attachment: scroll; }
#page-content { width: full; margin-left: 100px;margin-right: 100px;margin-top: 30px; }
#page-content p { font-size: 1em; font-family: Georgia; line-height: 1.5em; text-align: justify; }
</style>
<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body>
<?php while (have_posts()) : the_post(); ?>
<div id="page-content">
<?php the_content(); endwhile; ?>
</div>
</body>
</html>
Unfortunately this code is blocking a feature that already existed in my theme: The login feature.
Now when a visitor click of the login link nothing happened. but if I disactive the page template and click on login the login box will show (check the photos)
checkout page with blank page template
checkout page without blank page template
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);