How do you remove pinstripe background?

BackMenu
Home
LindsayKB
12 years, 8 months ago
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;
}
 
LindsayKB
12 years, 8 months ago
Never mind! Just fixed it
antoniohonrado
12 years, 7 months ago
what exactly did you do to fix it? pls.share
OptimusGeorge
12 years, 6 months ago
Anyone have anymore insight into this? I'm trying to do the same thing and the pinstripes are still showing up.
OptimusGeorge
12 years, 6 months ago
Figured it out. You have to specify a background in the 

body > * {

css portion. If you don't it goes all pinstripe..
waqarhassan41
12 years, 6 months ago
To fix background images you mus change in your css following tag

body > * {

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.