-
.
Codare una skin? Ecco come!
Body | Nav | Footer | Logo | Menù Principale | Menù Dropdown | Cerca | Larghezza Board | Tabs | Homepage | Sezioni | Tagboard e Chat | Statistiche | Colori utenti
In questo post vi spiegherò passo passo come vanno modificate le varie proprietà e i vari valori dei selettori (più usati) e a cosa corrispondo quest'ultimi graficamente.SPOILER (clicca per visualizzare)body {font: 76%/1.6em Verdana, Tahoma, Arial, Sans-serif; color: #333; background-color: #FFF; background-repeat: repeat-x; background-position: bottom}
a {text-decoration: none; color: #11464E}
a:hover {border-bottom: 1px solid #A9C7AF}
.nav {font: italic 17px calibri, arial; font-weight: bold; letter-spacing: .05em}
.footer {margin: 15px auto; font-size: 11px; color: #999}
.footer a {color: #FFF}
/* LOGO senza cornice */
.logo {margin: 0 0 30px 0} .logo a:hover {border: 0}
/* LOGO con cornice */
.header {margin-bottom: 30px; border: 1px solid rgba(0, 0, 0, .5); border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5)}
.header, .header a {border-radius: 10px}
/* altezza contenitore del logo ed effetto glass */
.header a {display: table; width: 100%; height: 130px; margin: 0; padding: 0; letter-spacing: 2px; word-spacing: 4px; font: italic 39px calibri, arial; color: #EEF; text-shadow: 0 -1px 1px #000; box-shadow: inset 0 1px rgba(255, 255, 255, .3), inset 0 10px rgba(255, 255, 255, .2), inset 0 10px 20px rgba(255, 255, 255, .25), inset 0 -15px 30px rgba(0, 0, 0, .4)}
.header a:hover {color: #FFF; background: rgba(255, 255, 255, .04); border: 0}
/* posizione del testo */
.header span {display: table-cell; padding: 0 80px; vertical-align: middle; text-align: left}
/* posizione del logo */
.header h1 {background-position: 85% 50%}
/* MENU principale */
.menuwrap {font-family: verdana, tahoma, arial, sans-serif; background: #333; background: linear-gradient(#404040,#1A1A1A); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); -moz-box-shadow: -2px 1px 2px rgba(0, 0, 0, .5)}
.menuwrap li {line-height: 2.6em; color: #AAA; text-shadow: -1px -1px 0 #111}
.menuwrap a {margin: 0; padding: 0 11px; font-size: 11px; color: #AAA}
.menuwrap a:hover {color: #FFF; border: 0}
.menuwrap .icon a {padding: 0 6px}
#m_up a {padding: 0 11px 0 0}
#c_up {position: absolute; right: 10px; bottom: 10px; opacity: .5}
#f_up {position: fixed; bottom: 20px; right: 1%; opacity: .9}
.p_up:hover, #c_up:hover, #f_up:hover {opacity: 1; text-decoration: none; border: 0}
/* esci e news */
.menuwrap b {color: #FFF}
/* numero msg e link REGISTRATI */
.menuwrap em {padding: 2px 5px; color: #FFF; text-shadow: none; background: #525252; border-radius: 6px}
.menuwrap .nick {margin-left: .6em}
.menuwrap form {padding: 0 11px 0 5px}
/* MENU contestuale(dropdown) */
.menu > a:hover, .menu:hover > a {color: #FFF; background: url('https://img.forumfree.net/style_images/52/arrow.gif') no-repeat bottom}
.menu ul {width: 15em; background: #525252; border: 1px solid #080808; border-top: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, .5)}
.right .menu ul {margin-left: -2em}
.menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none; border-top: 1px solid #636363}
.menu li:first-child {padding-top: 0; border-top: 5px solid #484848}
.menu li strong {padding: 3px 8px; color: #000}
.menu li a {padding: 3px 8px !important; font-size: 12px; color: #BDBDBD !important}
.menu li a:hover, .menu li:hover > a {text-shadow: -1px -1px 0 #272727; background: #373737; border-radius: 5px}
/* SUB MENU contestuale(dropright) */
/* Sposta msg pvt */
.submenu.alternative ul {border-top: 1px solid #080808; margin-top: -2px}
.submenu.alternative li:first-child {padding: 3px 4px; border-top: 0}
/* LOGIN VELOCE */
.menuwrap label, .menuwrap form a {padding: 0; font-size: 10px}
.menuwrap label:hover {color: #FFF}
.menuwrap input {padding: 3px; font: 11px verdana, arial, sans-serif; color: #000; background: #AAA; border: 1px solid #000; border-radius: 4px; box-shadow: 0 1px 0 #444}
.menuwrap input:hover {cursor: pointer; background: #BBB}
.menuwrap input:focus {cursor: default; background: #DDD; outline: none; box-shadow: 0 1px 5px #888}
.menuwrap input[type=submit] {padding: 2px; text-shadow: 0 -1px 0 #444; color: #DDD; border-radius: 4px;
background: #424242; border: 1px solid rgba(0, 0, 0, .5); box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .3), inset 0 10px rgba(255, 255, 255, .2), inset 0 10px 20px rgba(255, 255, 255, .25), inset 0 -15px 30px rgba(0, 0, 0, .3)}
.menuwrap input[type=submit]:hover {color: #FFF; background: #555}
/* CERCA */
.menuwrap .search input {padding-right: 20px; color: #CCC; background: #666 url('https://img.forumfree.net/style_images/52/icon_search.png') no-repeat 96% -12%}
.menuwrap .search input:hover {color: #E0E0E0; background-color: #6F6F6F}
.menuwrap .search input:focus {color: #FFF; background-color: #888; background-position: 96.5% 110%}
/* MENU laterale a comparsa */
#ssm .mainbg {background: #525252}
#ssm .ww {font: 11px verdana, tahoma, arial, sans-serif; font-weight: normal !important; color: #AAA; text-shadow: -1px -1px 0 #111; background: #333; background: linear-gradient(left,#404040,#1A1A1A)}
#ssm .title {border-top: 5px solid #484848; padding: 4px; line-height: 1.4em; font: 12px verdana, tahoma, arial, sans-serif; font-weight: bold; color: #000; background: #525252 !important}
#ssm .aa {padding: 3px 4px; line-height: 1.4em; background: #525252; border-top: 1px solid #636363}
#ssm a {display: block; margin: 0; padding: 3px 8px; font: 12px verdana, tahoma, arial, sans-serif; color: #BDBDBD !important; text-shadow: none}
#ssm a:hover {color: #FFF; text-shadow: -1px -1px 0 #272727; background: #373737; border: 0; border-radius: 5px}
/* LARGHEZZA BOARD */
.container {margin: 30px auto; padding: 30px; background: #FFF; border: 1px solid #EEE; border-radius: 10px}
.container, .tabs.top, .tabs.bottom {width: 860px}
/* TABS(definizioni valide per tutti i tabs, interni ed esterni al container)*/
.tabs {font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Serif; letter-spacing: .05em}
.tabs li {vertical-align: bottom; margin-left: 5px}
.tabs li:first-child {margin: 0}
/* variante per tabs laterali non ruotati */
.tabs.no_rotate li {margin: 0; margin-top: 5px}
.tabs.no_rotate.alternative li {margin-top: 10px}
.tabs a {display: block; margin: 0; padding: 2px 10px; text-decoration: none; font-weight: bold; color: #999; background: #E9E9E9; border: 1px solid #D9D9D9; border-bottom: 0; border-radius: 5px 5px 0 0}
.tabs a:hover, .tabs .current a {color: #444; background: #F5F5F5; border: 1px solid #E5E5E5; border-bottom: 0}
/* variante per tabs laterali non ruotati */
.tabs.left.no_rotate a {border: 1px solid #D9D9D9; border-right: 0; border-radius: 5px 0 0 5px}
.tabs.right.no_rotate a {border: 1px solid #D9D9D9; border-left: 0; border-radius: 0 5px 5px 0}
/* i tabs in basso voglio che abbiano background e border del container */
.tabs.bottom a {background: #FFF; border: 1px solid #EEE; border-top: 0; border-radius: 0 0 5px 5px}
/* TABS disposti attorno il container */
/* 30px come il margin del container */
.tabs.top {text-align: right; position: relative; top: 30px}
/* 31= 30px come il margin del container e 1px per nascondere il bordo del container di 1px */
.tabs.bottom {text-align: right; position: relative; bottom: 31px}
/* ATTENZIONE: per sistemare la distanza dei tabs laterali dal container si suggerisce di modificare height */
/* il padding serve a indicare da quale punto dell'asse verticale del container iniziano i tabs */
.tabs.rotate {height: 25px; padding: 0 105px}
.tabs.left.rotate {left: -25px}
/* variante per tabs laterali non ruotati */
/* 130px ha lo stesso scopo di 105px per tabs.rotate, il secondo numero, 1px, deve invece essere uguale al bordo del container */
.tabs.no_rotate {padding: 130px 1px}
/* come colorare i tabs attorno il container in modo diverso uno dall'altro */
#tab_r1 a {background: #8CBA41; border-color: #ECF2E3; color: #FFF}
#tab_r1 a:hover {background: #9CCA51}
#tab_r2 a {background: #5D89B2; border-color: #E4ECF3; color: #FFF}
#tab_r2 a:hover {background: #6D99C2}
#tab_r3 a {background: #EB8022; border-color: #F3EBE4; color: #FFF}
#tab_r3 a:hover {background: #FB9032}
.tabs.left a {background: #F2F2F2}
.tabs.left a:hover {background: #FBFBFB}
/* HOMEPAGE */
.board .skin_tbl {margin: 0}
.skin_tbl {border-bottom: 3px solid #EFEFEF; background: #EEE; border-radius: 5px}
.mback {background-color: #DDD; border-bottom: 1px dashed #BBB; border-radius: 5px 5px 0 0}
.mback_left, .mback_right {width: 5%}
/* nei topic sfrutto interamente la larghezza di mback eliminando mback_left e mback_right */
.topic .mback_left, .topic .mback_right {display: none}
.minus, .plus {background-color: #BBB; border: 1px solid #AAA; width: 9px; height: 9px}
.plus {background-image: url('https://img.forumfree.net/html/sys-img/plus_b.gif')}
.minus {background-image: url('https://img.forumfree.net/html/sys-img/minus_b.gif')}
.mtitle {text-align: center; padding: 5px; font: 19px georgia, verdana, arial; font-weight: normal; color: #555; text-shadow: -1px -1px 0 #EEE; background: transparent !important}
.title, .darkbar {background: #ECECEC !important; font-weight: bold; font-size: 10px}
/* RIGHE di COLORE ALTERNATO */
.list > *, table.mainbg tr, .profile .skin_tbl {background: #F5F5F5}
.list > *:nth-child(even), table.mainbg tr:nth-child(even) {background: #FFF}
.big_list > * {background: #FFF}
.big_list > *:nth-child(even) {background: #F5F5F5}
.big_list > *:hover {background: #FFE}
.big_list > *:nth-child(even):hover {background: #F5F5E4}
.board .off .aa, .board .off img {opacity: .8}
.board .off:hover .aa, .board .off:hover img {opacity: 1}
/* fix per Opera */
.board .off .aa {min-height: 48px}
.board .on {border: 1px dotted rgba(82, 168, 236, .75)}
.board .on:hover {background: #F4FBFD}
.board .on:nth-child(even):hover {background: #EEF8FB}
/* .on .off .annuncio .importante .calda .chiusa .spostata */
/* se non si specifica .forum ha effetto anche sul blog */
.forum .annuncio {background: #E5F1F5}
.forum .annuncio:nth-child(even) {background: #EEF8FB}
.forum .importante {background: #E8F2E9}
.forum .importante:nth-child(even) {background: #F0FAF1}
/* SELEZIONE RIGA: MultiQuote e Moderazione */
/*.topic .focus {opacity: .6} <- default */
.focus {color: #FFF !important; background: #60B6DC !important}
.focus:nth-child(even) {color: #FFF !important; background: #60B6DC !important}
.cp .focus *, .forum .focus *, .blog .focus .title2, .blog .focus .tags * {color: #FFF !important; text-shadow: 0 0 2px #4096BC}
.web {font: 17px georgia, verdana, arial}
.desc {font-weight: normal}
.on .web, .board .on .zz a, .forum .on .zz a {font-weight: bold}
.spostata .web a {color: #31666E; font-style: italic}
/* Control Panel: Messenger, UserCP e ModCP */
.cp .tabs {text-align: left}
.cp .tabs .current a {font-size: 13px; font-weight: bold; color: #FFF; text-shadow: 0 -1px 0 #777; background: #9C9C9C !important; border: 0; border-bottom: 1px solid #9C9C9C}
/* edit avatar */
.tabs2 div:hover {background: #E0E0E0}
.tabs2 .current div {background: #FFF !important}
/* non voglio che l'angolo in alto a sinistra di skin_tbl sia arrotondato perché ci sono dei tab */
#msg .cp .skin_tbl, #user .cp .skin_tbl {border-radius: 0 5px 5px 5px}
#msg .cp .sunbar.top, #user .cp .sunbar.top {border-radius: 0 5px 0 0}
#msg .cp .sunbar, #user .cp .sunbar, #send .send .sunbar {padding-left: 2%; padding-right: 2%; text-align: right}
/* INBOX: lista messaggi privati */
#msg .cp .web {font: 14px verdana}
#msg .cp .post {background: #F5F5F5}
/* RISPOSTA */
#loading .top, .summary .list .top {color: #555; border-bottom: 1px solid #DDD}
#loading .bottom, .summary .list .bottom {border-top: 1px solid #FFF}
.fast.send .sunbar {font-weight: bold; font-size: 11px; color: #888; text-shadow: none; background: #ECECEC !important}
.sunbar {text-align: center; font-size: 13px; font-weight: bold; color: #FFF; text-shadow: 0 -1px 0 #777; background: #9C9C9C !important}
.sunbar.top {border-radius: 5px 5px 0 0}
.sunbar.bottom {border-radius: 0 0 5px 5px}
.sunbar a {color: #D9F7DF}
.sunbar a:hover {border-bottom-color: #B9D7BF}
.summary .skin_tbl {border: 0}
.summary .list > * {border-top: 1px dotted #95DDFF}
.summary .list > *:first-child {border: 0}
.summary .list {font-size: 11px}
.summary .quote, .summary .code {font-size: 10px}
/* SONDAGGI */
/* line height è utile per centrare il testo verticalmente */
.bar {background: #CBEDFF; height: 15px; line-height: 15px; font-size: 10px; color: #000 !important; border-radius: 3px}
.bar div {background: #70C6EC; border-radius: 3px 0 0 3px}
.max .bar {background: #CCF1D3}
.max .bar div {background: #76CD87}
/* DISCUSSIONI */
.topic .mtitle {font-weight: bold} .topic .mdesc {font-weight: normal}
.post {background: #FFF; border-top: 1px dotted #95DDFF}
.post:first-child {border: 0}
.post:nth-child(even) {background: #F5F5F5}
.post .center .left {padding: 0 10px}
.post .center .right {padding: 10px 0}
.post .right {padding-left: 10px !important}
.post .bottom {font-size: 11px}
.color {line-height: 1.8em}
.color a {color: #146AAE}
.color a:hover {border-bottom: 1px dotted #95DDFF}
.color hr {height: 0; border: 0; border-top: 1px dashed #A9C7AF}
.edit {font-size: 10px; color: #BBB; color: rgba(0, 0, 0, .25)}
.fancyborder {border: 1px dotted #CBC8B9 !important; background: #F6F6F2}
.bottomborder {border-bottom: 1px dashed #A9C7AF}
.post .nick {text-align: center; white-space: normal; word-wrap: break-word; font-weight: bold; font-size: 15px; color: #888; color: rgba(0, 0, 0, .45)}
/* avatar e altri dettagli */
.post .details {position: relative; overflow: visible !important; padding-bottom: 20px; font-size: 10px; color: #555; color: rgba(0, 0, 0, .6); background: #F2F2E1; border: 1px solid #CCC; border: 1px solid rgba(0, 0, 0, .1); border-radius: 5px}
.avatar:hover {border: 0}
.post .avatar {margin: 6px; overflow: hidden}
.details p {margin: 0 0 2px 0; padding: 4px 0 6px 0; background: rgba(0, 0, 0, .08)}
.details p:first-line {font-weight: bold; color: #777; color: rgba(0, 0, 0, .5); text-shadow: 0 1px 2px #FFF}
.box_visitatore .details p {border-radius: 5px}
/* online, offline, anonimo */
.u_status {position: absolute; bottom: 9px; left: -6px; padding: 0 4px; line-height: 19px; font-size: 10px !important; font-weight: bold; border-radius: 0 3px 3px 3px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .25)}
.u_status dt {position: absolute; top: -4px; left: -1px; overflow: hidden; width: 5px; height: 4px; border-radius: 3px 0 0 0}
.box_online .u_status {border: 1px solid #6B6; background: #C8E2C9; color: #292}
.box_online .u_status dt {background: #6B6}
.box_offline .u_status {border: 1px solid #000; background: #777; color: #FCFCEB}
.box_offline .u_status dt {background: #333}
.box_anonimo .u_status {border: 1px solid #EEAD0E; background: #FFFFC8; color: #EEAD0E}
.box_anonimo .u_status dt {background: #EEAD0E}
/* CITAZIONI, SPOILER e CODICI annidati */
/* 1° livello */
.quote, .code {padding: 5px; font-size: 9pt; font-weight: normal; color: #000; background: #DDD; border-radius: 5px}
/* 2° livello */
.quote .quote, .quote .code, .spoiler .quote, .code .code {color: #333; background: #EEE}
/* 3° livello */
.quote .quote .quote, .quote .quote .code,
.spoiler .quote .quote, .spoiler .quote .code,
.quote .spoiler .quote, .quote .code .code {color: #000; background: #DDD}
/* 4° livello */
.quote .quote .quote .quote, .quote .quote .quote .code,
.spoiler .quote .quote .quote, .spoiler .quote .quote .code,
.quote .spoiler .quote .quote, .quote .spoiler .quote .code,
.quote .quote .spoiler .quote, .quote .quote .code .code,
.quote .quote .quote .code {color: #333; background: #EEE}
.quote_top, .code_top {font-size: 11px; color: #666; margin: 1em}
/* 1° livello */
.quote_top:before, .spoiler .code_top:before {color: #CCC; content:'“'; position: relative; top: 16px; margin-right: 5px; font-size: 40px; font-family: 'Times New Roman'; font-weight: bold}
.code_top:before {color: #CCC; content:'<!'; position: relative; top: 1px; margin-right: 5px; font-size: 17px; font-family: arial; font-weight: bold}
.code_top:after {color: #CCC; content:'>'; position: relative; top: 1px; margin-left: 6px; font-size: 17px; font-family: arial; font-weight: bold}
.spoiler .code_top:after {content:''}
/* 2° livello */
.quote .quote_top:before, .quote .code_top:before, .quote .code_top:after,
.spoiler .quote_top:before, .code .code_top:before, .code .code_top:after {color: #FDFDFD}
/* 3° livello */
.quote .quote .quote_top:before, .quote .quote .code_top:before, .quote .quote .code_top:after,
.spoiler .quote .quote_top:before, .spoiler .quote .code_top:before, .spoiler .quote .code_top:after,
.quote .spoiler .quote_top:before, .quote .code .code_top:before, .quote .code .code_top:after {color: #CCC}
/* 4° livello */
.quote .quote .quote .quote_top:before, .quote .quote .quote .code_top:before, .quote .quote .quote .code_top:after,
.spoiler .quote .quote .quote_top:before, .spoiler .quote .quote .code_top:before, .spoiler .quote .quote .code_top:after,
.quote .spoiler .quote .quote_top:before, .quote .spoiler .quote .code_top:before, .quote .spoiler .quote .code_top:after,
.quote .quote .spoiler .quote_top:before, .quote .quote .code .code_top:before, .quote .quote .code .code_top:after,
.quote .quote .quote .code_top:before, .quote .quote .quote .code_top:after {color: #FDFDFD}
/* BLOG */
.blog .skin_tbl {background: transparent; border: 0}
/* se il blog non ha sidebar, #centerdiv non viene usato */
#centerdiv {margin: 0 190px} .sidebar {width: 170px; font-size: 11px}
.blog .article {padding: 20px 0; border-top: 1px solid #BBB}
.blog .article:first-child {padding-top: 10px; border-top: 0}
.btitle {margin-bottom: 10px; line-height: 1.8em}
.btitle a {font: 24px georgia, verdana, arial; color: #146AAE; border-bottom: 1px dotted transparent}
.btitle a:hover {border-bottom: 1px dotted #999}
.bdesc {margin-top: 5px; font: 16px georgia, verdana, arial; color: #666}
.on .btitle {font-weight: bold}
.article .title2 {font-size: 10px; color: #888}
.article .title2 a {font-weight: bold; color: #444}
/* è necessario scrivere a:link e a:visited in questo caso, altrimenti i link avrebbero il colore di .title2 a */
.tags, .tags a:link, .tags a:visited {font-size: 10px; font-weight: normal; color: #7BE}
.color .tags {font-size: 11px}
/* data */
/* spostare 'display: none; ' da '.article .top .avatar' a .article .top .when' per mostrare l'avatar sotto il titolo invece del calendario */
.article .title2.top {position: relative; padding-left: 54px}
.article .top .avatar {display: none; position: absolute; top: 2px; left: 5px}
.article .top .when {position: absolute; top: 2px; left: 5px; width: 41px; height: 44px; text-align: center; font-weight: bold; background: url('https://img.forumfree.net/style_images/52/calendar.png') no-repeat center}
.article .top .when > *:first-child, .blog .top .when .d_month * {display: none}
.article .top .when * {width: 100%; position: absolute; left: 0}
.article .top .when .d_day {top: 12px; font-size: 9px; color: #666; text-shadow: 0 -1px 0 #FFF}
.article .top .when .d_month *:first-child {display: block; top: 23px; font-size: 9px; color: #999; text-shadow: 0 -1px 0 #FFF}
.article .top .when .d_year {top: -2px; font-size: 8px; color: #FFF}
/* punti, commenti e visite */
.article .top .right span {display: inline-block; vertical-align: middle; text-align: center}
.article .top .right a {font-weight: normal}
.article .top .right a:hover {border: 0}
.article .top .right em {display: block; font-weight: bold; font-size: 17px}
.article .color {margin: 5px 0 20px; text-align: justify; line-height: 1.85em; font-size: 13px}
.article .color .edit {color: #BBB}
.comments .post {padding: 5px 0; background: #F5F5F5}
.comments .post:nth-child(even) {background: #FFF}
.comments .post .title2 {font-size: 11px}
.comments .post .right {padding-left: 1%}
.comments .post .center .left {min-width: 0}
.comments .nick {font-size: 13px; word-wrap: break-word; overflow: hidden; width: 110px}
.comments .avatar {margin: 4px 4px 13px 4px} .comments .avatar * {max-width: 88px}
.comments .details {padding-bottom: 6px; width: 96px}
.comments .u_status {bottom: -5px}
/* BLOG WIDGET */
.sidebox {margin: 0 0 20px 0 !important; padding: 10px; background: #EDEDED; border-radius: 10px}
.stitle {padding: 0 0 10px 0; text-align: center; font: 18px georgia, verdana, arial; font-weight: normal; color: #555; text-shadow: -1px -1px 0 #EEE; background: transparent !important}
.stitle a {color: #555}
.sidebox li {padding: 2px 0}
/* widget sottosezioni, ultimi commenti ed etichette */
.side_list > *:nth-child(odd), .side_list > *:nth-child(odd) a {color: #146A9E}
/* widget calendario */
.side_calendar {padding: 5px; background: #EDEDED}
.side_calendar .stitle {padding-bottom: 5px}
.side_calendar tr {text-align: center; background: #DDD}
.side_calendar td {font-size: 9px; background: #F5F5F5}
.side_calendar td:nth-child(even) {background: #FFF}
.side_calendar .current {font-weight: bold; color: #FFF; background: #AAA !important}
/* widget sondaggio e tagbard */
.sidebox .list {font-size: 10px}
/* widget sondaggio */
.side_poll {padding: 5px 1px 1px 1px}
.side_poll .stitle {padding-bottom: 5px}
/* widget tagboard */
.side_tag {padding: 5px 0 1px 1px}
.side_tag .stitle {padding-bottom: 5px; border-bottom: 1px dashed #BBB}
/* TAGBOARD e CHAT */
.tag, .chat {margin-bottom: 30px}
.tag .list, .side_tag .list {font-size: 10px; padding: 0; border-bottom: 2px solid #FFF}
.tag .textinput, .side_tag .textinput {font-size: .95em; padding: 1px}
.tag a, .side_tag a {color: #63A4BA}
/* LISTA UTENTI ONLINE */
.online .yy a {font-weight: bold}
/* STATISTICHE */
#board .stats {margin-top: 20px}
#board .stats .skin_tbl.top {border: 0; border-radius: 5px 5px 0 0}
#board .stats .skin_tbl.bottom {border-radius: 0 0 5px 5px}
#board .stats .mback {background: #ECECEC; border: 0; border-radius: 0}
#board .stats .top .mback {border-radius: 5px 5px 0 0}
/* simbolo tra un nick e il successivo */
.users li:before {content:' - '; color: #AAA; font-weight: bold} .users li:first-child:before {content:''}
.users a:hover, .groups a:hover {border-bottom: 1px dotted #999}
/* COLORI UTENTI */
.box_visitatore .details {border: 0; background: transparent}
.daconvalidare {font-style: italic}
.male {color: #146AAE} .female {color: #C68}
.amministratore {color: #7CAE73; font-weight: bold}
.box_amministratore .details {background: #D7EBAD}
.moderatore {color: #63A4BA; font-weight: bold}
.box_moderatore .details {background: #D2F0EE}
.gruppo1 {color: #BC8CC8; font-weight: bold}
.box_gruppo1 .details {background: #F8E4FA}
/* REGISTRAZIONE RAPIDA */
.reg {margin-bottom: 30px; padding: 2px; background: #888; border: 1px solid #DDD; border-radius: 5px}
.reg .skin_tbl {border: 0}
/* AVVISI */
/* pop up */
.popup > div {background: #FBFBFB}
#redirect .info {border: 1px solid #FFF}
.navsub .info {font-size: .8em}
.alert, .info {border-radius: 5px}
.alert {padding: 1em; background: #ECC !important; color: #C00 !important}
.info {padding: .5em; background: #E5F1F5 !important; color: #146AAE !important}
.alert a, .info a {color: #000}
.alert a:hover {border-bottom: 1px solid #C00}
/* PROFILO */
.profile .tabs {text-align: right; padding-top: 10px}
.profile h2 {margin-top: 1.5%; padding: 10px; background-color: #FFF; border-radius: 3px}
.profile .nick {line-height: 1em; margin: 5%; color: #000; font: 16px 'Trebuchet MS', Tahoma, Verdana, Arial, Serif; font-weight: bold; text-shadow: none}
.profile dl {font-size: 11px}
/* non voglio che l'angolo in alto a destra di skin_tbl sia arrotondato perché ci sono dei tab */
.profile .skin_tbl {border-radius: 5px 0 5px 5px}
.profile .left {position: relative}
/* NUMERI PAGINA indicati accanto al TITOLO di un TOPIC */
.pages2 {font-size: 10px} .pages2:before, .pages2:after {content:''}
.pages2 li {margin: 0 .2em; padding: 0}
.pages2 li:first-child a {background: transparent; border: 0}
/* indicando a:link e a:visited i numeri rimangono colorati di nero anche se la riga viene selezionata e ha classe .focus */
.pages2 a:link, .pages2 a:visited {opacity: .6; padding: 1px 4px; color: #000 !important; text-shadow: none !important; background: #CCC; border: 1px solid #AAA; border-radius: 100px}
.pages2 a:hover {opacity: .9}
/* NUMERI PAGINA esterni alle tabelle */
.top .pages {text-align: center; padding-bottom: 15px}
.bottom .pages {text-align: center; padding-top: 20px}
.left .pages {padding: 0}
.pages {font-size: .8em}
.pages li {margin: 0 .2em; padding: 0; vertical-align: middle}
.pages .current:before, .pages .current:after, .pages .lastpost:before, .pages .lastpost:after {content:''}
.pages li a, .pages .current {padding: 2px 5px; font-size: 1.1em; color: #146AAE; background: #FFF; border: 1px solid #D4EAFE; border-radius: 100px}
.pages li a:hover {background: #E5F1F5; border-color: #A4DAEE}
.pages .current {font-size: 1.2em; color: #79977F; background: #E8F2E9; border: 1px solid #A9C7AF}
.pages .jump a, .pages .lastpost a {font-size: .9em; color: #888; background: #F0F0F0; border-color: #E8E8E8}
.pages .jump a:hover, .pages .lastpost a:hover {color: #146AAE; background: #E5F1F5; border-color: #A4DAEE}
.pages .first a, .pages .last a {background: #E5F1F5; border-color: #A4DAEE}
.pages .first a:hover, .pages .last a:hover {background: #CEF; border-color: #8CE}
/* INPUT e BOTTONI */
.codebuttons, .forminput, .textinput {padding: 3px; font: .9em verdana, arial, serif; color: #222; background: #FFF; border: 1px solid #CCC; border: 1px solid rgba(0, 0, 0, .2); border-radius: 3px; box-shadow: 0 1px 2px #FFF}
textarea.textinput {padding: 4px; line-height: 2em; font: 1em verdana, arial, serif}
/* bagliore azzurro */
.forminput[type=text], .forminput[type=password], .textinput {transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; -webkit-transition: all .4s ease}
.textinput:focus, .forminput[type=text]:focus, .forminput[type=password]:focus {outline: none; border-color: rgba(82, 168, 236, .75); box-shadow: 0 0 8px rgba(82, 168, 236, .5)}
/* bbcode */
.codebuttons {padding: 2px} .codebuttons:hover {background: #E8F2E9; border: 1px solid #A9C7AF}
/* form di accesso a Inbox, Sent Items... */
.sunbar .forminput {color: #FFF; background: #666; border: 1px solid #555; padding: 0; box-shadow: none}
.sunbar .forminput:hover {background: #555; border-color: #444}
/* form sotto bottone Nuova Disc. */
.navsub form {font-size: .8em}
.navsub .forminput {color: #000; background: #DDD; border: 1px solid #BBB}
.navsub .forminput:hover, .navsub .forminput:focus {background: #E5E5E5}
/* form di ordinamento in fondo alle sezioni */
.title .forminput {padding: 2px; color: #000; background: #CCC; border: 1px solid #BBB}
.title .forminput:hover {background: #DDD}
.title input.forminput {font-weight: bold; color: #FFF; background: #888; border: 1px solid #666}
.title input.forminput:hover {background: #70C6EC; border-color: rgba(82, 168, 236, .75)}
/* bottone invio risposta */
.darkbar .forminput, .fast.send .forminput {color: #FFF; background: #777; border: 1px solid #555}
.darkbar .forminput:hover, .fast.send .forminput:hover {background: #70C6EC; border-color: rgba(82, 168, 236, .75)}
.darkbar .forminput {padding: 5px; font-size: 12px; border: 2px solid #FFF !important}
.darkbar input.forminput, .fast.send input.forminput {background: #888; background: linear-gradient(#888,#777); box-shadow: 0 1px 1px #CCC}
/* bottone preview */
.darkbar button.forminput {color: #797979; background: #EEE; background: linear-gradient(#EEE,#DDD); box-shadow: 0 1px 1px #CCC}
.darkbar button.forminput:hover {color: #888; background: #FFF; background: linear-gradient(#FFF,#EEE)}
/* Nuova Disc. e Rispondi */
.buttons {padding: 10px 2px} .sidebar .buttons {padding: 10px 0 0 0}
.buttons a {border: 0; margin-left: 12px}
.buttons a:first-child {margin: 0}
/* bordo e sfondo dei bottoni viene assegnato a '.buttons span' invece che a '.buttons a' perché nel caso in cui nel pannello amministrativo delle immagini venissero messi dei bottoni, gli effetti sarebbero applicati anche a loro, ma questo non lo vogliamo */
.buttons span {padding: 3px 9px; font-size: 18px; color: #000; text-shadow: -1px -1px 1px #AAA; background: #A6A6A6; border: 1px solid #666; border-bottom-color: #444; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .3), inset 0 10px rgba(255, 255, 255, .2), inset 0 10px 20px rgba(255, 255, 255, .25), inset 0 -15px 30px rgba(0, 0, 0, .3)}
.buttons span:hover {background: #B4B4B4}
/* MP, E-mail, Web... */
.mini_buttons a {border: 0; line-height: 2.5em; font-weight: bold; font-size: 10px}
.post .mini_buttons a {line-height: 1em; font-size: 11px}
/* .mini_buttons > * seleziona anche il bottone di Facebook */
.mini_buttons > * {margin-left: 10px}
.post .mini_buttons > * {margin-left: 12px}
.post .bottom .mini_buttons > * {margin-left: 14px}
.mini_buttons > *:first-child {margin: 0 !important}
/* scritta multiquote */
.title2 label {font-weight: bold}
Ecco un esempio di CSS (preso dalla skin di base del circuito utilizzata proprio per codare le skin).SPOILER (clicca per visualizzare)body {font: 76%/1.6em Verdana, Tahoma, Arial, Sans-serif; color: #333; background-color: #FFF; background-repeat: repeat-x; background-position: bottom}
Nel selettore body vengono inserite tutte le informazioni grafiche generali quali: il tipo di font, la sua grandezza, il suo colore (font: 76%/1.6em Verdana, Tahoma, Arial, Sans-serif; color: #333;), il colore di sfondo, la sua ripetizione nel caso in cui la pagina diventasse più grande per non lasciare spazi bianchi e la sua posizione (background-color: #FFF; background-repeat: repeat-x; background-position: bottom).
Come si nota il font porta il valore 76%/1.6em questo per far si che la grandezza del font si adatti ai vari browser e per l'esattezza: 76% è utilizzato per IE e Fox mentre 1.6em per Chrome. Il background-repeat può essere di soli due tipi x (orizzontale) e y (verticale) mentre il background-position può essere: bottom (in basso), top (in alto), right (destra), left (sinistra), top-left (alto a sinistra), top-right (alto a destra), bottom-left (in basso a sinistra), bottom-right (in basso a destra); e inoltre anche se poco usati: top-top-right, top-top-left, bottom-bottom-right e bottom-bottom-left. Il background del body inoltre può essere composto in modo da non dover usare lo sfondo nell'amministrazione grafica e in particolare (come in questo caso Skin di .Kuroko montata da me) è composto da un codice tipo: body {font: 76%/1.6em Tahoma; color: #4F7699; background: url('https://i.imgur.com/XWcMQG5.png') repeat-x top, url('https://i.imgur.com/D8emYfX.png') repeat-y center, url('https://i.imgur.com/NO6j4Wc.png')no-repeat bottom right, url('https://i.imgur.com/MyAxcE4.png') no-repeat bottom left, url('https://i.imgur.com/leqeg50.png')repeat}. Come si vede ho usato il valore url scritto nella forma url('urlimmagine') al posto del valore esadecimale o rgba del colore. Il no-repeat da il comando che l'immagine non dev'essere ripetuta qualora la pagina web diventasse più larga o più lunga.SPOILER (clicca per visualizzare).nav {font: italic 17px calibri, arial; font-weight: bold; letter-spacing: .05em}
Il selettore .nav indica la navigazione nel forum (Es. • World Archive • ► ◣ Anime ► Anime News). Ache qui troviamo le proprietà e i valori per il font. Troviamo per la prima volta il font-weight (peso del font letteralmente) e il valore bold (grassetto). I valori del font-weight sono facili e sono: normal (normale), italic (corsivo), bold (grassetto), lighter (annulla il bold), e numeri che spaziano da 100 a 500 per il normal o lighter, da 600 a 900 per il bold. Il letter-spacing, invece, definisce lo spazio tra una lettere e l'altra. Qui troviamo un vaolore numerico ma i vaolri possono essere anche: normal (nessun spazio tra le lettere), vaolri positivi o negativi (Es.2px saranno distanti 2px o -3px saranno una attaccata all'altra o addirittura sovrapposte) e inherit (solo se è già stato impostato un legame di parentela). Nel caso poi di questa skin di base si modifica solo il nav superiore cioè quello in alto ma si può modificare anche quello in basso aggiungendo una stringa del tipo .navsub a {color: #FFF; font: italic 17px calibri, arial; font-weight: bold; letter-spacing: .05em} come ho fato in una skin (non metto il link perchè il forum è attivo quindi farei dello spam).SPOILER (clicca per visualizzare).footer {margin: 15px auto; font-size: 11px; color: #999}
.footer a {color: #FFF}
Premetto che a e b vengono usate vicino ad un selettore vengono usati per dire che il comando riguarderà un testo. Con .footer si intende il testo "Powered by" in fondo ad ogni forum; il margin indica la distanza dagli spazi esterni e in questo caso 15px auto significa che automaticamente dai quattro lati sarà distante 15px; il font-size la grandezza del font e color il colore. Con .footer a, invece, si modifica il colore delle parole Support · Top Forum · Top Blog · Contatti · ForumFree.SPOILER (clicca per visualizzare).logo {margin: 0 0 30px 0} .logo a:hover {border: 0}
/* LOGO con cornice */
.header {margin-bottom: 30px; border: 1px solid rgba(0, 0, 0, .5); border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5)}
.header, .header a {border-radius: 10px}
/* altezza contenitore del logo ed effetto glass */
.header a {display: table; width: 100%; height: 130px; margin: 0; padding: 0; letter-spacing: 2px; word-spacing: 4px; font: italic 39px calibri, arial; color: #EEF; text-shadow: 0 -1px 1px #000; box-shadow: inset 0 1px rgba(255, 255, 255, .3), inset 0 10px rgba(255, 255, 255, .2), inset 0 10px 20px rgba(255, 255, 255, .25), inset 0 -15px 30px rgba(0, 0, 0, .4)}
.header a:hover {color: #FFF; background: rgba(255, 255, 255, .04); border: 0}
/* posizione del testo */
.header span {display: table-cell; padding: 0 80px; vertical-align: middle; text-align: left}
/* posizione del logo */
.header h1 {background-position: 85% 50%}
Di solito questa parte del codice la lascio così com'è tanto elimino il logo e ne insierisco uno negli html in cima a tutto il forum e tolgo la cornice nell'amministrazione grafica.SPOILER (clicca per visualizzare).menuwrap {font-family: verdana, tahoma, arial, sans-serif; background: #333; background: linear-gradient(#404040,#1A1A1A); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); -moz-box-shadow: -2px 1px 2px rgba(0, 0, 0, .5)}
.menuwrap li {line-height: 2.6em; color: #AAA; text-shadow: -1px -1px 0 #111}
.menuwrap a {margin: 0; padding: 0 11px; font-size: 11px; color: #AAA}
.menuwrap a:hover {color: #FFF; border: 0}
.menuwrap .icon a {padding: 0 6px}
#m_up a {padding: 0 11px 0 0}
#c_up {position: absolute; right: 10px; bottom: 10px; opacity: .5}
#f_up {position: fixed; bottom: 20px; right: 1%; opacity: .9}
.p_up:hover, #c_up:hover, #f_up:hover {opacity: 1; text-decoration: none; border: 0}
/* esci e news */
.menuwrap b {color: #FFF}
/* numero msg e link REGISTRATI */
.menuwrap em {padding: 2px 5px; color: #FFF; text-shadow: none; background: #525252; border-radius: 6px}
.menuwrap .nick {margin-left: .6em}
.menuwrap form {padding: 0 11px 0 5px}
.menuwrap è il selettore che indica la barra utenti nel forum. Anche qui ritroviamo il font, il background cioè il colore che vogliamo dargli, la proprietà linear-gradient con due tonalità di uno stesso colore per dare l'effetto gradiente o sfumato, il box-shadow che è l'ombra che diamo alla barra e il -moz-box-shadow l'ombra sfumata. Con .menuwrap li e il .menuwrap a si modificano le scritte della barra utente, il padding serve per gli spazi interni. Con .meuwrap a:hover si modifica il colore al passaggio del mouse. Infine con .menuwrap .icon a si modifica la distanza dell'icon dal nome utente. Per il resto del codice non l'ho mai modificato. Con .menuwrap b si modifica il colore dell'esci e delle news. Con .menuwrap em si modifica il numero degli mp, il border-radius da l'arrotondamento agli angoli. Il resto lasciate stare così com'è perchè riguarda il nick e i form.SPOILER (clicca per visualizzare).menu > a:hover, .menu:hover > a {color: #FFF; background: url('https://img.forumfree.net/style_images/52/arrow.gif') no-repeat bottom}
.menu ul {width: 15em; background: #525252; border: 1px solid #080808; border-top: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, .5)}
.right .menu ul {margin-left: -2em}
.menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none; border-top: 1px solid #636363}
.menu li:first-child {padding-top: 0; border-top: 5px solid #484848}
.menu li strong {padding: 3px 8px; color: #000}
.menu li a {padding: 3px 8px !important; font-size: 12px; color: #BDBDBD !important}
.menu li a:hover, .menu li:hover > a {text-shadow: -1px -1px 0 #272727; background: #373737; border-radius: 5px}
.menu > a:hover, .menu:hover > a si occupa dell'effetto hover (quando passa il mouse cambia colore e non solo) e del testo sulla barra utente; .menu ul si occupa del background della tendina della barra utente; .right .menu ul si occupa della tendina che si apre a destra ad alcune voci del menù, il width è meglio non modificarlo anche se dipende sempre dall'aspetto grafico che si vuole dare, margin-left è la distanza che deve avere dalla tendina principale e in questo caso è negativo ed è meglio non modificare nulla; le voci con .menu li si occupano del testo delle tendine, in particolare li strong indica le scritte "Questo sito" e "Forumfree".SPOILER (clicca per visualizzare).menuwrap .search input {padding-right: 20px; color: #CCC; background: #666 url('https://img.forumfree.net/style_images/52/icon_search.png') no-repeat 96% -12%}
.menuwrap .search input:hover {color: #E0E0E0; background-color: #6F6F6F}
.menuwrap .search input:focus {color: #FFF; background-color: #888; background-position: 96.5% 110%}
Con queste stringhe di codice si modificano il background, il colore del font e il font del cerca in fondo a destra della barra utente. In particolare quando modificate il focus, modificate l'effetto di allungamento della barra cerca e tutte le sue componenti.SPOILER (clicca per visualizzare).container {margin: 30px auto; padding: 30px; background: #FFF; border: 1px solid #EEE; border-radius: 10px}
.container, .tabs.top, .tabs.bottom {width: 860px}
Personalmente il container lo odio quindi lo tolgo nelle mie skin. Vi starete domandando "E come?". Nella skin di base il container non è altro che un rettangolo smussato agli angoli (border-radius: 10px) di colore bianco (background: #FFF) con un bordo grigio chiarissimo (border: 1px solid #EEE), quindi basta togliere la proprietà background e border o impostare "background: none; border: none". Io utilizzo il primo metodo. Il padding indica che tutto ciò che contiene il container (tagboard, sezioni, ecc.) è distante dai lati di tot px (in questo caso 30px); mentre il margin indica che il container è distante dai lati del background principale (sfondo) un tot di px (in questo caso sempre 30px auto; auto significa che a partire da 30px dal top e dal bottom il container si centra da solo). La seconda parte della larghezza board (.container, .tabs.top, .tabs.bottom {width: 860px}) indica la larghezza assunta dal container, dalle sezioni, ecc.SPOILER (clicca per visualizzare).tabs {font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, Serif; letter-spacing: .05em}
.tabs li {vertical-align: bottom; margin-left: 5px}
.tabs li:first-child {margin: 0}
/* variante per tabs laterali non ruotati */
.tabs.no_rotate li {margin: 0; margin-top: 5px}
.tabs.no_rotate.alternative li {margin-top: 10px}
.tabs a {display: block; margin: 0; padding: 2px 10px; text-decoration: none; font-weight: bold; color: #999; background: #E9E9E9; border: 1px solid #D9D9D9; border-bottom: 0; border-radius: 5px 5px 0 0}
.tabs a:hover, .tabs .current a {color: #444; background: #F5F5F5; border: 1px solid #E5E5E5; border-bottom: 0}
/* variante per tabs laterali non ruotati */
.tabs.left.no_rotate a {border: 1px solid #D9D9D9; border-right: 0; border-radius: 5px 0 0 5px}
.tabs.right.no_rotate a {border: 1px solid #D9D9D9; border-left: 0; border-radius: 0 5px 5px 0}
/* i tabs in basso voglio che abbiano background e border del container */
.tabs.bottom a {background: #FFF; border: 1px solid #EEE; border-top: 0; border-radius: 0 0 5px 5px}
/* TABS disposti attorno il container */
/* 30px come il margin del container */
.tabs.top {text-align: right; position: relative; top: 30px}
/* 31= 30px come il margin del container e 1px per nascondere il bordo del container di 1px */
.tabs.bottom {text-align: right; position: relative; bottom: 31px}
/* ATTENZIONE: per sistemare la distanza dei tabs laterali dal container si suggerisce di modificare height */
/* il padding serve a indicare da quale punto dell'asse verticale del container iniziano i tabs */
.tabs.rotate {height: 25px; padding: 0 105px}
.tabs.left.rotate {left: -25px}
/* variante per tabs laterali non ruotati */
/* 130px ha lo stesso scopo di 105px per tabs.rotate, il secondo numero, 1px, deve invece essere uguale al bordo del container */
.tabs.no_rotate {padding: 130px 1px}
/* come colorare i tabs attorno il container in modo diverso uno dall'altro */
#tab_r1 a {background: #8CBA41; border-color: #ECF2E3; color: #FFF}
#tab_r1 a:hover {background: #9CCA51}
#tab_r2 a {background: #5D89B2; border-color: #E4ECF3; color: #FFF}
#tab_r2 a:hover {background: #6D99C2}
#tab_r3 a {background: #EB8022; border-color: #F3EBE4; color: #FFF}
#tab_r3 a:hover {background: #FB9032}
.tabs.left a {background: #F2F2F2}
.tabs.left a:hover {background: #FBFBFB}
Le tabs non sono altro che le pagine personalizzate che si dispongono a mò di bottone attorno al forum. Sono di quattro tipi: top (quelle in alto), bottom(quelle in fondo), rotate (ruotate a destra e sinistra del container) e no rotate (non ruotate a destra e sinistra del container). Di queste si modifica di solito il colore del font, il colore del background, il border, il margin (top e bottom) e il padding (rotate e no rotate) e l'height per quelle rotate.SPOILER (clicca per visualizzare).board .skin_tbl {margin: 0}
.skin_tbl {border-bottom: 3px solid #EFEFEF; background: #EEE; border-radius: 5px}
.mback {background-color: #DDD; border-bottom: 1px dashed #BBB; border-radius: 5px 5px 0 0}
.mback_left, .mback_right {width: 5%}
/* nei topic sfrutto interamente la larghezza di mback eliminando mback_left e mback_right */
.topic .mback_left, .topic .mback_right {display: none}
.minus, .plus {background-color: #BBB; border: 1px solid #AAA; width: 9px; height: 9px}
.plus {background-image: url('https://img.forumfree.net/html/sys-img/plus_b.gif')}
.minus {background-image: url('https://img.forumfree.net/html/sys-img/minus_b.gif')}
.mtitle {text-align: center; padding: 5px; font: 19px georgia, verdana, arial; font-weight: normal; color: #555; text-shadow: -1px -1px 0 #EEE; background: transparent !important}
.title, .darkbar {background: #ECECEC !important; font-weight: bold; font-size: 10px}
Finora abbiamo solo visto la punta d'iceberg dei CSS, ora andremo più in profondità. L'Homepage è, insieme allo sfondo, la facciata del forum. Quindi se questa viene codata male tutto il resto farà schifo. Vediamo in dettaglio i vari selettori:
- .board .skin_tbl {margin: 0} : questo codice non dovete assolutamente modificarlo;
- .skin_tbl {border-bottom: 3px solid #EFEFEF; background: #EEE; border-radius: 5px} : questo ci dice come deve essere, in questo caso avrà un bordo inferiore di 3px ben visibile, uno sfondo di qualche colore grigio chiaro e arrotondamento agli angoli di 5 px;
- .mback {background-color: #DDD; border-bottom: 1px dashed #BBB; border-radius: 5px 5px 0 0} questo è il codice più famoso di tutti in una skin ed è la parte superiore di ogni componente della home (tag, sezioni e statistiche); anche qui vediamo che ha un colore grigio; un bordo inferiore tratteggiato e angoli in alto smussati; in questo caso specifico l'mback non è stato diviso nelle sue tre parti (left, center, right) ma unificato in un unico pezzo, nelle skin più "elaborate" possiamo trovare che un mback è formato da questi tra pezzi e ognuno di loro va codato singolarmente;
- .mback_left, .mback_right {width: 5%} : qui vediamo che viene indicato che l'mback right e left devono avere una larghezza del 5%;
- .topic .mback_left, .topic .mback_right {display: none} : questo ci dice che nei topic non vogliamo che si veda l'mback left e quello right;
- .minus, .plus {background-color: #BBB; border: 1px solid #AAA; width: 9px; height: 9px} : sono il più e il meno che aprono e chiudono il foru tipo tendina (io odio quell'immagine e levo sempre questo codice interamente);
- .plus {background-image: url('https://img.forumfree.net/html/sys-img/plus_b.gif')} : immagine più;
- .minus {background-image: url('https://img.forumfree.net/html/sys-img/minus_b.gif')} : immagine meno;
- .mtitle {text-align: center; padding: 5px; font: 19px georgia, verdana, arial; font-weight: normal; color: #555; text-shadow: -1px -1px 0 #EEE; background: transparent !important} : non sono altro che le scritte "Forum", "Statistiche" e "Ultimo Messaggio";
- .title, .darkbar {background: #ECECEC !important; font-weight: bold; font-size: 10px} : e la riga sotto l'mback che contiene le scritte sopracitate.SPOILER (clicca per visualizzare).list > *, table.mainbg tr, .profile .skin_tbl {background: #F5F5F5}
.list > *:nth-child(even), table.mainbg tr:nth-child(even) {background: #FFF}
.big_list > * {background: #FFF}
.big_list > *:nth-child(even) {background: #F5F5F5}
.big_list > *:hover {background: #FFE}
.big_list > *:nth-child(even):hover {background: #F5F5E4}
.board .off .aa, .board .off img {opacity: .8}
.board .off:hover .aa, .board .off:hover img {opacity: 1}
/* fix per Opera */
.board .off .aa {min-height: 48px}
.board .on {border: 1px dotted rgba(82, 168, 236, .75)}
.board .on:hover {background: #F4FBFD}
.board .on:nth-child(even):hover {background: #EEF8FB}
/* .on .off .annuncio .importante .calda .chiusa .spostata */
/* se non si specifica .forum ha effetto anche sul blog */
.forum .annuncio {background: #E5F1F5}
.forum .annuncio:nth-child(even) {background: #EEF8FB}
.forum .importante {background: #E8F2E9}
.forum .importante:nth-child(even) {background: #F0FAF1}
- .list > *, table.mainbg tr, .profile .skin_tbl {background: #F5F5F5} : è il codice per le parti sotto il title, più precisamente quelli delle statistiche;
- .list > *:nth-child(even), table.mainbg tr:nth-child(even) {background: #FFF} : come sopra ma solo è la seconda parte delle statistiche;
- .big_list > * {background: #FFF} : è il codice di come appaiono le sezioni dispari (la prima, la terza, e così via);
- .big_list > *:nth-child(even) {background: #F5F5F5} : è il codice di come appaiono le sezioni pari (la seconda, la quarta, ecc.);
- .big_list > *:hover {background: #FFE} : l'effetto che si vuole dare al passaggio del mouse alle sezioni dispari;
- .big_list > *:nth-child(even):hover {background: #F5F5E4} : l'effetto che si vuole dare al passaggio del mouse alle sezioni pari;
- .board .off .aa, .board .off img {opacity: .8} : da non modificare
- .board .off:hover .aa, .board .off:hover img {opacity: 1} : da non modificare
- /* fix per Opera */ : questo sono le istruzioni per vedere le sezioni anche con Opera
.board .off .aa {min-height: 48px}
.board .on {border: 1px dotted rgba(82, 168, 236, .75)}
.board .on:hover {background: #F4FBFD}
.board .on:nth-child(even):hover {background: #EEF8FB}
/* .on .off .annuncio .importante .calda .chiusa .spostata */
/* se non si specifica .forum ha effetto anche sul blog */
- .forum .annuncio {background: #E5F1F5} : si occupa dei topic messi come annunci dispari;
- .forum .annuncio:nth-child(even) {background: #EEF8FB} : si occupa dei topic messi come annunci pari;
- .forum .importante {background: #E8F2E9} : si occupa dei topic messi come importanti dispari;
- .forum .importante:nth-child(even) {background: #F0FAF1} : si occupa dei topic messi come importanti pari.SPOILER (clicca per visualizzare).tag, .chat {margin-bottom: 30px}
.tag .list, .side_tag .list {font-size: 10px; padding: 0; border-bottom: 2px solid #FFF}
.tag .textinput, .side_tag .textinput {font-size: .95em; padding: 1px}
.tag a, .side_tag a {color: #63A4BA}
- .tag, .chat {margin-bottom: 30px} : è la distanza che la tagboard e la chat avranno dalle sezioni del forum;
-.tag .list, .side_tag .list {font-size: 10px; padding: 0; border-bottom: 2px solid #FFF} : si occupa dei vari messaggi della tag o della chat per quanto riguarda il font e il bordo di separazione tra i messaggi;
- .tag .textinput, .side_tag .textinput {font-size: .95em; padding: 1px} : si occupa dello spazio bianco dove scriviamo i messaggi;
- .tag a, .side_tag a {color: #63A4BA} : è il codice per modificare il colore del nick e della scritta "ip" in tag o in chat.SPOILER (clicca per visualizzare)#board .stats {margin-top: 20px}
#board .stats .skin_tbl.top {border: 0; border-radius: 5px 5px 0 0}
#board .stats .skin_tbl.bottom {border-radius: 0 0 5px 5px}
#board .stats .mback {background: #ECECEC; border: 0; border-radius: 0}
#board .stats .top .mback {border-radius: 5px 5px 0 0}
- #board .stats {margin-top: 20px} : è la distanza che avranno dalle sezioni;
- #board .stats .skin_tbl.top {border: 0; border-radius: 5px 5px 0 0} : gestisce la parte superiore delle statistiche;
- #board .stats .skin_tbl.bottom {border-radius: 0 0 5px 5px} : gestisce la parte inferiore delle statistiche;
- #board .stats .mback {background: #ECECEC; border: 0; border-radius: 0} : si occupa dell'mback delle statistiche;
- #board .stats .top .mback {border-radius: 5px 5px 0 0} : si occupa dell'mback delle statistiche.SPOILER (clicca per visualizzare).box_visitatore .details {border: 0; background: transparent}
.daconvalidare {font-style: italic}
.male {color: #146AAE} .female {color: #C68}
.amministratore {color: #7CAE73; font-weight: bold}
.box_amministratore .details {background: #D7EBAD}
.moderatore {color: #63A4BA; font-weight: bold}
.box_moderatore .details {background: #D2F0EE}
.gruppo1 {color: #BC8CC8; font-weight: bold}
.box_gruppo1 .details {background: #F8E4FA}
Con questo tipo di codice diamo colore ai vari gruppi del forum e inserendo il background ai vari box diamo l'ordine di che colore sarà il box nelle discussioni dove trovaremo l'avatar; inoltre con il font-weight ordiniamo come deve apparire il nick se in grassetto in corsivo o normale. Per aggiungere colori a gruppi che inseriamo noi basta aggiungere la stringa .grupponumero ( es. .gruppo5 {color...ecc.}). Il numero del gruppo lo trovate in gruppi in alto a destra ai vari box gruppi.
N.B.
Il border radius può essere scritto come:
- forma contratta : {border-radius: 3px} tutti gli angoli saranno smussati di 3 px;
- forma semi estesa : { border-radius: 3px 4px} significa che il border-top-left-radius e il border-bottom-right-radius saranno di 3px mentre il border-top-right-radius e il border-bottom-left-radius saranno di 4px;
- forma estesa: {border-radius : 3px 4px 3px 4px} cioè gli angoli in senso orario a partire da quello in alto a sinistra saranno smussati di 3px, 4px, 3px, 4px.
Il resto del codice non l'ho messo perchè è meglio che prima ci si eserciti a montare la skin di facciata e poi una volta acquisita una certa dimestichezza occuparsi anche dei dettagli come le discussioni, il form di risposta rapida, i sondaggi, ecc.@World Archive | RIPRODUZIONE RISERVATA ©
Hitømi
Edited by .Kirito - 30/5/2013, 09:40. -
The ~ Reverend.
User deleted
D: . -
Naruto~.
User deleted
Abbastanza complicato. D: Però c'è da dire che Hitomi ha fatto un bel lavoro. . -
.
Ottimo post, lo leggerò (??) D: . -
.
si come no -.- a chi prendi in giro se sei uomo lo leggi 
. -
.
"Fai una cosa buona e una cosa buona ti accadrà, fanne una cattiva e ti si ritorcerà contro"
- Group
- WA Special
- Posts
- 3,274
- Location
- Pianeta Terra
- Status
- Offline
. -
.
Grazie HITOMI!
Mi servirà molto presto!
. -
.Fuuton.
User deleted
è peggio che risolvere l'antitrasformata di Fourier!!! . -
.
Ho aggiunto il link di un forum guida che aiuta a capire meglio le classi. ò,ò . -
.
qualcuno che mi aiuti a realizzare una skin per un forum ? 
. -
.
Account Inattivo.
Solo per Supporto e Assistenza Grafica.- Group
- WA Fan
- Posts
- 1,917
- Location
- C627
- Status
- Anonymous
Dipende da cosa ti serve: se vuoi una guida che "passo dopo passo" di spieghi come modificare i css per editare la grafica di una skin base, abbiamo la Skinnami 'sta Scul del nostro od... amato (tidle)Pif.
Altrimenti spiega, nei dettagli, cosa ti può servire. Tieni solo in considerazione che mezzo forum è in ferie e l'altro mezzo è deceduto per via del caldo (soprattutto i membri dello Staff, che hanno sbagliato crema solare).
Aze aze.. -
Don Zella™.
User deleted
Bella guida, fatta davvero bene! .
