Jayj HTML5 theme version 2.1

Please note: This is an old post. The information is probably not accurate and up-to-date anymore.

Today is Jayj.dk’s 4th birthday. I’m celebrating that with the release of version 2.1 of my free HTML5 and CSS3 theme, now called “Jayj HTML5 theme“.

Download Demo Downloaded 78,098 times

New features in version 2.1

  • Huge design updates – The content background is now white by default instead of semi-transparent
  • Uses the CSS preprocessor LESS
  • Switched to a Twitter Bootstrap-like responsive grid-system (see about for demo)
  • Much better responsive design
  • Uses the fonts Open Sans and Merriweather, both loaded from Google Fonts
  • Contact form script have been improved
  • Modernizr 2.6.1
  • The theme supports Google Prettify but it is not included in the download

The “About” page on the demo contains a huge list of HTML elements and their styling.

As always you are free to use this theme for any purpose – both private and commercial. The theme is licensed under the New BSD License.

LESS as preprocessor

Version 2.1 uses the CSS preprocessor LESS. What is LESS? you might ask. Well the official website says that LESS is a “dynamic stylesheet language“. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

In more simple terms, LESS allows you to write CSS in a smarter way by combining functions, mixins, operations and more. The README file included in the download explains a bit more about this.

Posted in on

32 responses

  1. Very nice! I really like the white background, makes the text much easier for my eyes to read.

    I don’t know if it’s just me but the line-height seems a bit low.

    Reply

    1. Hello George,

      Thanks! I agree with you. The white background looks so awesome

      If you want to change the line-height, you can edit the @baseLineHeight variable in variables.less and recompile the styles. By default it’s 1.6

      Hope that helps you. Have a nice day 🙂

      Reply

  2. Hej Jesper,

    Really nice update – i especially like the new grid-system!
    I have implemented it, and would like every single div (eg. class=”span6″) to change color on hover – along with the whole row doing so like now. You understand what i mean?

    Best regards
    Morten

    Reply

    1. I’m not sure I know what you mean. Do you mean the color changing on the about page under “The grid system” ?

      If so, you might be able to do this:

      .row:hover [class*="span"] {
	background: #bada55;
}

