Styling mobile site with CSS

Here are brief instructions how to style your mobile site.

 

  • Go to Extensions -> Template Manager in Joomla! admin
  • Pick your template: mobile_iphone or mobile_smartphone (other smartphones)
  • Choose Edit
  • Click Edit CSS
  • Choose mj_xhtml.css and Edit (or whatever CSS file you have available there)
For example changing the header background style edit the part
/* patches to nokia styles */
#header {
    background: url('../resources/images/img-branding-background.png') repeat-x top;
    padding: 17px 10px 0;
    height: 53px;
}
To be
/* patches to nokia styles */
#header {
    background: white;
    padding: 17px 10px 0;
    height: 53px;
}

By continuing to use this site you consent to the use of cookies on your device as described in our cookie policy unless you have disabled them. This site will not function correctly without cookies.

I accept cookies from this site.