How to dynamically modify CSS using Python?

Question

I'm creating a Flask-based web app. I need to modify the CSS of an element dynamically.

To be more specific, I have a file that I want to read from Python. Based on what I read from the file, I want to modify the CSS of an element. Just to give you an idea,

with open('xyz') as f:
   if f.readline() == 'foo':
       $("#baz").css("visibility", "none")

I've tried using Opal with Ruby, however I'm unable to setup the 'opal-jquery' stuff. Any guidance down either paths is appreciated.

It's not clear what you want to do here. Where is this script running? Is it in the Flask handler that is producing the page in the first place? — Daniel Roseman, Feb 03 '16 at 14:54
maybe you need to javascript instead of Python - `jquery` is javascript library. — furas, Feb 03 '16 at 14:56
I think you should write javascript and depending on css properties on element handle your idea appropriately — MobilePro.pl, Feb 03 '16 at 15:21
Sorry for the ambiguity. This part of the script will be run in the template that is returned by the flask handler using the jinja2 template engine as I need to make these manipulations once my page is rendered — Maruth goyal, Feb 03 '16 at 16:02
The main thing is I want to open a server side file, read it's last line, evaluate it and on the basis of that evaluation, modify the CSS of an element. I'm not able to figure out how to read and write to a server side file. Note: Multiple read and write operations have to be performed. — Maruth goyal, Feb 03 '16 at 16:06

Celeo · Answer 1 · 2016-02-08T00:47:30.733

If you are configuring the CSS as part of the backend rendering process, then treat the style change as any other variable in your template:

from flask import Flask, render_template_string

app = Flask(__name__)

index_page = """<html><body><h2 style="color: {{ color }}">Index page</h2></body></html>"""

@app.route('/')
def index():
    with open('/path/to/file.txt') as f:
        color = f.readlines()[-1]
    return render_template_string(index_page, color=color)

if __name__ == '__main__':
    app.run()

If file.txt ends in, for example, blue, then the header will be blue. Same goes for red, yellow, etc.

The fact that you're changing a CSS value instead of, perhaps, a value in a table makes no difference to Jinja.

If, instead, you're trying to update the CSS value after the server has rendered the page and sent it off to the client, then you need to use JavaScript. In your backend, add an additional view to get that data from the server:

@app.route('/lastline')
def last_line():
    with open('/path/to/file.txt') as f:
        color = f.readlines()[-1]
    return color

Access this endpoint from the client with jQuery:

<script>
    function updateCSS() {
        $.ajax({
            url: "{{ url_for('last_line') }}",
            method: 'GET',
            success: function(data) {
                $("#baz").css("visibility", data);
            }
        });
    }
    setInterval(updateCSS, 1000);
</script>

This will check the file every 1 second and update your element's CSS accordingly.

How to dynamically modify CSS using Python?

1 Answers1