Joomla.it Forum
Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : skybluetux 11 Mar 2011, 13:05:28
-
Salve a tutti, sto creano il mio primo template da zero anzichè usarne uno già pronto o usare programmi commerciali... mi piace smanettare e capire bene il funzionamento alla base delle cose.
Così seguendo varie guide nella rete sto imparando ad usare il css...
I prossimi 2 problemi che mi accingo ad affrontare sono gli angoli arrotondati e lo sfondo del body.
Veniamo al problema in oggetto:
La struttura del mio template è molto basilare composta soltanto dai 3 file:
/index.php
/css/style.css
/templateDetails.xml
più le varie immagini presenti nella cartela images dichiarate nel file demplateDetails.xml
Creata una struttura base delle posizioni dei moduli, ora non riesco ad impostare uno sfondo per il body, sia che si tratti di un colore, sia di un immagine...
Teoricamente, la procedura corretta sarebbe impostare lo sfondo nel file style.css nelle caratteristiche del body così:
<style>
body {
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
background-color: #00315a;
}
...
Purtroppo però a me non funziona. E non riesco a capirne il perchè.
Cercando su internet sono riuscito a trovare un riferimento su un forum in inglese di un problema uguale al mio, che si risolveva impostando gli attributi stesso all'interno del file index.php.
Ho provato e a me funziona, ma non essendo esperto so se questo può portare a dei problemi visto che non è la strada che si usa nella norma...
Che mi dite ?
-
ciao
benvenuto nel forum
sarebbe bello avere il link del sito x vedere il xchè il body fa i capricci . se lavori in locale ti consiglio di fare un account free esempio altervista e ci metti joomla con il tuo template in questo modo possiamo veder e rispondere alle tue domande.
riguardo agli angoli tondi non hai tanta scelta le strada da intraprendere sono 2
1 creare le belle immagini con angoli tondi cosi in questo modo anche l'incredibile ie vede gli angoli tondi
2 fare il tutto tramite css3 e usare css3 pie x far leggere il css sempre al nostro caro ie.
-
Ciao e grazie del benvenuto :)
Credevo che fosse vietato inserire link, perciò non l'ho messo... eccolo
www.napoletanosinasc.altervista.org
A parte 2 menu orizzontali e il logo per il resto è tutto in stato grezzo... lo sfondo che non riesco a personalizzare è quello bianco. Quello rosso è lo sfondo del div principale che contiene tutto il resto.
Per quanto riguarda gli angoli arrotondati userò il metodo dei 4 div annidati con le immagini. Che faranno da contorno a tutti i moduli delle colonne laterali.
-
ciao
perche hai creato questo div?
.principale {
background-color: #FF0000;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
height: 2000px;
margin: -7px auto 0;
}
fogli quel css e metti questo
che vedi qui sotto
body {
background: red;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
}
-
Ciao il body che mi hai detto già c'era. Ho tolto il div principale non è cambiato nulla
-
non hai css
This element has no style rules. You can create a rule for it.
-
Non ho capito cosa intendi per non avere il css... senza file css non funzionerebbe tutta la grafica dei menu e dell'intestazione non trovi ? Forse ho sbagliato a capire...
[postedit] forse non riesci a vedere il codice perchè dovrebbe esserci qualche riga che impedisce di vedere il codice ad eventnuali malintenzionati [/postedit]
-
Ecco ho tolto la restrinzione... ora il codice dovrebbe essere visibile
-
non hai css
metti questo css
body {
background: red;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
}
nel file style.css
-
non hai css
metti questo css
body {
background: red;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
}
nel file style.css
Già c'è... ho anche ricontrollato :-[
Ho provato anche a modificare le dimensioni del carattere, in pratica è come se joomla non vedesse proprio la parte body del css
-
non si vede se non lo vedo io neppure il template lo vede a dimostrazione hai uno sfondo bianco sensa impostazione
posta il file del css che dici che hao il body. zippalo
questo e il tuo css
<style>
body {
background: red;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
}
.menu1 {
width: 940px;
height: 26px;
margin: 0 auto;
background-image: url(../images/menu1.png);
background-repeat: repeat-x
text-align:right;
padding: 0 0 0 0;
float: none;
}
.menu1 ul{
float: right;
list-style: outside none;
margin: 0;
padding: 0;
}
.menu1 li, .menu1 a{ float: left ;}
.menu1 a{
padding:5px 10px;
margin-right: 5px;
color: #5e5e5e;
text-decoration: none;
font-weight: bold;
}
.menu1 a:hover, .menu1 a:focus { background-image: url(../images/menu-hover1.png); background-repeat: repeat-x; color:#ffffff;}
.intestazione {
width: 940px;
height: 174px;
margin: 0 auto;
background-image: url(../images/logo.jpg);
float: none;
}
.ricerca {
width: 200px;
padding-left:750px;
padding-top: 140px;
}
.menu2 {
width: 940px;
height: 26px;
margin: 0 auto;
background-image: url(../images/menu1.png);
background-repeat: repeat-x
text-align:left;
padding: 0 0 0 0;
float: none;
}
.menu2 ul{
float: left;
list-style: outside none;
margin: 0;
padding: 0;
}
.menu2 li, .menu2 a{ float: left ;}
.menu2 a{
padding:5px 10px;
margin-right: 5px;
color: #5e5e5e;
text-decoration: none;
font-weight: bold;
}
.menu2 a:hover, .menu2 a:focus{background-image: url(../images/menu-hover1.png); background-repeat: repeat-x; color:#ffffff;}
.contenitore {
width: 940px;
height: 800px;
margin: 20px auto 0 auto;
background-color: #00438f;
float: none;
}
.sinistra {
width: 174px;
padding: 8px 8px 8px 8px;
clear:left;
float: left;
text-align: left;
background-color: #0084ff;
}
.sottocontenitore {
width: 560px;
float:left;
background-color: #ffffff;
}
.breadcrumb {
width:540px;
height:auto;
padding: 15px 10px 8px 10px;
float:none;
text-align: left;
background-color: #a2ff00;
}
.user {
width:540px;
height:100px;
float:none;
padding: 8px 10px 8px 10px;
background-color: #dcdcdc;
}
.main-content {
width:540px;
height:100px;
float:none;
padding: 8px 10px 8px 10px;
background-color: #9a9a9a;
}
.banner {
width:540px;
height:50px;
float:none;
padding: 8px 10px 8px 10px;
background-color: #5c5c5c;
}
.destra {
width: 174px;
padding: 8px 8px 8px 8px;
float: left;
text-align: left;
background-color: #0084ff;
}
</style>
illuminami su questi due tag che hai nel css?
<style>
</style>
-
Ecco in allegato il file style.css zippato
-
non si vede se non lo vedo io neppure il template lo vede a dimostrazione hai uno sfondo bianco sensa impostazione
posta il file del css che dici che hao il body. zippalo
questo e il tuo css
<style>
body {
background: red;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
}
.menu1 {
width: 940px;
height: 26px;
margin: 0 auto;
background-image: url(../images/menu1.png);
background-repeat: repeat-x
text-align:right;
padding: 0 0 0 0;
float: none;
}
.menu1 ul{
float: right;
list-style: outside none;
margin: 0;
padding: 0;
}
.menu1 li, .menu1 a{ float: left ;}
.menu1 a{
padding:5px 10px;
margin-right: 5px;
color: #5e5e5e;
text-decoration: none;
font-weight: bold;
}
.menu1 a:hover, .menu1 a:focus { background-image: url(../images/menu-hover1.png); background-repeat: repeat-x; color:#ffffff;}
.intestazione {
width: 940px;
height: 174px;
margin: 0 auto;
background-image: url(../images/logo.jpg);
float: none;
}
.ricerca {
width: 200px;
padding-left:750px;
padding-top: 140px;
}
.menu2 {
width: 940px;
height: 26px;
margin: 0 auto;
background-image: url(../images/menu1.png);
background-repeat: repeat-x
text-align:left;
padding: 0 0 0 0;
float: none;
}
.menu2 ul{
float: left;
list-style: outside none;
margin: 0;
padding: 0;
}
.menu2 li, .menu2 a{ float: left ;}
.menu2 a{
padding:5px 10px;
margin-right: 5px;
color: #5e5e5e;
text-decoration: none;
font-weight: bold;
}
.menu2 a:hover, .menu2 a:focus{background-image: url(../images/menu-hover1.png); background-repeat: repeat-x; color:#ffffff;}
.contenitore {
width: 940px;
height: 800px;
margin: 20px auto 0 auto;
background-color: #00438f;
float: none;
}
.sinistra {
width: 174px;
padding: 8px 8px 8px 8px;
clear:left;
float: left;
text-align: left;
background-color: #0084ff;
}
.sottocontenitore {
width: 560px;
float:left;
background-color: #ffffff;
}
.breadcrumb {
width:540px;
height:auto;
padding: 15px 10px 8px 10px;
float:none;
text-align: left;
background-color: #a2ff00;
}
.user {
width:540px;
height:100px;
float:none;
padding: 8px 10px 8px 10px;
background-color: #dcdcdc;
}
.main-content {
width:540px;
height:100px;
float:none;
padding: 8px 10px 8px 10px;
background-color: #9a9a9a;
}
.banner {
width:540px;
height:50px;
float:none;
padding: 8px 10px 8px 10px;
background-color: #5c5c5c;
}
.destra {
width: 174px;
padding: 8px 8px 8px 8px;
float: left;
text-align: left;
background-color: #0084ff;
}
</style>
illuminami su questi due tag che hai nel css?
<style>
</style>
RISOLTO !!! Grazie infinite. Era colpa del tag <style> </stile> l'ho copiato da qualche guida evidentemente non avrò letto qualche parte che diceva di rimuovere....
Ora l'ho tolto :)
-
la parte centrale bianca dove hai articoli dovrebbe arrivare fino in fondo
.sottocontenitore {
background-color: #FFFFFF;
float: left;
height: 100%;<<<<<aggiungi
width: 560px;
}
-
la parte centrale bianca dove hai articoli dovrebbe arrivare fino in fondo
.sottocontenitore {
background-color: #FFFFFF;
float: left;
height: 100%;<<<<<aggiungi
width: 560px;
}
Grazie ancora :)
per la parte centrale è ancora in fase molto grezza devo lavorarci su... ma non dovrei avere problemi per quello. Se dovessi avere problemi con gli angoli arrotondati creerò un nuovo topic solo per quello ;)
Ciao