Back to top

Autore Topic: il mio primo template  (Letto 3134 volte)

Offline password

  • Appassionato
  • ***
  • Post: 344
  • Sesso: Maschio
    • Mostra profilo
il mio primo template
« il: 06 Ott 2010, 17:16:50 »
Ho sempre voluto creare un template, ma per mancanza di tempo e per le povere guide che si trovano in rete non ci sono mai riuscito....
Finalmente però mi si è presentata l'occasione di provarci e prima di iniziare a creare qualcosa di stupido volevo il vostro aiuto per un buon cominciamento.

p.s fin ora seguendo le guide in rete sono riuscito a creare i file necessari per il template e ad inserire in essi le prime righe di codice, quelle "standard".
Vi allego un immagine con uno schema delle posizioni che stilizzerò successivamente in css, e di seguito invece, le domande che prima mi son pervenute:
come devo disporre i div dimodochè assumano la posizione indicata nell'immagine allegata? (sia la colonna di destra che quella di sinistra devono essere a dimensione fissa solo in orizzontale, mentre in verticale deve ridimensionarsi in base al contenuto).
e meglio dimensionare in percentuale?
come rendere lo stile e la struttura leggibile da tutti i browser?
cosa andrebbe evitato durante la costruzione di un template?
conoscete delle guide valide per principianti / avanzati?
il primo consiglio che dareste a chi sta per creare il suo primo template?
p.s la prima domanda è quella più importante; aiutatemi con il codice per la struttura che quella deve essere sempre la parte più solida.






[allegato eliminato da un amministratore]
...Eppur si muove...

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:il mio primo template
« Risposta #1 il: 06 Ott 2010, 21:35:38 »
ciao
prova a sviluppare un template seguendo questa guida
http://www.contiweb.altervista.org/index.php/risorse-utili/guida-alla-creazione-di-un-template-per-joomla-15.html
e una guida di un template base x joomla.
con header tupmenu left main right e footer .
una volta fatto  il tutto ti trovi un template funzionante al 100% .
studiati bene il comportamento di quello che hai fatto   e dopo di che inizia a personalizzare il tutto .
vedi il sito dove oh postato la guia  e stato realizzato da quella base.
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline password

  • Appassionato
  • ***
  • Post: 344
  • Sesso: Maschio
    • Mostra profilo
Re:il mio primo template
« Risposta #2 il: 06 Ott 2010, 22:43:09 »
ciao conti1,
allora, ho già seguito quella guida e di conseguenza sono già in possesso dei file del template di base...
Il problema è che non riesco ad ordinare i div come nell'immagine allegata...
« Ultima modifica: 06 Ott 2010, 22:46:27 da password »
...Eppur si muove...

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:il mio primo template
« Risposta #3 il: 06 Ott 2010, 23:36:21 »
se hai fatto la guida indicata hai gia tutto
unica cosa di diverso , è solo il footer xche lo metti nel left?
x il resto hai gia tutti i div messi un quel modo.
a dimenticavo il logo  la base non ah una posizione  x ci la crei e dai nel css fload:left altrimenti non si allinea al tuo header.
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline password

  • Appassionato
  • ***
  • Post: 344
  • Sesso: Maschio
    • Mostra profilo
Re:il mio primo template
« Risposta #4 il: 07 Ott 2010, 18:40:39 »
niente, non riesco a far mantenere i div nella posizione voluta...ho seguito passo passo la tua guida ma non ottengo assolutamente niente di simile all'immagine allegata...ho cercato di dare posizioni e grandezze ma c'è qualcosa che mi sfugge; è pur sempre il mio primo template !  :-\  .... allego il contenuto del tag body di index.php


Codice: [Seleziona]
<body>
<div id="maindiv">
   
    <div id="logo">
    </div>
       
    <div id="menu">
    <jdoc:include type="modules" name="menu" />
    </div>

    <div id="cerca">
    <jdoc:include type="modules" name="cerca" />
    </div>

    <div id="footer">
    <jdoc:include type="modules" name="footer" />
    </div>
   
       
    <div id="right">
   
        <div id="top">
        <jdoc:include type="modules" name="top" />
        </div>
 
        <div id="content" >
        <jdoc:include type="component" />
        </div>
 
    </div>
</div>

</body>
...Eppur si muove...

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:il mio primo template
« Risposta #5 il: 08 Ott 2010, 01:39:00 »
ciao
dal  php postato non hai seguito alla lettera la guida o sbaglio?
ti posto il template dalla guida con l'aggiunta del logo in  alto a sinistra.
logo lo pubblichi in posizione logo.
di fianco hai una posizione top
sotto la colonna left e li ci metti tutto quello che vuoi  basta che pubblichi in posizione left
un main centrale e una colonna right.
se non usi la colonna right allarga il main  , e un template base  non ha colonne collassabili .
confronta il tuo php  con questo  x capire  il perché il tuo non tiene le  impostazioni.



[allegato eliminato da un amministratore]
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline password

  • Appassionato
  • ***
  • Post: 344
  • Sesso: Maschio
    • Mostra profilo
Re:il mio primo template
« Risposta #6 il: 08 Ott 2010, 10:22:39 »
Avevo fatto tutto come nella guida ma siccome non era il risultato che cercavo ho inziato a mettere mano al codice...
Ho visto il tuo template ed è molto più vicino alla mia idea ma non ho capito cosa sbaglio in quello che ho fatto io.
Scusa ma ho bisogno di capire dove sbaglio; ti posto il codice dagli un occhiata quando puoi, grazie

