Autore Topic: Mini-guida alla personalizzazione del template PROTOSTAR  (Letto 11534 volte)

Offline adottauncane

  • Team Joomla.it
  • Instancabile
  • *******
  • Post: 17976
  • Sesso: Femmina
    • Mostra profilo
    • Adotta un cane
Ciao a tutti,
ho scritto una piccola guida alla personalizzazione del template PROTOSTAR. Il template già caricato nella distrubuzione di Joomla!® che nessuno si fila mai, ma che invece è molto carino, responsive, con un'index.php semplice e comprensibile anche a chi, come me, di php ne sa poco...
Per siti semplici, che non abbiano bisono di mille posizioni, o per chi vuole cominciare a capire il funzionamento dei template e inserire del codice.

C'è anche una piccola parte sull'uso della Classe e del Suffisso Classe Modulo e una sull'aggiunta di nuove posizioni.

Link all'articolo: http://www.joomla.it/articoli-community-3x-tab/7374-mini-guida-alla-personalizzazione-del-template-protostar.html
« Ultima modifica: 13 Gen 2014, 13:29:20 da alexred »

Offline BelinBelan

  • Instancabile
  • ******
  • Post: 3887
  • Sesso: Maschio
  • Niente di meno e niente di più. uguale? Forse.
    • Mostra profilo
    • AllAroundTheWeb
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #1 il: 13 Gen 2014, 13:26:31 »
Io non l'ho ancora letto ma vado sulla fiducia!  ;D
--
Per piacere, no messaggi privati con richieste d'aiuto!!!

Offline adottauncane

  • Team Joomla.it
  • Instancabile
  • *******
  • Post: 17976
  • Sesso: Femmina
    • Mostra profilo
    • Adotta un cane
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #2 il: 13 Gen 2014, 14:11:25 »
Troppo buono...  :)

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19085
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
    • Demo iCagenda
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #3 il: 13 Gen 2014, 16:08:03 »
L'articolo è scritto davvero bene con le ancore che riportano alle sezioni; Stupendo!
Brava tu, per la tua dedizione e pazienza.
Un valido supporto per i tantissimi utenti che usano questo bel template. :) :) :) :)

Dimenticavo: ottima la scelta di usare le immagini con i MINIONS, mi fanno impazzire!!
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline adottauncane

  • Team Joomla.it
  • Instancabile
  • *******
  • Post: 17976
  • Sesso: Femmina
    • Mostra profilo
    • Adotta un cane
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #4 il: 13 Gen 2014, 16:21:29 »
Grazie...



[allegato eliminato automaticamente dopo un anno]

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19085
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
    • Demo iCagenda
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #5 il: 13 Gen 2014, 16:31:36 »
 :)

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

Offline Mauro73

  • Esploratore
  • **
  • Post: 59
  • Sesso: Maschio
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #6 il: 25 Apr 2014, 23:52:57 »
Pur seguendo i tuoi suggerimenti non riesco a far visualizzare una immagine in background  :-[
La cosa mi sta facendo impazzire

Offline adottauncane

  • Team Joomla.it
  • Instancabile
  • *******
  • Post: 17976
  • Sesso: Femmina
    • Mostra profilo
    • Adotta un cane
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #7 il: 01 Mag 2014, 14:48:51 »
Spiace... :P
Hai un link al sito che ci guardo?

Offline Mauro73

  • Esploratore
  • **
  • Post: 59
  • Sesso: Maschio
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #8 il: 01 Mag 2014, 15:47:22 »
Il sito è ancora in costruzione e il template protostar lo uso solo su una pagina, :


http://www.centrodentisticoarese.it/testing/index.php?option=com_content&view=article&id=4&Itemid=124

Come si può vedere ho eliminato il background, adesso vorrei riuscire a far visualizzare una immagine in trasparenza al posto dello sfondo bianco.
Come potrai notare ho anche qualche altro "piccolo" problemino da dover risolvere  ;D  ma nonostante diversi tentativi non ci sono ancora riuscito  :o . Se qualcuno avesse suggerimenti sarebbero ben accetti  :P

« Ultima modifica: 01 Mag 2014, 15:55:10 da Mauro73 »

Offline adottauncane

  • Team Joomla.it
  • Instancabile
  • *******
  • Post: 17976
  • Sesso: Femmina
    • Mostra profilo
    • Adotta un cane
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #9 il: 01 Mag 2014, 16:20:30 »
Aggiungi al tuo foglio tpersonal.css (se è quello che usi per le modifiche) questo:

Codice: [Seleziona]
body.site.fluid {    background: url("http://www.centrodentisticoarese.it/testing/images/cda2013/Logo/logo2.png") repeat scroll 0 0 rgba(0, 0, 0, 0);}
naturalmente se usi un'immagine contenuta nella cartella image del template, scrivi il percorso relativo e magari metti no-repeat (se non vuoi un'immagine ripetuta).

