Joomla.it Forum

Joomla! 3 => I Template di Joomla! 3 => : $Red 12 Nov 2013, 16:47:36

: [Risolto] Gantry titoli moduli e icone bootstrap
: $Red 12 Nov 2013, 16:47:36

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

(http://i39.tinypic.com/2jba5iw.jpg)

: Re:Gantry titoli moduli e icone bootstrap
: giusebos 12 Nov 2013, 18:50:38

ma non hai on line il sito?

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

:

.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

: Re:Gantry titoli moduli e icone bootstrap
: $Red 12 Nov 2013, 19:47:21

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

:

/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  :)

: Re:Gantry titoli moduli e icone bootstrap
: giusebos 12 Nov 2013, 19:54:01

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

: Re:Gantry titoli moduli e icone bootstrap
: $Red 12 Nov 2013, 20:58:23

se non sbaglio le icone sono su un file.png, perche andando sulla demo di bootstrap sezione icons (http://getbootstrap.com/2.3.2/base-css.html#icons) visualizzando l'immagine di sfondo delle icone è questo
(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png)
questo è il codiche del file iconlist.php

:

<?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 (http://conquatheme.com/index.php/blog/css-less/30-icons-in-menu-and-module-title) 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 (http://conquatheme.com/index.php/blog/bootstrap/16-are-you-bootstrap-p-ed-already%20class=) dello stesso sito per integrare alcune funzionalita di bootstrap non incluse in gantry e funzionava alla grande

: Re:Gantry titoli moduli e icone bootstrap
: giusebos 12 Nov 2013, 21:45:17

ok quel file "costruisce" tutte le classi.


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

:

h2.icon-check {

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

:

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

: Re:Gantry titoli moduli e icone bootstrap
: $Red 12 Nov 2013, 22:33:24

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

:

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

:

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

:

<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  ;D questo è il risultato

(http://i40.tinypic.com/16ap7iu.jpg)

: Re:[Risolto] Gantry titoli moduli e icone bootstrap
: sgualembro 05 Dec 2014, 11:00:11

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