index.php
Codice: [Seleziona]
<?php defined'_JEXEC' ) or die( 'Restricted access' );?>
<!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="<?php echo $this->baseurl ?>/templates/xxx/css/template.css" type="text/css" />
</head>

<body>
<div id="maindiv">

    <div id="wrapper">   
       
        <div id="left">
   
            <div id="logo">
            </div>
       
            <div id="menu">
            <jdoc:include type="modules" name="menu" />
            </div>

            <div id="cerca" class="clear">
            <jdoc:include type="modules" name="cerca" />
            </div>
   
            <div id="footer" class="clear">
            <jdoc:include type="modules" name="footer" />
            </div>
        </div>
   
   
       
        <div id="right">
   
            <div id="top">
            <jdoc:include type="modules" name="top" />
            </div>
 
            <div id="content" >
            <jdoc:include type="component" />
            </div>
 
        </div>
    </div>

</div>

</body>

</html>

template.css
Codice: [Seleziona]
* {
 
    padding: 0;
    margin: 0; }
 

img {
 
    border: 0; }
 

body {

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #0f0f0f;
    background-color:#b4b4b4; }


#maindiv {
   
    width:950px;
    margin:auto;
    text-align:left;
    display:block; }

#wrapper {

    width:100%;
    height:100%;
    background:#f0f0f0;
    position:relative; }


#left {
       
    float:left;
    display:block;
    width:20%;
    background-color:#f0f0f0;
    height:100%
    margin:auto;}


#right {
       
    float:right;
    display:block;
    width:80%;
    background-color:#f0f0f0;
    margin:auto; }


#top {
     
    text-align: center;
    margin:auto;
    position:relative; }


#logo {
   
   
   
     }


#menu {

     }


#cerca {

    }


#footer {
   
    text-align: center;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    padding: 5px;
    float:left; }


a:link, a:visited {
     
    text-decoration: underline;
    font-weight: normal;
    color: #000;
    outline: none;
    text-align: left; }


.clear {

    clear: both; }
 

.overall {
   
    background-color: #fff; }
 
 
#content {
     
    width: 100%;
    text-align: left; }

p.s sembra che i moduli non siano agganciati al div maindiv e wrapper, e a questi stessi non riesco neanche ad impostare un colore di sfondo...il div left poi non si allunga in funzione della lunghezza del contenuto di right
« Ultima modifica: 08 Ott 2010, 10:35:43 da password »
...Eppur si muove...

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:il mio primo template
« Risposta #7 il: 08 Ott 2010, 12:25:49 »
ciao
dove sbagli?
nel modo che costruisci il php e tutto li tuo problema, tu vuoi  far ragionare joomla come un semplice foglio html , ma ti ricordo che stai lavorando in php e in joomla.
tanto x dirne una la colonna left del tuo php  xche insisti a mette le posizioni cerca  . menu . footer?
il div logo non va nella colonna left , ma in alto prima del tuo header.
ripeto devi creare la colonna left  come posizione e poi li metti tutti i tuo moduli  che vuoi sempre nella stessa posizione.
controlla il funzionamento del template che oh  fatto e identico al tuo schema .
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline password

  • Appassionato
  • ***
  • Post: 344
  • Sesso: Maschio
    • Mostra profilo
Re:il mio primo template
« Risposta #8 il: 09 Ott 2010, 10:03:53 »
nel modo che costruisci il php e tutto li tuo problema, tu vuoi  far ragionare joomla come un semplice foglio html , ma ti ricordo che stai lavorando in php e in joomla.

come devo ragionare??
...Eppur si muove...

Offline password

  • Appassionato
  • ***
  • Post: 344
  • Sesso: Maschio
    • Mostra profilo
Re:il mio primo template
« Risposta #9 il: 11 Ott 2010, 09:42:43 »
Così va meglio?? Come faccio a far estendere la sidebar per tutta l'altezza del maindiv?

CSS:
Codice: [Seleziona]
* {
 
    padding: 0;
    margin: 0; }
 

img {
 
    border: 0; }


a:link, a:visited {
     
    text-decoration: underline;
    font-weight: normal;
    color: #000;
    outline: none;
    text-align: left; }

 

body {

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #0f0f0f;
    background-color:#b4b4b4; }

#maindiv {

    width:980px;
    margin:auto;
    background-color:#f0f0f0;
    text-align:left; }


#container {
    margin:auto;
     }


#sidebar {
         
    margin:auto;
    width:280px;
    margin:auto;
    float:left; }

#logo {

    background-color:red;
    height:80px; }


#header {
     
    margin:auto; }


#content {
      width:700px;
    text-align: left;
    margin:auto; }


#footer {
   
    text-align: center;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    padding: 5px; }

PHP:
Codice: [Seleziona]
<head>

<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/xxx/css/template.css" type="text/css" />

</head>

<body>

<div id="maindiv">

    <div id="sidebar">
    <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
   
<div id="container">
    <div id="header">
    <jdoc:include type="modules" name="top" style="xhtml" />
    </div>

    <div id="content">
    <jdoc:include type="component" />
    </div>
</div>

</div>

</body>
...Eppur si muove...

 



Web Design Bolzano Kreatif