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.
Here’s a preview of the new design (click for demo)
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
- Download WordPress version by Tyler Longren
- Download Blogger version by Rethnaraj Rambabu (old version of the theme)
Good job!
I have made a wordpress theme based on this templates.
My poor English
Thanks!
Do you have a link to I can see it? 🙂
There’s another WordPress version of the theme called HTML5Press as well.
Yes,of course.
http://www.tolgoo.com/?preview_theme=pink-press
and the best way to see it :
1.click the pink clothes icon on the right side
2.select “pink-press”
IE is not recommended
Nice job 🙂
I’m having performance issues with this template and Firefox 5
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; }It works, thanks!
Great template BTW
Great. And thanks 🙂
I was able to successfully install this theme – tried several times using firefox version5 through WordPress.
This is not the WordPress version. This is the HTML version
The WordPress version is called HTML5Press and can be downloaded from Tyler Longren’s site.
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 – TopRiddle.com
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?
Didn’t test it on others yet.
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..
Thanks!
I’ve added the image again https://github.com/jayj/Jayj-HTML5/commit/31e1b4b27af6a70213c26aee8b63c0987b49d95e
Jesper, was there a special reason why you didn’t use body tag as a wrapper instead of adding extra div?
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 🙂
Good idea. I have done some other small optimizations and am playing with the code.. So will make a pull request on github soon.
Awesome!
Jay
Thanks for the template.
And, didn’t realise that this box is resizable 🙂
Good job.
Thanks 🙂
sweet template, I love it!
Thanks!
how to change button color from pink to blue
Hello Vijey,
Open
style.cssand find this/* Current nav, buttons, more-link */ #menu .current > a, .btn, .more-link, input[type=submit], 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.
Very beautiful~
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
Hello Chris,
Thanks 🙂
Yes, you can.
If you use Less you can change the
@baseFontFamilyand@headingsFontFamilyvariables in variables.lessIf you CSS, you should change the font-family in style.css (https://github.com/jayj/Jayj-HTML5/blob/v2.1/style.css#L85 and https://github.com/jayj/Jayj-HTML5/blob/v2.1/style.css#L150 – there might be other places)
– Jesper
Responsive, simple but effective! thanks 🙂