Implementación css dinámica de Django: solo un elemento cambia (fondo) dinámicamente. ¿Cómo?

Me gustaría configurar un solo estilo CSS que obtenga el fondo dinámicamente de alguna variable de django.

Creo que la dificultad adicional es que está relacionada con un: hover.

El código estático original de style.css se ejecuta así:

.titles-button h2 a {
    margin-left: 4em;
    margin-right: 4em;
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
    width: 240px;
    height: 80px;
    /* background: transparent url(../logos/djangoVX_logo.png) center left no-repeat; */
    text-indent: -999em;
    border: 1px dashed green;
}
.titles-button h2 a:hover {
    /* background: transparent url(../logos/djangoVX_logo2.png) center left no-repeat; */
}

Tenga en cuenta que ahora se comentan los antecedentes.

Me gustaría usar este estilo dentro de un DIV y actualizar dinámicamente el fondo.

Me gusta:

{% if the_apps_list %}
    {% for apps in the_apps_list %}
    <div class="titles-button"> 
        <h2><a href="/es/{{ apps.app_name }}/" style="X">{{ apps.app_name }}</a></h2> 
    </div>
    {% endfor %}
{% else %}
    <p>No APPS are available. Internal Error.</p>
{% endif %}

Hice mi mejor esfuerzo para "X" pero sin resultados.

Con la excepción de: - Reescriba el estilo completo en X - Use algunas cosas elegantes de JavaScript (on_mouse_over ...) - Incluso he visto una clase: heritageALL

Ninguna de esta solución se ajusta a mi idea de usar django.

Podría coger el toro por el lado equivocado ...

..cuál es el lado derecho?

aclamaciones F

preguntado el 16 de mayo de 11 a las 18:05

por favor explique el comportamiento que está tratando de lograr. ¿Por qué no funcionaría su css original? -

El CSS original funciona. Lo que estoy tratando de hacer es que django actualice / actualice / sobrescriba la parte de fondo de forma dinámica. Es decir, guardo todo, desde el estilo, excepto actualizar el fondo. Tengo una solución usando 'onmouseover' y amigos. Pero sigo teniendo problemas con la herencia. -

1 Respuestas

Supongamos que tiene versiones de fondo "oscuro" y "claro". Su código puede verse así:

views.py:

...
if i_want_dark_version:
    context['style']='dark'
else:
    context['style']='light'

template.html:

<div id="titles-button" class="{{ style }}">
    ...
</div>

style.css:

#titles-button.dark h2 a {
    background: ...;
}
#titles-button.dark h2 a:hover {
    background: ...;
}

#titles-button.light h2 a {
    background: ...;
}
#titles-button.light h2 a:hover {
    background: ...;
}

contestado el 17 de mayo de 11 a las 12:05

Esto sería perfecto para 2 versiones. ¿Qué hay de 100? - mariotti

Lo siento, soy un poco nuevo en stackoverflow. Pensé que escribí un poco más. - mariotti

¿Puedes perdonar las líneas anteriores (si las hay)? Quiero lograr: Un estilo fijo dado con fondos ay a: hover definidos por django. En realidad, es probable que django ni siquiera sea el punto: cualquier renderizador HTML dinámico. Pero si, como mencioné, obtengo el toro del lado equivocado, ... mariotti

..si obtengo el toro del lado equivocado, ¿hay una mejor manera de usar CSS y django? Lo que quiero es una lista (serie de divs) que tenga una marca que permita pasar el mouse (a: hover). Las fotos reales provienen de django. Esto no es simplemente 2 posibilidades: esta es la lista completa de imágenes. - mariotti

Tienes un caso de uso bastante difícil aquí. No sé cómo resolverlo usando solo html, css y Django sin generar mucho código desordenado. Intente repensar su enfoque. Parece que está generando partes de su interfaz de usuario (fondo) de forma dinámica. ¿Estás seguro de que este es el mejor enfoque? ¿Qué pasa si el usuario agrega imágenes que no son adecuadas para el fondo? Recuerde que si su interfaz de usuario tiene muchos elementos diferentes, puede ser difícil de entender para el usuario. También aumenta el peso de su página. - Tomasz Wysocki

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.