PDA

View Full Version : Home page con joomla


modonesi.a
31-03-2010, 12:25
Ciao a tutti, da poco mi sono incastrato a gestire un piccolo sito del circolo subacqueo a cui appartengo, creato dal mio predecessore con joomla appunto.
Pensavo fosse facile ed invece è più difficile di quanto mi aspettassi gestire un sito. Diciamo che me la cavicchio bene nel creare le pagine e tenerlo aggiornato, ma adesso mi piacerebbe rimpaginare la home page perchè non mi piace proprio, ci sono troppi errori.
Il sito è questo: www.proteussub.it
Se fate la prova di selezionare il leggi tutto della crociera, vedrete che il menù destro rimane fermo e le parole dell'articolo rimangono sotto il menù.
Intanto per iniziare vorrei sistemare questo problema e magari ricentrare la pagina inmodo che risulti estesa a tutto schermo di chi la visita.
Potrebbe essere fattibile?

Vi posto il template in CSS del sito, dovrebbe essere questo che si va a modificare.
Rimango sintonizzato...
Grazie ragazzi


/* madeyourweb template for mambo 4.5.3. */
/* general stuff */


body{
margin:0;
padding:0;
text-align: center;
font-family: verdana, arial, sans-serif;
}

a {
text-decoration: none;
font-weight: bold;
border: none;
}
a:hover {
text-decoration: underline;
border: none;
}

/* Layout */

#accessibility {
position: absolute -2000px -1000px;
display: none;
}

#source {
position: absolute -2000px -2000px;
display: none;
}

#pagewidth-800{
width:770px;
text-align:left;
margin-left:auto;
margin-right:auto;
background: url(../images/back_all.gif) repeat-y 0px 140px;
margin-bottom: 20px;
}

#pagewidth-1024{
width:970px;
text-align:left;
margin-left:auto;
margin-right:auto;
background: url(../images/back_all1024.gif) repeat-y 0px 140px;
margin-bottom: 20px;
}

#header {
height: 116px;
width: 100%;
}

#top-top {
height: 30px;
width: 100%;
background: transparent;
}

#top-bottom {
height: 80px;
width: 100px;
background: transparent;
float: left;
}

#search {
margin: 0px;
padding: 0px;
width: 148px;
height: 28px;
float: right;
background: url(../images/back_search.jpg) right top no-repeat;
padding-left: 10px;
padding-top: 2px;
vertical-align: top;
}

#search .inputbox{
width: 100px;
height: 18px;
font-size: 10px;
background: transparent;
border: none;
margin: 0px;
padding: 0px;
line-height: 14px;
}

#search .button{
margin: 0px;
padding: 0px;
height: 14px;
font-size: 10px;
background: transparent;
border: none;
line-height: 10px;
}

#search form {
margin: 0px;
padding: 0px;
}

#topmenu{
height: 20px;
float: right;
width: 600px;
}


#pathway{
width: 500px;
height: 19px;
padding-left: 20px;
padding-top: 5px;
}

#leftcol{
width: 152px;
float: left;
position: relative;
margin-right: 5px;
}

#rightcol-normal{
width: 155px;
float: right;
position: relative;
margin-right: 1px;
margin-top: -22px;
}

#rightcol-broad{
width: 180px;
float: right;
position: relative;
margin-right: 1px;
margin-top: -22px;
}

#outer-800{
width: 770px;
padding-top: 6px;
}

#outer-1024{
width: 970px;
padding-top: 6px;
}

#footer-800{
height: 40px;
width:100%;
background: url(../images/footer.jpg) top left no-repeat #FFFFFF;
font-size: 10px;
}

#footer-1024{
height: 40px;
width:100%;
background: url(../images/footer1024.jpg) top left no-repeat #FFFFFF;
font-size: 10px;
}

#maincol-normal-800{
float: left;
width: 450px;
}

#maincol-broad-800{
float: left;
width: 422px;
}

#maincol-wide-800{
float: left;
width: 600px;
padding-top: 3px !important;
padding-top: 0px;
}


#maincol-normal-1024{
float: left;
width: 650px;
}

#maincol-broad-1024{
float: left;
width: 622px;
}

#maincol-wide-1024{
float: left;
width: 800px;
padding-top: 3px !important;
padding-top: 0px;
}

#banner {
width: 478px;
height: 69px;
float: right;
padding-left: 6px;
padding-top: 6px;
}

iframe.wrapper {
z-index: 0;
}

.clr{clear:both;}
.content {
padding: 0px 0px 0px 0px;
font-size: 10px;
line-height: 18px;
}

/* Modules */

#leftcol div.module, #rightcol-normal div.module {
width: 152px;
background: transparent url(../images/module_middle.jpg) left repeat-y;
margin-bottom: 10px;
}

#leftcol div.module div, #rightcol-normal div.module div {
width: 152px;
background: transparent url(../images/module_top.jpg) top left no-repeat;
}

#leftcol div.module div div, #rightcol-normal div.module div div {
width: 152px;
background: transparent url(../images/module_bottom.jpg) bottom left no-repeat;
}

