Web Magazine » css http://www.liveblog.altervista.org Giornale di informazione telematica, cms, wordpress, joomla, web news, phpbb e tanto altro Mon, 24 Aug 2009 12:00:00 +0000 http://wordpress.org/?v=2.8.3 en hourly 1 Wordpress Mimbo Theme http://www.liveblog.altervista.org/scienza-e-tecnologia/wordpress-mimbo-theme/ http://www.liveblog.altervista.org/scienza-e-tecnologia/wordpress-mimbo-theme/#comments Sat, 10 May 2008 17:00:38 +0000 admin http://www.liveblog.altervista.org/?p=46 mimbo designOggi descriveremo Mimbo, un tema per WordPress appositamente dedicato alla creazione di magazine con WordPress.

Mimbo sfrutta il template tag system del blog engine al fine di consentire la creazione di layout non tradizionali; per questo motivo il template non contiene immagini e prevede una stilizzazione tramite CSS ridotta al minimo. Il tutto è estremamente pulito in modo da consentire la massima libertà in sede di modifica.

Mimbo è costruito per sostenere la versione 2.3 o successive di Wordpress. Pertanto se vi dovesse comparire un avviso di errore fatale relativo al tag ( “Chiamata alla funzione: is_tag”), sarebbe opportuno aggiornare la versione di wordpress.

  1. Nel file “index.php” e in “sidebar.php”, troverete una serie di query_posts funzioni che fanno riferimento alla specifica categoria numeri ID dal database. Esempio: 
    <? php query_posts ( 'showposts = 1 & cat = 4');?>

    È necessario cambiare i numeri ID con quelli che rappresentano le categorie da voi create. Questi valori li troverete nel pannello di controllo sotto la voce Gestione-> Categorie. per Saperne di più su questo processo clicca sul link.

  2. Le Immagini sulla homepage sono visualizzate utilizzando campi personalizzati. Per Saperne di più su questo processo clicca sul link.
  3. Per la struttura di lavoro e affinchè il layout si mantenga inalterato, alcune dimensioni devono essere precise. Per la voce “Feature” le immagini devono essere 255 × 88 pixel, mentre per le varie categorie le miniature devono essere 51 × 51 pixel ciascuno.
  4. Se si sta eseguendo l’aggiornamento da una versione precedente di Mimbo, ti invitiamo a visualizzare i dettagli nel Changelog per vedere cosa c’è di nuovo. Più importante: se hai problemi di visualizzare la home page, si ricorda che questa configurazione passo non è più necessario! L’ultima versione di Mimbo funziona come qualsiasi altro tema – index.php utilizza come modello la sua home page.

Per maggiori informazioni, per il tutorial di installazione ed il forum di suppurto visitare il sito dell’autore www.darrenhoyt.com

]]> http://www.liveblog.altervista.org/scienza-e-tecnologia/wordpress-mimbo-theme/feed/ 4 Modifica Template: Menù A Pulsanti http://www.liveblog.altervista.org/open-source/phpbb3/modifica-template-menu-a-pulsanti/ http://www.liveblog.altervista.org/open-source/phpbb3/modifica-template-menu-a-pulsanti/#comments Fri, 18 Apr 2008 20:56:27 +0000 admin http://phpnuke84.helloweb.eu/?p=32 Questo tutorial ha lo scopo di illustrare coem inserire nel forum dei pulsanti con mouseover effect/image.

- Inserire i pulsanti nella pagina html del forum (che non sia phpbb3.0 RC4-RC7 ma versioni precedenti), apri il file overall_header.html che puoi trovare nella directory styles/prosilver/template e cerca la seguente porzione di codice:

Codice:

<head>

In una riga successiva aggiungi :

Codice:
<script type=”text/JavaScript”>
<!–
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(”#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(”?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//–>
</script>

- Se, invece, devi inserire i pulsanti e stai utilizzando una delle seguenti versioni di phpbb3.0 RC4-RC7 , apri il file overall_header.html che trovi nella seguente directory styles/prosilver/template e cerca la seguente porzione di codice:
Codice:
<body id=”phpbb” class=”section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}”>

