- Avoir Style Dynamique en php Exemple
- fichier a inclure require_once 'themes.include.php' ;
<?php
/* http://colorschemedesigner.com/ */
$themes = array(
array('c1' => 'FFFFFF',
'c2' => 'A0A0A0',
'c3' => '000000',
'c4' => '303030'),
array('c1' => 'ff4f00',
'c2' => 'ff9500',
'c3' => 'E7003E',
'c4' => '00AC6B'),
array('c1' => 'E1801A',
'c2' => 'E1B71A',
'c3' => '3321B1',
'c4' => '1783A7'),
array('c1' => 'FFAD56',
'c2' => 'FFDB56',
'c3' => '6756DD',
'c4' => '4BB3D5'),
array('c1' => 'C100C1',
'c2' => 'FF0000',
'c3' => '00DC00',
'c4' => 'CEF900'),
array('c1' => '4938DD',
'c2' => 'B02DDA',
'c3' => '2BB0D5',
'c4' => 'FFD230'),
array('c1' => 'FFA700',
'c2' => 'FFE500',
'c3' => 'FF4100',
'c4' => '0C4AC4')
) ;
?>
/* http://colorschemedesigner.com/ */
$themes = array(
array('c1' => 'FFFFFF',
'c2' => 'A0A0A0',
'c3' => '000000',
'c4' => '303030'),
array('c1' => 'ff4f00',
'c2' => 'ff9500',
'c3' => 'E7003E',
'c4' => '00AC6B'),
array('c1' => 'E1801A',
'c2' => 'E1B71A',
'c3' => '3321B1',
'c4' => '1783A7'),
array('c1' => 'FFAD56',
'c2' => 'FFDB56',
'c3' => '6756DD',
'c4' => '4BB3D5'),
array('c1' => 'C100C1',
'c2' => 'FF0000',
'c3' => '00DC00',
'c4' => 'CEF900'),
array('c1' => '4938DD',
'c2' => 'B02DDA',
'c3' => '2BB0D5',
'c4' => 'FFD230'),
array('c1' => 'FFA700',
'c2' => 'FFE500',
'c3' => 'FF4100',
'c4' => '0C4AC4')
) ;
?>
- 2-Fichier Template
<?php
require_once 'themes.include.php' ;
if(isset($_GET['i']))
{
$i=$_GET['i'];
$couleur1 = $themes[$i]['c1'] ;
$couleur2 = $themes[$i]['c2'] ;
$couleur3 = $themes[$i]['c3'] ;
$couleur4 = $themes[$i]['c4'] ;
}else{
// Choix du premier thème
$couleur1 = $themes[1]['c1'] ;
$couleur2 = $themes[1]['c2'] ;
$couleur3 = $themes[1]['c3'] ;
$couleur4 = $themes[1]['c4'] ;
}
$html = <<<HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Feuille de style paramétrable</title>
<style type='text/css'>
html {
/* Suppression des marges et remplissages :
Ecrasement des styles par défaut des divers navigateurs */
margin : 0 ;
padding : 0 ;
background-color : transparent ;
}
body {
/* Le corps du document */
vertical-align : text-bottom ;
margin : 0.3em ;
padding : 0.3em ;
color : #{$couleur4} ;
background-color : #{$couleur1} ;
padding : 0 ;
text-align : center ;
}
body > * {
text-align : left ;
}
#page {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
width : 900px ;
min-height : 100% ;
overflow : visible ;
position : relative ;
background-color : #{$couleur2} ;
padding : 10px ;
}
h1, h2, pre.code, fieldset legend, div, span.correction {
/* Propriété spécique à Mozilla */
-moz-border-radius : 5px ;
/* Propriété spécique à Safari et Chrome */
-webkit-border-radius : 5px ;
}
fieldset, #page {
/* Propriété spécique à Mozilla */
-moz-border-radius : 10px ;
/* Propriété spécique à Safari et Chrome */
-webkit-border-radius : 10px ;
}
h1 {
margin-top : 15px ;
margin-bottom : 5px ;
padding-top : 0 ;
border : 2px solid #{$couleur4} ;
margin-right : 20px ;
padding-left : 10px ;
background-color : #{$couleur1} ;
color : #{$couleur3} ;
font-size : 150% ;
font-variant : small-caps ;
}
a:link, a:visited, a:active {
text-decoration : underline ;
color : #{$couleur3} ;
background-color : transparent ;
}
a:link:hover, a:visited:hover {
text-decoration : underline ;
color : #{$couleur2} ;
}
div.contenu {
margin : 20px ;
margin-top : 10px ;
padding : 10px ;
border : solid 2px #{$couleur3} ;
background-color : #{$couleur1} ;
text-align : justify ;
}
div.contenu p:first-letter {
color : #{$couleur3} ;
text-transform : uppercase ;
font-size : 250% ;
float : left ;
font-weight : bold ;
}
#menustyle {
float : top ;
text-align : center ;
margin : auto ;
padding-left : 0 ;
}
#menustyle li {
display : inline ;
padding-left : 0.3em ;
padding-right : 0.3em ;
}
</style>
</head>
<body>
//////////////////////////////////////////////
<BR>
#{$couleur1}
<BR>//////////////////////////////////////////////
<table style='float : right ; empty-cells : show ; border : solid 1px black ;'>{$_GET['i']}
<colgroup>
<col>
<col width='50'>
</colgroup>
<tr><td><a href="model.php3?i=0">couleur 1</a><td style='background-color : #{$couleur1}'>
<tr><td><a href="model.php3?i=1">couleur 2</a><td style='background-color : #{$couleur2}'>
<tr><td><a href="model.php3?i=2">couleur 3</a><td style='background-color : #{$couleur3}'>
<tr><td><a href="model.php3?i=3">couleur 4</a><td style='background-color : #{$couleur4}'>
</table>
<div id='menustyle'>
</div>
<div id='page'>
<div class='bloc'>
<h1>Partie 1</h1>
<div class='contenu'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec molestie magna. Nunc consectetur, nisl eu convallis rutrum, risus est vestibulum nisi, eget scelerisque massa nulla eu diam. Nullam scelerisque, orci in dignissim pellentesque, risus nisl cursus massa, nec suscipit massa arcu ut leo. Donec vulputate pretium imperdiet. Nullam nec sem congue mi ultricies scelerisque at quis libero. Fusce a sapien massa. Morbi porttitor egestas est, sed viverra elit iaculis vel. Morbi est turpis, blandit quis dignissim tristique, dapibus vitae nisl. Donec facilisis elementum neque ac mattis. Quisque volutpat purus ac sapien mollis pretium. Pellentesque vel justo at magna malesuada consectetur. Maecenas neque nisi, dictum sit amet lacinia vel, placerat ac risus. Phasellus molestie facilisis dui sed gravida. Curabitur scelerisque purus et lacus suscipit vitae ullamcorper lorem bibendum. Duis dignissim dui vel urna faucibus mattis. Cras pulvinar augue nec risus ullamcorper varius cursus magna dignissim. Mauris at dui nec lorem ornare sodales a non nibh.
</div>
</div>
<div class='bloc'>
<h1>Partie 2</h1>
<div class='contenu'>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque pretium nisl non odio tristique semper. Suspendisse nec dolor enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et dui enim, non malesuada est. Pellentesque sit amet risus eros, a venenatis lectus. Curabitur auctor tincidunt mi vel sagittis. Sed semper sollicitudin accumsan. Praesent consequat porta dolor et ullamcorper. Etiam tristique laoreet nunc, non semper nibh rhoncus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mi ante, dapibus dapibus dignissim eu, ornare in nisi. Nam eleifend nibh et sem mollis porta. Curabitur sed massa turpis. Phasellus nec odio nunc, ac ornare urna. Quisque vitae volutpat eros. Suspendisse potenti. Duis condimentum suscipit orci, eget porta urna aliquet at. Vestibulum suscipit nibh vel velit vehicula quis dictum nisl dictum.
<p>Suspendisse eu nulla elit. Aenean id leo ut erat dignissim pharetra suscipit at dolor. Donec viverra vehicula aliquet. Duis bibendum dui ac mi bibendum molestie dapibus eros fringilla. Curabitur sed turpis eget lectus sagittis auctor. Donec rhoncus, turpis ut dignissim adipiscing, dolor massa gravida nisl, eu hendrerit nibh orci et magna. Phasellus eget tellus turpis. Sed nisi mi, auctor dignissim mollis rhoncus, posuere eget libero. Morbi sit amet lorem eget enim consequat rutrum. Sed vel arcu eu eros sagittis dapibus. Nunc consectetur dolor ut magna facilisis tempus. Praesent congue pellentesque risus, et pharetra justo adipiscing consectetur. Mauris at lectus dui, ac posuere dui. Proin est sem, euismod eu posuere vel, condimentum quis sapien. Sed ac elit vel lorem rutrum sollicitudin. Curabitur dapibus posuere venenatis. Nullam aliquet vestibulum lacus eu placerat. Praesent urna massa, lobortis at tristique ac, sagittis ut augue. Duis in consequat ipsum.
</div>
</div>
<div class='bloc'>
<h1>Partie 3</h1>
<div class='contenu'>
<p>Quisque luctus velit ut purus pretium ac laoreet nisl sagittis. Ut sit amet tortor at urna feugiat dapibus. Mauris quis velit dolor. Nunc convallis, urna id pulvinar sollicitudin, dui sem facilisis magna, a feugiat purus sapien a nisl. Suspendisse nec felis et ligula accumsan porta. Suspendisse potenti. Duis tincidunt nisl eget elit tristique eget ultricies nunc dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus at arcu libero, sed commodo nulla. Cras tellus risus, gravida adipiscing vulputate ac, scelerisque nec felis. Pellentesque quis magna nisl, ac mollis libero. Proin nec elit mi. Vestibulum volutpat, diam a placerat laoreet, metus ante fermentum libero, nec bibendum est nisi at ipsum. Mauris lobortis volutpat tempor. Nullam eu interdum lectus. Integer diam nibh, consequat sit amet viverra gravida, luctus vitae ipsum. Aliquam consectetur libero a neque venenatis sed suscipit massa bibendum. Praesent mattis, justo nec cursus condimentum, massa risus vulputate ante, vel congue lorem augue et lectus. Pellentesque in sapien in dolor tristique porttitor ac id elit.
<p>In iaculis hendrerit consectetur. Sed vitae sem nec risus gravida luctus in at lacus. Cras lobortis, lorem nec ultricies congue, sapien mauris facilisis urna, id eleifend nibh turpis in metus. Nulla egestas tristique felis quis laoreet. Curabitur scelerisque erat in nulla convallis vitae tempus tellus pharetra. Duis in mi urna, non aliquam orci. Vivamus a risus ac risus facilisis sollicitudin id sit amet est. Duis auctor, neque ut mattis fermentum, erat ipsum vulputate sapien, in eleifend sapien sapien eu odio. Vivamus semper lacus vitae mi varius et dignissim risus viverra. Proin ultricies, sem vel adipiscing elementum, tortor metus cursus justo, sit amet ullamcorper urna diam ac tortor. Ut bibendum congue est quis aliquam. Nullam convallis, augue non pulvinar cursus, justo nunc malesuada sem, vel feugiat velit dolor sit amet leo.
</div>
</div>
</div>
</body>
</html>
HTML;
// Envoi au navigateur
echo $html ;
?>
hi
RépondreSupprimer