Titre du sujet : Re: Problème d'affichage newbb avec erreurs
par Kris sur 13/05/2010 15:48:46
Par exemple sur ce thème, les listes sont bien formatées --> http://demo.xoofoo.org/modules/news/article.php?storyid=1
le css est le suivant :
/* ===== lists ===== */
#xo-canvas-content ul, #xo-canvas-content ol { margin: .5em 0 .5em 1em; padding: 0;}
#xo-canvas-content ul {list-style-type: circle;}
#xo-canvas-content ol {list-style-type: decimal;}
#xo-canvas-content li { margin: .3em 0;}
#xo-canvas-content ul ul li, #xo-canvas-content ol ol li { padding: 0; font-style: italic;}
#xo-canvas-content ul ul li,#xo-canvas-content ol ol li { padding-top: 0; padding-bottom: 0; padding-left: 1em;}
#xo-canvas-content ul, #xo-canvas-content ol {}
#xo-canvas-content ul ul li, #xo-canvas-content ol ol li {}
#xo-canvas-content dd {}
#xo-canvas-content dl {}
#xo-canvas-content dt {}
dl { margin: .75em 0;}
dt { margin: .75em 0 0 0; font-weight: bold;}
dd { margin: .25em 0 .25em 2em; }
ensuite concernant le forum, les id et class utilisés par newbb sont les suivantes :
/* ===== forums (content-type in example) ===== */
.comTitle { font-weight: bold;}
.comTitle a { background-color: transparent; color: #fff;}
.comTitle a:hover {text-decoration: underline;}
.comText { margin: .5em;}
.comUserStat { margin: 3px; padding: 2px; font-size: .85em; border: #ccc 1px solid; text-align: left; line-height:1.2em;}
.comUserStatCaption {}
.comUserStatus {}
.comUserRank {}
.comUserRankText {}
.comUserRankImg {}
.comUserName {}
.comUserImg {
margin: .5em;
background-color : #fff;
padding: .5em;
border: 1px solid #ccc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
box-shadow: 1px 2px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.5);
}
.comDate { font-size: .9em; font-style: italic; font-weight: normal;}
.comDateCaption {}
.signature {padding: .5em; font-size: .9em; font-style: italic;}
et généralement les id, class et balises pour les formulaires sont :
/* ===== forms ===== */
form {}
fieldset {margin: 0 .5em 1em .5em; padding: .5em;}
legend {padding-left:.5em; font-size:1.2em; font-weight: bold;
}
input, button, select {vertical-align: middle;}
input {}
label, .caption-text {font-weight: bold; text-shadow: 1px 1px 2px #ccc;}
select {margin : 5px; background-color: #fff !important; padding: 6px; border: 2px inset #ccc !important; font-size:.9em; font-weight: normal;}
select[name=timezone_offset] {}
select:focus {}
textarea {}
textarea:focus {}
#xo-page fieldset a {}
#xo-page fieldset a:hover {}
#xo-page legend { font-weight: bold;}
#xo-page label {font-weight: bold;}
input, textarea {
margin: 5px;
padding: 5px;
border: #ccc solid 1px;
outline: 0;
font-size: 1.1em;
}
textarea {
width: 90%;
max-width: 400px;
height: 200px;
line-height: 150%;
overflow: auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input:hover, textarea:hover, input:focus, textarea:focus { border: 1px solid #787878;}
button, input[type=submit], input[type=button], input[type=reset], .xo-formbuttons, .formButton {
width: auto;
background-color: #787878 !important;
padding: 6px 10px;
color: #fff;
box-shadow: 0 20px 10px -10px rgba(255,255,255,0.3) inset;
-moz-box-shadow: 0 20px 10px -10px rgba(255,255,255,0.3) inset;
-webkit-box-shadow: 0 20px 10px -10px rgba(255,255,255,0.3) inset;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#bbbbbb', Direction=135, Strength=5);
zoom: 1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
button:focus, input[type=submit]:focus, input[type=button]:focus, input[type=reset]:focus, .xo-formbuttons:focus, .formButton:focus {}
button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, .xo-formbuttons:hover, .formButton:hover {background-color: #000 !important;}
input[type=text], input[type=password], input[type=checkbox], input[type=file], textarea {}
input[type=text], input[type=password], input[type=file] {
width: auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type=text]:hover, input[type=password]:hover, input[type=file]:hover, input[type=checkbox]:hover, textarea:hover {}
input[type=text]:focus, input[type=password]:focus, input[type=file]:focus, input[type=checkbox]:focus, textarea:focus {}
input[type=checkbox], input[type=radio] { margin: 3px; padding:2px; background-color: transparent;}
#xo-page .xoops-form-element-caption-required, #xo-page .xoops-form-element-caption {}
.xo-formfield.required label:after, .caption-marker { content: '*'; color: #e06813; background-color: transparent;}
.xoops-form-element-caption .caption-marker { display:none;}
.xoops-form-element-caption-required .caption-marker {}
.xoops-form-element-help {}
A toi de vérifier ton thème, ou d'adapter celui-ci
Tu peux également installer le module xoops-style (en action ici --> http://demo.xoofoo.org/modules/xoops-styles/) pour te familiariser et te repérer dans les styles de xoops et de ses modules
@+
|
