3

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.

  1. 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?

  2. 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:

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>
6
  • You're right, it's Bootstrap. How do you load Bootstrap into your template? Are you using the Joomla function JHtml::_('bootstrap.framework');? This call should load all necessary libraries for you.
    – fruppel
    Jul 28, 2015 at 11:33
  • I've updated the question to include the index.php so you can have a look. And yes, I use the framework together with jdoc head. They load bootstrap fine for most of the theme - except those forms on editing.
    – Borg777
    Jul 28, 2015 at 13:06
  • Do you get any JavaScript errors on the edit page? Check your browser console please.
    – fruppel
    Jul 28, 2015 at 13:20
  • Yes, as a matter of fact I do O_o. Well the one is the usual "click and JS error" in firefox that I red is some kind of a bug? [15:25:13.564 Empty string passed to getElementById().1 jquery.min.js:2:0] and the other one is [15:25:14.638 Use of getAttributeNode() is deprecated. Use getAttribute() instead.1 mootools-core.js:108:0]. I don't think I had this getattribute error few versions of my code earlier... I'm a bit surprised.
    – Borg777
    Jul 28, 2015 at 13:28
  • 1
    I believe you can ignore the second error. The first one is more interesting. My guess is that JavaScript execution is stopped after that error and so JavaScript won't add the necessary classes to your HTML. Try to figure out what this error causes. Also I am a little bit confused about your template. I don't see any component output (<jdoc:include type="component" />) there, check the protostar index.php: github.com/simplysites/joomla-cms/blob/3.5-dev/templates/…
    – fruppel
    Jul 28, 2015 at 13:39

1 Answer 1

2

Ok, I have figured it out!

The answer was so simple. Since I am new in this stuff and I was following a tutorial then built on the knowledge I've gotten from it. I have missed the part that the tutorial didn't really go into details about JavaScript.

Hence my .js file was practically empty.

Now, when I put the protostar .js code, just to check it out into my main template .js. Suddenly the buttons started to work.

This is obv a very newbie issue and I'm glad I have figured it out. So yeah basically I needed to define the buttons myself in JavaScript to make things work.

I used this code, straight from protostar. Ofc it should be refined but it works.

(function($)
{
    $(document).ready(function()
    {
        $('*[rel=tooltip]').tooltip()

        // Turn radios into btn-group
        $('.radio.btn-group label').addClass('btn');
        $(".btn-group label:not(.active)").click(function()
        {
            var label = $(this);
            var input = $('#' + label.attr('for'));

            if (!input.prop('checked')) {
                label.closest('.btn-group').find("label").removeClass('active btn-success btn-danger btn-primary');
                if (input.val() == '') {
                    label.addClass('active btn-primary');
                } else if (input.val() == 0) {
                    label.addClass('active btn-danger');
                } else {
                    label.addClass('active btn-success');
                }
                input.prop('checked', true);
            }
        });
        $(".btn-group input[checked=checked]").each(function()
        {
            if ($(this).val() == '') {
                $("label[for=" + $(this).attr('id') + "]").addClass('active btn-primary');
            } else if ($(this).val() == 0) {
                $("label[for=" + $(this).attr('id') + "]").addClass('active btn-danger');
            } else {
                $("label[for=" + $(this).attr('id') + "]").addClass('active btn-success');
            }
        });
    })
})(jQuery);

Thanks go to fruppel for pointing out that this is JavaScript related problem which have helped me to know what to check.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.