.row:hover [class*="span"]:hover {
	background-color: blue;
}
      Reply

  3. Hi Jesper,

    Thanks for your fast reply!
    I’m sorry that I couldn’t explain myself very good – would propably have done better in Danish, but thought i’d keep it english if someone else wanted it too 🙂

    This was exactly what I meant and it works perfect!

    Thank you very much.

    /Morten

    Reply

  4. Hi Jesper,

    I need your help here, if you please.

    I’m using the 2.0 version (only implemented the new grid from 2.1), but when I use the <code> tags, i would like not to have the big line space/height. It’s very nice for News as it is easy to read, but when i write code, i would like it to just be normal one line spacing.

    I can’t figure out how to do it, just for the pre and code tags.

    Right now it looks like this:
    http://imageshack.dk//viewimage.php?file=/imagesfree/3ve03971.png

    My CSS for and <code> are:

    pre{
	background: #f3f3f3; /* Fallback */
	background: -moz-linear-gradient(top, #f3f3f3 0%, #ececec 100%); /* FF 3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(100%,#ececec)); /* Chrome, Safari 4+ */
	background: -webkit-linear-gradient(top, #f3f3f3 0%,#ececec 100%); /* Chrome 10+, Safari 5.1+ */
	background: -o-linear-gradient(top, #f3f3f3 0%,#ececec 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f3f3f3 0%,#ececec 100%); /* IE10+ */
	background: linear-gradient(top, #f3f3f3 0%,#ececec 100%); /* W3C */
	
	border: 1px solid;
	border-color: #fff #c9c9c9 #c9c9c9 #fff;
	border-radius: 5px;
	line-height: 1.8;
	margin: 0;
	padding: 10px 10px;
	text-shadow: 0 1px 0 #fff;
	position: inherit;
	width: 425px;
	color: #fff;
}
pre code{
	display:block;
	font-size: 12px;
}

    I’ve tried to mess around with line-height, but that just make the lines overlaps eachother.

    Do you have any idea of what to do?

    Br
    Morten

    Reply

    1. Baah, i’m such a fool! Didn’t give it a thought, when i wrote the tags in this comment.

      Where ever it seems some text is missing, it’s “pre” and “code” tags i wrote 😛 sry

      Reply

  5. I think i’ve found my problem.
    There was an error in my script, and not in the styling, which i thought!

    Sorry for wasting your time Jesper, and thanks alot for your trouble 🙂

    Reply

  6. Hi, first of all, very nice template, it rocks! However I want to ask: should the contact form work by only modifying the email address in sendmail.php? My host supports php and I put my email in sendmail.php the ok message show up but I don’t receive the mail. Is there any other configuration to be made? Thanks

    Reply

    1. Hello Linkzy,

      Yes, it should work only by modifying the email address.

      Your host has to support the PHP mail() function as well. Do you know if your host does that?

      Reply

  7. Hi, I moved the site I’m testing to another host, dreamhost, so I can test it in a “high quality” environment. And same issue occurs, message does not get send. It appears to accept the mail () function, however I found this thread: https://discussion.dreamhost.com/thread-134525.html where they talk about a fix, but I just don’t know how to implement.

    $fp = fopen($mailcopyfile, “a”);
    fputs($fp, $now . $to . $subject . $body );
    fclose($fp);
    $mailcopyfile = ‘test/mailcopyfile.txt’

    I changed $body for $message and but I don’t know how to adapt the other variables.

    Reply

    1. Hello,

      According to this https://www.vbulletin.com/forum/showthread.php/407209-PHP-e-mail-not-working the ‘from’ has to be from Dreamhost. The script uses the email the user has entered

      Try this

      // Add after line 47
$headers = 'From: webmaster@yourdomain.com' . "\r\n" .
    'Reply-To: ' . $from . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

      if ( mail( $email, "$subject", utf8_decode( $message ), $headers )

      I haven’t tested so I don’t know if it works

      Reply

      1. Yes, it works with this config:

        //$message = jayj_html5_sanitize_string( $_POST['message'] );
$sender = 'noreply@example.com'; // or another email from your own domain
$message = "\n Sent from: $from";


if ( mail( $email, "$subject", utf8_decode( $message ), "From: $name " ) )

        Thanks a lot Jesper!

      2. Great! But are you getting the text from the message field with that code?

        You’re overwriting the $message variable. It should be like this:

        $message = jayj_html5_sanitize_string( $_POST['message'] );
$message .= "\n Sent from: $from";


if ( mail( $email, "$subject", utf8_decode( $message ), "From: $name " ) )

  8. Hi there again. Just to let you know, I tested the template with 3 hosts and only one works, surprisingly free:

    idomyweb.com (free) not working
    dreamhost.com (payed and good quality) not working
    nixiweb.com (free) works just fine

    Cheers

    Reply

      1. It worked with the first solution you posted. However the last line in my comment should be:

        if ( mail( $email, “$subject”, utf8_decode( $message ), “From: $name ” ) )

  9. You are right. I was overwriting the $message variable: I was so excited to get the message that I did not notice I was not showing the message. So now it works 100%, displaying everything ok in all hostings. Thanks a lot for your time and quick response.

    Reply

  10. Hi I downloaded your theme and WP tells me it’s a theme corrupted.
    I think that misses the father theme. What does the father issue and how can I tell what is?

    Reply

    1. Hello Claudio,

      This is not a WordPress theme. It’s purely HTML.

      There’s a WordPress version of it by Tyler Longren called HTML5Press. It currently uses the old version of this theme but it’s your best option

      Reply

  11. Hello!

    Thank you so much for sharing this theme. I’m not much of a coder but was able to adjust the CSS enough for a nice site for a non-profit.

    My question is about the header, is there a reason you didn’t code the header and main navigation as an include? I’ve tried to re-code as an include using this in the index.html:

    but I can’t get it to work. Any advice?

    Thank you!

    Reply

    2. Hello Nicole,

      The reason why I don’t use PHP includes it that I wanted to keep it as simple as possible and use HTML only (except for the contact script).

      The template is more of a starting point that easily can be customized. It’s up to the user to decide what to do – whether it’s PHP includes as you, WordPress or something third.

      The reason why your PHP includes don’t work is that you’re editing .html files – you should change the extension to .php

      – Jesper

      Reply
  12. Pingback: T. Longren » HTML5Press 2.4
  13. Pingback: A free HTML5 and CSS3 theme - Jayj.dk

Leave a Reply