Tema Personalizzato per sito web

11 contenuti / 0 new
Ultimo contenuto
Tema Personalizzato per sito web

Salve ragazzi.
Ho appena installato drupal perchè ho bisogno di un cms per il mio sito web. il problema ora sta nel creare lo stesso design che ho ora all'interno però di drupal.
La guida sul sito ufficilae di drupal è una giungla. Ho capito che cè per ogni tema un file info che determina il nome del tema i css le regioni e altre caratteristiche che devo ancora imparare.
Ora come faccio per creare un tema mio personale perchè ho bisogno di crearne uno per il mio sito?
Fatemi Sapere.

Ho chiusto sul canale irc ufficiale e mi hanno detto di consultare il libro "Pro Drupal Developmente" che quasi sicuramente andrò a stampare.

Allora...

1. Scegli un tema che più si adatta alle tue necessità e fai una copia di backup
2. Converti tutte le immagini (*.jpg; *.gif;) presenti all'interno della cartella di tale tema in formato *.png; (usa magari Photoshop...) e rendile tutte trasparenti!
3. Modifica "subito" il cambio di estensione di tali immagini nel file *.css; quasi sempre "style.css" (sempre nella cartella del tuo tema)
4. Cambia i colori (linee e riempimenti agendo per es. su "#ff00ff") in questo file *.css; adattandoli ovviamente ai tuoi gusti
5. Divertiti ad assegnare/sperimantare alle immagini (che hai reso trasparenti in precedenza...) forme, sfumature, immagini, semi-trasparenze etc etc etc... (sempre con Photoshop - )
6. Aggiungi anche delle tue immagini (es. per il background... o per altre sezioni...) nel file *.css; "background-image:url(barra_top_tonda.gif);" etc...

Io di solito faccio così!

Ciao
Kipper

kipper wrote:
Allora...

1. Scegli un tema che più si adatta alle tue necessità e fai una copia di backup
2. Converti tutte le immagini (*.jpg; *.gif;) presenti all'interno della cartella di tale tema in formato *.png; (usa magari Photoshop...) e rendile tutte trasparenti!
3. Modifica "subito" il cambio di estensione di tali immagini nel file *.css; quasi sempre "style.css" (sempre nella cartella del tuo tema)
4. Cambia i colori (linee e riempimenti agendo per es. su "#ff00ff") in questo file *.css; adattandoli ovviamente ai tuoi gusti
5. Divertiti ad assegnare/sperimantare alle immagini (che hai reso trasparenti in precedenza...) forme, sfumature, immagini, semi-trasparenze etc etc etc... (sempre con Photoshop - )
6. Aggiungi anche delle tue immagini (es. per il background... o per altre sezioni...) nel file *.css; "background-image:url(barra_top_tonda.gif);" etc...

Io di solito faccio così!

Ciao
Kipper

Non c'è una guida per principianti?

io ero riuscito a fare il mio template su uj na pagina unica... con html....
(e già quello è staTO difficile)

adesso con drupal devo fare un css per tre file... solo che non so come si fa a fare i div, le areee e tutti il resto appresso...

Con html normale, ai div dai il nome che ti pare... credo che qui invece bisogna avere delle nozioni più specifiche....

non c'è un poso che mi spiaghji più o meno come fare il template? come devo chiamare i div.... come devo nominare i css....

ecc...
ecc...
ecc...

ps: questo è io mio sito: www.dragossido.com

Qui hai una infarinatura: http://tierre.kiwilabs.it/temi + http://tierre.kiwilabs.it/themes_drupal_part_2

Per semplificarti la vita ti conviene usare uno dei temi creati per essere modificati tipo http://drupal.org/project/framework

krima wrote:
Qui hai una infarinatura: http://tierre.kiwilabs.it/temi + http://tierre.kiwilabs.it/themes_drupal_part_2

Per semplificarti la vita ti conviene usare uno dei temi creati per essere modificati tipo http://drupal.org/project/framework[/quote]

Wow! é il tuo sito? avevo già consultato questa guida sai?

solo che non ho capito molto bene ...

tu scrivi.....

<?php if ($header): ?>
         <?php print $header; ?>
<?php endif; ?>

