5568 sujets

Sémantique web et HTML

Deux CSS qui changent

Bonjour à tous, merci de me lire et de tenter de m'aider ! Voici la petite question que j'ai :

J'aimerais bien pouvoir changer deux paramètres via les CSS dans mon site. J'ai suivis ce tuto. j'ai donc tout fait correctement, mais je but sur le code (index.php) :


<?php
header('Content-type: text/html; charset=utf-8');
require_once './styles/couleurs/styleswitcher.inc.php';
?>
<html>
<head>
	<title>...</title>
	<meta name="description" content="...">
	<meta name="keywords" content="...">
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" media="screen, projection" type="text/css" id="css" href="<?php echo $url; ?>" />
</head>


Comment faire pour charger deux CSS ? Que dois-je rajouter ?

Au cas ou voila les deux styleswitcher.inc.php (avec www.site.fr a la place de mon nom de domaine) respectivement dans /styles/couleurs/ et /styles/tailles/

couleurs :

<?php
function construire_url($dossier)
{
	return 'http://www.site.fr/styles/couleurs/' . htmlspecialchars($dossier) . '/style.css';
}

$dossiers = array(
	'noir',
	'orange',
	'rouge',
	'vert',
	'bleu'
);

$actuel = htmlspecialchars($_SERVER['PHP_SELF']);
$new_style = (isset($_GET['style'])) ? $_GET['style'] : '';
$cookie_style = (isset($_COOKIE['style'])) ? $_COOKIE['style'] : '';

if(in_array($new_style, $dossiers, true))
{
	setcookie('style', $new_style, time() + (365 * 24 * 3600), '/');
	$url = construire_url($new_style);
}

else if(in_array($cookie_style, $dossiers, true))
{
	$url = construire_url($cookie_style);
}

else
{
	$url = construire_url($dossiers[0]);
}
?>


tailles :

<?php
function construire_url($dossier)
{
	return 'http://www.site.fr/styles/tailles/' . htmlspecialchars($dossier) . '/style.css';
}

$dossiers = array(
	'25',
	'50',
	'75',
	'100',
	'125',
	'150',
	'175',
	'200',
	'225',
	'250',
	'275',
	'300',
	'325',
	'350',
	'375',
	'400'
);

$actuel = htmlspecialchars($_SERVER['PHP_SELF']);
$new_style = (isset($_GET['style'])) ? $_GET['style'] : '';
$cookie_style = (isset($_COOKIE['style'])) ? $_COOKIE['style'] : '';

if(in_array($new_style, $dossiers, true))
{
	setcookie('style', $new_style, time() + (365 * 24 * 3600), '/');
	$url = construire_url($new_style);
}

else if(in_array($cookie_style, $dossiers, true))
{
	$url = construire_url($cookie_style);
}

else
{
	$url = construire_url($dossiers[0]);
}
?>



Si vous avez besoins d'autres choses n'hésitez pas.
Modifié par Fjuae (04 Feb 2009 - 17:29)
Pour charger deux CSS simultanément, il te faut utiliser soit deux balises link :

<link rel="stylesheet" media="screen, projection" type="text/css" id="css" href="<?php echo $url; ?>" />
<link rel="stylesheet" media="screen, projection" type="text/css" id="css" href="global.css" />


Ou bien utiliser @import directement dans tes feuilles de style :
@import url(global.css);


CF : http://www.alsacreations.com/actu/lire/160-link-ou-import.html
Merci beaucoup ! Navré de ne pas être tomber sur le lien plus tôt. comme je ne fait du html que depuis 3 jours les termes utilisés ne sont pas trop parleurs pour moi!


Merci beaucoup de ta réponse! je vais bidouiller un peu tout ça ! Smiley smile


Edit : Ça me permet de mettre deux css, mais il doit manquer quelque chose pour que les deux feuilles de css puissent être changé :s Mais au moins, je vais peux-être contourner le problème en faisant faire les changement l'un après l'autre.
Modifié par Fjuae (04 Feb 2009 - 21:26)
Ah mince du coup je n'ai pas réellement répondu à ta question, j'ai bien relu et bien compris ton problème. Oublie mon précédent post et lis celui-ci, il pourra t'aider.

