Hey again,
Checked your coding and your problem is simply to go into the modules manager and go into the Select markup module and set it to the position mj_all_footer.
As it is now it is placed in the content (middlde) position.
Another thing that might add a wee better look is if you took away the top banner.
To do that you do like this:
in the css/mj_xhtml.css file go to this section:
#header {
background: url("../resources/images/img-branding-background.png") repeat-x scroll center top transparent;
height: 53px;
padding: 17px 10px 0;
}
And change it to:
#header {
background: none repeat scroll 0 0 transparent;
height: 10px;
padding: 3px 10px;
}
Then I would suggest you to change this lines in the same file:
h1, div.h1 {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-size: 23px;
margin: 0;
padding: 0;
}
to
h1, div.h1 {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-size: 23px;
margin: 10px;
padding: 10px;
text-align: center;
}
Maybe you want a logo header instead?
Or just change the color of the Header text?
To change the color you just add this line in the h1, div.h1 code above:
color: #99CC66; (this gives the green colour you use on the Welcome text in the standard site.
If you want a logo header you go into the modules manager of joomla again and into the Mobile header module and set up the Show picture/image instead of Text.
Then in the field Header img URL: add this line:
{{root}}templates/mobile_smartphone/resources/images/my_logo.png
Where my logo is the logo file name, you just replace it with the real logo img file (preferably in png or gif format if you need transparency or png,jpg or gif if it's just a flat image).
It should be something like 250px wide to fit nicely in the mobile screen when watching it in the narrow view.
If you go through this thread I would say it's the closest you can get to a tutorial on how to stylish the MJ for a smartphone (or iPhone it isn't that much different).
Good luck!