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“.
[This download is no longer available]
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.
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.
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 invariables.less
and recompile the styles. By default it’s 1.6Hope that helps you. Have a nice day π
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
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:
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
Great, glad to help π
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: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
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
The big line-height is because the
pre
have a new styling.Here’s the styling for the pre tag (using .less): https://github.com/jayj/Jayj-HTML5/blob/master/style.less#L368
As you can see, the line-height is defined in a variable at the top of the selector.
But you should be able to edit line-height in the code you’re using. Do you have a screenshot?
Well i didn’t have the new CSS style in v. 2.0 which i’m using π
And i dont want the paper style background.
Here’s an image of the code when i have change line-height to 1 in pre style.
http://imageshack.dk//viewimage.php?file=/imagesfree/qKw11064.png
It’s better, but still it’s like there a line break between
Do you have a link?
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 π
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
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?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.
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
I haven’t tested so I don’t know if it works
Yes, it works with this config:
Thanks a lot Jesper!
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: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
Hello,
I just updated my previous comment. Please try that solution and return back with an answer.
Thanks
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 ” ) )
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.
Awesome! Glad to help π
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?
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
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!
Opps! I should’ve known the line of code wouldn’t show up π
php include ‘footer.php’;
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
That worked like a charm!
Thanks so much Jesper, you are AMAZING.
You’re welcome. Glad to help!