Non saprei per gli altri problemini... non so quali sono.  :)

Offline Mauro73

  • Esploratore
  • **
  • Post: 59
  • Sesso: Maschio
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #10 il: 01 Mag 2014, 16:31:58 »
Ti ringrazio per la risposta e la probabile soluzione, la testerò appena possibile e ti dirò com'è andata  ;D , adesso ho la famigliola che mi reclama ahahahah


Gli altri problemini? Beh... come noterai la scheda della segretaria non è allineata alla scritta in rosa....nonostante i miei svariati tentativi, anche controllando il codice, non riesco ad allinearla.

Offline coolnetwork

  • Nuovo arrivato
  • *
  • Post: 31
    • Mostra profilo
    • CoolNetwork
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #11 il: 01 Mag 2014, 17:18:24 »
Guida molto utile!  :)

Online tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 28586
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #12 il: 01 Mag 2014, 17:40:42 »
Guida molto utile!  :)

Sì ma lo scopo della guida non è quello di fare della pubblicità gratuita a chi risponde solo per farsi notare quì ed in altri post.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline adottauncane

  • Team Joomla.it
  • Instancabile
  • *******
  • Post: 17976
  • Sesso: Femmina
    • Mostra profilo
    • Adotta un cane
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #13 il: 01 Mag 2014, 21:25:08 »
È una questione di spazio. Esattamente non so come hai fatto le scritte Odontotecnico e Segretaria ma se correggi così ci stanno:

Codice: [Seleziona]
.row-fluid .span3 {    width: 22%;}
Però nel file tpersonal.css metti solo le variazioni non tutto il file template.css


Offline Mauro73

  • Esploratore
  • **
  • Post: 59
  • Sesso: Maschio
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #14 il: 02 Mag 2014, 00:21:10 »
È una questione di spazio. Esattamente non so come hai fatto le scritte Odontotecnico e Segretaria


Prima di tutto grazie, il tuo suggerimento per l'immagine funziona (puoi vedere come lo ho utilizzato, anche se mi sembra non si riduca responsivamente), inoltre ho seguito anche il consiglio circa il file tpersonal.css che ovviamente era solo duplicato integralmente mentre eseguivo i miei "fallimentari" tentativi.


Per quanto concerne invece l'altro mio problemino il codice è in bootstrap.
In pratica ho suddiviso la riga in quattro sezioni "span3" ergo dovrebbero starci, mentre nella realtà la quarta tende a scivolare al piano di sotto  :D


