Back to top

Autore Topic: il mio primo prototipo di template  (Letto 1572 volte)

Offline ira83

  • Appassionato
  • ***
  • Post: 268
    • Mostra profilo
il mio primo prototipo di template
« il: 14 Feb 2010, 23:36:21 »
Ciao a tutti... seguendo ben 2 guide (una tamponava i buchi dell'altra) sono riuscito a metter su un prototipo di template..

importante è stato all'inizio capire come strutturare i file e le cartelle di esso. Ora sono agli albori ancora il codice del php è quanto segue:

Codice: [Seleziona]
<!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="<?php echo $this->language?>" lang="<?php echo $this->language?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
 
<body>
  <div class="principale">
    <div class="header">
      <div id="header_l">
<div id="header_r">
<div id="logo">
</div>
</div>
    </div>
    </div>
<div class="top">
<jdoc:include type="modules" name="top" />
</div>
    <div class="left">
      <jdoc:include type="modules" name="left" />
    </div>
    <div class="maincontent">
     <jdoc:include type="component" />
    </div>
    <div class="footer">
     <jdoc:include type="modules" name="footer" />
    </div>
  </div>
</body>

probabilmente già qui ci saranno errori...  (speriam di no eheh)

mentre il template.css è

Citazione
html {
  height: 100%;
  margin-bottom: 1px;
}

form {
  margin: 0;
  padding: 0;
}

body {
   font-family: Helvetica,Arial,sans-serif;
   line-height: 1.3em;
   margin: 0px 0px 0px 0px;
   font-size: 12px;
   color: #333;
   background:#00FFFF;
}

a:link, a:visited {
   text-decoration: none;
   font-weight: normal;
}

a:hover {
   text-decoration: underline;
   font-weight: normal;
}

input.button { cursor: pointer; }

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; }







.principale{
/*i margini auto insieme a una larghezza centrano la pagina */
width: 800px;
margin: 0 auto;
border: 1px solid #008000;
background:#00CCFF
}
.header {
text-align: center;
background-color:#FF9900;
border: 1px solid #CCCCCC;
width: 100%;
height: 180px;
float:none;
}
.top{
text-align: center;
background-color: #008000;

width: 100%;
height: 100px;
float:none;
}
.left {
text-align: left;
background-color:#6666CC;
width: 25%;
height: 300px;
float:left;
}
.main-content{
text-align: center;
background-color:#FFCC99;
width: 75%;
height: 600px;
float:left;
}
 
.footer{
text-align: center;
background-color:#33FF33;
border: 1px solid #CCCCCC;
height: 50px;
clear:left;
}


per questo risultato http://punkrosteeny.altervista.org/joomla

ora, ho delle domande, domande alle quali le guide seguite non mi danno risposta... io ve le elenco qui, nella speranza che qualcuno mi risolva i dubbi...

1-nell'header come faccio a far comparire un logo??
2-ho messo nella home 2 articoli, come mai occupa bene lo spazio mentre l'altro no?
3-la colonna di sinistra gradirei occupasse tutto lo spazio (in termini di altezza), ma css non prende le altezza in percentuale (avevo provato con 100%)


4-avete altre letture da consigliarmi?


vi ringrazio in anticipo..

ira83
« Ultima modifica: 16 Feb 2010, 15:35:17 da ira83 »

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:il mio primo prototipo di template
« Risposta #1 il: 15 Feb 2010, 11:23:55 »
ciao
benvenuto
alora
Citazione
1-nell'header come faccio a far comparire un logo??
semplicemente creando una posizione nell'header che vuoi che si veda il tuo logo oppure direttamente nel  php  creando solo u id  di posizione che poi gestisci con i css.

Citazione
2-ho messo nella home 2 articoli, come mai occupa bene lo spazio mentre l'altro no?

qui e molto piu semplice di quanto credi
devi andare nel menu principale quello dove hai la stellina  cliccarlo e sulla tua destra hai i parametri di impaginazione della tua home.

Citazione
3-la colonna di sinistra gradirei occupasse tutto lo spazio (in termini di altezza), ma css non prende le altezza in percentuale (avevo provato con 100%)
qui invece ti dico che giusto che sia in quel modo  xche la colonna sinistra deve essere fluida tanto x intenderci se tu dai una tua altezza quando aggiungi moduli devi modificare periodicamente l'altezza data precedente.
allora x avere lo sfondo continuo della colonna fino in fondo devi giocare con il colore di sfondo della colonna.

allora ora tu hai un id left x la colonna devi creati un id  principale  x tutta la colonna  e poi al suo interno ci metti id della colonna in questo modo dai il colore di fondo al ìid principale e ci facendo hai il colore fino in fondo   effetto ottico  lunghezza totale colonna totale anche se hai solo un modulo.
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline ira83

  • Appassionato
  • ***
  • Post: 268
    • Mostra profilo
Re:il mio primo prototipo di template
« Risposta #2 il: 16 Feb 2010, 15:34:50 »
Ciao e grazie per le dritte..

allora il template lo trovate ora su http://punkrosteeny.altervista.org/joomla/

volevo porvi ancora qualche domanda:
1- non riesco in alcun modo a centrare il logo, come posso fare?
2- ho inserito dei div di "spaziatura" ma nonostate questo il modulo "cerca" sborda dal layout..
3- il footer non mi moltra correttamente la sua immagine. sono stato costretto a inglobarlo nel div corpo, e questo è errato lo so, ma se lo lascio fuori, non mi vengono più visualizzati correttamente gli sfondi per il corpo.

infine, volevo inglobare dei link esterni che ho su tutte la pagine web (pure su wordpress) ma non riesco a visualizzarli su joomla..

Citazione
<div id="badge" style="position:absolute; top:0px; left:0px; z-index:1; _filter:progid:DXImageTransform.Microsoft.AlphaImageLo ader(src='img/home.png',sizingMethod=crop);">
  <a href="index.php"><img src="img/home.png" width="50" height="50" border="0" alt="" style="_visibility:visible !important; _visibility:hidden;" />[/url]</div>

qui trovate index.php e template.css

vi ringrazio in anticipo...

ira

 



Web Design Bolzano Kreatif