Dopo la stringa {S_CONTENT_DIRECTION}” inserisci:

Codice:
onLoad=”MM_preloadImages(’/demo/buttons/buttonover.jpg,button.jpg’)”
/demo/buttons/buttonover.jpg è il percorso dell’immagien ceh tu stai utilizzando come pulsante

Se si vogliono caricare più pulsanti ad esempio due, allora al posto della stringa di sopra si deve utilizzare questa seguente:

Codice:
onLoad=”MM_preloadImages(’new buttons/buttonover.jpg,buttonover1.jpg,buttonover2.jpg’)”
- Ancora modifiche sul file overall_header, inserire il codice html seguente nella posizione in cui si voglia visualizzare il menù!!
Codice:
<div align=”center”><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home’,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home” name=”Home” width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home1′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home1″ name=”Home1″ width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home2′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home2″ name=”Home2″ width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home3′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home3″ name=”Home3″ width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home4′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home4″ name=”Home4″ width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home5′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home5″ name=”Home5″ width=”100″ height=”31″ border=”0″></a><a href=”Inserisci Link Destinazione Pulsante” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(’Home6′,”,’/demo/buttons/buttonover.jpg’,1)”><img src=”/demo/buttons/button.jpg” alt=”Home6″ name=”Home6″ width=”100″ height=”31″ border=”0″></a></div>
Guarda il codice dove trovi scritto Inserisci Link Destinazione Pulsante devi inserire il link della pagina a cui il pulsante fa riferimento. I pulsanti inoltre sono nominati “home,home1,home2,home3 e via dicendo… ovviamente è possibile personalizzarli a proprio piacimento. Le misure dei pulsanti sono di 100px in larghezza e 31px in altezza, ovviamente anche questi modificabili a prorpio piacimento.
- A questo punto è necessario entrare nel pannello di amministrazione del forum e aggiornare prima il template e poi svuotare la cache così:

Pannello di controllo amministrazione > Stili > Temi > Aggiorna (in riferimento al template che usi )
Pannello di controllo amministrazione > Stili > Template > Aggiorna( in riferimento al template che usi )
Pannello di controllo amministrazione > svuota la cache
Andare nel link del forum a cui è stata apportata la modifica e aggiornare il browser.

]]> http://www.liveblog.altervista.org/open-source/phpbb3/modifica-template-menu-a-pulsanti/feed/ 0 Modifica Template: Bordi Rotondi http://www.liveblog.altervista.org/open-source/phpbb3/modifica-template-bordi-rotondi/ http://www.liveblog.altervista.org/open-source/phpbb3/modifica-template-bordi-rotondi/#comments Sun, 06 Apr 2008 17:37:02 +0000 admin http://phpnuke84.helloweb.eu/?p=15 Questo tutorial ha lo scopo di illustrare come sia possibile con pochi e semplici passi modificare a proprio piacimento il template per un forum realizzato n PhpBB3!!
Prima di cominciare vorrei attenzionare alcuni punti cruciali da ricordare, ogni qual volta si edita un file .html .css oppure, si aggiunge un’immagine al template è importantissimo aggiornare lo stile ed il template dal rispettivo pannello di amministrazione, quindi aggiornare il proprio browser:

Pannello di controllo amministrazione > Stili > Temi > Aggiorna (in riferimento al template che usi )
Pannello di controllo amministrazione > Stili > Template > Aggiorna( in riferimento al template che usi )
Pannello di controllo amministrazione > svuota la cache
Andare nel link del forum a cui è stata apportata la modifica e aggiornare il browser.

Se dimentichi di eseguire questi passaggi finali, i nuovi cambiamenti potrebbero non essere visualizzati e ciò ti potrebbe far credere, di aver sbagliato.

1) Modifica del colore di sfondo per tutta la Pagina

- Aprire il file colours.css che si trova all’interno della directory styles/prosilver/theme
- Cercare la seguente stringa:

Codice:
html, body {
color: #536482;
background-color: #FFFFFF;
}

- Modificare il valore FFFFFF con il codice del colore desiderato.

2) Modifica del Template Prosilver: Creazione Bordi Arrotondati

- Scarica Borders.rar e carica i files all’interno della seguente directory styles/prosilver/theme/images/

A questo punto, una volta caricate le immagini dei bordi, sarà necessario modificare i file .css aggiungendo un nuovo file denominato borders.css e richiamando questo file nel css principale di amminstrazione di tutti gli altri stili denominato stylesheet.css

E’ possibile operare in due modi:

- Primo Modo: Valido solo se non avete ancora modificato il file styleshett.css, (ad esempio l’installazione di mod precedenti etc) allora potete scaricare Css_for_borders.rar e caricare i file nella seguente directory styles/prosilver/theme.

- Secondo Modo: Valido se avete già modificato il file stylesheet.css (ad esempio l’installazione di mod precedenti etc), creare un nuovo file .css aprendo il notepad ed incollando il seguente script:

Codice:
/* phpBB 3.0 Style Sheet
————————————————————–
Style name: proSilver
Based on style: proSilver (this is the default phpBB 3 style)
Original author: subBlue ( http://www.subBlue.com/ )
Modified by: shoot

Copyright 2006 phpBB Group ( http://www.phpbb.com/ )
————————————————————–
*/

/*
————————————————————–
html, body tag copy from colours.css inhere
————————————————————– */
html, body {
color: #68696D;
background-color: #A0A8AE;
/* background-image: url(”{T_THEME_PATH}/images/yourbg.gif”);*/ /* CHANGE: path and name of your image */
}

/*
————————————————————–
#wrap tag copy from common.css inhere
————————————————————– */
#wrap {
padding: 0 20px;
min-width: 700px;
width: 900px;
margin: 0 auto;
}

/* additional proSilver Markup Styles outside rouded
———————————————————– */
.top-left, .top-right, .bottom-left, .bottom-right {
height: 20px; /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
weidth: 20px; /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
font-size: 2px; /* DNC: correction IE for height of the <div>’s */
}

.top-left {
background-image: url(”{T_THEME_PATH}/images/corners_top.gif”); background-repeat:no-repeat; /* CHANGE: path and name of your image */
background-position: 0 -20px; /* CHANGE: replace second number by negative height of one of your corners */
margin-left: 1px; /* CHANGE: replace by the width of one of your corners */
margin-top: 0px; /* CHANGE: replace by the height of one of your corners */
margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
}
.top-right {
background-image: url(”{T_THEME_PATH}/images/corners_top.gif”); background-repeat:no-repeat; /* CHANGE: path and name of your image */
background-position: 100% 0; /* DNC: position right corner at right side, no vertical changes */
margin-left: 0px; /* CHANGE: replace by the width of one of your corners */
margin-top: -9px; /* CHANGE: replace by the height of one of your corners */
margin-right: 1px; /* CHANGE: replace by the width of one of your corners */
}
.top-center {
background-image: url(”{T_THEME_PATH}/images/bg_headers.gif”); /* CHANGE: path and name of your image */
background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
height: 20px; /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
weidth: 20px; /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
font-size: 2px; /* DNC: correction IE for height of the <div>’s */
margin-left: 20px; /* CHANGE: replace by the width of one of your corners */
margin-top: -20px; /* CHANGE: replace by the height of one of your corners */
margin-right: 20px; /* CHANGE: replace by the width of one of your corners */
margin-bottom: -20px; /* CHANGE: replace by the width of one of your corners */
}

