[Risolto] Gantry titoli moduli e icone bootstrap

[$Red]

ciao a tutti, vorrei sfruttare la possibilita di richiamare tramite i loro codici da inserire in classe css del modulo le icone di bootstrap, con gantry che utilizza bootstrap questo è già possibile, il problema è che l'icona viene visualizzata al di sopra del titolo del modulo e non all'inizio, allego immagine, ho provato in molti modi cercando soluzioni in rete ma non sono riuscito ad ottenere nessun risultato sono ore che ci sbatto  , qualcuno che mi da qualche aiuto per favore grazie

[giusebos]

ma non hai on line il sito?

se aggiungi una regola per il background, potresti avere l'icona alla sinistra del titolo

Codice: [Seleziona]

.tua_classe h2 {
background: url("/images/tua_icona.png") no-repeat scroll 10px 7px #F5F5F5;
padding: 6px 10px 6px 70px;
}

il padding, sopratutto il valore a ore 9 serve per distanziare il testo dalla icona,
mente i due valori sul background sono i margini top-bottom e left-right della icona

[$Red]

il fatto è che le icone bootstrap hanno i codici su un file php

Codice: [Seleziona]

/templates/gantry/fields/iconlist.php e non so dove è il png con le icone penso che lo richiava da un server esterno bhoo, a questo punto seguiro il tuo consiglio creo una stile title modulo e ci inserisco il codice che hai postato faccio un pò di test grazie 

[giusebos]

io credo che quel file serve a trasformare le icone da formato vettoriale a png
se lo apri cosa vedi?

[$Red]

se non sbaglio le icone sono su un file.png, perche andando sulla demo di bootstrap sezione icons visualizzando l'immagine di sfondo delle icone è questo

questo è il codiche del file iconlist.php

Codice: [Seleziona]

<?php
/**
 * @version   $Id: iconlist.php 2381 2012-08-15 04:14:26Z btowles $
 * @author    RocketTheme http://www.rockettheme.com
 * @copyright Copyright (C) 2007 - 2012 RocketTheme, LLC
 * @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 */

defined('JPATH_PLATFORM') or die;

class JFormFieldIconList extends JFormFieldList
{

    public $type = 'IconList';

    // icons
    protected $icons = array('icon-adjust','icon-align-center','icon-align-justify','icon-align-left','icon-align-right','icon-arrow-down','icon-arrow-left','icon-arrow-right','icon-arrow-up','icon-asterisk','icon-backward','icon-ban-circle','icon-bar-chart','icon-barcode','icon-beaker','icon-bell','icon-bold','icon-bolt','icon-book','icon-bookmark','icon-bookmark-empty','icon-briefcase','icon-bullhorn','icon-calendar','icon-camera','icon-camera-retro','icon-caret-down','icon-caret-left','icon-caret-right','icon-caret-up','icon-certificate','icon-check','icon-check-empty','icon-chevron-down','icon-chevron-left','icon-chevron-right','icon-chevron-up','icon-circle-arrow-down','icon-circle-arrow-left','icon-circle-arrow-right','icon-circle-arrow-up','icon-cloud','icon-cog','icon-cogs','icon-columns','icon-comment','icon-comment-alt','icon-comments','icon-comments-alt','icon-copy','icon-credit-card','icon-cut','icon-dashboard','icon-download','icon-download-alt','icon-edit','icon-eject','icon-envelope','icon-envelope-alt','icon-exclamation-sign','icon-external-link','icon-eye-close','icon-eye-open','icon-facebook','icon-facebook-sign','icon-facetime-video','icon-fast-backward','icon-fast-forward','icon-file','icon-film','icon-filter','icon-fire','icon-flag','icon-folder-close','icon-folder-open','icon-font','icon-forward','icon-fullscreen','icon-gift','icon-github','icon-github-sign','icon-glass','icon-globe','icon-google-plus','icon-google-plus-sign','icon-group','icon-hand-down','icon-hand-left','icon-hand-right','icon-hand-up','icon-hdd','icon-headphones','icon-heart','icon-heart-empty','icon-home','icon-inbox','icon-indent-left','icon-indent-right','icon-info-sign','icon-italic','icon-key','icon-leaf','icon-legal','icon-lemon','icon-link','icon-linkedin','icon-linkedin-sign','icon-list','icon-list-alt','icon-list-ol','icon-list-ul','icon-lock','icon-magic','icon-magnet','icon-map-marker','icon-minus','icon-minus-sign','icon-money','icon-move','icon-music','icon-off','icon-ok','icon-ok-circle','icon-ok-sign','icon-paper-clip','icon-paste','icon-pause','icon-pencil','icon-phone','icon-phone-sign','icon-picture','icon-pinterest','icon-pinterest-sign','icon-plane','icon-play','icon-play-circle','icon-plus','icon-plus-sign','icon-print','icon-pushpin','icon-qrcode','icon-question-sign','icon-random','icon-refresh','icon-remove','icon-remove-circle','icon-remove-sign','icon-reorder','icon-repeat','icon-resize-full','icon-resize-horizontal','icon-resize-small','icon-resize-vertical','icon-retweet','icon-road','icon-rss','icon-save','icon-screenshot','icon-search','icon-share','icon-share-alt','icon-shopping-cart','icon-sign-blank','icon-signal','icon-signin','icon-signout','icon-sitemap','icon-sort','icon-sort-down','icon-sort-up','icon-star','icon-star-empty','icon-star-half','icon-step-backward','icon-step-forward','icon-stop','icon-strikethrough','icon-table','icon-tag','icon-tags','icon-tasks','icon-text-height','icon-text-width','icon-th','icon-th-large','icon-th-list','icon-thumbs-down','icon-thumbs-up','icon-time','icon-tint','icon-trash','icon-trophy','icon-truck','icon-twitter','icon-twitter-sign','icon-umbrella','icon-underline','icon-undo','icon-unlock','icon-upload','icon-upload-alt','icon-user','icon-user-md','icon-volume-down','icon-volume-off','icon-volume-up','icon-warning-sign','icon-wrench','icon-zoom-in','icon-zoom-out');


