Back to top

Autore Topic: personalizzazione stile dei moduli  (Letto 3090 volte)

Offline Matthew96

  • Esploratore
  • **
  • Post: 88
  • Sesso: Maschio
  • Il Web Design è la chiave di internet!
    • Mostra profilo
personalizzazione stile dei moduli
« il: 12 Giu 2009, 23:18:22 »
Ciao ragzzi... Allora ecco il mio problema: vedendo e applicando i codici css del core di joomla, scritti tutti tutorial presente nella sezione download, non funzionano mai e i moduli non cambiano mai stile! allora vedendo ad esempio a.mainlevel ho pensato che mainlevel dovrebbe essere l'id di un div perchè è scritto così però vorrei sapere come dovrebbe venire il codice della index.php per creare una colonna left, per esempio e poi vorrei sapere come si devono impostare le classi del core, nel senso qual è la loro sintassi! Intanto vi allego il codice della mia index.php:

Codice: [Seleziona]
<?php defined"_JEXEC" ) or die( "Restricted access" );?>
<jdoc:comment></jdoc:comment>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{LANG_TAG}" lang="{LANG_TAG}" dir="{LANG_DIR}" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/Pure/css/template.css" type="text/css" />
<link rel="stylesheet" href="templates/Pure/css/layout.css" type="text/css" />
</head>
<body>

<!-- Contenitore del layout -->
<div id="wrap">

<!-- parte alta -->
<div id="top"></div>

<!-- Testata della pagina -->
<div id="header"></div>

<!-- Spazio cerca -->
<div align="right"><div id="cerca"><jdoc:include type="modules" name="user4" style="" /><br /><jdoc:include type="modules" name="syndicate" style="-1" /></div></div>

<!-- Spazio menù orizzontale -->
<div id="user3"><jdoc:include type="modules" name="user3" style="" /></div>

<!-- Colonna sinistra -->
<div id="left"><jdoc:include type="modules" name="left" style="xhtml" /></div>

<!-- Inserimento pathway -->
<div id="path"><jdoc:include type="module" name="breadcrumbs" /></div>

<!-- Corpo centrale contenuti -->
<div id="corpo"><jdoc:include type="component" /></div>

<!-- Ripristino impostazioni ottimali -->
<div id="clear"></div>

<!-- Ultime news -->
<div id="news"><jdoc:include type="modules" name="user1" style="table" /></div>

<!-- Articoli più letti -->
<div id="letti"><jdoc:include type="modules" name="user2" style="table" /></div>

<!-- Ripristino impostazioni ottimali -->
<div id="clear"></div>

<!-- Fine pagina -->
<div id="footer"><jdoc:include type="module" name="footer" /></div>

<!-- parte bassa -->
<div id="down"></div>

<!-- Chiusura contenitore -->
</div>

</body>
</html>

Quindi come dovrei scrivere i div nella index? Grazie in anticipo!

Offline AXELTOPOLINO

  • Esploratore
  • **
  • Post: 132
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #1 il: 13 Giu 2009, 00:15:18 »
A parte che .mainlevel è una classe e non un id ;)

Per il resto non riesco ad aiutarti adesso, poichè sono di fretta. Attendi, ci sono molti altri utenti più competenti di me che ti risponderanno  8)

Ciao!

Offline Matthew96

  • Esploratore
  • **
  • Post: 88
  • Sesso: Maschio
  • Il Web Design è la chiave di internet!
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #2 il: 13 Giu 2009, 10:06:26 »
grazie lo stesso... appena sei disponibile scrivi anche tu! c'è qualcuno in grado di aiutarmi?

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #3 il: 13 Giu 2009, 14:43:11 »
Citazione
...vedendo e applicando i codici css del core di joomla, scritti tutti tutorial presente nella sezione download, non funzionano mai e i moduli non cambiano mai stile! allora vedendo ad esempio a.mainlevel ho pensato che mainlevel dovrebbe essere l'id di un div perchè è scritto così però vorrei sapere come dovrebbe venire il codice della index.php per creare una colonna left, per esempio e poi vorrei sapere come si devono impostare le classi del core, nel senso qual è la loro sintassi!...

