I am learning the php and get some difficulties, I am trying to include the php file in header of another file, but the css is not working?
here is my project directory structure
Project Structure
and here is my php code...
blogpage.php
<html lang="en">
<head>
<?php include 'head.php';?>
<title>Off Canvas Template for Bootstrap</title>
</head>
I have included the path in Struts-2/blogpage.php
here is my head.php
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet">
<link href="css/blog.css" rel="stylesheet">
Is CSS folder located under the head.php?
Try to add slash to all links:
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/offcanvas.css" rel="stylesheet">
<link href="/css/blog.css" rel="stylesheet">
You may check, adding the links directly, without including th php. Try in that way to see if the links work.
Solution One:
As per your folder structure you have all the style-sheets under the CSS folder and you are trying to include it in the PHP file which is located outside the CSS folder and the procedure it that you have to directly point it out to the CSS folder to pertain the links to all the files that you provide in head.php.
The head.php should look like this so that it will not pertain to any error.
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet" type="text/css">
<link href="css/blog.css" rel="stylesheet" type="text/css">
Errors:
Your forward slash trailing in the first link will fails since you have added the forward slash over to the bootstrap.css and hence that file will not call out in blogpage.php page. That is the reason you are not getting css over to the blogpage.php.
The type="text/css" is missing to the stylesheet call in the head.php and this may also cause the Error.
And pertaing to that you need to call the head.php in the blogpage.php as follows:
<html lang="en">
<head>
<?php include ('../head.php'); ?>
<title>Off Canvas Template for Bootstrap</title>
</head>
Best Practice
But you can wrap up all the head.php, footer.php, header.php into the includes folder so that it will be a constant under that folder and you can provide up the links without any error.
Since you are calling it inside the Struts-2 folder your path may fail sometimes and the CSS may result in Error.
Tips:One the site is loaded up fully you press CTRL+U so that your entire code will open up in the new window (View Page Source) and you can check to that whether all the links that you are proving are executing correct in the browser.
Solution Two:
You can add up the forward slash over to the CSS folder structure since it will not fails up when you try to add it u over to any of the page that you use. Since all the communication will be done from the root directory on all calls
And your head.php will look like
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="/css/offcanvas.css" rel="stylesheet" type="text/css">
<link href="/css/blog.css" rel="stylesheet" type="text/css">
Related
I want to use a PHP include for the section. I have an index.php and a head.html in which I have the usual stuff: title, etc plus a link to bootstrap CDN, and a custom CSS file.
Upon testing, the styles from Bootstrap work fine but my custom overrides aren't. I was under the impression custom CSS files automatically override bootstrap? This has worked for me in the past when linking to them traditionally on every page of the website. However, I want to use PHP includes to save time.
I've played around with the order of things (i.e. Bootstrap first, custom CSS first etc), I've tried linking to the custom CSS file separately (outside the include) but can't figure it out.
Any ideas?
My code below:
index.php
<!DOCTYPE html>
<html>
<head>
<?php include("includes/head.html");?>
</head>
<body>
<div class="jumbotron paral paralsec">
<h1 class="hero-heading display-3 text-dark">Some text.</h1>
</div>
</body>
</html>
head.html
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Site Title</title>
<!-- Bootstrap CDN below -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Custom CSS below -->
<link rel="stylesheet" type="text/css" href="CSS/customCSS.css">
<!-- Font Awesome below -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Fonts below -->
<link rel="stylesheet" type="text/css" href="#">
customCSS.css (only contains one h1 style, for testing)
h1 {color: white}
Folder structure:
CSS (Folder)
customCSS.css
includes (Folder)
head.html
index.php
Ordering of CSS files plays a less important role than most people think.
When there are multiple rules targeting the same thing, specificity is the most important factor. Higher specificity almost always wins.
When selectors have an equal specificity value, the latest rule (last one called) is the one that usually gets applied.
There's a lot more info on this topic here: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
thanks for the suggestions.
It turns out I was experiencing a CSS caching issue. My browser was auto-loading an outdated version of the CSS file. The PHP include and and CSS link were working normally.
If any others come across this thread and are looking for the solution, see here:
https://css-tricks.com/can-we-prevent-css-caching/
Thanks again
Tom
I would like to upload my Axure exported html (some javascript, css, and html files - all static content) to my wordpress site.
Now, I know I can simply connect with ftp and upload the folder to the hosted drive. But I'm not sure if that's the prefered method, what security issues are the to resolve (htaccess files??), and how to link to the mockup I made in my Axure in a frame (so it dynamically resizes).
Am I trying something that's just impossible, bad practice, ... Would I need to touch php? because my web knowledge goes as far as js/css... newbie too.
Help?
Thanks!
I don't see any security concerns, or need to touch the htaccess file.
A sample of a wireframe I've shared and embedded in Wordpress is at: http://paulsizemore.com/4234-2/
Essentially, you need to add the references to the script files in the Wordpress content editor. You will need to add the web address to the href attributes of the tags.
The Wordpress Content Editor View
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="http://r4qr5p.axshare.com/resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet">
<link href="http://r4qr5p.axshare.com/resources/css/axure_rp_page.css" type="text/css" rel="stylesheet">
<link href="http://r4qr5p.axshare.com/LogIn_files/axurerp_pagespecificstyles.css" type="text/css" rel="stylesheet">
<!--[if IE 6]>
<link href="http://r4qr5p.axshare.com/LogIn_files/axurerp_pagespecificstyles_ie6.css" type="text/css" rel="stylesheet">
<![endif]-->
<script type="text/javascript">
AXSHARE_HOST_URL = 'http://share.axure.com';
AXSHARE_HOST_SECURE_URL = 'https://share.axure.com';
</script>
<script src="http://r4qr5p.axshare.com/data/sitemap.js"></script>
<script src="http://r4qr5p.axshare.com/resources/scripts/jquery-1.7.1.min.js"></script>
<script src="http://r4qr5p.axshare.com/resources/scripts/axutils.js"></script>
<script src="http://r4qr5p.axshare.com/resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
<script src="http://r4qr5p.axshare.com/resources/scripts/axurerp_beforepagescript.js"></script>
<script src="http://r4qr5p.axshare.com/resources/scripts/messagecenter.js"></script>
<script src='http://r4qr5p.axshare.com/LogIn_files/data.js'></script>
<!-- This is the iframe of the Axure Share URL -->
<iframe src="http://r4qr5p.axshare.com/" width="800"></iframe>
I want my webpage to be responsive, I knew it can be done using bootstrap but the thing is where do i include it in my .css file and I want to know whether can I include my own positioning when I use bootstrap or is shouldn't?
You include it in the <head> section. See example.
If you have any custom CSS, include it under bootstrap.min.css
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="custom_style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Place content here -->
</body>
</html>
my CSS file "styles.css" isn't loading. I'm on a mac and my PHP server is set to be loading from my "PHP" folder on my desktop.
Here is the file path to the css folder: /Users/evanbutler/Desktop/PHP/css
Code from the PHP doc:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/Users/evanbutler/Desktop/PHP/css/styles.css">
<title>Create a Business Card</title>
Proper way is copy style.css from your desktop to project folder/css. then include css by href="css/styles.css"
They are four method to link css file into html:
Linking to a separate CSS file
<link rel="stylesheet" type="text/css" href="mystyles.css" />
Embedding CSS into the HTML
<style media="screen" type="text/css">
Add style rules here
</style>
Adding Inline CSS to HTML tags
<h2 style="color:red;background:black;">This is a red heading with a black background</h2>
Importing a CSS file from within CSS
#import "newstyles.css";
You should use a relative path to your css file from your root folder of your working project. Are you using an environment like XAMPP to test your local project on? If so, your css relative url would be a href="css/styles.css"
Possibly a duplicate question, but I have searched all over and haven't found a definitive answer. My CSS files aren't being included in my Bootstrap 3 code.
Here is a sample from a header include file that is at the top of each page. The include is done through PHP.
<title>Page Title</title>
<!-- METAs -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel = "stylesheet">
<link href="css/social-buttons.css" rel = "stylesheet">
<link href="css/font-awesome.css" rel = "stylesheet">
<link href="css/styles.css" rel = "stylesheet">
</head>
<body>
<div class = "navbar navbar-default navbar-static-top">
...
All these files are sourced within a CSS file and the file is accessible. I feel like everything is being included properly. Could it be an issue with including the code from a PHP file instead of raw code inline?
The folder structure (for core php project) must be
Main Folder
-- css
--all css files
--index.php / index.html
If your paths are correct, it really shouldn't be a problem.
Let's assume your directory is like so:
/includes
/header.php (calls the below css files)
/css
/style.css
/bootstrap.css
/others.css
/index.php
In your index file, your include would be:
<?php include ('includes/header.php');?>
In your header.php:
<link href="css/style.css" rel="stylesheet"> (etc, your other css files)