    protected function getOptions()
    {
        // Initialize variables.
        $options = array();

        $options[] = JHtml::_('select.option', '-1', '- None Selected -', 'value', 'text');

        foreach ($this->icons as $icon)
        {
            $options[] = JHtml::_('select.option', $icon, $icon, 'value', 'text');
        }

        $options = array_merge(parent::getOptions(), $options);

        return $options;

    }
}
qui ci sono spiegati dei metodi per farlo tra cui quello che mi hai consigliato tu,  uno dice anche senza modificare il file /templates/yourtemplate/images/html/modules.php ma sinceramente non ci ho capito molto, penso che la guida sia valida perche avevo usato questa dello stesso sito per integrare alcune funzionalita di bootstrap non incluse in gantry e funzionava alla grande

[giusebos]

ok quel file "costruisce" tutte le classi.


per inserire l'icona accanto al titolo h2 dovresti avere una classe così:

Codice: [Seleziona]

h2.icon-check {

}
questo però vuol dire modificare il div nel file index.php o quello che usa gantry da semplice h2 a

Codice: [Seleziona]

<h2 class="icon-check">codice codice codice</div>

[$Red]

alla fine penso di aver fatto proprio quello che dici tu, anche se non volevo fare la modifica per non perderla ad ogni aggiornamento ho preso proprio quella strada tanto è solo una riga di codice da modificare e posso rifarla velocemente, inoltre quando aggiornano il framework che viene segnalato come aggiornamento di estensione nel pannello di controllo di joomla non penso sia sempre necessario aggiornare anche il template io l'ho aggiornato oggi alla 4.1.18 e prima avevo la 4.1.15 e non avevo nessun problema, cmq per quanto riguarda il mio "problema"  si deve modificare il file

Codice: [Seleziona]

/templates/yourtemplate/images/html/modules.php
alla riga 80 troviamo cosi

Codice: [Seleziona]

<h2 class="title"><?php echo $module->title; ?></h2>
e si modifica cosi

Codice: [Seleziona]

<h2 class="title <?php echo $params->get('header_class');?>"><?php echo $module->title; ?></h2>
in questo modo si puo utilizzare la classe header dei moduli nella gestione dei moduli/avanzate, l'unica cosa che mi rimaneva l'icona e il titolo attaccati per non starmi ad impazzire ho dato una spazio prima di inserire il titolo  questo è il risultato

[sgualembro]

Grazie infinite per la dritta! C'ho sbattuto la testa tutta la sera e non riuscivo a risolvere, adesso finalmente funziona!