Customization of "Page not found" (Error 404-Page)

Lille Ulven · January 22, 2015

Hi.

I am trying to do some customisation of my Page not found page...

First of all: adding some html-code to have a direct link to my contact form

<p style="font-size:14pt">You have found a link that does not refer to an existing page.
  Please 
<div class="sm-footer-navitem-contact">
  <font size="5pt"><a href="#" style="color:red">contact me</a> <font></font></div>
<p style="font-size:14pt">to let me know where you found it and which link it is, so that I can correct it. To get back to my homepage please click <a href="http://www.lilleUlven.com" style="color:red">here</a> 
</p>

But adding this additionally to what I have done in customization on that page leads to a few weird things (for those who are not logged in):
1) The photo that you would see now if you tried to access www.LilleUlven.com/cookiemonster will not be shown
2) The menu bar evaporates too
3) The contact form will not show

This mess happens as soon as one adds the <font>-tags around the <a href> for the contact form.
Everything works fine as soon as I remove that font-size change, but then the contact me shows in some little font that looks as if I would be running away from such contacts...

Do you have an idea how to fix this to make it work?

Thanks for your help in advance.

Best regards

Lille Ulven

Lille Ulven · January 25, 2015

Problem with 404-Page solved
I've got it fixed now

The solution: move all the style-stuff into the CSS and it will work with these links too. (At least on my machine.)
So now the html-part looks like this:

<p>You have found a link that does not refer to an existing page.
<div class="sm-footer-navitem-contact">
  Please <a href="#">contact me</a> to let me know where you found it and</div>
<p>which link it is, so that I can correct it. To get back to my homepage please click <a href="http://www.lilleUlven.com" style="color:red">here</a> 
</p>

And has a CSS attached which looks like this:

h2 {
font-size: 22px;
font-color: red !important;
text-decoration: underline;
}

p {
font-size: 20px;
color : black !important;
line-height: 1.5;
}

div {
  font-size: 20px !important;
  color : black !important;
}

a:link {
  color: blue !important;
  font-size: 20px !important;
  text-decoration: underline;
}

a:visited {
  color: red;
  font-size: 20px !important;
  text-decoration: none;
}

a:active {
  color: red;
  font-size: 20px !important;
  text-decoration: none;
}

a:hover {
  color: red;
  font-size: 20px !important;
  text-decoration: none;
}

:ivar

ChancyRat · January 25, 2015

Thank you for sharing the code. I was following along with interest but felt I couldn't give an answer because I wasn't sure the "contact me" link was even codable in the html.

Lille Ulven · January 25, 2015

You're welcome.
I figured that someone else might some time run into the same problem - so why not put the solution in this thread too

Customization of "Page not found" (Error 404-Page)

Comments