FluxBB.fr

Defaz

Membre

Inscription : 30-11-2006

Messages : 700

Site Web

[Astuce] Changer rapidement de style 2.0

Bonjour,

Une petite version modifiée de mon astuce précédemment postée, exit les formulaires et les différents fichiers

Étape 1
Créez un fichier nommé include/user/quickss.php et y copier le code suivant :

<?php

if (!defined('PUN'))
	header('Location: ../../index.php');

if (isset($_GET['style'])) {

	$style = $_GET['style'];

	define('PUN_ROOT', '../../');
	require PUN_ROOT.'include/common.php';

	if ($pun_user['is_guest']) {

		$newsheet = $style;

		setcookie("my_stylesheet", "$newsheet", 0, "/");

		$ref = $_SERVER['HTTP_REFERER'];
		header("Location: $ref");
		
		$mysheet = $_COOKIE['my_stylesheet'];
		
		if ($mysheet == "")
			$mysheet = $pun_user['style'].".css";
		
		include "$mysheet";

	} else {

		$db->query('UPDATE '.$db->prefix.'users SET style=\''.$db->escape($style).'\' WHERE id='.$pun_user['id'], __FILE__, __LINE__, $db->error());

		$ref = $_SERVER['HTTP_REFERER'];
		header("Location: $ref");
	}
}

?>
<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "Changer de thème";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "Changer de thème";
	}
} 
</script>
<div id="switcher">
	<a id="displayText" href="javascript:toggle();">Changer de thème</a>
</div>
<div id="toggleText">
	<ul>
<?php
	$styles = array();
	$d = dir(PUN_ROOT.'style');

	while (($entry = $d->read()) !== false) {
		if (substr($entry, strlen($entry)-4) == '.css')
			$styles[] = substr($entry, 0, strlen($entry)-4);
	}

	$d->close();
	natsort($styles);

	while (list(, $style) = @each($styles)) {
?>
		<li<?php if ($style == $pun_user['style']) echo ' class="selected"' ?>>
			<a href="include/user/quickss.php?style=<?php echo $style ?>"><?php echo str_replace('_', ' ', $style) ?></a>
		</li>
<?php	} ?>
	</ul>
</div>

Étape 2
Appelez le fameux fichier dans votre template en ajoutant dans include/template/main.tpl :

<pun_include "quickss.php">

Etape 3
Mettez en forme le tout avec du css (si un talentueux designer veut améliorer ça) :

#switcher {
	position: fixed;
	top: 0;
	left: 5px;
	z-index: 102;
	height: 24px;
	vertical-align: middle;
	border-radius: 0 0 4px 0;
	background-color: #777;
}

#displayText {
	z-index: 101;
	padding: 5px 8px 10px 38px;
	background: url(img/arrow_down.png) left top no-repeat;
	text-shadow: rgba(0,0,0,.4) 0 1px 0;
	color: #332c33;
	font-size: 14px;
	font-family: times New Roman;
	text-decoration: none;
}

#displayText:hover {
	color: #332c33;
}


#toggleText {
	display: none;
	position: fixed;
	top: 0;
	padding: 30px 0 5px 0;
	left: 10px;
	z-index:1;
	background: silver;
	border-radius: 0 0 4px 4px;
	text-shadow: rgba(0,0,0,.4) 0 1px 0;
	color: #332c33;
	font-size: 14px;
	font-family: Georgia, serif;
	text-decoration: none;
	vertical-align: middle;
	min-width: 167px;
}

#toggleText ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#toggleText li {
	padding: 5px 5px 0;
}

#toggleText li a:link, #toggleText li a:visited {
	text-decoration: none;
	text-shadow: rgba(0,0,0,.4) 0 1px 0;
	color: #332c33;
}

#toggleText li:hover, #toggleText .selected {
	background-color: grey;
}

La démo est visible sur mon site : StyLeZed

Dernière modification par Defaz (17-06-2012 10:15:06)

---

Projet BlueFrog - Portail communautaire | StyLeZed - Bibliothèque de styles pour FluxBB

Firebug est ton ami !