My mobile website is going to have a white background. For right now, I just have a white background with the header. I also wanted the body and navigation bar to have a white background. I've edited the CSS so that the pinstripes picture does not show up in CSS, but it's still appearing. Do I need to go into the template and change it? I have my HTML template and CSS file down below in a text file. Thanks!
HTML
<?php
/**
* Mobile Joomla!
* http://www.mobilejoomla.com
*
* @version 1.0.2
* @license GNU/GPL v2 - http://www.gnu.org/licenses/gpl-2.0.html
* @copyright (C) 2008-2012 Kuneri Ltd.
* @date March 2012
*/
defined('_JEXEC') or die('Restricted access');
defined('_MJ') or die('Incorrect usage of Mobile Joomla.');
//load language file (to allow users to rename template)
$lang = JFactory::getLanguage();
$lang->load('tpl_mobile_iphone');
$MobileJoomla = MobileJoomla::getInstance();
$base = $this->baseurl.'/templates/'.$this->template;
$home = $this->baseurl.'/';
$MobileJoomla_Device =& MobileJoomla::getDevice();
if($MobileJoomla_Device['markup'] != $MobileJoomla_Device['default_markup'])
$home .= '?device='.$MobileJoomla_Device['markup'];
?>
<!doctype html>
<html <?php echo $MobileJoomla->getXmlnsString(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php echo $MobileJoomla->getContentString(); ?>"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
<?php $MobileJoomla->showHead(); ?>
<style type="text/css" media="screen">@import "<?php echo $base;?>/jqtouch-src/jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "<?php echo $base;?>/jqtouch-src/themes/<?php echo $this->params->get('theme', 'apple'); ?>/theme.min.css";</style>
<style type="text/css" media="screen">@import "<?php echo $base;?>/css/mj_iphone.css";</style>
<?php if(@filesize(JPATH_SITE.DS.'templates'.DS.$this->template.DS.'css'.DS.'custom.css')): ?>
<style type="text/css" media="screen">@import "<?php echo $base;?>/css/custom.css";</style>
<?php endif; ?>
</head>
<body>
<div<?php echo ($MobileJoomla->isHome()) ? ' id="home"' : '';?> class="current">
<div class="toolbar">
<?php if(!$MobileJoomla->isHome()): ?>
<a class="back" href="javascript:history.go(-1)"><?php echo JText::_('TPL_MOBILE_IPHONE__BACK'); ?></a>
<a class="home" href="<?php echo $home; ?>"><?php echo JText::_('TPL_MOBILE_IPHONE__HOME'); ?></a>
<?php endif;?>
</div>
<?php
$modulepos = $MobileJoomla->getPosition('header');
if($modulepos && $this->countModules($modulepos) > 0)
{
$MobileJoomla->loadModules($modulepos);
}
$modulepos = $MobileJoomla->getPosition('header2');
if($modulepos && $this->countModules($modulepos) > 0)
{
$MobileJoomla->loadModules($modulepos);
}
$MobileJoomla->showMessage();
$modulepos = $MobileJoomla->getPosition('header3');
if($modulepos && $this->countModules($modulepos) > 0)
{
$MobileJoomla->loadModules($modulepos);
}
$show_content = false;
$show_content |= $MobileJoomla->getParam('componenthome') || !$MobileJoomla->isHome();
$show_content |= $this->countModules($MobileJoomla->getPosition('middle'));
$show_content |= $this->countModules($MobileJoomla->getPosition('middle2'));
if($show_content): ?>
<div class="content">
<?php
$modulepos = $MobileJoomla->getPosition('middle');
if($modulepos && $this->countModules($modulepos) > 0)
{
?><div id="<?php echo $modulepos; ?>"><?php $MobileJoomla->loadModules($modulepos); ?></div><?php
}
if($MobileJoomla->getParam('componenthome') || !$MobileJoomla->isHome()): ?>
<div class="container">
<?php $MobileJoomla->showComponent(); ?>
</div>
<?php
endif;
$modulepos = $MobileJoomla->getPosition('middle2');
if($modulepos && $this->countModules($modulepos) > 0)
{
?><div id="<?php echo $modulepos; ?>">
<?php $MobileJoomla->loadModules($modulepos); ?>
</div><?php
}
?>
</div>
<?php
endif;
$modulepos = $MobileJoomla->getPosition('middle3');
if($modulepos && $this->countModules($modulepos) > 0)
{
?><div id="<?php echo $modulepos; ?>">
<?php $MobileJoomla->loadModules($modulepos); ?>
</div><?php
}
$modulepos = $MobileJoomla->getPosition('footer2');
if($modulepos && $this->countModules($modulepos) > 0)
{
?><div id="<?php echo $modulepos; ?>" class="current">
<?php $MobileJoomla->loadModules($modulepos); ?>
</div><?php
}
$modulepos = $MobileJoomla->getPosition('footer');
if($modulepos && $this->countModules($modulepos) > 0)
{
?><div id="<?php echo $modulepos; ?>" class="current">
<?php $MobileJoomla->loadModules($modulepos); ?>
</div><?php
}
$dispatcher = JDispatcher::getInstance();
$results = $dispatcher->trigger( 'onMobileJoomlaAdCheck', array() );
if(in_array('f3da4a6dd8f15c9170572d18838c841e', array_map('md5', $results)))
{
// The user has installed plug-in to remove ads
}
else
{
?>
<div class="mj-sponsor-placement">
<script type="text/javascript">
//<!--
/* <![CDATA[ */
document.write('<script src'+'="http'+('https:'==document.location.protocol?'s':'')+'://ads.mobilejoomla.com/ad.js?domain='+encodeURIComponent(window.location.hostname)+'" type="text/javascript"><'+'/script>');
/* ]]> */
//-->
</script>
</div>
<?php
}
?>
</div>
</body>
</html>
CSS
/* Mobile Joomla! 1.0.2 | mobilejoomla.com/license.html */
/* MJ iPhone styles */
.content .container {
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
line-height: 120%;
border: 3px solid #0054AF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
font:normal 12px/1.8em;
Verdana, Arial, Helvetica, sans-serif;
color:#000;
}
current {
background-color: #FFFFFF;
}
.content h5 {
font-size: 1.2em;
}
.content h1, .contentheading {
font-size: 150%;
line-height: 130%;
margin-bottom: 0.3em;
}
.profile .content * {
max-width: 300px;
overflow: hidden;
}
.landscape .content * {
max-width: 450px;
}
.contentheading {
font-size: 18px;
font-weight: bold;
}
a {
color: #7a8faa;
}
/* jqtouch does not define br for mozilla */
ul {
-moz-border-radius: 6px;
}
ul ul {
margin: 15px 2px 17px 2px;
}
ul li a.mainlevel, ul.vmenu li a {
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: url('../jqtouch-src/themes/apple/img/nav_bg.png');
color: #E6B800;
text-decoration:none;
}
ul li a.mainlevel:hover, ul li a.mainlevel:active,
ul.vmenu li a:hover, ul.vmenu li a:active
{
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: url('../jqtouch-src/themes/apple/img/nav_bg.png');
color: #E6B800;
text-decoration:underline;
}
/* By default all ul li a links get blue bg effect */
ul li a:hover,
ul li a:active {
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: url('../jqtouch-src/themes/apple/img/nav_bg.png');
color: #E6B800;
text-decoration:underline;
}
a img {
border: none;
}
p {
margin-top: 0;
margin-bottom: 1em;
}
.createdate {
font-size: 10px;
text-align: right;
color: #999;
}
.buttonheading {
float: right;
}
.contentpagetitle {
text-decoration: none;
font-size: 20px;
line-height: 100%;
}
p.jfooter {
margin: 10px;
font-size: 12px;
line-height: 120%;
color: #333;
}
/* fixed to jQtouch */
body {
-webkit-perspective: none;
-webkit-transform-style: flat;
font:normal 12px/1.8em;
Verdana, Arial, Helvetica, sans-serif;
color:#000;
}
body > * {
position: static;
-webkit-transform:none;
font:normal 12px/1.8em;
Verdana, Arial, Helvetica, sans-serif;
color:#000;
}
body {
background: #FFFFFF;
font:normal 12px/1.8em;
Verdana, Arial, Helvetica, sans-serif;
color:#000;
}
.toolbar {
height: 215px;
padding: 0;
background: url('../jqtouch-src/themes/apple/img/norinsco_logo.png');
border-bottom-width: 0px;
}
.home.active, .button.active, .back.active, .cancel.active, .add.active {
color: #999;
background-color: #FFFFFF;
}
.back.active {
-webkit-border-image: url('../jqtouch-src/themes/apple/img/backButton.png') 0 8px 0 14px;
}
h3, div.h3 {
margin: 15px 10px 5px;
padding-right: 10px;
padding-left: 10px;
color: #001A66;
font-size: 16px;
font-weight: bold;
text-shadow: white 0 1px;
}
/* Override default blue toolbar gradient */
.grayToolbar {
background: #FFFFFF;
height: 44px;
border: 0;
border-bottom: 1px solid #3a3d44;
-webkit-border-radius: 0;
}
/* Remove excess padding from ul elements (jqtouch vs. mobile_iphone layout) */
#mj_iphone_header ul,
#mj_iphone_header2 ul,
#mj_iphone_footer ul,
#mj_iphone_footer2 ul,
.content ul {
margin: 15px 2px 17px;
}
div.search ul li {
padding: 5px 10px;
}
div.search ul li input[type="text"] {
width: 100%;
height: 29px;
background: transparent;
border:0;
}
div.search table {
width:100%;
}
div.search td.button {
width: 55px;
}
div.search td.text {
padding: 0 10px;
margin-right: 10px;
border: 1px solid rgba(95, 97, 96, 0.7); /* #5f6160; */
-webkit-border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 3px rgba(95, 97, 96, 0.7); /* #5f6160 */
background:white;
}
div.search input.button, div.search button.button {
/*border-width: 0 5px;*/
border: 1px solid #223e6d;
-webkit-border-radius: 5px;
-webkit-box-shadow: inset 1px 1px 2px rgba(34, 62, 109, 0.5); /* #223e6d */
padding: 0 6px;
width: 55px;
height: 31px;
line-height: 31px;
font-family: inherit;
font-size: 12px;
font-weight: bold;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0;
text-overflow: ellipsis;
text-decoration: none;
white-space: nowrap;
/*background: none;*/
background: #194FDB url('../jqtouch-src/themes/apple/img/selection.png') repeat-x scroll 0 0;
/* -webkit-border-image: url('/../jqtouch-src/themes/apple/img/blueButton.png') 0 5 0 5;*/
}
/* Fix checkbox position in login form
* TODO: check if this needs to be done for all checkboxes inside list items */
#form-login-remember .toggle {
margin-top: -3px;
}
.loginButton {
width: 100%;
background-color: transparent; /* TODO: check if necessary in iPhone */
}
/* Login link */
.login-link {
margin: 10px;
}
input[type=submit].whiteButton:hover {
color: white;
background: black;
}
.buttonWrapper, .loginButtonWrapper {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 17px;
}
form ul li input[type="text"]::-webkit-input-placeholder,
form ul li input[type="password"]::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
div.search ul li input[type="text"]::-webkit-input-placeholder {
color: #a3a3a3;
font-weight: normal;
}
form ul li label {
color: black;
font-weight: bold;
}
p.textview {
padding: 10px;
margin: 10px;
background-color: white;
line-height: 120%;
border: 1px solid #888888;
-webkit-border-radius: 6px;
overflow: hidden; /* fix floats */
}
ul li.searchresult h3 {
padding: 0;
margin: 0;
display: inline;
}
ul li.searchresult p {
padding: 0;
margin: 0;
text-overflow: hidden;
}
ul li.searchresult p.section {
font-weight: normal;
display: inline;
}
ul li.searchresult a {
white-space: normal;
}
ul li.searchresult a.searchresult:hover h3, ul li.searchresult a.searchresult:active h3 {
color: white;
text-shadow: none;
}
ul li.searchresult a.searchresult:hover, ul li.searchresult a.searchresult:active {
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: #194FDB url('../jqtouch-src/themes/apple/img/selection.png') repeat-x scroll 0 0;
color: #FFFFFF;
}
div.searchresultsnav {
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
div.searchresultsnav .pagenav {
padding-left:5px;
}
/* Don't display error header */
dt.error {
display:none;
}
dd.error li {
background: red;
color: white;
}
dd.message li {
background: #ffe;
color: black;
}
.markup-chooser {
padding: 10px;
}
div.pagination {
text-align: center;
}
div.pagination ul li {
display: inline;
border-top: 0;
padding: 10px 0;
}
div.pagination ul a, div.pagination ul span {
display: inline;
margin: 0;
padding: 0 15px 1px;
-webkit-border-radius: 0;
border-radius: 0;
}
div.pagination ul span {
color: #999;
}
p {
color: #333;
}
.image-left {
float:left;
}
.image-right {
float:right;
}
body > div.current {
padding: 0 !important;
border: none !important;
background-color: #FFFFFF;
}
.mjwideimg {
display: block;
width: 100%;
text-align: center;
}