Se credi di potermi dare una mano, che sarebbe davvero molto gradita (sfacciato che sono), posso postare il codice che sto usando (anche perché quella parte di codice che mi hai postato non so proprio come poterla utilizzare, eh si...non sono proprio quello che si potrebbe definire un professionista).  :-[
« Ultima modifica: 02 Mag 2014, 00:23:57 da Mauro73 »

Offline adottauncane

  • Team Joomla.it
  • Instancabile
  • *******
  • Post: 17976
  • Sesso: Femmina
    • Mostra profilo
    • Adotta un cane
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #15 il: 02 Mag 2014, 00:41:43 »
Se togli tutto il codice dulicato nel file tpersonal.css e lasci solo quello che ti serve per le modifiche, quello che ho scritto io lo metti lì. Prenderà quello, invece che quello originale, sempre che tu abbia aggiunto la linea di codice nell'index.php come scritto sulla mini-guida.

Hai ragione infatti. Usando li span3 dovrebbe starci. Per questo ho premesso che non so come hai fatto i due box Odontotecnico e Segretaria, dovrebbe stare come quelli sopra. In ogni caso facendo la modifica dovrebbe andare.

Per rendere responsive l'immagine di sfondo aggiungi

Codice: [Seleziona]
-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
nel css di prima.

Codice: [Seleziona]
body.site.fluid {   
  background: url("http://www.centrodentisticoarese.it/testing/images/cda2013/Medical7.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}

Offline Mauro73

  • Esploratore
  • **
  • Post: 59
  • Sesso: Maschio
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #16 il: 02 Mag 2014, 00:49:53 »
Ho inserito il codice che mi hai postato in tpersonal.css (GRAZIE  ;D )


Già, dovrebbe starci eppure ahahahah
Ora provo anche qui i tuoi suggerimenti sperando di non fare ulteriori danni (ovviamente a causa della mia incompetenza  :P )


AGGIORNAMENTO


INCREDIBILE!!!
Dopo qualche tentativo, ce la ho fatta eheheheh (adattando un paio di dettagli dovuti al restringimento dell'area di lavoro).
Ciò nonostante direi che il risultato è quello desiderato.


Grazie per il tuo FONDAMENTALE aiuto.
« Ultima modifica: 02 Mag 2014, 01:15:15 da Mauro73 »

Offline Iluvee

  • Nuovo arrivato
  • *
  • Post: 34
  • Sesso: Maschio
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #17 il: 08 Ago 2014, 13:40:26 »
Salve a tutti, sono un nuovo utente del forum. Avrei un problema da risolvere sul template Protostar. Non so se sia giusto postare in questa sezione e chiedo scusa in anticipo se mi sono sbagliato. La mia pagina prevede (a parte intestazioni e menu) 2 blocchi (200px) in position7 e position8   +   al centro il blog degli articoli. Siccome non son riuscito in nessun modo a gestire span6 per le mie esigenze ho modificato index.php e template.css inserendo un mio span13. A questo punto funziona tutto tranne ... Non ho capito come dare piu' spazio tra le 2 colonne degli articoli.
Questa la pagina:
http://sanpietroinvetrina.outlineedizioni.it/
Se qualcuno avesse qualche suggerimento lo ringrazio anticipatamente.

Iluvee
« Ultima modifica: 08 Ago 2014, 13:56:34 da Iluvee »

Offline Mauro73

  • Esploratore
  • **
  • Post: 59
  • Sesso: Maschio
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #18 il: 08 Ago 2014, 14:52:51 »
Salve,
prima di tutto benvenuto in questa splendida comunità.
Ti rispondo sulla base delle mie modeste conoscenze.
Prima di tutto credo sia il caso di spiegare quello che fa il bootstrap, in particolare suddivide la pagina del tuo template in 12 colonne (ecco spiegato gli span), questo vuol dire (correggetemi se sbaglio) che aver creato uno span13 non risolva il tuo problema.
Hai almeno 2 alternative:
1) la più semplice è crearti due moduli (in gestione moduli) da posizionare nelle posizioni right e left dove andare ad inserire ciò che ti occorre;
2) usando il bootstrap una cosa del genere:


Codice: [Seleziona]
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2 well">
      area 1
    <*div>
    <div class="span4 well">
      area 2
     <*div>
 <div class="span4 well">
      area 3
     <*div >
    <div class="span2 well">
      area 4
    <*div >
   <*div >
<*div >


P.S. gli asterischi sono da sostituire con /
« Ultima modifica: 08 Ago 2014, 15:02:46 da Mauro73 »

Offline Iluvee

  • Nuovo arrivato
  • *
  • Post: 34
  • Sesso: Maschio
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #19 il: 08 Ago 2014, 15:08:59 »
Grazie per la sollecita risposta.
Non capisco: cosa cambia dall'usare span6 che verrebbe usato di default quando sono presenti entrambi i moduli in left e right, richiamato da index.php

-------------
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span6";
}
-------------

o come l'ho trasformato io in "span13".

In realta' non ho proprio capito con che logica e con quali comandi gestisca le 2 colonne.

Iluvee

Offline Mauro73

  • Esploratore
  • **
  • Post: 59
  • Sesso: Maschio
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #20 il: 08 Ago 2014, 15:19:08 »
Praticamente il tuo span13, credo, ha semplicemente ridotto lo spazio a disposizione.
Devi immaginare la pagina bianca del tuo template diviso in 12 colonne uguali (ognuna di esse=span1).
Ora, devi usare i 12 span suddividendoli come ti servono ma il totale deve corrispondere sempre a 12.


Esempi:


Codice: [Seleziona]
2 Colonne uguali
<div class="container-fluid"> 
<div class="row-fluid">   
<div class="span6 well">     
 area 1   
<*div>   
<div class="span6 well">     
area 2     
<*div>   
<*div >
<*div >


3 Colonne uguali
<div class="container-fluid"> 
<div class="row-fluid">   
<div class="span4 well">     
area 1   
<*div>   
<div class="span4 well">     
area 2     
<*div> <div class="span4 well">     
area 3     
<*div >   
<*div >
<*div >

Se usi, invece, i moduli....l'area si restringe è vero (perchè una parte è occupata), ma....il bootstrap vede quell'area rimasta al centro sempre e comunque suddivisa in 12 colonne.
« Ultima modifica: 08 Ago 2014, 15:23:39 da Mauro73 »

Offline Iluvee

  • Nuovo arrivato
  • *
  • Post: 34
  • Sesso: Maschio
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #21 il: 08 Ago 2014, 15:28:47 »
Grazie mille, non avendo fatto io nessun corso ma cercando di arrivarci per tentativi, credo che l'unico modo per capirlo sia fare delle prove con le indicazioni che mi hai dato, grazie ancora.

Iluvee

Offline mirkols

  • Esploratore
  • **
  • Post: 154
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #22 il: 17 Dic 2014, 02:29:38 »
Ciao a tutti. ho un sito con template protostar e vorrei modificare il footer come http://www.bancoscuolaantisismico.com/ . questo ha la possibilità di inserire fino a 6 menù nel footer....
chi ha pazienza di aiutarmi...non ho grandi conoscenze di programmazione... :-[

Offline Iluvee

  • Nuovo arrivato
  • *
  • Post: 34
  • Sesso: Maschio
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #23 il: 17 Dic 2014, 06:16:42 »
Io farei un "Modulo html" con una tabella, composta come l'esempio che hai linkato, con tutte le voci che vuoi inserire linkate ai corrispettivi menu. Poi la pubblicherei in posizione "Footer" di protostar.

Offline mirkols

  • Esploratore
  • **
  • Post: 154
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #24 il: 17 Dic 2014, 17:49:29 »
Grazie Iluvee, potrebbe essere una soluzione...ma mi piacerebbe poter gestire dei veri e propri menù...
[/size]

Online tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 28586
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #25 il: 17 Dic 2014, 18:04:41 »
Fai tanti moduli menù e gli dai footer come posizione ove si posizioneranno affiancati come nella demo.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline mirkols

  • Esploratore
  • **
  • Post: 154
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #26 il: 17 Dic 2014, 19:05:45 »
ciao tomtomeight. ho provato come mi hai consigliato, l'ho lasciato momentaneamente visualizzato come puoi vedere: mi mette le voci di menu ma non i titoli dei menu e non uno a fianco all'altro...

Online tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 28586
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #27 il: 17 Dic 2014, 19:46:40 »
Come posso vedere dove?  Non trovo un tuo link e poi il titolo del menù ti basta impostarlo a visualizza.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline mirkols

  • Esploratore
  • **
  • Post: 154
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #28 il: 17 Dic 2014, 20:10:03 »
caspita... :-[ ...ero convinto di aver messo il link...perdonami... http://www.oscarallestimenti.com/

Online tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 28586
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #29 il: 17 Dic 2014, 20:16:43 »
Per mettere i 6 menù affiancati devi suddividere il footer in 6 spazi da 2 span.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline Stefano82

  • Esploratore
  • **
  • Post: 71
  • Sesso: Maschio
  • Si stava meglio quando si stava meglio!
    • Mostra profilo
    • Il sito di Stefano D'Alessandro
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #30 il: 24 Dic 2014, 17:52:12 »
Salve a tutti ho letto con interesse l'articolo perché riguarda proprio il problema che vorrei risolvere sul sito che gestisco.


Vorrei semplicemente modificare il colore delle scritte all'interno del modulo HTML personalizzato "Highly Recommended Links" che si trova in alto a destra sulla Home Page del sito con Template Protostar.


Ho provato a costruire un nuovo modulo HTML personalizzato. Ho inserito il suffisso "_min" alla voce Suffisso classe CSS ed ho selezionato lo Stile Modulo xhtml.

(Per prudenza ho effettuato questa prova su un sito sperimentale in locale. Vorrei esser sicuro che tutto funzioni prima di combinare eventuali guai in remoto).


Una volta creato il modulo grazie ad ispeziona elemento sono riuscito ad effettuare tutte le modifiche desisderate nella sezione "element.style".


Purtroppo non riesco a capire in quale file inserire le proprietà colore, background image ecc...


Da quel che ho capito dall'articolo dovrei farlo nel file css del mio template, cioè "protostar.css" ma non riesco a capire in quale riga devo andare ad operare.


Sto anche cercando, eventualmente, di modificare il file del modulo che ho creato, magari con un override, ma sto impazzendo nel cercarlo, senza soluzione.


Se riusciste ad aiutarmi (come sempre il forum ha fatto sinora) vi sarò infinitamente grato.  :)
Stefano D'Alessandro

Offline Stefano82

  • Esploratore
  • **
  • Post: 71
  • Sesso: Maschio
  • Si stava meglio quando si stava meglio!
    • Mostra profilo
    • Il sito di Stefano D'Alessandro
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #31 il: 24 Dic 2014, 17:52:50 »
Scusate ma ho dimenticato di inserire il link al sito ...
Eccolo qui:
http://www.avalon-instruments.com/
Stefano D'Alessandro

Offline mirkols

  • Esploratore
  • **
  • Post: 154
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #32 il: 02 Gen 2015, 12:44:22 »
Salve a tutti e buon anno!


Stavo facendo il test ottimizzato per dispositivi mobili e ho 2 problemi, contenuti più grandi rispetto allo schermo e link vicini l'uno all'altro.
Potete aiutarmi a risolvere questi 2 problemi?
Credo che uno potrebbe essere l'immagine dell'header ma non so come farla adattare al dispositivo...
Il sito è http://www.oscarallestimenti.com/

Offline ciroslitz

  • Esploratore
  • **
  • Post: 134
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #33 il: 19 Feb 2015, 17:56:40 »
Ottima guida..... avrei solo bisogno di un chiarimento ho creato la position-icone....  ma vorrei allargare lo spazio che occupa per inserire  la voce cerca oppure spostare il menu al posto della nuova position appena creata. Come fare per evitare che occupi solo la parte dx la position? vorrei sfruttare tutto lo spazio in alto creato, su cosa agire per dimensionare la zona?

Offline gecota

  • Nuovo arrivato
  • *
  • Post: 17
    • Mostra profilo
Re:Mini-guida alla personalizzazione del template PROTOSTAR
« Risposta #34 il: 23 Feb 2015, 15:39:42 »
Ciao a tutti,
innanzitutto complimenti per la mini-guida, veramente ben fatta!!
Ho solo un piccolo problema. Ho seguito tutti i passi, anche prendendoli dal tuo sito piccoliwebmaster, ma non riesco a dare l'ombreggiatura allo slideshow messo in position-1 o banner... suggerimenti?

 

Torna su