solo che in un template a, ho trovato questo:

<div id="header"<?php print (count($secondary_links) ? ' class="p2"' : ' class="p1"') ?>>
  <div id="branding">
  <?php if ($logo){ ?>
  <div id="logo">
  <a href="<?php print $front_page; ?>" title="<?php print $site_name; ?>" rel="home">
  <img src="<?php print check_url($logo) ?>" alt="<?php print $site_name ?>" id="logo-image" />
  </a></div>
  <?php } ?>
  <?php if ($site_name){ ?>
  <h1><a href="<?php print url() ?>" title="<?php print t('Home') ?>" rel="home"><?php print $site_name ?></a></h1>
  <?php } ?>
  <?php if ($site_slogan){ ?>
  <div class="slogan">
  <marquee width=300 scrollAmount=3><?php print $site_slogan ?></marquee>
  </div>
  <?php } ?>
</div>

e in un altro ho trovato questo:

<div id="header">
      <div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div>
      <div class="content">
        <!-- Header -->
        <div id="logo-floater">
        <?php
         
// Prepare header
         
$site_fields = array();
          if (
$site_name) {
           
$site_fields[] = check_plain($site_name);
          }
          if (
$site_slogan) {
           
$site_fields[] = check_plain($site_slogan);
          }
         
$site_title = implode(' ', $site_fields);
         
$site_fields[0] = '<span>'. $site_fields[0] .'</span>';
         
$site_html = implode(' ', $site_fields);
          if (
$logo || $site_title) {
            print
'<h1><a href="'. check_url($base_path) .'" title="'. $site_title .'">';
            if (
$logo) {
              print
'<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />';
            }
            print
$site_html .'</a></h1>';
          }
       
?>

        </div>
        <?php if (isset($primary_links)) : ?>
          <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
        <?php endif; ?>
        <?php if (isset($secondary_links)) : ?>
          <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
        <?php endif; ?>
        <?php print $header ?>
      </div>
      <div class="r5"></div><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div>
    </div>

Ora, quale' è la versione giusta di head?

poi non ho capito come si fa a definire regioni e blocchi!

infine ho letto che non è necessario scrivere il file template php... è giusto?

Non non è il mio sito :-)
Ad ogni modo le variabili dipendono in parte da alcune standard e in parte da chi ha realizzato il tema.
Se a me ad esempio serve una particolare regione (blocco o area dove andranno dei contenuti) me la creo inserendola in page.tpl.php

Es. nel'Header del sito voglio predisporre un'area dove mettere un blocco dove apparirà uno slideshow.

Apro il file page.tpl.php e nella zona dell'header che mi interessa ci metto:

<?php if ($nome_regione): ?>
    <div   id="nome_regione">  <?php print $nome_regione; ?></div>
<?php endif; ?>

Poi apro il file dentro la cartella del tema che ha l'estensione .info es. framework.info ed. aggiungo la riga

regions[nome_regione] = Header slideshow

Pulita la cache del sito ed andando in amministrazione blocchi vedrai che ora puoi posizionare il blocco che ti interessa in quell'area. Non ti resta che lavorare un po di css per definirne le caratteristiche specifiche e sei apposto.

krima wrote:
Non non è il mio sito :-)
Ad ogni modo le variabili dipendono in parte da alcune standard e in parte da chi ha realizzato il tema.
Se a me ad esempio serve una particolare regione (blocco o area dove andranno dei contenuti) me la creo inserendola in page.tpl.php

Es. nel'Header del sito voglio predisporre un'area dove mettere un blocco dove apparirà uno slideshow.

Apro il file page.tpl.php e nella zona dell'header che mi interessa ci metto:

<?php if ($nome_regione): ?>
    <div   id="nome_regione">  <?php print $nome_regione; ?></div>
<?php endif; ?>

Poi apro il file dentro la cartella del tema che ha l'estensione .info es. framework.info ed. aggiungo la riga

regions[nome_regione] = Header slideshow

Pulita la cache del sito ed andando in amministrazione blocchi vedrai che ora puoi posizionare il blocco che ti interessa in quell'area. Non ti resta che lavorare un po di css per definirne le caratteristiche specifiche e sei apposto.

