Search

Shotoku

Free HTML5 Gallery WordPress Theme With Responsive Layout

About “Shotoku theme”

Overview

Looking for a Minimal, Responsive, Gallery WordPress theme? Shotoku is a free html5 responsive web design WordPress gallery theme with CSS3 Media Queries for any device.

The theme is free for personal and commercial use. Attribution is not necessary, but certainly appreciated.

What’s “Shotoku”?


Prince Shotoku(聖徳太子) is a Japanese great man who lived 1500 years ago.

He had a special ability. He could listen to 10 people talking at the same time, and correctly answer what each one said.

Our WordPress theme “Shotoku” is a Responsive web design which can optimize a layout for each device just like the Prince could correctly restate what each one said.

“Shotoku” can accurately and quickly respond for tablets, cell phones, and any other devices.

(Prince Sh?toku – Wikipedia)

Features

This theme requires WordPress 3.1+ to run.

  • Free HTML5/CSS3 WordPress gallery Theme With Responsive Layout
  • Cross-browser compatible (tested in Chrome, Firefox, Safari, IE6+)
  • jQuery Masonry (which keeps a layout even for thumbnails that has a different hight)
  • Shotoku can cope with custom background and custom menu(level 2 dropdown menu)
  • based on the Skeleton boilerplate
  • Using Gentium+Basic in Google Web fonts
  • Using Google jQuery CDN
  • Social media links Widget
  • Facebook iframe page integration
  • Minimal, Simple, and Clean (Does not use images)
  • Free to use on personal and commercial projects(GPL lisence)

Screenshots

Here is demos of texts, images, videos screenshots.

How it works

How to add thumbnails?

You can add thumbnails using featured image.
If you want to add link for single page, you need to add a new Custom Field.

Name:img_link
Value:URL (e.g. http://wp-shotoku.com/wp-content/uploads/2011/08/how01.png)

How to add Photographer’s credit on thumbnails?


If you want to add a Photographer’s credit on thumbnails, you need to add a new Custom Field.

Name:p-name
Value:Photographer's name

How to make Facebook page?

[Step.1]Build Your Own Facebook Page.


[Step.2]↑ Select a page template(named “FacebookPage”) and create your Facebook Page.


[Step.3]↑ Using Custom Field ,if you need to remove scroll bar.

Name:fb_app_id
Value:your facebook app id (e.g.: 248299265214763)

and

Name:fb_height
Value:height(px) (e.g.: 2500)

Facebook Page Demo is here

How to add my social links?

You can add social links using widget.
You need to drag widget “Your social links” to activate them in a footer.
And you need to add your social links and titles to it.

  1. RSS
  2. Twitter
  3. Facebook
  4. Youtube
  5. Tumblr
  6. Google
  7. Skype
  8. flickr
  9. vimeo
  10. linkdin
  11. delicious

*Superfluous note

non-effect

I will not to add an hover effect on images because it is not user-friendly for touch devices…

Image size problem

[Letting the Browser Scale Images is a Bad Idea]
The images are 330 x 345 pixels in true size, but when viewed on an iPhone, they are only ever seen at approximately 150 x 157 pixels.
via:Cloud Four

One of the solution: Using Adaptive Images.

You need to:

Add .htaccess and adaptive-images.php to your root folder. Create a writable directory called ai-cache. Add one line of JavaScript into the <head> of your site.

Download

Here

About me


Hi, I’m shiro :)
Web marketer & Web developer based in Japan.

You can also find me elsewhere on the web.
Twitter/Linkdin/Google+/zerply

© 2011 Shotoku . All Rights Reserved.