9468

Django dynamic css implementation: only one item changes (background) dynamically. How to?

Question:

I would like to set up one single css style which gets the background dynamically from some django variable.

I think the added difficulty is that it is related to a:hover.

The original static style.css code runs like:

.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; */ }

Note the background is now commented.

I would like to use this style within a DIV and update dynamically the background.

Like:

{% if the_apps_list %} {% for apps in the_apps_list %} <div class="titles-button"> <h2><a href="/{{ apps.app_name }}/" style="X">{{ apps.app_name }}</a></h2> </div> {% endfor %} {% else %}

No APPS are available. Internal Error.

{% endif %}

I did my best for "X" but with no results.

With the exception of: - Rewrite the full style in X - Use some javascript fancy stuff (on_mouse_over...) - I have even seen a class: inheritALL

None of this solution fits my idea of using django.

I might get the bull from the wrong side...

..which one is the right side?

cheers F

Answer1:

Let's say you have "dark" and "light" versions of background. Your code may look like:

<strong>views.py:</strong>

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

<strong>template.html:</strong>

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

<strong>style.css:</strong>

#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: ...; }

Recommend

  • Like buttons and like box vanished
  • When do I put - inside an element?
  • C# ImageList won't display images
  • Why are Google Play games icons not shown in Play Store?
  • removing the default blue color on focus
  • Responsive left sidebar open close
  • Prevent page break in text block with iText, XMLWorker
  • Enumerating Controls on a Form
  • C++ friend class std::vector
  • SyntaxError: (irb):26: both block arg and actual block given
  • blade.php method outputting it's result to the form
  • order post according to custom array position
  • AndEngine Applying Transparancy to AndEngine View
  • D3 get axis values on zoom event
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Custom validator control occupying space even though display set to dynamic
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Google Custom Search with transparent background
  • Change multiple background-images with jQuery
  • Avoid links criss cross / overlap in d3.js using force layout
  • Algorithm for a smudge tool?
  • CSS Linear-gradient formatting issue accross different browsers
  • What is the “return” in scheme?
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Submit form in a displaytag pagination
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • Circular dependency while pushing http interceptor
  • Traverse Array and Display in markup
  • Android Studio and gradle
  • AngularJs get employee from factory
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How to set the response of a form post action to a iframe source?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Change div Background jquery
  • python draw pie shapes with colour filled