Tu as deux styles switchers, et donc il faut que tu joues entre les deux pour modeler ces deux paramètres.
Afin de pouvoir faire cela, il va falloir inclure les deux simultanément pour pouvoir régler ces deux paramètres séparément. Comme les noms des fonctions et variables entrerons en conflit, nous allons faire fusionner les deux, et ainsi pouvoir réutiliser certains bouts de codes communs aux deux.

Il va donc te falloir utiliser les codes suivants (un index et un seul styleswitcher) :

Ton index :

<?php
header('Content-type: text/html; charset=utf-8');
require_once './styles/couleurs/styleswitcher.inc.php';
?>

<html>
<head>
	<title>...</title>
	<meta name="description" content="...">
	<meta name="keywords" content="...">
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" media="screen, projection" type="text/css" id="css" href="<?php echo $colorUrl; ?>" />
	<link rel="stylesheet" media="screen, projection" type="text/css" id="css" href="<?php echo $sizeUrl; ?>" />
</head>


Ton styleswitcher :

<?php
function construire_url($dossier)
{
	return 'http://www.site.fr/styles/couleurs/' . htmlspecialchars($dossier) . '/style.css';
}


$colorDirs = array(
	'noir',
	'orange',
	'rouge',
	'vert',
	'bleu'
);

$sizeDirs = array(
	'25',
	'50',
	'75',
	'100',
	'125',
	'150',
	'175',
	'200',
	'225',
	'250',
	'275',
	'300',
	'325',
	'350',
	'375',
	'400'
);

$actuel = htmlspecialchars($_SERVER['PHP_SELF']);
$new_colorStyle = (isset($_GET['colorStyle'])) ? $_GET['colorStyle'] : '';
$new_sizeStyle = (isset($_GET['sizeStyle'])) ? $_GET['sizeStyle'] : '';
$cookie_colorStyle = (isset($_COOKIE['colorStyle'])) ? $_COOKIE['colorStyle'] : '';
$cookie_sizeStyle = (isset($_COOKIE['sizeStyle'])) ? $_COOKIE['sizeStyle'] : '';

// Gestion de la couleur
if(in_array($new_colorStyle, $colorDirs, true))
{
	setcookie('colorStyle', $new_colorStyle, time() + (365 * 24 * 3600), '/');
	$colorUrl = construire_url($new_colorStyle);
}

else if(in_array($cookie_colorStyle, $colorDirs, true))
{
	$colorUrl = construire_url($cookie_colorStyle);
}

else
{
	$colorUrl = construire_url($colorDirs[0]);
}

// Gestion de la taille
if(in_array($new_sizeStyle, $sizeDirs, true))
{
	setcookie('sizeStyle', $new_sizeStyle, time() + (365 * 24 * 3600), '/');
	$sizeUrl = construire_url($new_sizeStyle);
}

else if(in_array($cookie_sizeStyle, $sizeDirs, true))
{
	$sizeUrl = construire_url($cookie_sizeStyle);
}

else
{
	$sizeUrl = construire_url($sizeDirs[0]);
}

?>


(Je l'ai laissé dans un code semblable à celui d'origine pour que tu puisses bien comprendre les changements effectués, sinon en réalité un tel code tiens dans beaucoup moins de lignes).
Modifié par Noix de Coco (04 Feb 2009 - 22:41)
Voila l'url de ma page d'essai : www.fjuae.hbg.fr , pour le coup ca semble fonctionner, mais les liens pour changer les couleurs ne marchent plus.
Modifié par Fjuae (05 Feb 2009 - 09:20)
D'accord, merci.

Edit : Voila c'est édité, j'ai quand même laissé la partie avec les liens comme ça concerne ce problème ci plutôt que l'autre. Smiley smile
Modifié par Fjuae (05 Feb 2009 - 09:21)
Fjuae a écrit :
Voila l'url de ma page d'essai : www.fjuae.hbg.fr , pour le coup ca semble fonctionner, mais les liens pour changer les couleurs ne marchent plus.


Pour tes liens, ceux pour changer la couleur devront être :
<a href="?colorStyle=noir">Couleur : noir</a>

Et ceux pour changer la taille :
<a href="?sizeStyle=25">Taille : 25</a>
Merci infiniment! Je vais essayer ça dessuite Smiley smile

Edit : Ça marche! Encore merci pour cette aide, j'espère ne pas t'avoir trop ennuyer. Merci Smiley smile
Modifié par Fjuae (05 Feb 2009 - 17:15)
Sujet clos
Aller à