Please note: This is an old post. The information is probably not accurate and up-to-date anymore.
Japibas is nice free clean WordPress theme, that you can use as magazine blog or for your personal blog. Version 2.0 is a completely rewritten version of the 2009 version. The theme now uses HTML5, CSS3 and is much much better!
Update December 22, 2011: The theme has been updated to version 2.0 and this post has been updated
Features
- Design has been updated to use CSS3 instead of images and it’s responsive
- The markup is now HTML5
- Multiple color schemes (Green, Blue & Red already included – Easy to add more)
- Small Theme Options page (yep, that’s a feature)
- Child theme friendly
- Content Slider
- Killer post thumbnails function that work with WordPress’ featured image functionality and provide extra features
- 6 Widget-ready areas
- Built-in pagination
- Small set of useful shortcodes
- Uses the built-in WordPress menu system
- Compatible with all major browsers (not IE6)
- Fully internationalized, so you can run the theme in any language
- Well documented
- And much, much more!
[This download is no longer available]
- Requires at least WordPress 3.3
- Tested up to 3.3
You can view the source and help improving it on Github. The theme is licensed under GPL.
Translations
You should download both files (or the zip file) and put them in wp-content/themes/japibas/languages/
- French: fr_FR.po / fr_FR.mo
Thanks to Arthur, aryo.fe - German: de_DE (zip)
Thanks to Ferris Umland
Lovely! Realy nice one! Make more like that FREE!
Thanks! There will be more free themes in the future 馃槈
is this frome themeforest or ….. is it realy free ?
I don’t want to be involved in copyright aligations for this so i ask
It’s free, as said several times in the post 馃槈
Sorry for the long answer time, but you got caught in my spam filter
Hi, I have one question on Japibas: it is a very nice theme, and I’m trying to set it up for my blog. Actually I wrote a post to be shown in the slider, and it works well, with the clickable header.
But if I make the same associating it to a 900×220 image, the image itself is not clickable thus I can’t get to the article. How can I make it clickable? thanks a lot!
Hello,
Could you please send me an email with a link to your site?
Wonderful theme, I was searching for it after seeing it on a french blog!
See you,
Alex
Thank you, Alex 馃檪
Its not contain RTL css file. Had some headeck to change bg images and stuff from right to left with photoshop.
But, Awesome wp theme. Thanks guys
I’m sorry. I’ll make sure the next version will have RTL styles 馃檪
Hello,
My question:
How to set categories defined in WordPress (last version) in the menu bar of Japibas theme?
Only pages appear in the menu bar…
On Setting, I did not exlude any pages from Categories but categories do not appear in the menu.
Thank you
Hello,
As said in the post, the theme hasn鈥檛 been updated since 2009. So it’s currently not using the WordPress 3.0 menu editor.
I鈥檓 working on an update for the theme right now but I don’t know when it’s done. Try to google some tutorials on the new menu and edit the header.php and functions.php yourself.
Awesome, man! 馃檪
Thanks!
Thanks! 馃檪
Nice theme. It would be great to have a portfolio page inside as well.
Regards hjemmesider
Thanks
It shouldn’t be very hard for some one to create a Portfolio post type in a child theme or using a plugin.
You could try the Portfolio Post Type plugin.
1. Will the theme support forums? (like bbpress)
2. look the image below. Its ur theme.. activated on my site. open even your demo link above. Now see the horizontal page scroll bar. notice that there’s a lot of page empty more than the resoultion of the page! what is this? Can u remove this?
Link: https://lh4.googleusercontent.com/-z8hxMeLwgEs/T6DX5SPa_sI/AAAAAAAAApg/nDhyuRGnZfc/s640/site.jpg
1. I don’t know. I haven’t tested the theme with bbPress. You could try to follow this guide
2. Is your browser width lower than 1050px? The scrollbar shows then the width is lower than 1050px. It properly should be lower
You can create a child theme and add this in the child theme style.css:
It will be changed in the dev version of Japibas soon.
I’m using mozilla firefox version 11. is its width less than 1050px? And i can’t create a child theme. Can i edit any code in the parent theme itself. if so which one please specify. Thank you.
Problem solved buddy. I’ve edited that code in the parent theme style.css itself.
BTW its a very good theme. Thanks for such a nice and fast response. Awaiting for more free good themes.
Great! And thanks 馃檪
Hey in the navigation, the words OLDER POSTS and NEWER POSTS must be interchanged.. How do I do that? My latest post is not being showed in the home page?
Fuck. That’s a huge mistake from my side.
I just fixed it in the dev version: https://github.com/jayj/Japibas/commit/65067a9d1d648a96a19a63c45ce9cfc0da91d989
You can make the same changes as that commit in your theme files.
I don’t know why your latest post isn’t showing. Are you sure it’s published and not a draft, private or future post?
Oh regarding the post.. in the theme settings I’ve listed not to display that category posts in the top. Post Problem solved.
The pagination problem also has solved! Thanks for instant reply!
Great!
I just pushed another change so the Next and Prev arrows are correct https://github.com/jayj/Japibas/commit/fb5a2e72b4581ed743e814fd2b054b735086f6b0
Hi can this theme be used by a charity..?
Yes, you can use it for whatever you like!
Hello,
How to include an image in the slider?
Thanks !
You can do it in two ways:
okey, thanks !
But I don’t know how, but i just disable the slider ! How to enable it ?
Appearance > Theme Options has a Slider section.
I found ^^
thanks a lot ! 馃榾
I don’t really understand how to do something like the first slider image.
An image with the text next to it :/
If you use an image that has a width lower than 920 pixel you should have text next to it.
I have to put the link of the image in “miniature” ?
Yes, either upload an image through “Image 脿 la une” or put a link in “miniature”
It work ! Thanks a lot !! 馃榾
You’re welcome 馃檪
Hi,
Thanks a lot. How can I change the layout setting for one particular page ? All my website is on the Default Layout, and I don’t see any Page Template selector.
Thanks !
That is currently not possible directly from the theme. You can do it with a plugin or a child theme.
I’ve created a Gist with a child theme that uses the Theme Layouts extension by Justin Tadlock. There’s a download link at the top.
I haven’t tested it so there might be some errors in it but it should create a solid starting point.
Hope it helps you 馃檪
Hello
There is a problem with the slider when the title is too long:
http://www.imagup.com/data/1165064974.html
The title and the summary are not close to the picture, but under the slider
Is it possible to fix this ?
Great theme btw, thanks for sharing it for free
Hello Bob,
You’re right. The easiest way way to fix it would be to create a child theme (see https://github.com/jayj/Japibas/wiki/Child-themes) and put the following in the child theme style.css:
Hope that helps you. If not, feel free to write again
That works fine, thank you
Hi, Thank you for japibas…
but… where is home page title?! it is blank even in your demo!
?!
Hello Moji
You’re right. That’s very weird. It’s shows when you go into a post and a page. I’m using the native
wp_title()
function.Your best option of one of these two:
1. Use a SEO plugin like WordPress SEO by Yoast (recommended as it’s pretty awesome)
2. Create a child theme and put this code in the functions.php:
Thanks for the comment. I’ll make sure to fix it in a future version.
I mean home page title between title tag,
Hi, i try japibas theme with Wp 3.5.1 but i’ve got this message :
Warning: Invalid argument supplied for foreach() in /mnt/171/sda/0/c/c.chabanne.psy/wp-content/themes/japibas/inc/theme-options.php on line 111
Could you please help me !
Thanks !
hubert
Hello Hubert,
Do you know if your hosts support
glob()
?Hello, tks for your answer, i will see it hosts support glob()
I’ve just see that the glob() function is not supported ….
Hi, i’ve try with Cakifo , it’a all OK !! thanks for this beautiful theme !
Thanks!
Bonjour,
J’adore ce theme mais je n’ai pas la pagination “page suivante 1 2 3”
comme dans la demo.
Sorry but I don’t understand French. Could you please write in English?
I love this theme but I do not have paging “next page 1 2 3”
as in the demo.
Hello,
If you mean the pagination in posts you can type this:
<!--nextpage-->
into the Text editor where you would like your page breaks to appear.
Bonjour Jasper tout d’abord merci pour le th猫me tr猫s bien et parfaitement ce que je recherche pour mon blog ! J’aurai quelques petite question s’il vous plait. Tout d’abord je cherche comment avoir le menu d茅roulant comme sur la d茅mo, car lorsque je cr茅e des pages elle s’affiche comme sa : http://hpics.li/ce52210 et moi je voudrais quelle s’affiche comme vous avec le menu ..
De plus j’aimerai savoir s’il est d茅sactiver un champ obligatoire, je veux dire retir茅 l’obligation de mettre un email ? Voila merci 馃檪
Hello Jasper first of all thank you for the theme very well and perfectly what I look for for my blog! I shall have some small question please. First of all I how try to have the drop-down menu as on the demo, because when I create pages she(it) displays as his(her,its): http://hpics.li/ce52210 and I would want what displays as you with the menu..
Furthermore I shall like knowing if he(it) is to deactivate a compulsory field, I mean removed the obligation(bond) to put an email? Here is thank you:)
Hello Bil,
You should set up your menu in
Appearance > Menus
and add it to the ‘primary’ theme location.About the optional email. In
Options > Discussion
there’s a checkbox with the label “Comment author must fill out name and e-mail”. Try to uncheck thatHope that helps you. If not, feel free to write again
– Jesper
My comments is delete ?
Hello,
Your comment was awaiting approval but should be shown now.
Hello,
Can you make this amazing theme work with BBPress ?
I hope you will do it !
Hello,
I’ve not tested it with BBPress so could you please tell me what is not working? If it’s the styling that needs to be adjusted you could create a child theme: https://github.com/jayj/Japibas/wiki/Child-themes
I’m hoping the next version of the theme support BBPress however that might take long time as this theme is not my top priority right now.
But if you tell what’s wrong I’ll take a look at it.
– Jesper
Hi thank you for your excellent theme !
I have a question, how to make the slider auto-rotate ?
Thank you,
Sofiane
Hello Sofiane,
Thank you.
You can edit
js/script.js
. On line 7-8 and 16-22 there’s some commented code, you can remove those comments. In line 10 you should setauto
totrue
.Hope you understand what I’m saying. If not, feel free to write again.
– Jesper
Hi Jesper, yeah i perfectly understand 馃槈
Thank you for your quick reply !
I’ve changed your slider for a new one that i prefer : “Easing Slider”, i hope it don’t bother you.
Thanks a lot for theme from Paris !
Not at all! It’s nice to see what people are doing with the theme 馃檪
You can also, if you need a pause between slides, ad this parameter:
pause: 6000,
for a 6 seconds pause
Exactly, Rod. Thanks.
Here’s a list of all* available arguments:
http://webbies.dk/SudoSlider/help/#Settings
* The latest version of Sudo Slider is 3.1 and this theme uses 2.1.6 so it might not be all of them.
– Jesper
Very usefull the SudoSlider link !
Just one think I don’t understand. All my posts are displayed in full text in the home page or archive page.
How to limit the text length and display the “Continue reading” link ?
I found nothing in the admin.
Big Up from Paris !
Hello again,
You can use the more tag:
<!-- more -->
You can read about it here: http://en.support.wordpress.com/splitting-content/more-tag/
I’m sorry… I’m absolutely newbie with WP. Until now I used to use SPIP (http://www.spip.net/). I promise not to disturb you with obvious queries. Thank’s again.
Don’t worry! Glad to help 馃檪
Hello Jasper,
My current theme is “BlogoLife”.
I downloaded “Japibas” but the installation fails.
The error message is as follows;
The archive could not be installed. It lacks the
style.css
to this theme.Maybe you can help me? Thank you very much.
Hello Albin,
You have to upload
japibas.zip
that is inside the zip folder you’re downloading.– Jesper
Hello Jesper,
I’m using your theme since two years now and i’m really thankful of all it deserve.
Have you plan to do a new update of your theme ? It will be very great !
Regards
Hello Sofiane,
Thank you.
I’ve planning to update the theme but I’m very busy with other projects at the moment. There might be an update before the end of the year but I can’t promise anything.
– Jesper
Dear Jesper,
This is an amazing theme! I have modified it a little bit and it suits great with the topic of my blog!
Just one question, because I am not very experienced with programming. I would like the site description to come in front, and not in the back of the branding. Is there any way to do that?
Many thanks!
Hello Dimitra,
Sorry for the late reply. You got caught in my moderation queue.
I think the best way is to increase the height of
#branding
from79px to something like
120px
.And change the line-height on
#site-description
from82px
tonormal
.Lastly, I really recommend using a child theme (https://github.com/jayj/Japibas/wiki/Child-themes) instead of making changes directly in the theme files.
Hope that helps you. If not, feel free to write again.
Thanks a million!! I also did a small adjustment in the #site-title (font:bold 38px/79px sans-serif;) and now it works!
Awesome, glad to help!
Hello,
My hosting company had me move from Php 5.2 to 5.5 and now in the admin interface I get the message (wordpress 3.4.1) :
Warning: Illegal string offset ‘new_version’ in ……./htdocs/wordpress/wp-content/themes/japibas/inc/upgrade.php on line 74
What’s the best solution to this ?
Thank you very much for your great theme.
Hello Christian,
First of all, you should really update WordPress to 4.0
The easiest solution to this to open functions.php in the theme files and find this line:
And delete it.
This will disable the update notification for the theme but it doesn’t work anyway as I accidentally deleted a file on my server…
Hope that helps you.
Hi Jesper,
Thanks for your theme, I like it even if it was launched in 2009 !
I would like that the date of the posts do not appear in the home page and on the single page of each post.
I don’t now where to look in the code.
Could you help me to reach my goal ?
Hello Greg,
Thank you. Glad you like it 馃檪
The easiest way is to hide it using CSS. You can either use a child theme (https://github.com/jayj/Japibas/wiki/Child-themes) or Jetpack’s Custom CSS module.
Hope that helps you. If not, feel free to write again.
– Jesper
Thank you Jesper, it works perfectly :).
I have another request, I would like to remove completely the footer where it appears “Powered By: WordPress”.
I looked on different tutorials which said to look in the functions.php file but I didn’t find exactly where to look at.
Could you help me please.
Great!
You can edit the footer text in
Appearance > Theme Options
I forgot to tell you that I tried this in theme options but it didn’t work.
I tried as well to remove the footer.php from the wp-content without any effect.
WordPress still display his footer by default.
That is weird. Do you have a link to your site?
If you don’t what to publish it, you can use my contact form.
Thanks for this awesome theme !
I’ve got a question on responsive behaviour of the theme :
I can’t figure out how to have a different behavior on Ipad (3) & Iphone (5).
I would like to have the sidebar on ipad, but not on iphone…
With the official “style.css” it seems to work, if you check with the google chrome tool… but not on “real” Ipad (3) & Iphone (5).
I tried to change the number of px in “max-width:” at the end of the css sheet, but the behaviour on ipad & iphone is always the same.
Have you an idea ?
Hello Mat,
The layout should be two columns on an iPad and one column on iPhone.
However, there’s a bug in the current version of the theme on tablets and mobile devices.
You can use Jetpack’s Custom CSS module or a child theme to add this CSS that should fix the problem:
Hope that helps you.
– Jesper
Thanks for your answer… but I already found this bug.
The display is quite better, but still 1 column on both ipad & iphone
I changed it directly on the first lines of the style.css sheet :
…
@media all and (max-width: 1050px) { html, body { overflow-x: hidden; } }
If you have another idea ?
Hello Mat,
Where did you add it? I don’t see it on http://entrepreneurchretien.com/
I add it on the style.css (the compressed one)
I’m on google Chrome :
From the home page,
right clic / inspect element / sources / (style.css)
not very far away, you will find :”鈥media all and (max-width: 1050px) { html, body { overflow-x: hidden; } }”
(it’s the compressed css, but it’s the first words)
I also change the end of the style.css, just to cancel the display of .entry-date, .entry-meta, .more-link and .entry-comments-number.
I see your changes now. The CSS were probably cached for me. My mistake.
It appears to be working for me. I don’t have some actual devices to test on, but here’s some screenshots of Chrome’s simulator:
http://i.imgur.com/kRLn6Ow.png
http://i.imgur.com/qkp2Nm7.png
Yes… that’s exactly my problem : it works on the simulator, but not on my devices…
thanks anyway for trying 馃檪
I’have some ideas to check, I’ll post my solution when I would have found !
I have another tricky question :
I like the orange theme. I installed the child-theme, but only the link-color is in orange… The home color under the logo is still green.
(if you want to check, beware of the cache, I just retried, without success)
1) Try adding this to the child theme functions.php:
Does that work?
2) You need to add some CSS to orange.css for it to change more than the link color. You can use the code from here: https://github.com/jayj/Japibas/blob/master/colors/red.css and change the colors to orange.
Thank you so much !!
Iphone & Ipad : fixed
On iphone, one time, the overflow x was visible… but it appears juste once. On Ipad, the display is perfect.
Orange CSS
Please find the (completed) orange.css below
Now running on http://entrepreneurchretien.com/
/*
* Name: Orange
* Slug: orange
* Description: Orange color scheme for Japibas
* Link color: #ff6d00
*/
a,
#site-title a:focus,
#site-title a:hover,
#site-title a:active,
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active {
color: #ff6d00;
}
/* Header */
#branding {
/* Dark, grey topbar */
background: #1f1e1c;
background: -webkit-gradient(linear, left top, left bottom, from(#313131), to(#1f1e1c));
background: -webkit-linear-gradient(top, #313131, #1f1e1c);
background: -moz-linear-gradient(top, #313131, #1f1e1c);
background: -o-linear-gradient(top, #313131, #1f1e1c);
background: -ms-linear-gradient(top, #313131, #1f1e1c);
background: linear-gradient(top, #313131, #1f1e1c);
border-bottom: 1px solid #171512;
}
.loop-meta {
/* The orange bar in the top */
background: #be4002; /* Old browsers */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #be4002), color-stop(25%, #fd5e0f), color-stop(100%, #be4002));
background: -webkit-linear-gradient(left, #be4002 0%, #fd5e0f 25%, #be4002 100%);
background: -moz-linear-gradient(left, #be4002 0%, #fd5e0f 25%, #be4002 100%);
background: -o-linear-gradient(left, #be4002 0%, #fd5e0f 25%, #be4002 100%);
background: -ms-linear-gradient(left, #be4002 0%, #fd5e0f 25%, #be4002 100%);
background: linear-gradient(left, #be4002 0%, #fd5e0f 25%, #be4002 100%);
border-top: 1px solid #fd6f28;
border-bottom: 1px solid #a53802;
}
#branding:before,
#branding:after {
background: inherit;
border: inherit;
}
.loop-meta:before,
.loop-meta:after {
background: #be4002;
border: inherit;
-webkit-box-shadow: 1px 1px 0 rgba(255,255,255, 0.4);
box-shadow: 1px 1px 0 rgba(255,255,255, 0.4);
}
.loop-description,
.page-title {
text-shadow: 1px 1px 0 #be4002;
}
/* Navigation */
#access .menu-item > a {
background: #3c3c3c;
border: 1px solid #4e4e4e;
border-bottom: none;
color: #fff;
display: block;
font-size: 14px;
text-shadow: 1px 1px 0 #2b2b2b;
}
#access .menu-item > a:hover,
#access .current-menu-item > a {
background: #fd5e0f;
border: 1px solid #fd6f28;
border-bottom: none;
text-shadow: 1px 1px 0 #be4002;
}
#access .current-menu-item > a {
background: #fd5e0f;
}
.ie #access .menu-item > a:hover,
.ie #access .current-menu-item > a {
background: #be4002;
}
/* Entry titles */
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active {
background: none;
text-shadow: none;
}
/* Buttons */
.more-link,
input[type=”submit”] {
background: #474747; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd5e0f), color-stop(100%, #be4002));
background: -webkit-linear-gradient(top, #fd5e0f 0%, #be4002 100%);
background: -moz-linear-gradient(top, #fd5e0f 0%, #be4002 100%);
background: -o-linear-gradient(top, #fd5e0f 0%, #be4002 100%);
background: -ms-linear-gradient(top, #fd5e0f 0%, #be4002 100%);
background: linear-gradient(top, #fd5e0f 0%, #be4002 100%);
border: 1px solid #be4002;
color: #fff;
text-shadow: 1px 1px 0 #be4002;
-webkit-box-shadow: inset 0 1px 1px #fd8042;
box-shadow: inset 0 1px 1px #fd8042;
}
.more-link:hover,
input[type=”submit”]:hover {
background: #fd5e0f; /* Old browsers */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #474747), color-stop(100%, #272727));
background: -webkit-linear-gradient(top, #474747 0%, #272727 100%);
background: -moz-linear-gradient(top, #474747 0%, #272727 100%);
background: -o-linear-gradient(top, #474747 0%, #272727 100%);
background: -ms-linear-gradient(top, #474747 0%, #272727 100%);
background: linear-gradient(top, #474747 0%, #272727 100%);
border: 1px solid #171512;
text-shadow: 1px 1px 0 #111;
-webkit-box-shadow: inset 0 1px 1px #989898;
box-shadow: inset 0 1px 1px #989898;
}
/* Blockquote */
blockquote {
border-left-color: #fd5e0f;
}
/* Comment bubble hover state */
.entry-comments-number:hover {
background: #fd5e0f;
border: 1px solid #be4002;
color: #fff;
text-shadow: 1px 1px 0 #be4002;
}
.entry-comments-number:hover:before {
border-color: #be4002 transparent transparent #be4002;
}
.entry-comments-number:hover:after {
border-color: #fd5e0f transparent transparent #fd5e0f;
}
/* Pagination */
.pagination a:hover {
background: #fd5e0f;
color: #fff;
text-shadow: 0px -1px 0px #be4002;
-webkit-box-shadow: 0px 2px 0px #be4002;
box-shadow: 0px 2px 0px #be4002;
}