Je suis en train de faire les fichiers css d'un futur site :
certaines choses étant différentes et ayant un pc il m'est difficile d'adapter le thème alors si un connaisseur voulait le faire sinon pas grave ça fera un site de plus qui tournera carré sur mac
********************************************************************************************************
fichier css sur pc fait :
********************************************************************************************************
body {
background : url(dunes.jpg) no-repeat fixed center center;
color: #000000;
font-weight: normal;
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px
}
pre {font-size: x-small; color: #000000; font-family: Terminal;}
table, tr, td, p, div, .content {font-size: x-small; font-family: Verdana, Arial, Helvetica, sans-serif;}
input, select, textarea { background : url(panier.jpg) ;font-size: x-small; color: 660000; font-family: Verdana, Arial, Helvetica, sans-serif;}
a {color: #ccffcc; font-weight: bold; text-decoration: none;}
a:link {color: #ccffcc; font-weight: bold;}
a:visited {color: #ccffcc; font-weight: bold;}
a:hover {color: #FFFFFF; text-decoration: none;}
.title a {color: #343434; text-decoration: none;}
.title a:link {color: #505f7d; text-decoration: none;}
.title a:visited {color: #505f7d; text-decoration: none;}
.title a:hover {color: #343434; text-decoration: none;}
.forum {color: #000000;}
.forum a {color: #787878; text-decoration: none;}
.forum a:link {color: #C0C0C0; text-decoration: none;}
.forum a:visited {color: #C0C0C0; text-decoration: none;}
.forum a:hover {color: #787878; text-decoration: none;}
.bold {font-weight: bold;}
.white {color: #00ffcc;}
.fggray {color: #000000;}
.fgoffwhite {color: #ccffcc;}
.byline {color: #000000; font-size:9px; text-align:center;}
.content {color: #00ffcc;}
#clock {color: #00FFCC; font-size:x-small;}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: square inside; color: #ccffcc; font-weight: bold ;}
input.formButton {}
.item {border: 1px solid ;background: url( peau.jpg);}
.itemHead {padding: 3px; background: url( bois2.gif); color: #00ffcc;}
.itemInfo {text-align: right; padding: 3px; background: url( bois2.gif)}
.itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps; color: #00ffcc; background-color: transparent;}
.itemPoster {font-size: 90%; font-style:italic;}
.itemPostDate {font-size: 90%; font-style:italic;}
.itemStats {font-size: 90%; font-style:italic;}
.itemBody {padding-left: 5px;}
.itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}
.itemText:first-letter {font-size: 133%; font-weight: bold;}
.itemFoot {text-align: right; padding: 3px; background: url( bois2.gif);}
.itemAdminLink {font-size: 90%;}
.itemPermaLink {font-size: 90%;}
th {background :url(bois2.gif) ; color: #00ffcc ; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;}
.outer {border: 1px solid silver; width: 100%}
.head {background : url(bois2.gif); padding: 5px; font-weight: bold;}
.even {padding: 5px; color: #330066; vertical-align : top}
.even a {color: #000000; text-decoration: none; font-weight: bold }
.even a {color: #FFFFFF; text-decoration: none; font-weight: bold }
.even a:link {color: #330066; text-decoration: none; font-weight: bold}
.even a:visited {color: #330066; text-decoration: none; font-weight: bold}
.even a:hover {color: #FFFFFF; text-decoration: none; font-weight: bold}
.odd {background : ; padding: 5px; color: #ccff99; font-weight: bold; vertical-align : top}
.odd a {color: #000000; text-decoration: none; font-weight: bold}
.odd a:link {color: #ccff99; text-decoration: none; font-weight: bold}
.odd a:visited {color: #ccff99; text-decoration: none; font-weight: bold}
.odd a:hover {color: #FFFFFF; text-decoration: none; font-weight: bold}
.foot {background-color: #000000; padding: 5px; font-weight: bold;}
tr.even td { background: url( panier.jpg); padding: 5px;}
tr.odd td { background: url( peau.jpg); padding: 5px;}
div.errorMsg { background-color: #FFCCCC; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.confirmMsg { background-color: #DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg { background-color : #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;}
div.xoopsCode {background: #C2CDD6;
border: 1px inset #000080;
font-family: "Courier New",Courier,monospace;
padding: 0px 6px 6px 6px;}
div.xoopsQuote {background: #C2CDD6;
border: 1px inset #000080;
font-family: "Courier New",Courier,monospace;
padding: 0px 6px 6px 6px;}
.comTitle {font-weight: bold; margin-bottom: 2px;}
.comText {padding: 2px;}
.comUserStat {font-size: 10px; color: #43506B; font-weight:bold; border: 1px solid silver; background-color: #C2CDD6; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weight: normal;}
.comUserStatus {margin-left: 2px; margin-top: 10px; color: #43506B; font-weight:bold; font-size: 10px;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px; font-weight:bold;}
.comUserRankImg {border: 0;}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}
********************************************************************************************************
fichier css pour mac à adapter avec les couleurs ,fond et adresse du fichier précédent :
********************************************************************************************************
body {
background : url(dunes.jpg) no-repeat fixed center center;
color: #000000;
font-weight: normal;
font-size: x-small;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px
}
table td {padding:0; border-width:0; vertical-align:top;}
a {color:#d0a700; text-decoration:none;}
a:hover {color:#767676; text-decoration:none;}
ul {margin:2px; padding:2px; list-style:decimal inside; text-align:left;}
li {margin-left:2px; list-style:square inside; color:#0083D7}
th {background:#191919 url(images/cellpic_nav.gif); color:#FFFFFF; padding:1px; vertical-align:middle; font-family:Verdana, Arial, Helvetica, sans-serif;}
th a {color:#fff;text-decoration:none;}
th a:hover {color:#fff;text-decoration:none;}
th a:visited {color:#fff;text-decoration:none;}
abbr, acronym, .help {border-bottom:1px dashed black;cursor:help;}
#header {background:#272727 border:1px solid; border-color:#707070 #000000 #000000 #707070;}
#nav {width: 100%; background:#191919 url(images/cellpic_nav.gif); border:1px solid; border-color:#707070 #000000 #000000 #707070;padding: 0px; margin: 0px 0px 8px 0px;
font-family:trebuchet ms, arial, verdana;font-size:0.9em;}
#leftcolumn {background:#2E2E2E; width:170px;}
#rightcolumn {background:#2E2E2E; width:170px;}
#centercolumn {margin-left:10px; margin-right:10px; padding-left:5px; padding-right:5px;}
div#content {text-align: left; font-size:95%;}
#nav a {color: #d0a700;text-decoration:none;}
#nav a:hover {color: #767676;text-decoration:underline;}
td#mainmenu a {display: block; margin: 0; padding: 1px;}
td#mainmenu a:hover {margin-right:3px; background:#636363; text-decoration: none; padding-right:2px;color:#d0a700;}
td#mainmenu a.menuTop {padding-left: 3px;}
td#mainmenu a.menuMain {padding-left: 3px;}
td#mainmenu a.menuSub {padding-left: 9px; color:#CE3F00}
td#mainmenu a.menuSub:hover {padding-left: 9px; color:#CE3F00}
td#usermenu a {display: block; margin: 0; padding: 1px;}
td#usermenu a:hover {margin-right:3px; background:#636363; text-decoration: none; padding-right:2px;color:#d0a700;}
td#usermenu a.menuTop {padding-left: 3px;}
td#mainmenu a.menuMain {padding-left: 3px;}
td#centerCcolumn {padding: 0px 3px 1px 3px;}
td#centerCcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;}
td#centerCcolumn div.blockContent {padding: 3px; margin-right: 0px; margin-left: 0px; margin-bottom: 2px; line-height: 120%;}
td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerLcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}
td#centerLcolumn div.blockContent {padding: 3px; margin-left: 3px; margin-right: 2px; margin-bottom: 2px; line-height: 120%;}
td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerRcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}
td#centerRcolumn div.blockContent {padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px; line-height: 120%;}
div.spacer {clear: both;}
div.row span.left {float: left; text-align: left; font-weight: bold; color: #fff; margin-left:33px; width: 50%;}
div.row span.right {float: right; text-align: right; font-weight: bold; padding-right:20px; color: #fff; width: 30%;}
.column {float: left;}
.rcolumn {float:right;}
/* LeftBar Title Blocks */
.leftTitle1, .leftTitle2, .leftTitle3, .leftTitle4
{background:#191919 url(images/cellpic_nav.gif);border:1px solid; border-color:#707070 #000000 #000000 #707070; font-family: trebuchet ms, trebuchet, arial, lucilda;font-weight:normal; font-size:90%;
padding-left:2px;vertical-align:middle; font-weight:bold;}
/* LeftBar Content Blocks */
.leftContent1, .leftContent2, .leftContent3, .leftContent4
{background:#272727;border:1px solid; border-color:#707070 #000000 #000000 #707070; font-family: trebuchet ms, trebuchet, arial, lucilda; font-size: 95%; margin-top: 0px; margin-left: 0px;
padding-top: 5px; padding-left: 5px; list-style: none;margin-bottom:3px;}
.leftContent1 {}
.leftContent1 a:link {color:#d0a700; text-decoration:none;}
.leftContent1 a:hover {color:#767676; text-decoration:underline;}
.leftContent1 a:visited {color:#d0a700;}
.leftContent2 {}
.leftContent2 a:link {color:#d0a700; text-decoration:none;}
.leftContent2 a:hover {color:#767676; text-decoration:underline;}
.leftContent2 a:visited {color:#d0a700;}
.leftContent3 {}
.leftContent3 a:link {color:#d0a700; text-decoration:none;}
.leftContent3 a:hover {color:#767676; text-decoration:underline;}
.leftContent3 a:visited {color:#d0a700;}
.leftContent4 {}
.leftContent4 a:link {color:#d0a700; text-decoration:none;}
.leftContent4 a:hover {color:#767676; text-decoration:underline;}
.leftContent4 a:visited {color:#d0a700;}
/* Rightbar Title Blocks */
.rightTitle1, .rightTitle2, .rightTitle3 {background:#191919 url(images/cellpic_nav.gif);border:1px solid; border-color:#707070 #000000 #000000 #707070; margin-left:0px; margin-right:0px; padding-left:2px;
color:#fff; font-family: trebuchet ms, trebuchet, arial, lucilda;vertical-align:middle;font-weight:bold;font-size:90%;}
/* Rightbar Content Blocks */
.rightContent1, .rightContent2, .rightContent3 {margin-left:0px; margin-right:0px; margin-bottom:2px; padding-left:5px; padding-right:5px; padding-bottom:3px;
padding-top:5px; font-family:arial, helvetica, sans-serif; font-size:95%; line-height:110%; color:#999;
background-color:#fff; max-width:200px;}
.rightContent1 {background:#272727;border:1px solid; border-color:#707070 #000000 #000000 #707070;}
.rightContent1 a:link { color:#d0a700; text-decoration:none;}
.rightContent1 a:visited {color:#767676; text-decoration:none;}
.rightContent1 a:hover {color:#d0a700; text-decoration:underline;}
.rightContent2 {background:#272727;border:1px solid; border-color:#707070 #000000 #000000 #707070;}
.rightContent2 a:link {color:#d0a700; text-decoration:none;}
.rightContent2 a:visited {color:#767676; text-decoration:none;}
.rightContent2 a:hover {color:#d0a700; text-decoration:underline;}
.rightContent3 {background:#272727;border:1px solid; border-color:#707070 #000000 #000000 #707070;}
.rightContent3 a:link {color:#d0a700; text-decoration:none;}
.rightContent3 a:visited {color:#767676; text-decoration:none;}
.rightContent3 a:hover {color:#d0a700; text-decoration:underline;}
.item {border:1px solid; border-color:#707070 #000000 #000000 #707070; font-size:1em;}
.itemHead {background:#191919 url(images/cellpic_nav.gif);padding: 3px; background-color: #191919; color: #FFFFFF;border:1px solid; border-color:#707070 #000000 #000000 #707070;}
.itemInfo {text-align: right; padding: 3px; background-color: #191919;border:1px solid; border-color:#707070 #000000 #000000 #707070;}
.itemTitle a {font-size: 115%; font-weight: bold; font-variant: small-caps; color: #ffffff; background-color: transparent;}
.itemPoster {font-size: 90%; font-style:italic;}
.itemPostDate {font-size: 90%; font-style:italic;}
.itemStats {font-size: 90%; font-style:italic;}
.itemBody {padding-left: 5px;border:1px solid; border-color:#707070 #000000 #000000 #707070;}
.itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}
.itemText:first-letter {font-size: 120%; font-weight: bold;}
.itemFoot {text-align: right; padding: 3px; background-color: #191919}
.itemAdminLink {font-size: 90%;}
.itemPermaLink {font-size: 90%; font-style:italic;}
.comTitle {font-weight: bold; margin-bottom: 2px;}
.comText {padding: 2px;}
.comUserStat {font-size: 10px; color: #e7e7e7; font-weight:bold; border:0; background:#303030; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weight: normal;}
.comUserStatus {margin-left: 2px; margin-top: 10px; color: #272727; font-weight:bold; font-size: 10px;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px;font-weight:bold;}
.comUserRankImg {border: 0;}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}
.outer {border:1px solid; border-color:#707070 #000000 #000000 #707070;}
.head {background:#191919; font-weight:bold; padding:5px; text-indent:0px;
border:1px solid; border-color:#707070 #000000 #000000 #707070}
.even {background:#272727;border:1px solid; border-color:#707070 #000000 #000000 #707070; padding:5px;}
.odd {background:#303030;border:1px solid; border-color:#707070 #000000 #000000 #707070; padding:5px;}
.foot {background:#272727; padding:5px; font-weight:bold; padding:5px;}
tr.even td {background:#272727;border:1px solid; border-color:#707070 #000000 #000000 #707070; padding:5px;}
tr.odd td {background:#303030;border:1px solid; border-color:#707070 #000000 #000000 #707070; padding:5px;}
.head td {background:#191919 url(images/cellpic1.gif); font-weight:bold; padding:5px; text-indent:4px;
border:1px solid; border-color:#707070 #000000 #000000 #707070;}
.head a:link {color:#d0a700;text-decoration:none;}
.head a:hover {color:#767676;text-decoration:underline;}
div.errorMsg {background-color:#FFCCCC; text-align:center; border-top:1px solid #DDDDFF; border-left:1px solid #DDDDFF;
border-right:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA; font-weight:bold; padding:10px;}
div.confirmMsg {background-color:#DDFFDF; color:#136C99; text-align:center; border-top:1px solid #DDDDFF;
border-left:1px solid #DDDDFF; border-right:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA; font-weight:bold; padding:10px;}
div.resultMsg {background-color:#CCCCCC; color:#333333; text-align:center; border-top:1px solid silver; border-left:1px solid silver;
font-weight:bold; border-right:1px solid #666666; border-bottom:1px solid #666666; padding:10px;}
div.xoopsCode {background:#767676; border:1px inset #B0B0B0; font-family:"Courier New",Courier,monospace; padding:0px 6px 6px 6px;}
div.xoopsQuote {background:#767676; border:1px inset #B0B0B0; font-family:"Courier New",Courier,monospace; padding:0px 6px 6px 6px;}
/* Form elements */
form{display:inline}
.textarea {font:11px Verdana,Arial,Helvetica,sans-serif;color:#e7e7e7; border:1px solid;border-color: #000000 #707070 #707070 #000000; background:#303030;}
.formButton{font:11px Verdana,Arial,Helvetica,sans-serif;color:#d0a700; border:1px solid;border-color: #707070 #000000 #000000 #707070; background:#303030}
.select {background:#303030;color:#d0a700;}
input.textarea {font:11px Verdana,Arial,Helvetica,sans-serif;color:#e7e7e7; border:1px solid;border-color: #000000 #707070 #707070 #000000; background:#303030;}
input.but{font:11px Verdana,Arial,Helvetica,sans-serif;color:#d0a700; border:1px solid;border-color: #707070 #000000 #000000 #707070; background:#303030}
input{font:11px Verdana,Arial,Helvetica,sans-serif;background:#303030;color:#e7e7e7;border:1px solid;border-color: #000000 #707070 #707070 #000000;}
textarea{background:#303030;color:#e7e7e7;border:1px solid;border-color: #000000 #707070 #707070 #000000;}
select{background:#303030;color:#e7e7e7;font:11px Verdana,Arial,Helvetica,sans-serif}
formButton{font:11px Verdana,Arial,Helvetica,sans-serif;color:#d0a700; border:1px solid;border-color: #707070 #000000 #000000 #707070; background:#303030}
button {font:11px Verdana,Arial,Helvetica,sans-serif;color:#d0a700; border:1px solid;border-color: #707070 #000000 #000000 #707070; background:#303030}
.submit {font:11px Verdana,Arial,Helvetica,sans-serif;color:#d0a700; border:1px solid;border-color: #707070 #000000 #000000 #707070; background:#303030}
/* Specify the space around images */
.imgtopic,.imgicon{margin-left:0}
.imgspace{margin-left:1px;margin-right:2px}
.imgfolder{margin:1px;margin-left:4px;margin-right:4px}
img{margin-left:1px;margin-right:2px;border:0}
input.text{font:11px Verdana,Arial,Helvetica,sans-serif;color:#e7e7e7; border:1px solid;border-color: #000000 #707070 #707070 #000000; background:#303030}
input.submit{font:11px Verdana,Arial,Helvetica,sans-serif;color:#d0a700; border:1px solid;border-color: #707070 #000000 #000000 #707070; background:#303030}
input.post,textarea.post{background:#303030;color:#e7e7e7;
font:11px Verdana,Arial,Helvetica,sans-serif;padding-bottom:2px;padding-left:2px;
border:1px solid;border-color: #000000 #707070 #707070 #000000}
/* #centerblocks{width:100%;height:120px;overflow:scroll; margin:5px;} */
********************************************************************************************************
voilà on sait jamais merci