Change CSS with python and Flask

Question

I wan't to change a css line from python/Flask/Jinja2 in my css file like this:

HTML:

<!DOCTYPE  html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <link href="{{ url_for('static', filename='./css/index.css') }}" rel="stylesheet" type="text/css" />
    <link rel="icon" href="{{ url_for('static', filename='./img/icon.png') }}">
</head>
<body>

    <div class="marquee">
        <div class="v-align">
            <p style="font-size:20vh;"><b>{{ text }}</b></p>
        </div>
    </div>

</body>
</html>

CSS:

.v-align {
   font-size: 120px;
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
}

.marquee {
   vertical-align: middle;
   white-space: nowrap;
   overflow: hidden;
   box-sizing: border-box;
   color: "red";
}

.marquee p {
   display: inline-block;
   padding-left: 100%;
   animation: marquee 30s linear infinite;
}
@keyframes marquee {
   0%   { transform: translate(0, 0); }
   100% { transform: translate(-100%, 0); }
}

I want to replace the 30s by any value when rendering it with python.

Python:

return render_template("my_html_file.html", text="this is a test!", animation_time="30s")

It seems to be impossible to make it in thr CSS file like this: animation: marquee {{ animation_time }} linear infinite; , but maybe I am wrong.

Is the css written in my_html_file.html or in a separate .css file? — yaswanth
– yaswanth, Commented Jul 17, 2018 at 14:01
It's hard to judge what the sought-after answer to this question is. I've provided an answer about the CSS animation-duration property, which the question seems to hint that the OP doesn't know about, but there could be a number of things the OP doesn't quite understand that make finding the solution difficult. — Quinn Mortimer
– Quinn Mortimer, Commented Jul 18, 2018 at 3:55
@yaswanth It is in a separate .css file, because I can't put it in the .html file — my_name
– my_name, Commented Jul 18, 2018 at 6:15
@my_name Why not? You can just take that line out and put it in the HTML file in a <style> tag with the proper selector. — MajikalExplosions
– MajikalExplosions, Commented Jul 18, 2018 at 7:00

yaswanth · Accepted Answer · 2018-07-18 09:43:12Z

Technically what you have done will not work as you are passing animation_time to the HTML template and not the CSS file. One way would be to add css within the HTML file.

<!DOCTYPE  html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <link href="{{ url_for('static', filename='./css/index.css') }}" rel="stylesheet" type="text/css" />
    <link rel="icon" href="{{ url_for('static', filename='./img/icon.png') }}">
    <style>
        .marquee p {
            display: inline-block;
            padding-left: 100%;
            animation: marquee {{animation_time}}s linear infinite;
        }
    </style>
</head>
<body>

    <div class="marquee">
        <div class="v-align">
            <p style="font-size:20vh;"><b>{{ text }}</b></p>
        </div>
    </div>

</body>
</html>

Python:

return render_template("my_html_file.html", text="this is a test!", animation_time="30")

In general, it's not recommended to generate css files on the fly as they are mostly static and is preferred to serve them from CDN. I'm not sure if you can inject variables into a css file and link it with link tag to the current html file.

If you really have the above use case, I would suggest to use inline styles within the html file.

C-Sway · Accepted Answer · 2018-07-17 14:26:34Z

0

I recently worked around this by leaving the lines I needed to edit in the CSS out of the actual CSS file and putting them in a style tag of the document itself via the same script.

Here is the code for that;

    username = sys.argv[1]
inset = ['''<style> ''',username,'''{
  background-color: #5bb235 !important;
  color: #FFFFFF !important;
}
'''
,username,''' :hover{
  background-color: #dddddd !Important;
  color: #462955 !important;
}
</style>
<div id="calendar"><div id="calendar_header"><h1></h1></div><div id="calendar_weekdays"></div><div id="calendar_content">
''']

What this means is that I have to pass the variable 'username' via an argument when running the script - I don't know if it's the best solution out there, but it worked for me in 3.6.

answered Jul 17, 2018 at 14:26

C-Sway

3771 gold badge2 silver badges13 bronze badges

2 Comments

my_name Over a year ago

Is it in the .css file or where do you put it? I don't understand your answer

C-Sway Over a year ago

This solution takes the Styles that need changed out of the CSS document and in to a <style></style> within the HTML, PHP or whatever front-facing file you have.

Quinn Mortimer · Accepted Answer · 2018-07-17 14:47:19Z

0

You can use the CSS property animation-duration to accomplish this in an inline style on the page you are rendering. CSS that is encountered later in the document overrides earlier rules, so adding this after the link to your stylesheet should accomplish what you want.

animation-duration on MDN

answered Jul 17, 2018 at 14:47

Quinn Mortimer

7216 silver badges15 bronze badges

1 Comment

my_name Over a year ago

The problem is that I cannot dynamicaly edit the time within the .css file

Collectives™ on Stack Overflow

Change CSS with python and Flask

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related