Joomla.it Forum
Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : password 06 Oct 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]
-
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.
-
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...
-
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.
-
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
<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>
-
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]
-
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
<?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
* {
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
-
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 .
-
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??
-
Così va meglio?? Come faccio a far estendere la sidebar per tutta l'altezza del maindiv?
CSS:
* {
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:
<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>