ok, ora penso di aver capito....

ti faccio una domanda un po strana....

l'inizio

<?php if ($nome_regione): ?>

e la chiusura

<?php endif; ?>

si devono mettere per forza? non può scrivere direttamente

    <div   id="nome_regione">  <?php print $nome_regione; ?></div>

?????

poi ora che abbiamo capito page.tpl ..... come si fa per node.tpl , block.tpl e comment.tpl ?

No è meglio scrivere con l'if in questo modo se la regione contiene qualcosa viene mostrata altrimenti no evitando div vuoti inutili.

Per quanto riguarda gli altri tre file le modifiche servono solo per motivi particolari ad esempio se un nodo usa campi cck che vuoi fara apparire in un detrminato modo basta che copi il file node.tpl.php rinominando quello nuovo in node-nomecontenuto.tpl.php, fai le tue modifiche e queste funzioneranno solo sulla visualizzazione di quel tipo di nodo.

Secondo me però, visto che sei all'inizio ti conviene per ora concentrarti sul file page.tpl.php ed il css che gestiscono la maggior parte della grafica del sito.

krima wrote:
No è meglio scrivere con l'if in questo modo se la regione contiene qualcosa viene mostrata altrimenti no evitando div vuoti inutili.

Per quanto riguarda gli altri tre file le modifiche servono solo per motivi particolari ad esempio se un nodo usa campi cck che vuoi fara apparire in un detrminato modo basta che copi il file node.tpl.php rinominando quello nuovo in node-nomecontenuto.tpl.php, fai le tue modifiche e queste funzioneranno solo sulla visualizzazione di quel tipo di nodo.

Secondo me però, visto che sei all'inizio ti conviene per ora concentrarti sul file page.tpl.php ed il css che gestiscono la maggior parte della grafica del sito.

guarda, quello che voglio fare io, non esiste come template....

guarda un attimo il mio sito www.dragossido.com così ti farai un idea...
di cosa ho creato con l'html....

penso di saper ricreare lo stesso con drupal, grazie alle tue istruzioni...
ora, quello che mi manca sono node, block e comment....

con html il file che avevo era unoco... qui sono tre... anzi 4 con template.php....

ora, visto che le colonne le creo solo con block.tpl e visto che il contenuto lo creo, solo con note.tpl....
volevo sapere....

come si scrivono? da zero? mi bastano le istruzioni basdi come hai fatto per Head... il sistema è lo stesso?

o c'è quialche variazione? Tutto qui!

In realtà, come ti ho scritto sopra, ti conviene prendere uno dei temi già pronti, creati come base per costruire il tuo tema personale, e modificare quello. Diciamo che in questo modo non serve reinventare la ruota.

Fondamentalmente i temi hanno tutti un header, un footer, un corpo ed una o due regioni laterali per i blocchi che vanno giù in orizzontale.
Guardando il tuo sito puoi rifarlo molto simile modificando solo il page.tpl.php ed installando frontpage dove metterai il testo di Descrizione da far apparire in home.

krima wrote:
In realtà, come ti ho scritto sopra, ti conviene prendere uno dei temi già pronti, creati come base per costruire il tuo tema personale, e modificare quello. Diciamo che in questo modo non serve reinventare la ruota.

Fondamentalmente i temi hanno tutti un header, un footer, un corpo ed una o due regioni laterali per i blocchi che vanno giù in orizzontale.
Guardando il tuo sito puoi rifarlo molto simile modificando solo il page.tpl.php ed installando frontpage dove metterai il testo di Descrizione da far apparire in home.

veramente, all'interno del mio head ci sono 6 div (che con l'intestazione sarebbero 7)

mi servirebbe un template che abbia tre colonne nell'head....

Non l'ho trovato!

inoltre voglio imparare a fare un template da zero! Come ho fatto il mio da zero... se co sono riuscito con l'html, ci devo riuscire anche con drupal... devo solo capire come si campilano i vari blocchi tpl......

e poi... vorrei che nell'head le colonne fossero uguali alle colonne del corpo (stessa intestazione, stesso corpo)....

prima o poi riuscirò a capire come si fa... fidati!

:):):)