.bottom-left {
background-image: url(”{T_THEME_PATH}/images/corners_bottom.gif”); background-repeat:no-repeat; /* CHANGE: path and name of your image */
background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
margin-right: 0px; /* CHANGE: replace by the width of one of your corners */
margin-left: 1px; /* CHANGE: replace by the width of one of your corners */
margin-top: 0px; /* CHANGE: replace by the height of one of your corners */
}
.bottom-right {
background-image: url(”{T_THEME_PATH}/images/corners_bottom.gif”); background-repeat:no-repeat; /* CHANGE: path and name of your image */
background-position: 100% -20px; /* CHANGE: replace second number by negative height of one of your corners */
margin-right: 1px; /* CHANGE: replace by the width of one of your corners */
margin-left: 0px; /* CHANGE: replace by the width of one of your corners */
margin-top: -20px; /* CHANGE: replace by the height of one of your corners */
}
.bottom-center {
background-image: url(”{T_THEME_PATH}/images/bg_footers.gif”); /* CHANGE: path and name of your image */
background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
height: 20px; /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
weidth: 20px; /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
font-size: 2px; /* DNC: correction IE for height of the <div>’s */
margin-left: 20px; /* CHANGE: replace by the width of one of your corners */
margin-top: -20px; /* CHANGE: replace by the height of one of your corners */
margin-right: 20px; /* CHANGE: replace by the width of one of your corners */
margin-bottom: -20px; /* CHANGE: replace by the width of one of your corners */
}

.inside {
border-left: 0px solid #000000; /* YCC: color & properties of the left-borderline */
border-right: 0px solid #000000;/* YCC: color & properties of the right-borderline */
background: #FFFFFF; /* YCC: background-color of the inside */
color: #000000; /* YCC: default text-color of the inside */
padding-left: 0px; /* YCC: all texts at some distance of the left border */
padding-right: 0px; /* YCC: all texts at some distance of the right border */
background-image: url(”{T_THEME_PATH}/images/bg_body.gif”); /* CHANGE: path and name of your image */
}

.notopgap { margin-top: 0; } /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */

.outside {
margin: 0 auto;
width : 950px;
}

A questo punto salvare il fiel con il nome borders.css e caricarlo nella directory styles/prosilver/theme. Adesso aprire il file stylesheet.css che trovate nella directory styles/prosilver/theme apritelo con un editor di testo e aggiungete la seguente stringa: @import url(”borders.css”);

- Aprire il file overall_header.html che trovate nella directory styles\prosilver\template e cercate il seguente spezzone di codice:

Codice:
<body id=”phpbb” class=”section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}”>

Aggiungendo una nuova linea successiva e incollando il seguente codice:

Codice:
<div class=”outside”>
<div class=”top-left”></div><div class=”top-center”></div><div class=”top-right”></div>
<div class=”inside”>
<div class=”notopgap”>

- Aprire il file overall_footer.html che trovate nella directory styles\prosilver\template e cercate il seguente spezzone di codice:

Codice:
<!– IF not S_IS_BOT –>{RUN_CRON_TASK}<!– ENDIF –>

Aggiungendo una nuova linea successiva e incollando il seguente codice:

Codice:
</div>
<div class=”nobottomgap”></div>
</div>
<div class=”bottom-left”></div><div class=”bottom-center”></div><div class=”bottom-right”>
</div>
- A questo punto è necessario entrare nel pannello di amministrazione del forum e aggiornare prima il template e poi svuotare la cache così:

Pannello di controllo amministrazione > Stili > Temi > Aggiorna (in riferimento al template che usi )
Pannello di controllo amministrazione > Stili > Template > Aggiorna( in riferimento al template che usi )
Pannello di controllo amministrazione > svuota la cache
Andare nel link del forum a cui è stata apportata la modifica e aggiornare il browser.

Questo dovrebbe essere il risultato:

1) Modifica del colore di sfondo dopo aver installato i bordi

- Se avete scaricato il file Css_for_borders.rar aprite il file shoots_boarders.css cercate il seguente spezzone di codice:

Codice:
html, body {
color: #68696D;
background-color: #A0A8AE;
/* background-image: url(”{T_THEME_PATH}/images/yourbg.gif”);*/ /* CHANGE: path and name of your image */
}

- modificate il valore A0A8AE con il codice del colore desiderato

]]> http://www.liveblog.altervista.org/open-source/phpbb3/modifica-template-bordi-rotondi/feed/ 0