Pregunta CSS dinámico por usuario


Tengo una sección de gamma en mi sitio que permite al usuario mostrar un estado rápido de sus estadísticas usando colores (azul, rojo y verde).

Quiero generar algo como esto basado por usuario. tengo esto hasta ahora:

<style>
.box2 {
    height: 20px;
    background: blue;
    float:left;
    width:120px;
}
.box3 {
    height: 20px;
    background: green;
    float:left;
    width:30px;
}
.box1 {
    height: 20px;
    background: red;
    float:left;
    width:140px;
}
</style>

<div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

¿Debo poner el CSS directamente en la página? ¿Cuál será la mejor manera de implementar esto usando php?


10
2018-02-10 01:55


origen


Respuestas:


Siempre puede usar un archivo generado usando PHP e incluirlo como su archivo CSS como:

<link rel="stylesheet" type="text/css" href="/css/userstats.php" />

Luego, en este archivo puede usar la sesión actual para averiguar las estadísticas del usuario y luego generar usando PHP. No olvides poner el encabezado:

header("Content-type: text/css");

Ejemplo php:

background: #<?php echo $colorX; ?>; // assuming the $colorX is HEX

También puede usar el .htaccess para reescribir el archivo para que se vea menos obvio como:

RewriteEngine On
RewriteBase /
RewriteRule ^css/userstats.css$ /path/to/generatedfile.php [L,NC]

Entonces puedes usar:

<link rel="stylesheet" type="text/css" href="css/userstats.css" />

código de ejemplo:

<style>
div.bar {
    height: 25px;
}
div.bar div {
    display: block;
    float:left;
    height: 25px;
    margin: 0;
    padding: 0;
    position: relative;
}
div.bar div.red {
    background: #DD3030;
    -webkit-box-shadow: -5px 0px 8px 2px #DD3030;
    -moz-box-shadow: -5px 0px 8px 2px #DD3030;
    box-shadow: -5px 0px 8px 2px #DD3030;
    width:140px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 8px;
    -webkit-border-radius: 8px 0px 0px 8px;
    border-radius: 8px 0px 0px 8px;
    z-index:10;
}
div.bar div.blue {
    background: #3388DD;
    -webkit-box-shadow: 0px 0px 8px 2px #3388DD;
    -moz-box-shadow: 0px 0px 8px 2px #3388DD;
    box-shadow: 0px 0px 8px 2px #3388DD;
    width:120px;
    z-index:5;
}
div.bar div.green {
    background: #1CAD32;
    -webkit-box-shadow: 5px 0px 8px 2px #1CAD32;
    -moz-box-shadow: 5px 0px 8px 2px #1CAD32;
    box-shadow: 5px 0px 8px 2px #1CAD32;
    width:30px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0px 8px 8px 0px;
    border-radius: 0px 8px 8px 0px;
    z-index:10;
}
</style>

<div class="bar">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</div>

jsfiddle:  http://jsfiddle.net/g9Vrx/


15
2018-02-10 02:04



Si los colores son totalmente personalizables, la mejor manera es generar el CSS cada vez que la página se carga por usuario, o generarlo una vez cuando el usuario cambia los colores en sus preferencias, y almacenarlo en un caché o db. Entonces solo extráigalo y úsalo.

Una vez más, si los colores son totalmente personalizables (no como un par de colores predefinidos) debe incluir el CSS en la página HTML, ya que la modificación de archivos CSS externos con PHP es bastante complicado e innecesario.


0
2018-02-10 02:04