#leftcol div.module div div div,#rightcol-normal div.module div div div{
width: 137px;
padding-left: 5px;
padding-right: 10px;
padding-top: 10px;
background: transparent;
padding-bottom: 10px;
font-size: 10px;
}

#leftcol div.module div div div div, #rightcol-normal div.module div div div div{
padding: 0px;
margin: 0px;
}

#rightcol-broad div.module {
width: 177px;
background: transparent url(../images/module_middle_wide.jpg) left repeat-y;
margin-bottom: 10px;
}

#rightcol-broad div.module div {
width: 177px;
background: transparent url(../images/module_top_wide.jpg) top left no-repeat;
}

#rightcol-broad div.module div div {
width: 177px;
background: transparent url(../images/module_bottom_wide.jpg) bottom left no-repeat;
}

#rightcol-broad div.module div div div{
width: 162px;
padding-left: 5px;
padding-right: 10px;
padding-top: 10px;
background: transparent;
padding-bottom: 10px;
font-size: 10px;
}

#rightcol-broad div.module div div div div{
padding: 0px;
margin: 0px;
}




div.module h3 {
font-size: 14px;
width: 130px;
font-weight: bold;
margin: 0px;
padding: 0px;
margin-bottom: 5px;
}

#user1{
float: left;
width: 49%;
}

#user2{
float: right;
width: 49%;
}

#user3 {
width: 100%;
}

#user1 ul, #user2 ul, #user3 ul {
list-style: none;
margin: 0px;
padding: 0px;
padding-left: 0.7em;
margin-left: 0.7em;
margin-bottom: 5px;
margin-top: 2px;
}

#maincol-normal-800 div.moduletable, #maincol-wide-800 div.moduletable, #maincol-broad-800 div.moduletable, #maincol-normal-1024 div.moduletable, #maincol-wide-1024 div.moduletable, #maincol-broad-1024 div.moduletable {
width: 100%;
margin-bottom: 10px;
border: 1px solid #EFEFEF;
background: transparent;
font-size: 10px;
}

#maincol-normal-800 div.moduletable h3, #maincol-wide-800 div.moduletable h3, #maincol-broad-800 div.moduletable h3, #maincol-normal-1024 div.moduletable h3, #maincol-wide-1024 div.moduletable h3, #maincol-broad-1024 div.moduletable h3 {
font-size: 12px;
font-weight: bold;
margin: 0px;
padding: 0px;
height: 20px;
line-height: 20px;
color: #FFF;
width: 100%;
border-bottom: 1px solid #EFEFEF;
text-align: left;
text-indent: 5px;
}

/* Topmenu */

ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
float: right;
white-space: nowrap;
}

ul#mainlevel-nav li{
width: auto !important;
width: 5%;
float: right;
margin: 0;
font-size: 10px;
height: 20px;
line-height: 20px;
white-space: nowrap;
margin-right: 1px;
}

ul#mainlevel-nav li a{
font-weight: normal;
height: 20px;
display: block;
padding-left: 5px;
padding-right: 10px;
text-decoration: none;
color: #CCCCCC;
margin-left: 5px;
white-space: nowrap;
}



/* Main Menu(s) */

a.mainlevel {
font-size: 10px;
padding-left: 4px;
width: 143px;
display: block;
line-height: 26px;
margin-bottom: 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
voice-family:"\"}\""; /* Box Model fix */
voice-family:inherit;
width: 135px;
}



html>body a.mainlevel {width:135px;} /* Opera5-Fix-fix ;-) */


a.mainlevel:hover, a.mainlevel#active_menu {
background: #F1F1F1;
text-decoration: none;
}

a.sublevel {
padding: 0px;
margin: 0px;
font-size: 10px;
padding-left: 12px;
width: 139px;
display: block;
line-height: 20px;
margin-bottom: 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
voice-family:"\"}\""; /* Box Model fix */
voice-family:inherit;
width: 123px;
}

html>body a.sublevel {width:123px;} /* Opera5-Fix-fix ;-) */

a.sublevel:hover, a.sublevel#active_menu {
text-decoration: none;
width: 139px;
voice-family:"\"}\""; /* Box Model fix */
voice-family:inherit;
width: 123px;
}
html>body a.sublevel:hover, a.sublevel#active_menu { /* Opera5-Fix-fix ;-) */
width: 123px;
}


/* Module specific */

#leftcol div.module div div div div.syndicate {
background: transparent;
width: 137px;
margin: 0px;
padding: 0px;
}

#leftcol div.module div div div div.syndicate div {
background: transparent;
width: 137px;
margin: 0px;
padding: 0px;
}


/* Other Mambo Stuff */

#title {
}
.pathway {
color: #BBBBBB;
font-size: 10px;
text-decoration: none;
font-weight: normal;
}

.pathway a{
color: #BBBBBB;
text-decoration: none;
font-weight: normal;
}

