A furia di provare ci sto prendendo la mano ragazzi.. e la trasformazione del mio prosilver continua:
Ho aggiunto i fumetti nelle colonne messaggi e argomenti e inserito uno sfondo bianco al titolo dei forum e delle categorie:
Vedi screenshot:
http://i41.tinypic.com/2504eg2.png
apri styles/prosilver/template/
forumlist_body.html:
per inserire i fumetti
trova:
Codice: Seleziona tutto
<dd class="topics">{forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
<dd class="posts">{forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
sostituisci con:
Codice: Seleziona tutto
<dd class="topics"><div class="statbubble"><span>{forumrow.TOPICS} </span><dfn>{L_TOPICS}</dfn></div></dd>
<dd class="posts"><div class="statbubble"><span>{forumrow.POSTS} </span><dfn>{L_POSTS}</dfn></div></dd>
Trova:
Codice: Seleziona tutto
<dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></dt>
Sostituisci con:
Codice: Seleziona tutto
<dd style="width: 45%;"><div class="cat-name">
<span><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></span>
</div></dd>
Ora non rimane che impostare i css che io ho inserito in styles/prosilver/theme/
common.css:
per inserire i fumetti
trova:
Codice: Seleziona tutto
/* Horizontal lists
----------------------------------------*/
prima aggiungi:
Codice: Seleziona tutto
.statbubble {
width: 64px;
height: 36px;
background: url("{T_THEME_PATH}/images/statbubble.png") no-repeat left top;
text-align: center;
padding: 6px 0 0 7px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
color: #0658b0;
}
.statbubble span {
font-size: 11px;
font-weight: bold;
color: #183853;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
}
Per aggiungere lo sfondo bianco sotto i titoli dei forum e delle categorie:
trova:
Codice: Seleziona tutto
.fieldsbg {
/*border: 1px #DBDEE2 solid;*/
background-color: #eaeaea;
}
Aggiungi dopo:
Codice: Seleziona tutto
div.cat-name {
background: transparent url("{T_THEME_PATH}/images/blue/cat-name-r.png") no-repeat scroll top right;
float: left;
height: 21px;
padding-right: 6px;
margin-left: 4px;
line-height: 21px;
}
div.cat-name span {
background: transparent url("{T_THEME_PATH}/images/blue/cat-name-l.png") no-repeat;
display: block;
padding-left: 6px;
height: 21px;
letter-spacing: -1px;
}
div.cat-name span, div.cat-name span a {
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
text-transform: uppercase;
font-size: 12px;
color: #096fb5;
text-shadow: none;
}
In ultimo apriamo
colours.css per cambiare il colore dei titoli delle categorie e dei forum che altrimenti rimarrebbero bianchi:
Trova:
Codice: Seleziona tutto
/* Links on gradient backgrounds */
#search-box a:link, .navbg a:link, .forumbg .header a:link, .forabg .header a:link, th a:link {
color: #FFFFFF;
Nel codice cambia il colore
#FFFFFF
con quello che più aggrada.
Fatta questa premessa quando visualizzo il forum con il mio pc va tutto bene (come da screen), quando però lo visualizzo con un ipad o uno smartphone (note 2) la visualizzazione si scombussola, le scritte argomenti, messaggi ecc. si accavallano ed anche i fumettini (vedi screen).
Vedi screenshot:
http://i44.tinypic.com/2cp2lnb.jpg
come faccio a fare in modo che la visualizzazione non cambi..?