Autore Topic: [Risolto] Gantry titoli moduli e icone bootstrap  (Letto 4730 volte)

Offline $Red

  • Moderator
  • Instancabile
  • *****
  • Post: 5111
  • "Bastard Inside"
    • Mostra profilo
    • redwebsite
[Risolto] Gantry titoli moduli e icone bootstrap
« il: 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

« Ultima modifica: 12 Nov 2013, 22:37:17 da $Red »
alterjoomla Guide joomla altervista - RedWebSite  joomla! e non solo joomla

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19598
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
    • Demo iCagenda
Re:Gantry titoli moduli e icone bootstrap
« Risposta #1 il: 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

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
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline $Red

  • Moderator
  • Instancabile
  • *****
  • Post: 5111
  • "Bastard Inside"
    • Mostra profilo
    • redwebsite
Re:Gantry titoli moduli e icone bootstrap
« Risposta #2 il: 12 Nov 2013, 19:47:21 »
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  :)
alterjoomla Guide joomla altervista - RedWebSite  joomla! e non solo joomla

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19598
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
    • Demo iCagenda
Re:Gantry titoli moduli e icone bootstrap
« Risposta #3 il: 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?



su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline $Red

  • Moderator
  • Instancabile
  • *****
  • Post: 5111
  • "Bastard Inside"
    • Mostra profilo
    • redwebsite
Re:Gantry titoli moduli e icone bootstrap
« Risposta #4 il: 12 Nov 2013, 20:58:23 »
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
alterjoomla Guide joomla altervista - RedWebSite  joomla! e non solo joomla

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19598
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
    • Demo iCagenda
Re:Gantry titoli moduli e icone bootstrap
« Risposta #5 il: 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:

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>
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline $Red

  • Moderator
  • Instancabile
  • *****
  • Post: 5111
  • "Bastard Inside"
    • Mostra profilo
    • redwebsite
Re:Gantry titoli moduli e icone bootstrap
« Risposta #6 il: 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
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  ;D questo il risultato


alterjoomla Guide joomla altervista - RedWebSite  joomla! e non solo joomla

Offline sgualembro

  • Nuovo arrivato
  • *
  • Post: 6
  • Sesso: Maschio
    • Mostra profilo
Re:[Risolto] Gantry titoli moduli e icone bootstrap
« Risposta #7 il: 05 Dic 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! :)

 

Torna su