.date {
}
hr {
width: 90%;
}
hr.separator {
width: 40%;
}
a.pnav {
}
.pnav:hover {
}
.small {
font-size: 10px;
color: #ABABAB;
line-height: 0.7;
}
.smalldark {
font-size: 10px;
color: #000;
height: 10px;
line-height: 10px;
text-align: left;
}

.sectiontableentry1 {
text-align: left;
background: #EFEFEF;
font-size: 10px;
padding: 2px;
}
.sectiontableentry2 {
background: #FFF;
font-size: 10px;
text-align: left;
padding: 2px;
}
.button {
border: 1px solid #BBBBBB;
}
.inputbox {
border: 1px solid #BBBBBB;
}

.createdate {
font-size: 10px;
color: #ABABAB;
height: 10px;
line-height: 0.7;
}
.modifydate {
font-size: 10px;
color: #ABABAB;
height: 20px;
line-height: 20px;
margin-bottom: 5px;
}
a.readon {
font-size: 10px;
text-decoration: none;
line-height: 15px;
border: 1px solid #EEEEEE;
padding-left: 13px;
background: url(../images/readon.gif) no-repeat left;
margin-top: 10px;
text-decoration: none;
font-weight: normal;
}

.blog_more {
font-size: 10px;
}

a.readon:hover {
background: #EEEEEE url(../images/readon.gif) no-repeat left;
text-decoration: none;
}

.blog {
width: 100%;
}

.contentheading {
width: 98%;
font-weight: bold;
font-size: 16px;
height: 23px;
line-height: 20px;
border-bottom: 1px solid #002E61;
font-family: 'Trebuchet MS', verdana, sans-serif;
color: #002E61;
}

.contentpaneopen {
text-align: left;
background: transparent;
font-size: 10px;
line-height: 1.8;
width: 98%;
}

table.contentpane td.contentheading {
width: 98%;
font-weight: bold;
font-size: 16px;
height: 23px;
line-height: 20px;
font-family: 'Trebuchet MS', verdana, sans-serif;
border: none;
}

table.contentpane ul {
margin: 0px;
padding: 0px;
list-style: none;
}

table.contentpane ul li{
padding: 0px;
margin: 0px;
padding-left: 15px;
}

.contentdescription {
font-size: 10px;
}
.sectiontableheader {
font-weight: bold;
font-size: 10px;
height: 25px;
line-height: 25px;
}
.categorytitle {
font-weight: bold;
font-size: 16px;
height: 25px;
line-height: 25px;
font-family: "Trebuchet MS", Verdana, sans serif;
}
.componentheading {
font-weight: bold;
font-size: 16px;
height: 23px;
line-height: 20px;
font-family: "Trebuchet MS", Verdana, sans serif;
border-bottom: 1px solid #002E61;
color: #002E61;
margin-bottom: 5px;
}
a.category {
text-decoration: underline;
}
a.category:hover {
text-decoration: underline;
}
table.moduletable {
width: 100%;
font-size: 80%;
}
table.moduletable th {
font-size: 80%;
}

.poll {
font-size: 10px;
text-align: center;
}


.back_button a{
font-size: 10px;
font-weight: normal;
}

.blogsection {
font-size: 10px;
}

.blog_more ul li{
list-style: none;
padding-left: 14px;
line-height: 18px;
}

table.contenttoc {
border: 1px solid #CCCCCC;
padding: 3px;
}

table.contenttoc th{
font-weight: bold;
font-size: 10px;
border-bottom: 1px solid #BBBBBB;
}

form {
margin: 0px;
padding: 0px;
}

RiccardoS
02-04-2010, 08:26
più che restringere la colonna centrale io modificherei l'intera home-page allargandola ed impostandola in modo che si adatti alla risoluzione dello schermo del visitatore (in percentuale, quindi) e riscriverei l'articolo della crociera pulendo il codice da impostazioni di caratteri strani, allineamento, ecc...

p.s. cmq c'è già un thread apposito per joomla. ;)

modonesi.a
02-04-2010, 12:31
più che restringere la colonna centrale io modificherei l'intera home-page allargandola ed impostandola in modo che si adatti alla risoluzione dello schermo del visitatore (in percentuale, quindi) e riscriverei l'articolo della crociera pulendo il codice da impostazioni di caratteri strani, allineamento, ecc...

p.s. cmq c'è già un thread apposito per joomla. ;)

Grazie per la risposta.
Nel mio intervento, avendo postato il codice della Home Page, almeno spero, chiedevo se mi potevate aiutare ad impostare per bene la home page, dove modificare e in che maniera, purtroppo non so farlo e non vorrei fare cavolate nel sito online che poi pianto tutto.
Per il discorso crociera, verdò di sistemare, per quello non ho problemi.

Magari, postami il codice CSS rivisto, magari dove intervieni in un altro colore, così riesco a capire cosa va modificato e imparo per le prossime volte...

Comunque grazie mille lo stesso per avermi almeno rispsoto.

P.S. Ho postato il link di questo thread anche nel thread joomla, non volevo riempire una pagina intera con il codice CSS