Have you come here lately from Search Engine and got an outdated link? So sorry about that. I lost lot of my pageranked pages because of choosing-or-not to choosing sh404sef plugin for my Search Engine Friendly thing. You better stick with one option from the beginning, using only core SEF or a 3rd party's.
So if you came here and got 404 error missing page, you will notice the default error page (with the red bar and text explains) came from the Joomla system. That error page can be overriden and customized to our preference and I have made change that default one yesterday. Take a look at Lab 404 error page here for an example. This page use the same css and image files from our latest free vCard template.
Ok here are two files that needs to be uploaded to your template folder. One you should name it as error.php and placed it on your root template folder. Please edit the words to your preference first.
<?php
/**
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<title>Woohoo <?php echo $this->error->code ?> - <?php echo $this->title; ?></title>
<link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/your_template_name/css/error.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="logo">
<img src="/<?php echo $this->baseurl.'/templates/your_template_name/images/coffee_machine.png'; ?>" />
</div>
<div id="main">
<h1><?php echo JText::_('Sorry Caught 404 Here'); ?></h1>
<p class="desc1"><?php echo JText::_('Either the page is not exist or You\'re trying to play around'); ?></p>
<div id="page-info">
<p class="desc1">Things you can do</p>
<a href="http://your_site_url.com/">Back to Home</a> |
<a href="http://your_site_url.com/any-page.html">Or any page</a> |
<strong>or hire me to buy a coffee machine</strong>
<div id="footer">
<p>This is a <a href="http://www.joomla.org" title="Joomla">Joomla</a> <a href="http://www.joomla-labs.com">Custom 404 Template</a>
| Based on <a href="http://netizensmedia.com/2009/04/20/introducing-undercon-better-sweeter-customizable-wordpress-domain-parking-theme" title="Undercon">UnderCon</a> |
Coffee machine by <a href="http://www.visualpharm.com">VisualPharm</a>.</p>
</div>
</div><!-- #page-info -->
</div><!-- #main -->
</div><!-- #wrapper -->
</body>
</html>
And here's a css file, I name it as error.css and should be placed on your template css folder.
/*
THEME NAME: UnderCon
THEME URI: http://netizensmedia.com/2009/04/20/introducing-undercon-better-sweeter-customizable-wordpress-domain-parking-theme/
DESCRIPTION: Where under construction page never looked better.
VERSION: 0.4
AUTHOR: Lim Cheng Soon
AUTHOR URI: http://netizensmedia.com/
TAGS: white, one-column, fixed-width, theme-options
*/
/* --------------------------------------------------------------
Reset default browser CSS.
Based on work by Eric Meyer:
* meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
-------------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1.5;
background: #fff;
margin:0;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }
/* --------------------------------------------------------------
Structure
-------------------------------------------------------------- */
body {
background:#FFF;
color:#000;
top: 0;
left: 0;
width: 100%;
/*height: 100%;
position: fixed;*/
text-align:center;
font-family: Arial, Helvetica, 'sans serif';
}
a { text-decoration:none; }
em { font-style:italic; }
strong { font-weight:bold; }
#wrapper {
text-align:left;
width:700px;
margin:10% auto 0 auto;
}
#logo {
margin-top:40px;
width:250px;
float:left;
padding-right:10px;
}
#main { width:420px; float:left; }
h1 {
font: Arial, Helvetica, verdana;
font-size:50px;
font-weight:bold;
text-transform:uppercase;
letter-spacing: -0.05em;
line-height:1em;
}
#main p.desc1{ padding:10px 0; font-size:22px; font-family: Arial, Helvetica; line-height:1.2em; color:#666; text-transform:uppercase;}
/* main_content ----------------------------------------- */
.main_content { padding:10px 10px;}
.main_content p { line-height:14px; margin-bottom: 10px; }
.main_content span { font-size:11px; }
.main_content a, .main_content span a { color:#a1141a; text-decoration:none; text-transform:uppercase;}
.main_content a:hover, .main_content span a:hover { color:#333; }
/* contact ------------------------------ */
.row { height:100%; overflow:hidden; padding-bottom:5px; }
.field_l { width:120px; float:left; }
.field_r { width:250px; float:right; font-weight:bold; }
/* content for social profile */
#content { padding: 0 10px; background: url(../images/content.png) repeat-y left; }
#content ul { display:block; margin:0; padding:0; list-style:none; }
#content li { float: left; width:34px; margin-left:0px; }
#content a { font-size: 11px; color: #666; text-decoration: none; padding: 10px 0 5px; display:block; width:34px; height:40px; position:relative; z-index:2; cursor:pointer; }
#content li a img { border: 0; float: left; margin: 0 0px; }
form {
padding:15px 0;
border: 1px solid #f1f1f1;
border-style: solid none;
}
form p, form input {
display:inline;
}
form .email {
border:1px solid #ccc;
padding:5px;
}
form .button {
border:1px solid #f1f1f1;
padding:5px;
background:#000;
color:#fff;
text-transform:uppercase;
}
form .button:hover {
background:red;
}
.form-label {
border-left:1px solid #FE8F45;
padding:36px 10px;
}
#submit {
vertical-align:middle;
}
#page-info {
padding:10px 0;
clear:both;
font-size:12px;
color:#666;
text-align:left;
}
#page-info a {
color:#666;
font-style:italic;
}
#page-info a:hover {
color:#000;
}
.jTweetFollow
{
background: url(../images/twitter.png) no-repeat 0 0;
line-height: 2em;
padding: 8px 0 8px 40px;
display: block;
margin: 10px 0 0 10px;
}
#footer {
position:absolute;
top:750px;
bottom:10px;
right:10px;
width:300px;
color:#ccc;
font-size:11px;
}
#footer a{ color:#ccc; }
#footer a:hover{ color:#999; }
/* =Images
-------------------------------------------------------------- */
/* Only added for the sake of compliance with Themes Directory */
.entry-content img { margin: 0 0 18px 0; max-width:100%; }
img.alignleft,img.align-left {
float: left;
margin-right:20px;
}
img.alignright,img.align-right {
display: block;
float: right;
margin-left:20px;
}
img.center, img.centered {
margin: 0 auto;
display: block;
float: none;
clear: both;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-smiley { /* Prevent the smileys from breaking line-height */
max-height:12px;
}
/* --------------------------------------------------- */
#gmctime {padding:10px 0; font-size:18px; font-family: Arial, Helvetica; line-height:1.2em; color:#666; text-transform:uppercase;}
For the coffee machine image you can get it from visualpharm.com or you can use any image you like and edit the image path from the error.php file.
Hope this work for you.
