I'm making my own template for joomla 3.x first time around.
The problem is that when I click on a module to edit it, and I get the Joomla form for front-end editing, the skin/style is only "half there"? So to speak. Main 3 buttons are shown ok, so are lists and fields. But buttons like show/hide/publish/unpublish... in the form are just text without any button.
Outside of looks it all seems to function properly, but the buttons just don't render as such.
I suspect it has to do something with the fact that I rely chiefly on bootstrap? I compared with default templates like protostar and they all load their own .css instead of bootstrap. But even when I copied all the code from their .css to mine - it still didn't work, so I guess it's not just the problem with how things are styled but the way classes of buttons get defined? (If that's the right way to call it?). What I mean is that if we take for example, "Show" button in the form, using the protostar template, it will show in firebug as:
label.btn.active.btn-success.
with HTML code being
<label class="btn active btn-success" for="jform_showtitle0">Show</label>
(where does that code come from, I honestly don't know, must be from bootstrap? I guess?)
Meanwhile when I apply my template, it just:
label
With HTML code being
<label for="jform_showtitle0">Show</label>
So that's for the buttons like show/hide/published etc. Meanwhile buttons like Save/Save & Close/Cancel all appear ok with only the icons missing from them.
How can I control this form styling? Where should I look? What to do so that it gives me the proper HTML coding instead of the one resulting in just "label" and Show?
And most of all, what to do to turn those buttons in the form like they are in protostar theme?
I'm attaching links to the image which shows both my custom theme under inspection in Firefox. And the protostar theme for comparison:
It's work in progress, here's the current index.php:
<?php defined('_JEXEC') or die;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$sitename = $app->getCfg('sitename');
// Detecting Active Variables (Leave this whole section alone)
$itemid = $app->input->getCmd('Itemid', '');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href='http://fonts.googleapis.com/css?family=Play:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
<jdoc:include type="head" />
<?php // Template color ?>
<?php if ($this->params->get('templateColor')) : ?>
<style type="text/css">
body.site
{
border-top: 3px solid <?php echo $this->params->get('templateColor'); ?>;
background-color: <?php echo $this->params->get('templateBackgroundColor'); ?>
}
a
{
color: <?php echo $this->params->get('templateColor'); ?>;
}
.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
.btn-primary
{
background: <?php echo $this->params->get('templateColor'); ?>;
}
.navbar-inner
{
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
}
</style>
<?php endif; ?>
<?php
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Add Stylesheets
JHtmlBootstrap::loadCss();
// Load optional rtl Bootstrap css and Bootstrap bugfixes
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);
// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}
?>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<!--[if lte IE 7]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template_IEold.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template_IE8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 9]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template_IE9.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="templates/shenplate/js/mainshen.js" type="text/javascript"></script>
</head>
<body id="<?php echo ($itemid ? 'itemid-' . $itemid : ''); ?>">
<!-- Begin Header-->
<div id="site_head" class="row-fluid">
<div id="WebyLogo" class="span3 pagination-centered hidden-phone">
<span class="visible-tablet"><img src="templates/shenplate/images/navbar/JTCBWatermark.png"></span>
<span class="visible-desktop"><img src="templates/shenplate/images/navbar/JTCBWatermark.png"> Graphics</span>
</div>
<div class="span8" style="margin-left: 0px;">
<?php if ($this->countModules('position-9')): ?>
<div id="main_top_bar" class="navbar" role="navigation">
<div class="navbar-inner" style="border-top-left-radius: 2px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 2px;">
<jdoc:include type="modules" name="position-9" style="none" />
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<div id="buttola" class="images-container">
<img src="/joomla/templates/shenplate/images/navbar/JTCBMenuBtn1.png">
<img src="/joomla/templates/shenplate/images/navbar/JTCBMenuBtn2.png">
</div>
</a>
<!-- <a class="brand" href="#"></a> -->
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#about">NEWSFEED</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">PROJECTS <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">3D MODELS</a></li>
<li><a href="#">ANIMATIONS</a></li>
<li><a href="#">GRAPHICS</a></li>
<li><a href="#">IMAGE EDITING</a></li>
<li><a href="#">VIDEO EDITING</a></li>
<li><a href="#">SHOWREELS</a></li>
<li><a href="#">THEMES</a></li>
<li><a href="#">AUTOIT</a></li>
<li><a href="#">MUSIC</a></li>
</ul>
</li>
<li><a href="#">SHOP</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">INFO <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">CONTACT</a></li>
</ul>
</li>
<li><a href="#contact">LINKS</a></li>
</ul>
</div><!-- nav-collapse -->
</div><!-- navbar inner -->
</div><!-- navbar -->
<?php endif; ?>
</div><!-- container -->
<div class="span1 hidden-phone" style="margin-left: 0px;">
</div>
</div><!-- main header container -->
<div class="container">
<!-- Begin Container content-->
<div id=main_cont class="container-fluid">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Heading</h1>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div><!-- hero-unit -->
<!-- Example row of columns -->
<div class="row">
<!--<div class="sidebar span3"></div>-->
<div class="span4">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p><a class="btn" href="#">View details »</a></p>
</div><!-- span4 -->
<div class="span4">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p><a class="btn" href="#">View details »</a></p>
</div><!-- span4 -->
<div class="span4">
<h2>Heading</h2>
<p>
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<p><a class="btn" href="#">View details »</a></p>
</div><!-- span4 -->
<!--<div class="sidebar span3"></div>-->
</div><!-- row -->
<hr>
<footer><p>© Company 2012</p></footer>
<!--End Footer-->
</div><!-- container -->
</div>
<?php if ($this->countModules('messageIE')): ?>
<!--[if lte IE 7]>
<div class="message-ie"><jdoc:include type="modules" name="messageIE" style="none" /></div>
<![endif]-->
<?php endif; ?>
<jdoc:include type="modules" name="debug" style="none" />
<jdoc:include type="component" />
</body>
</html>
