web-dev-qa-db-fra.com

Créer un modèle personnalisé pour Joomla - les boutons de formulaire d’édition de modules manquent de peau / style?

Je crée mon propre modèle pour joomla 3.x pour la première fois.

Le problème est que lorsque je clique sur un module pour le modifier et que je reçois le formulaire Joomla pour l'édition frontale, le skin/style n'est que "moitié là"? Pour ainsi dire. Les 3 principaux boutons sont affichés correctement, de même que les listes et les champs. Mais les boutons comme afficher/masquer/publier/annuler la publication ... dans le formulaire ne sont que du texte sans bouton.

En dehors de l'apparence, tout semble fonctionner correctement, mais les boutons ne sont pas rendus en tant que tels.

Je suppose que cela doit faire quelque chose avec le fait que je me fie principalement au bootstrap? J'ai comparé des modèles par défaut tels que protostar et ils chargent tous leur propre fichier .css au lieu de bootstrap. Mais même lorsque j'ai copié tout le code de leur fichier .css dans le mien, cela ne fonctionnait toujours pas. Je suppose donc que le problème ne réside pas uniquement dans le style, mais également dans la définition des classes de boutons. (Si c'est la bonne façon de l'appeler?). Ce que je veux dire, c'est que si nous prenons par exemple le bouton "Afficher" du formulaire, à l'aide du modèle protostar, il apparaîtra dans firebug comme suit:

label.btn.active.btn-success.

avec le code HTML étant

<label class="btn active btn-success" for="jform_showtitle0">Show</label>

(honnêtement, je ne sais pas d'où vient ce code, il doit provenir de bootstrap? Je suppose?)

En attendant, lorsque j'applique mon modèle, il suffit de:

label

Avec le code HTML étant

<label for="jform_showtitle0">Show</label>

C’est donc le cas pour les boutons tels que afficher/masquer/publié, etc. Pendant ce temps, des boutons comme Enregistrer/Enregistrer & Fermer/Annuler apparaissent correctement, seules les icônes leur manquent.

  1. Comment puis-je contrôler ce style de formulaire? Où devrais-je regarder? Que faire pour que cela me donne le bon codage HTML au lieu de celui résultant simplement de "label" et de Show?

  2. Et surtout, que faire pour transformer ces boutons dans la forme comme ils sont dans le thème protostar?

J'attache des liens à l'image qui montre à la fois mon thème personnalisé sous inspection dans Firefox. Et le thème protostar pour la comparaison:

comparison

C'est un travail en cours, voici le fichier index.php actuel:

<?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>
componentmoduletemplates
3
Borg777

Ok, je l'ai compris!

La réponse était si simple. Depuis que je suis nouveau dans ce domaine et que je suivais un tutoriel, je me suis ensuite basé sur les connaissances que j’en ai tirées. J'ai raté la partie que le tutoriel n'entre pas vraiment dans les détails sur JavaScript.

Par conséquent, mon fichier .js était pratiquement vide.

Maintenant, lorsque je mets le code protostar .js, il suffit de le vérifier dans mon modèle principal .js. Soudain, les boutons ont commencé à fonctionner.

C’est un problème très nouveau pour les novices et je suis heureux de l’avoir compris. Donc, en gros, je devais définir les boutons moi-même en JavaScript pour que tout fonctionne correctement.

J'ai utilisé ce code, directement de protostar. Ofc ça devrait être raffiné mais ça marche.

(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);

Merci à fruppel d’avoir fait remarquer que c’était un problème lié à JavaScript qui m’a aidé à savoir quoi vérifier.

2
Borg777