Discussion on Breathe - HTML5 jQuery Mobile Based Template


xRicrdx does not currently provide support for this item.

19 comments found.

I like this theme, but when I replace the images…they stretch funny on the iPhone.

Hi, thanks for your comment, I am glad you like it. As for your problem:

  • If you mean the main images then do this:

    Find in your css file class .mainIMG and replace height: 220px; with min-height:220px; (like this)

    I made a little mistake here so I am sorry about that.

  • If you mean other images then:

    All images are by default set to 100% to fit the screen, so just make class with different width or write it right into your html code.

Should you have any further questions, please feel free to ask ;)

Cool theme…CSS is a headache to edit especially since the main css file is all smashed together. You wouldn’t happen to have the css file unjumbled would you? I want to change the navigation color because I’m going to use a white header top.

Also how can I add 2 more links to the top navigation?


Thanks, I have to say the CSS is kind of harder to read, thanks to jQuery. I might write better documentation in the future.

To change your ui-bar-a class: .ui-bar-a { background: white; } or change header_bg.png in your color scheme image folder to anything you want.

To add new items to nav, simply repeat those divs (ui-block-a, ui-block-b…) in the same order.

Sry for double

Also would you happen to have coding for a checkbox on the form? That should pretty much do it! Theme is working out good for me otherwise! Thumbs Up!

For checkboxes use this syntax:
<input type="checkbox" name="checkbox-1" id="checkbox-1" style="display:none" />
<label class="checkbox-class" data-theme="a" for="checkbox-1">I agree</label>
I have to say I forgot to style this (since you are clicking on label), so you will need to add .checkbox-class{ box-radius: 0; } to your css theme file (lightOrange.css etc.)

Sorry about that, I will fix it in an upcoming update.

Thank you for the quick reply! That solved all my issues especially the checkbox issue! Thank You!

No problem ;),

Feel free to ask me again, when you have any problems.

Hi, How do I set this theme up to in addition to the theme that I use for the desktop WP site? are there any instructions, as I assume that if I install and activate the theme it will de-activate my current WP theme?


Unfortunately this is just HTML page so it would need significant modification to get it working in the wordpress, however you can find wordpress version of this theme here

thanks, I guess I bought the wrong one

Sorry about that.


Is there any way to make the Blog tab the default view? I would like to use this for the mobile site of my news website, tapbyte.com.

And can we edit the top pages? And change the blue overlay colour of the title on the blog homepage to black (and title text is white)?

Thanks, Daven


Yes you can add whatever you want to the home page, you can set homepage as blog.html instead of index.html.

There’s a grey theme available, which you can preview here, however changing a text and background shouldn’t be a problem but changing buttons is a little bit tricky ;)

Hi, I like very much your template! I tried putting another data-role=”page” inside blog.html but it doesn’t function. I tried this using the link to the official jquerymobile library and it works. Have you disabled ajax hijax in the pages? How can I switch it on?

Thank you


no I didn’t but make sure that there is no line in the script section that look like this:
$(document).bind("mobileinit", function(){
Also from what I am aware of you should do every data-role=”page” into it’s own file. If you do all into one file, then there is no point in using ajax page loading so maybe that’s causing the problem.

Anyway let me know if anything from these advices worked for you ;)

Hellow xRicrdx!

Is there a script to close the application completely mobile? I used the command close the javascript, but it does not work on mobile. The function data-rel = “back” is not what I’m looking for. I’m looking for something like data-rel = “EXIT” ...

Thankx …

Hi, I am not sure if I understand you correctly. Are you using this as a WebApp and you want something like ,,exit button” ?

I’m using as an application for Android, generated in PhoneGap. Do you know any way to completely CLOSE the application on the phone?

Hi, unfortunately no, I don’t know how to close the application using PhoneGap. But there should be some API for you to do that isn’t it ?

Hey I was wondering if this template is just for the mobile platform or could it also work on desktop? Please let me know.

Hi, yes it can, without doubt ;)

Hi, The QR code goes to an error page.

fixed, thank you so much for noticing ;)

Great theme, is there anychance that you will be updating this to JqueryMobile1.2?

Hi, not any time soon and thanks ;)

silly question. But how do i set this up so that when my site is accessed by mobile device it goes to this ?

Hi, you can use this script ;)
<script type="text/javascript">
if (screen.width <= 768 {
     document.location = "mobile.html";

Today is bought the Breathe HTML5 mobile theme and installed it at my server. I changed the menu text to my own. Now the boxes have an overlay on each other because of changing characters. How can I fix this?

Hi, check your HTML syntax for errors like unclosed tags, there should be enough margin to prevent this problem. You might have forgot to close an tag. Also check the ticksy comment in case it’s you who was asking an this problem there ;)

In IE8 i can not seem to get the background on the top navbar to show up. Any suggestions? seems to work on every other browser!

Thanks!! Mary

Hi any ideas on making background show up in the header in IE8 -i dont even need to have the images – just want to be able to at least make it black.

Thanks, Mary

I get a “error loading page” when I click on the menu