Forum->Flatnux->Stile diverso per ogni singolo blocco
  
Welcome Unknown Register Help383 Users

User Message


fm2002man

0 Level 0 10

levellevellevellevellevellevellevellevellevellevel
profile mail home
Wednesday 23 June 2010 - 00:54

Stile diverso per ogni singolo blocco:
Salve !
Lavorando sul sito del gruppo Servi di Cristo Vivo della mia parrocchia, ho pensato di creare una funzione che mi permettesse di associare uno stile personalizzato ad ogni blocco. Essendo l' esperimento riuscito con successo e lo potete vedere nel sito stesso http://www.servidicristovivomercatello.it ho pensato di condividere questa funzione con gli altri utenti flatnux.

Il tema su cui ho lavorato è Sugar.
1)Prima di tutto nella cartella del nostro tema creiamo un file css e lo chiamiamo blocks.css.
2)Apriamo il file theme.php e aggiungiamo la seguente funzione :

/**
@name getBlockStyle
@param $edge margine
@param $key nome del file blocco da cercare
Crea una table per il blocco con stile personalizzato.
**/
function getBlockStyle($edge, $key)
{
global $_FN;
$blockFileName = "";
$handle = opendir ( 'blocks/' . $edge );
$modlist = array ();
$xdoc;

while ( false !== ($file = readdir ( $handle )) )
{
if (! is_dir ( "blocks/$edge/$file" ) and ! preg_match ( "/^\\./s", $file ) and ! stristr ( $file, "none_" ) and ! stristr ( $file, ".xml" ) and ! preg_match ( "/~$/s", $file ))
{
array_push ( $modlist, $file );
}
}

closedir ( $handle );
fn_natsort ( $modlist );

foreach ( $modlist as $kk => $mod )
{
$ext = get_file_extension ( $mod );
$tmp = preg_replace ( '/\.' . $ext . '$/s', '', $mod );
$tmp = preg_replace ( "/^[0-9]+_|^none_/i", "", $tmp );
$title = str_replace ( "_", " ", $tmp );
$blockFileName = $title;
$filelang = "blocks/$edge/" . preg_replace ( "/^[0-9]+_|^none_/si", "", $mod ) . ".xml";
//echo "'$filelang'";
if (file_exists ( $filelang ))
{
$title = getLang ( $filelang, $title );
if($title == $key){
$xml = simplexml_load_file("blocks/$edge/$blockFileName.$ext.xml");
//echo $xml->getName() . "<br />";
foreach($xml->children() as $child)
{
//echo $child->getName() . ": " . $child . "<br />";
if($child == $key)
return "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" class=\"$blockFileName leftColumnModuleHead\">";
}

}
}

}
return null;
}

2)Sempre nello stesso file cerchiamo la funzione OpenBlock($img, $title) e sostituiamo le righe