Ciao pcissimo.
Anzitutto dovresti verificare se nella cartella del template è presente una cartella html. In quella cartella viene inserito il codice per modificare l'aspetto dei moduli con la tecnica dell'override.

In questo caso potrebbero non prendere le modifiche che tu apporti al foglio di stile perchè vengono sovrascritte da altro codice.
Eventualmente puoi rinominare la cartella html o una delle cartelle che ci sono al suo interno (di solito ce n'è una per ogni modulo che viene modificato).

Le classi e gli id che formattano gli elementi di una pagina funzionano sempre (a meno di un override).
La sintassi delle classi è quella di un normale foglio di stile. Se ad una classe vuoi applicare un colore di sfondo usi la proprietà background-color o background-image se vuoi mettere un'immagine.
Ad esempio:
Codice: [Seleziona]
.sectiontableheader
{
background-color: transparent;
background-image: url(../images/site_head.png);
background-repeat: repeat-x;
height: 35px;
color: #ffffff;
}
è la classe che modifica l'aspetto dell'intestazione della tabella che elenca gli articoli in una categoria.
Le proprietà contenute nella classe, e che verranno applicate all'intestazione della tabella, dipendono da come vuoi che cambi il suo aspetto.

Ogni classe, insomma, rappresenta un insieme di proprietà raccolte sotto un unico nome e applicabili ad un tag html per modificarne l'aspetto grafico.

Se non lo hai già fatto ti consiglio di leggere le guide all'indirizzo css.html.it Troverai tutte le spiegazioni su come si scrive e come funziona un foglio di stile.

Altro discorso è aggiungere una colonna ad un template. In questo caso la modifica coinvolge prima il file index.php del template e poi il fogli di stile.

Ma siccome la colonna left c'è già nel codice del template, non è che intendevi una colonna right (destra)? ;D


Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

Offline Matthew96

  • Esploratore
  • **
  • Post: 88
  • Sesso: Maschio
  • Il Web Design è la chiave di internet!
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #4 il: 13 Giu 2009, 16:09:37 »
si anche right ma quello che intenddevo era se all'interno del div della colonna si doveva creare un altro div con id moduletable o module! cmq grazie per tutto ciò che hai scritto ora vedo un pò l'override!

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #5 il: 13 Giu 2009, 19:49:11 »
Non è necessario. Le classi standard di Joomla funzionano a prescindere. Sono già contenute nel codice che viene generato quando vengono visualizzati i moduli.

Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

Offline Matthew96

  • Esploratore
  • **
  • Post: 88
  • Sesso: Maschio
  • Il Web Design è la chiave di internet!
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #6 il: 13 Giu 2009, 20:49:50 »
ah ok cmq leggendo l'articolo sull'override, ho creato la cartella html e una sottocartella, chiamata mod_mainmenu visto che voglio modificare il menu e ho copiato al suo interno il file default.php presente nella cartella rtl del modulo. Ma ora come devo fare per modificarlo? come posso cambiargi sfondo, per esempio utilizzando lo stile rounded?

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #7 il: 13 Giu 2009, 22:29:15 »
Forse mi sono spiegato male.
Se la cartella esiste vuol dire che i moduli vengono modificati dall'override. Se non esiste non c0è bisogno di crearla, a meno di non voler fare sostanziali modifiche nell'aspetto dei moduli.

Per il resto vale la regola dell'uso delle classi del foglio di stile dei template di Joomla.

Se guardi il codice html della pagina visualizzata nel browser (o usi uno degli addons di Firefox come Web Developer) vedrai che le classi che formattano gli elementi della pagina (moduli, tabelle, ecc.) ci sono.

Prova con la homepage del mio sito e visualizza il codice html della pagina.
Dopo il tag body vedrai che ci sono diversi <div> di classe moduletable (il primo è quello che visualizza il logo).

Bene, nel template queste classi non ci sono perchè ce le mette joomla ogni volta che incontra una istruzione come questa:
Codice: [Seleziona]
<jdoc:include type="modules" name="left" style="xhtml" />e nella posizione modulo (left in questo caso) tu hai pubblicato dei moduli.
Joomla aggiunge del codice html che tu non vedi nel template e le classi che formattano questo codice sono tutte contenute nel fogli di stile.

C'è una guida nella sezione tutorial che elenca le classi standard di un fogli di stile per Joomla. Si chiama CSS_JOOMLA_MAMBO e anche se fa riferimento alla versione 1.0.x di Joomla le classi sono sempre valide
Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

Offline Matthew96

  • Esploratore
  • **
  • Post: 88
  • Sesso: Maschio
  • Il Web Design è la chiave di internet!
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #8 il: 13 Giu 2009, 22:52:33 »
ahh grazie bigham! ora ho capito! comicnio con le prove, se trovo qualche problema posterò ancora qui! grazie!

Offline Matthew96

  • Esploratore
  • **
  • Post: 88
  • Sesso: Maschio
  • Il Web Design è la chiave di internet!
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #9 il: 14 Giu 2009, 09:57:33 »
allora provando e riprovando sono quasi riuscito a personalizzare i moduli con lo stile rounded... c'è solo un problema: l'immagine centrale e quella in basso si vedono mentre quella che dovrebbe andare in alto no. Come devo fare? Il listato che stò usando è il seguente:

Codice: [Seleziona]
div.module h3 {
margin: 0;
font-size: 1em;
margin-top: 5px;
margin-bottom: 20px;
color: #000;
}
div.module {
width: 200px;
background: url('../images/media.gif') repeat-y;
margin-bottom: 2px;
margin-right: 15px;
}
div.module div {
background: url('../images/bottom.gif') bottom left no-repeat;
}
div.module div div {
background: url('../images/top.gif') top no-repeat;
padding: 7px 10px 15px 12px;
}
div.module div div div {
background: none;
padding: 0;
width: auto !important;
width: 100%;
}

P.S.: Vi allego uno screen... ve lo posto perchè sto lavorando in locale!  ;D


[allegato eliminato da un amministratore essendo passati più di 365 giorni]

Offline Matthew96

  • Esploratore
  • **
  • Post: 88
  • Sesso: Maschio
  • Il Web Design è la chiave di internet!
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #10 il: 14 Giu 2009, 15:31:33 »
nessumo può darmi una mano??

Offline Matthew96

  • Esploratore
  • **
  • Post: 88
  • Sesso: Maschio
  • Il Web Design è la chiave di internet!
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #11 il: 15 Giu 2009, 19:14:31 »
nessuna novità?

Offline bigham

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3662
  • Sesso: Maschio
  • Contagiato dalla Joomlaite :)
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #12 il: 17 Giu 2009, 19:20:45 »
Ciao pcissimo.

Scusa l'assenza ma sono ritornato ieri sera dopo due giorni intensi di ferie. Ho letto il post ma non ho avuto la forza di rispondere (cervello out of order ;D)

Purtroppo per il mio modo di lavorare se non ho sotto mano il template non sono capace, a occhio, di trovare i problemi.
Uso moltissimo gli addons di Firefox per cercare bug nei template.

Se non ti viene complicato mandami per email il template completo e vedo cosa posso fare (ma non ci fare l'abitudine ;D ;D).

Ciao
Ci sono più cose in cielo e in terra, Orazio, di quante ne sogni la tua filosofia.

Offline Matthew96

  • Esploratore
  • **
  • Post: 88
  • Sesso: Maschio
  • Il Web Design è la chiave di internet!
    • Mostra profilo
Re:personalizzazione stile dei moduli
« Risposta #13 il: 24 Giu 2009, 23:03:41 »
ciao bigham! grazie e anche io mi sono preso un pò di ferie ^^ Grazie della proposta e nn preoccuparti che nn ce la faccio l'abitudine ^^ Intanto ti ho inviato tutto! Ciao e grazie

 



Web Design Bolzano Kreatif