I have a contact page on my site set up like this;
contact.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="webpage.css">
<?php include 'header.php'; ?>
</head>
...rest of content
I recently set up an htaccess page with some mod_rewrite changes.
So now, I have urls like
www.example.com/user
and
www.example.com/user/contact
When I look at www.example.com/user/contact the CSS is not recognized and the page does not print any of my divs but just some worded content.
So if I have
<div id="userinfo">
User info
</div>
It just displays "User info" on the left of the page without the div being recognized.
How can I fix this problem?
The href in your CSS is a relative link. So for www.example.com/user the browser will request the css file at www.example.com/webpage.css, but for www.example.com/user/contact it will request www.example.com/user/webpage.css
That may cause part of your problem and can be fixed by preceding your hrefs with a /, so href="/webpage.css". The / will cause the browser to always request from the root of your domain so it will always request www.example.com/webpage.css regardless of the page you're on. If your css is inside some folder within your DocumentRoot (I assume you're using Apache here), you should be providing the full path to the file from the start of the doc root so possibly something like href="/css/webpage.css"
In the comments, Michael is also correct that you may have a rewrite rule error so please add that information to your question.
Use absolute URL beginning from /:
<link rel="stylesheet" href="/webpage.css" />
Related
When i try to open my page with normal request something.com my page's few animation is not working properly but if i do the same by typing full address i.e
http://something.com everything is normal. I tried using php to fix this issue.
<?php
header("Location: http://www.something.com/home.html");
?>
However, it's not working.
This is most probably the case because you hard coded your base path into the path of the assets you are loading for these animations.
Wrong:
<html>
<head>
<script type"text/javascript" src="http://www.something.com/my-asset.js"/>
</head>
Right:
<html>
<head>
<script type"text/javascript" src="/my-asset.js"/>
</head>
If you want full, absolute paths you can also dynamically set a basePath variable and use this in front of the asset path but it's not necessary in many cases.
I'm trying to create a Wordpress template on one of my website pages, http://www.windowblindshadeshutters.com/blog/. The blog is now created, but I want to keep our original existing HTML template header so that it appears like the rest of the website, and then have the Wordpress template PHP file appear as the content on this page.
I started off just copying and pasting our original HTML header code in the top of the Wordpress PHP file, but it doesn't seem to be working right. I'm also wanting to include a doctype at the top, just like the original header, but I'm thinking that you shouldn't do this in a PHP file. My desired result would also require me to mix the original css file with the Wordpress css file, and it just seems like it's not working correctly.
So my question is, "How do I use an existing HTML header (that contains all of the original CSS styling) and insert it into a Wordpress theme effeciently?" Is it as easy as cutting and pasting code, transferring the CSS files, etc?
The original website header can be found at the root domain of the link above.
I'm not entirely sure if I got your question right, so I stand to be corrected: You are intending bring some HTML elements in your main site's header into the blog section's header which is residing in a Wordpress install on your server right?
Well, you're right in the sense that it is copy and paste effort, but I think the more important questions are: from which point on you should be adding those HTML elements in the header.php and what are the things that can or cannot be changed / deleted.
Perhaps a better way to go about this would be for me to tell you the standard things in a header.php and break it down.
<!--the mark up-->
<!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">
<!--the mark up-->
<head>
<!--meta-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--meta-->
<!--document title-->
<title><?php bloginfo('name');?></title>
<!--document title-->
<!--links to scripts and stylesheets-->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/style.css" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.6.1.min.js"></script>
<!--links to scripts and stylesheets-->
</head>
<?php wp_head();?> <!--do not remove-->
THE MARK UP
Okay, so the markup definition in the Doctype is definitely needed in the header.php otherwise the Wordpress theme will not know what it's marked up as. Moreover, the blog section is a Wordpress install on a sub-directory right? Chances are is that it is so it's not gonna be able to grab any information in the root directory where your actual main site is residing in.
META
You can copy the meta description tags or keywords tags from your actual main site and add them to the header.php
DOCUMENT TITLE
You can either choose to hard code and enter the title on the code level or change the blog title in the Wordpress Dashboard and leave it as <?php bloginfo('name');?>. This PHP tag automatically draws whatever is defined as the blog title in the Wordpress Dashboard as the document title. So if the blog title is different from your actual site's title then you will most probably see a discrepancy in that.
LINKS TO SCRIPTS AND STYLESHEETS
If you wish to include the stylesheet from your actual main site that is residing in the root directory, then you will have to change the href to an absolute link that goes there. For e.g. it will look something like <link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/css/style.css" /> rather than <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/style.css" /> which only links to within your Wordpress install's theme directory. So suppose that you link that external stylesheet from the main site's location to the header.php by means of the method I just mentioned, you can go ahead and paste the necessary HTML content from your actual site's header and the styles should come out right - as long as the classes or ids remain the same.
ADD REQUIRED HTML CONTENT
So once that is all done, go ahead and add any required HTML content from your actual site's header after the <?php wp_head();?> tag. You can add it anywhere you want to and in any order you like to. Just be sure not to mess or overwrite any default template codes that the theme has.
Hope this has answered your question somehow.
You have to edit the header.php file.
After you finished the <header> section, you can start adding the page header.
This will be included in all WP pages / posts.
If you add wrapper start tags in haeder.php, don't forget to end them in footer.php
Read more about this here: http://codex.wordpress.org/Designing_Headers
I have a small PHP website with most of my pages of the form:
<?php include("heading.php"); ?>
<!-- Content of the page -->
<?php include("footing.php"); ?>
Where "footing" contains some stuff to put at the end of each file and "heading" a lot of stuff (including another include for the menu). The problem is: I'm starting to have a lot of php file sand I would like to put some of them in folders. The straightforward way to do it is to change the code for the files in the folder to:
<?php include("../heading.php"); ?>
<!-- Content of the page -->
<?php include("../footing.php"); ?>
But it doesn't work as the include literately copy the code instead of executing it in the original file's folder, so any include and css in heading.php won't be found unless I copy those files in the new folder.
Modify heading.php so that the paths to the files it loads are absolute. For example, if you load a CSS file from css/style.css use /css/style.css or http://example.com/css/style.css instead.
You also can edit the include path, either in php.ini or directly in your code:
//Must be called before every include, if not stated in your php.ini
$PATH=get_include_path();
set_include_path($PATH.":/absolute/path/to/your/include/folder/");
Then you can use your include this way, even if you are in a sub directory:
<?php
include "heading.php"; //no brackets
include "whatever.php";
?>
It sounds like you are just losing track of where you are in your directory structure. Using ../ takes you back one level and using ./ (or just /) takes you back to the root directory and ../../ takes you back two levels.
The trick is to know where you are in the directory structure and where the file is that you want to include. If you are including or linking to a file in your css folder but you are in a file that is located in the inc folder you have to go back to the root and then to css so you would put /css/filename.ext
However, if you are in the fonts/glyphicons folder and want to link to a font in the fonts/font-awesome folder you could just use ../font-awesome. Clear as mud?
What I do is create three (or more) folders. This helps keep the various files organized and with abbreviated lettering, namely:
css (for stylesheets like bootstrap.css, style.css, etc.)
img (for images, graphics, icons, etc.)
font (for fonts, glyphicons, font-awesome, etc.)
inc (for includes/'snippets' like your heading.php and footing.php)
js (for javascripts such as html5shiv.js, boostrap.js, etc.)
Then in my heading.html file (I use html for the header and footer) I include some items like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?php echo $page_title; ?></title>
<meta name="Description" content="<?php echo $page_description; ?>">
<meta name="Keywords" content="<?php echo $page_keywords; ?>">
<meta name="Author" content="<?php echo $author_name; ?>">
<meta name="Viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/css/quicksite-redsand.css" rel="stylesheet">
<link href="/img/mm.png" type="image/x-icon" rel="shortcut icon">
<!--[if lt IE 9]><script src="/js/html5shiv.js"></script>
<script src="/js/respond.min.js"></script><![endif]-->
</head>
<body>
Then in my pages such as the index.php (homepage) I set up some parameters for that particular page plus include some snippets such as header, menu(s), other body text items, and footer, like so:
<?php
$page_name = 'Homepage';
$page_author = 'My Name...';
$page_keywords = 'home, home page, homepage';
$page_description = 'This is the home page for the ...';
$active_home = 'class="active"';
$select_home = 'class="selected"';
include ('inc/config.php'); //common to all pages
include ('inc/header.html'); //common to all pages
include ('inc/menus.html'); //common to all pages
include ('inc/banner.html');
include ('inc/review.html');
include ('inc/footer.html'); //common to all pages
?>
Since in your index.php and probably most of your pages you are at root level, in the home directory so to speak, you only need inc without the /. Looks like PHP doesn't like unnecessary /'s as it gave me an error when I tried...
I know this is a long winded answer but thought I would illustrate for better understanding.
Ok not strictly an answer to your question, but try doing it the other way, have a layout file which has the header and footer included and include the main bit of content dynamically.
<html>
<head></head>
<body>
etc...
<?php include_once '/path/to/content.php'; ?>
etc...
</body>
</html>
I am not sure if I understand your problem properly , but I have the following answer
I think you should use relative css paths to your website address
for example if we have a css file it should be like that
<link ...src="/styles/somecss.css">
so where ever you put it in your application this would take the path
http://wesiteaddres/style/somecss.css
and you can set your include path to whatever directory you want
set_include_path() ;
Hope this would help
I have a site with index.php in the root folder, images in /img , and overview.php in /content. I have a sidebar.php file that is included in both index.php and overview.php. How should I refer to /img/image.gif if I include a link in each file?
The location of image.gif changes relative to the location of the file that references it.
Using /img/image.gif in sidebar.php will work in index.php, but it fails for the file located at /content/overview.php.
The only solution that I can see is to either include a separate sidebar.php in each sub-directory, or include an /img directory in every sub-directory.
The best suggestion that I can find is to use the <base> HTML tag as suggested here:
Change relative link paths for included content in PHP
However, in the same link, SamGoody suggests that the <base> tag is no longer properly supported in Internet Explorer, since version 7.
I'd like some insight on the matter before committing to a course of action.
Thanks.
EDIT: I am using the wrong approach below with "../"
Example-
root/index.php:
...
<link rel="stylesheet" type="text/css" href="style.css" />
<title>title</title>
</head>
<body>
<?php include('include/header.php'); ?>
<?php include('include/menu.php'); ?>
...
root/include/header.php:
...
<div id="header">
<span class="fl"><img src="img/dun1.png"/></span><span class="fr"><img src="img/dun2.png"/></span>
...
root/content/overview.php:
...
<link rel="stylesheet" type="text/css" href="../style.css" media="screen" />
<title>Overview</title>
</head>
<body>
<?php include('../include/header.php'); ?>
<?php include('../include/menu.php'); ?>
...
Using /img/image.gif in sidebar.php will work in index.php, but it fails for the file located at /content/overview.php
But it shouldn't. The preceding / makes it an absolute path which will work from any point on the server. If this doesn't work for you, there's a problem somewhere - in that case, post some examples.
Unless you are planning to move the whole site into a sub-directory one day, or move images to a Content Delivery Network (both actions would require re-writing the addresses) you can safely use absolute URLs.
I have the following problem:
The URL is http://www.myhomeurl.com/application1/ and the base is:
<base href="http://www.myhomeurl.com/"/>
All resources like images, css and javascript will be at:
http://www.myhomeurl.com/css/myfile.css
http://www.myhomeurl.com/js/myscript.js
http://www.myhomeurl.com/images/img.jpg
BUT, the link will be at "application1", for example:
http://www.myhomeurl.com/application1/page1.html
http://www.myhomeurl.com/application1/page2.html
http://www.myhomeurl.com/application1/page3.html
The question is: How to apply base URL for resources (like css, js, etc) and apply the base/application1 for page links?
Here is a problem when I have:
Click me!
When the user clicks this the page will going to:
http://www.myhomeurl.com/page1.html
and not to:
http://www.myhomeurl.com/application1/page1.html
You could use a base tag and change it so all urls can be relative to the applications base.
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.myhomeurl.com/application1/" />
</head>
<body>
<!-- content -->
</body>
</html>
Additional information can be found at http://www.w3schools.com/tags/tag_base.asp
edit: w3c spec on base tag http://www.w3.org/TR/html4/struct/links.html#h-12.4 also illustrates how to pull images from other locations.
Change like this on your resources
<link href="./css/myfile.css" rel="stylesheet" type="text/css" />
Not like
<link href="http://www.myhomeurl.com/css/myfile.css" rel="stylesheet" type="text/css" />
And your base it looks like this
<base href="http://www.myhomeurl.com/application1/"/>
Use this varriable in link HTTP_SERVER
define('HTTP_SERVER', 'http://www.myhomeurl.com/application1/');
Click me!
I'm a little late for this question, but I can see none of the answers really do what (I think) you need.
I suggest you to use (as others have already said) a Base Url like this:
<base href="http://www.myhomeurl.com/application1/" />
This way your links will work in the intended way. Then, when you add resources, you only have to go up to the parent directory, like the following:
<link href="../css/myfile.css" rel="stylesheet" type="text/css" />
Or
<style type="text/css">
#import url(../css/myfile.css);
</style>
Note the ../, telling the browser to exit from "application1" directory, going up one step in the file structure.
Hope this helps :)
you should have something like this
root
root/css
root/js
root/files/html1.htm
root/files/htmml2.htm
root will be nothing but /// your website name
http://www.myhomeurl.com
Define two constant one for your css, js resources and one for links and use them across the application:-
define('RESOURCE_URL','http://www.myhomeurl.com/');
define('LINK_URL','http://www.myhomeurl.com/application1');
so that if any change in base url you can look up to these constants only.
I would start all link herd with /and the top directory of the URI. That makes them relative to the domain. Then just put the protocol and domain in the base.
when using base url you should not put www. in it.
Next if your url is mysite.com and your app is located at mysite.com/app then you set your base to be mysite.com/app when you use your example info.html it will look like mysite.com/app/info.html.
You can also use ../app/info.html and it will look like mysite.com/app/info.html