function OpenBlock($img, $title)
{
global $colortableblocktitle, $colortableblock, $colortableblockborder, $_FN;

?>
<table cellpadding="0" cellspacing="0" border="0" width="100%"
class="leftColumnModuleHead">
<tr>
con le seguenti :

function OpenBlock($img, $title)
{
global $colortableblocktitle, $colortableblock, $colortableblockborder, $_FN;
$table = "";
echo"<link rel=stylesheet href=\"blocks.css\" type=\"text/css\">";

if($table == "" || $table == null)
$table = getBlockStyle("sx", $title);

if($table == "" || $table == null)
$table = getBlockStyle("dx", $title);

echo $table;
?>
<tr>

3)Apriamo il file blocks.css precedentemente creato e possiamo iniziare a definire lo stile per i nostri blocchi. Ad esempio vogliamo definire uno stile specifico per il blocco Login.php (il nome della classe nel foglio di stile css deve essere lo stesso del nome del file del blocco) :

.Login{border: 2pt solid orange;}


Ecco fatto ! Nell' esempio ho giusto modificato il bordo del blocco Login, ma si può anche cambiare le immagini che compongono il blocco.Adesso possiamo associare uno stile ad ogni blocco del nostro sito flatnux ! Spero che questa funzione possa essere utile. Ciao ;) !




fm2002man

0 Level 0 10

levellevellevellevellevellevellevellevellevellevel
profile mail home
Wednesday 23 June 2010 - 14:35

Re: Stile diverso per ogni singolo blocco:
Salve di nuovo!
Ho aggiornato la funzione getBlockStyle() perchè mi sono accorto che ero obbligato a definire uno stile per tutti i blocchi esistenti ed ho modificato in maniera tale da permettere anche la visualizzazione delle immagini di cui è composto il blocco (non tutte per mancanza di tempo, basta aggiungere le classi del foglio di stile). Nella definizione delle classi ho usato la seguente sintassi :
nomeFileBlocco_miaClasse. Il codice aggiornato è il seguente :

function getBlockStyle($edge, $key)
{
global $_FN;
$blockFileName = "";
$handle = opendir ( 'blocks/' . $edge );
$modlist = array ();
$xdoc;

while ( false !== ($file = readdir ( $handle )) )
{
if (! is_dir ( "blocks/$edge/$file" ) and ! preg_match ( "/^\\./s", $file ) and ! stristr ( $file, "none_" ) and ! stristr ( $file, ".xml" ) and ! preg_match ( "/~$/s", $file ))
{
array_push ( $modlist, $file );
}
}

closedir ( $handle );
fn_natsort ( $modlist );

foreach ( $modlist as $kk => $mod )
{
$ext = get_file_extension ( $mod );
$tmp = preg_replace ( '/\.' . $ext . '$/s', '', $mod );
$tmp = preg_replace ( "/^[0-9]+_|^none_/i", "", $tmp );
$title = str_replace ( "_", " ", $tmp );
$blockFileName = $title;
$filelang = "blocks/$edge/" . preg_replace ( "/^[0-9]+_|^none_/si", "", $mod ) . ".xml";
//echo "'$filelang'";
if (file_exists ( $filelang ))
{
$title = getLang ( $filelang, $title );
if($title == $key){
$xml = simplexml_load_file("blocks/$edge/$blockFileName.$ext.xml");
//echo $xml->getName() . "<br />";
foreach($xml->children() as $child)
{
//echo $child->getName() . ": " . $child . "<br />";
if($child == $key)
{
$sub = "";
$file = fopen("themes/{$_FN['theme']}/blocks.css", "r") or exit("Unable to open file!");
//Verifico se e' presente in blocks.css la classe che ha lo stesso nome del blocco da ricercare
while(!feof($file))
{
$string = fgets($file);
$sub = substr( $string, 1, strlen($blockFileName) );
if($sub == $blockFileName)
{
fclose($file);
return "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" class=\"$blockFileName" . " " . "$blockFileName" . "_leftColumnModuleHead\">";
}
}
fclose($file);
return "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" class=\"default default_leftColumnModuleHead\">";
}
}

}
}

}
return null;
}


Anche la funzione OpenBlock() è cambiata un pò:

function OpenBlock($img, $title)
{
global $colortableblocktitle, $colortableblock, $colortableblockborder, $_FN;
$table = "";
echo"<link rel=stylesheet href=\"blocks.css\" type=\"text/css\">";

if($table == "" || $table == null)
$table = getBlockStyle("sx", $title);

if($table == "" || $table == null)
$table = getBlockStyle("dx", $title);

if($table != null)
echo $table;
?>


Ed infine ho fatto la modifica in blocks.css per visualizzare uno stile di default per i blocchi che non hanno uno stile personalizzato definito :



.Login{border: 2pt solid orange;}
.Login_leftColumnModuleHead th{
/*left column styles*/
font-size: 12px;
color: green;
text-align: left;
background-repeat: repeat-x;
background-position: top;
background-image : url(images/moduleTa.gif);
background-color: #d4d4d4;
border-bottom: 1px solid #9E9E9E;
}



.default{border: 2pt solid red;}
.default_leftColumnModuleHead th{
/*left column styles*/
font-size: 12px;
color: #444444;
text-align: left;
background-repeat: repeat-x;
background-position: top;
background-image : url(images/moduleTa.gif);
background-color: #d4d4d4;
border-bottom: 1px solid #9E9E9E;
}

Potete vedere questa funzione all' opera sul sito del gruppo parrocchiano : http://www.servidicristovivomercatello.it/index.php
Spero che a qualcuno interessi :) ! Ciao !



fm2002man

0 Level 0 10

levellevellevellevellevellevellevellevellevellevel
profile mail home
Friday 25 June 2010 - 02:14

Re: Stile diverso per ogni singolo blocco:
Ciao !
Ho ultimato la funzione getBlockStyle() e adesso vengono visualizzate anche le immagini della head del blocco.
La funzione aggiornata è la seguente :

function getBlockStyle($edge, $key)
{
global $_FN;
$blockFileName = "";
$blockImageFolder = "custom_blocks";
$handle = opendir ( 'blocks/' . $edge );
$modlist = array ();
$xdoc;

while ( false !== ($file = readdir ( $handle )) )
{
if (! is_dir ( "blocks/$edge/$file" ) and ! preg_match ( "/^\\./s", $file ) and ! stristr ( $file, "none_" ) and ! stristr ( $file, ".xml" ) and ! preg_match ( "/~$/s", $file ))
{
array_push ( $modlist, $file );
}
}

closedir ( $handle );
fn_natsort ( $modlist );

foreach ( $modlist as $kk => $mod )
{
$ext = get_file_extension ( $mod );
$tmp = preg_replace ( '/\.' . $ext . '$/s', '', $mod );
$tmp = preg_replace ( "/^[0-9]+_|^none_/i", "", $tmp );
$title = str_replace ( "_", " ", $tmp );
$blockFileName = $title;
$filelang = "blocks/$edge/" . preg_replace ( "/^[0-9]+_|^none_/si", "", $mod ) . ".xml";
//echo "'$filelang'";
if (file_exists ( $filelang ))
{
$title = getLang ( $filelang, $title );
if($title == $key){
$xml = simplexml_load_file("blocks/$edge/$blockFileName.$ext.xml");
//echo $xml->getName() . "<br />";
foreach($xml->children() as $child)
{
//echo $child->getName() . ": " . $child . "<br />";
if($child == $key)
{
$sub = "";
$file = fopen("themes/{$_FN['theme']}/blocks.css", "r") or exit("Unable to open file!");
//Verifico se e' presente in blocks.css la classe che ha lo stesso nome del blocco da ricercare
while(!feof($file))
{
$string = fgets($file);
$sub = substr( $string, 1, strlen($blockFileName) );
if($sub == $blockFileName)
{
fclose($file);
return "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" class=\"$blockFileName" . " " . "$blockFileName" . "_leftColumnModuleHead\">".
"<tr><th width=\"5\" valign=\"top\"><img src=\"themes/".
$_FN['theme'] .
"/images/".
$blockImageFolder .
"/".
$blockFileName .
"_moduleTb.gif\" alt=\"" .
$title .
"\" width=\"5\" height=\"23\" border=\"0\"></th><th width=\"100%\" class=\"".
$blockFileName .
"_leftColumnModuleName\">".
$title .
"</th><th width=\"7\" valign=\"top\"><img src=\"themes/".
$_FN['theme'] .
"/images/".
$blockImageFolder .
"/".
$blockFileName .
"_moduleTc.gif\" alt=\"".
$title .
"\" width=\"7\" height=\"23\" border=\"0\"></th></tr></table><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"".
$blockFileName .
"_subMenu\" width=\"100%\"><tr><td>";
}
}
fclose($file);
return "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" class=\"default default_leftColumnModuleHead\">".
"<tr><th width=\"5\" valign=\"top\"><img src=\"themes/".
$_FN['theme'] .
"/images/moduleTb.gif\" alt=\"" .
$title .
"\" width=\"5\" height=\"23\" border=\"0\"></th><th width=\"100%\" class=\"default_leftColumnModuleName\">".
$title .
"</th><th width=\"7\" valign=\"top\"><img src=\"themes/".
$_FN['theme'] .
"/images/moduleTc.gif\" alt=\"".
$title .
"\" width=\"7\" height=\"23\" border=\"0\"></th></tr></table><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"default_subMenu\" width=\"100%\"><tr><td>"; }
}

}
}

}
return null;
}

Rispetto a prima c'è in più la variabile $blockImageFolder per indicare la cartella contenente le immagini della head del blocco (la cartella bisogna crearla manualmente).Le immagini del blocco sono nominate nel seguente modo: nomeblocco_componenteBlocco (es: Login_moduleTa.gif) e ho aggiunto il codice restante contenuto nella funzione OpenBlock(). La funzione OpenBlock() ora è la seguente:

function OpenBlock($img, $title)
{
global $colortableblocktitle, $colortableblock, $colortableblockborder, $_FN;
$table = "";
echo"<link rel=stylesheet href=\"blocks.css\" type=\"text/css\">";

if($table == "" || $table == null)
$table = getBlockStyle("sx", $title);

if($table == "" || $table == null)
$table = getBlockStyle("dx", $title);

if($table != null)
echo $table;
}

Infine il file blocks.css è il seguente :

.Login{color:#444444;}
.Login_leftColumnModuleHead th{
/*left column styles*/
font-size: 12px;
color: red;
text-align: left;
background-repeat: repeat-x;
background-position: top;
background-image : url(images/custom_blocks/Login_moduleTa.gif);
background-color: #d4d4d4;
border-bottom: 1px solid #9E9E9E;
}
.Login_leftColumnModuleName {
padding-left: 3px;
padding-top: 4px;
padding-bottom: 4px;
}
.Login_subMenu {
font-size: 11px;
color: #cccccc;
background-color: #CFE3EB;
border-bottom: 1px solid #9E9E9E;
border-left: 1px solid #9E9E9E;
border-right: 1px solid #9E9E9E;
}


.default{}
.default_leftColumnModuleHead th{
/*left column styles*/
font-size: 12px;
color: #444444;
text-align: left;
background-repeat: repeat-x;
background-position: top;
background-image : url(images/moduleTa.gif);
background-color: #d4d4d4;
border-bottom: 1px solid #9E9E9E;
}
.default_leftColumnModuleName {
padding-left: 3px;
padding-top: 4px;
padding-bottom: 4px;
}
.default_subMenu {
font-size: 11px;
color: #ffffff;
background-color: #ffffff;
border-bottom: 1px solid #9E9E9E;
border-left: 1px solid #9E9E9E;
border-right: 1px solid #9E9E9E;
}

Il risultato è uno o più diversi l' uno dagli altri. Un esempio è sempre sul sito http://www.servidicristovivomercatello.it/index.php

 [1]