HTML5 Theme Updated to Version 2.0

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

I’ve just released version 2.0 of my free HTML5 and CSS3 theme. Both design and code has been been through major improvements and is much much better than before.

[This download is no longer available]

Here’s a preview of the new design (click for demo)

Screenshot of version 2.0

Features of the Jayj HTML5 theme

  • Uses HTML5 and CSS3
  • Awesome design with a hot pink color!
  • Fully working Ajax PHP contact form
  • Modernizr for enabling of HTML5 elements & feature detects
  • Respond.js – a lightweight polyfill for min/max-width CSS3 Media Queries
  • Uses Droid Serif, loaded from Google Fonts, for the headings
  • IE6 & IE7 warning (can easily be edited to IE6 only or removed)
  • Free to use! (: – It’s released under New BSD License. The license is included in license.txt

The theme has been tested in all major browsers and it’s awesome! It looks a bit funny in IE6 and IE7, but who cares?

See the original post for more information

Other versions of the theme

The theme is available as both WordPress and Blogger theme as well

48 responses

  1. Pingback: HTML5Press 1.5
  2. Pingback: HTML5Press 1.5
    1. That’s strange. I’ve noticed some issues as well

      I think it might be because of the gradient background on the body element.

      Could you please trying to change the body element styling to this?

      body { 
      	color: #333;
      	font: 16px/28px Georgia, 'Times New Roman', Times, serif;
      	background: #eee url(images/bg.png) repeat fixed;
  3. I was able to successfully install this theme – tried several times using firefox version5 through WordPress.

  4. Hi,
    Great template. Looks similar in most modern browsers.
    Found a few little bugs though in FF 3.6.13 installed on FreeBSD:
    – looks like some FF ignore background-size property when -moz-linear-gradient is used with not-fixed units, so “-moz-background-size: 16px 16px;” should be added to body style (I recommend adding -webkit and -o properties as well..) in order for your diagonals to look as expected.
    – looks like #site-description gets 100% width of it’s parent and needs text-align:right, instead of float:right (or maybe, for cross-compatibility, both?) in order to look as expected in my tested FF..
    – in 1024×786 resolution I get horizontal scrollbar, caused by “*box-shadow” properties, untill I add overflow:hidden; to #wrapper.. Am not sure if this is the best solution, please let me know if you find a better one..

    I enjoyed working with you code and the design is just great. Thank you for sharing this! Today-tomorrow will upload final branch to my new website –

    1. Thanks.

      I know there’s issues with Firefox 3.6 – Update it. Firefox 5 is already out and Firefox 6 is coming very soon.

      Is it only in Firefox 3.6 you get the horizontal scrollbar?

  5. Btw there is an image missing (content_bg.png) for non-rgba browsers.. or is it useless? If so, you still have it’s reference in style.css..

    1. That’s a personal preference. I’ve never used the body as a wrapper.

      But feel free to change it – and if you do, it would be awesome if you could make a pull request on the GitHub page 🙂

  6. Jay

    Thanks for the template.
    And, didn’t realise that this box is resizable 🙂
    Good job.

    1. Hello Vijey,

      Open style.css and find this

      /* Current nav, buttons, more-link */
      #menu .current > a,
      legend {
      	background: #fa4fab;
      	background: -moz-linear-gradient(top, #fa4fab 0%, #f7387c 100%);
      	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa4fab), color-stop(100%,#f7387c));
      	background: -webkit-linear-gradient(top, #fa4fab 0%,#f7387c 100%);
      	background: -o-linear-gradient(top, #fa4fab 0%,#f7387c 100%);
      	background: -ms-linear-gradient(top, #fa4fab 0%,#f7387c 100%);
      	background: linear-gradient(top, #fa4fab 0%,#f7387c 100%); 

      Change the color codes, #fa4fab and #f7387c, to the colors you want.

      Hope it helps you and I’m sorry for the long answer time.

  7. Iam using this template for few month now and its awesome 🙂 Thanks man

    But I’ve an question – can i change the fonts of the template?

    Thanks, see you

Comments are closed.