Css in app.py not working

Python
#1

Doing some study drills atm, playing around with css, well trying to…

so im using url_for to get the link

inside <> i have the following in the head element
link rel=“stylesheet” type=“text/css” href="{{ url_for(‘static’, filename=‘style.css’) }}" media=”screen”

i can visit the file i’m pointing to so the browser can see the file i know that’s working.

in the file i have the following

body {
background-color: lightblue;
}

h1 {
color: black;
text-align: center;
}

but nothing changes

i can use the style tags and define it directly in the html file and it works
but not when im linking to the file

am i linking to the file incorrectly somehow?

#2

To eliminate the obvious, have you reloaded the page since adding the css link into the script?

#3

Also, use the developer tools to inspect the html file and find out if the link is correctly rendered by url_for.

#4

:slightly_smiling_face:

i did reload the page and have viewed the element,
everything was as it should be, i could click the link in the dev tools and
get taken to the css file.

i ended up staying up late trying to figure it out, it was really bugging me.

it ended up being the media=‘screen’
possibly since i’m running through a tv maybe?

#5

Yes that’s possible. Interesting.

#6

Ouch, that’s brutal but yes. Don’t use media until you’ve got it working without it, then you can change it for specific sizes and media types. I’m still not sure why a TV wouldn’t be “screen” though but maybe google your TV or the browser and see what it claims to be.

#7

update:

so i got everything styled as i wanted it, i then tried to play around with the media settings.

turns out i can’t define a specific media for this tv
even media=‘tv’ doesn’t work

couldn’t find any specific reference for the tv anywhere, being a chepo brand might not help.

lucky i’m probably going to be the only one looking at it like this :slight_smile:

so lesson learnt, it would be safe to say when designing pages with css to use a
computer monitor, then view in each of the main platforms/screen sizes you are
designing for.

#8

And across browsers, and the transitions from landscape/portrait, and resizing…

Responsive sites are a minefield, which is why most people use frameworks these days to avoid the overhead.

#9

That’s super weird. And can you just use the dimensions only to determine the layout properties in media queries? Just say it’s screen, but specify basics about it. Check out this guide:

It gets very in-depth on what you can do, and some of the things are pretty crazy with orientation, resolution, width/height, etc.

The other thing is to just snoop the user agent in the app.py. You should be able to print out the headers of the request objet and look for User Agent, then match that string and just set it as a variable in the HTML output.

#10

What do you mean by frameworks? Bootstrap?

#11

Thanks for the guide

i had a look for user agent and found this

request.headers.get('User-Agent")
i printed this to the terminal while the app was running

i got this info
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36

i used the object
request.user_agent

and i can get the platform, browser, version, language and the string printed to the terminal

i’m not sure what you meant
“then match that string and just set it as a variable in the HTML output.”

also zed on a side note i have started receiving emails from the forum

#12

And others. Depends on your goals really, but I’ve worked with clients who handcrafted breakpoints and views and it’s was a constant cross-browser testing overhead.

#13

Alright so if you have this:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36

You know I’d also just dump all of the headers and look for any clues:

print(request.headers)

That one is fairly generic so there might be other clues that identify it as “tv”. But, I think something that’s not clear to me is this:

  1. Are you accessing this app through like a TV in your living room?

or

  1. Are you just using a TV as your monitor?

Explain your setup a bit better so I can figure out what you need to detect this and adapt it.

#14

Yeah its a bit of an odd setup,

my study nook is behind me and full of crap, we live in a small place.

we have a duel tv setup in the living room mounted on the wall, so i can be doing my thing while the wife is doing hers.

my pc is a custom duel system i built, which connects to both tvs via hdmi, quite fun when we feel like playing a game. :slight_smile:

both running windows 10

so currently i would say that i’m running a duel tv setup as monitors, if the wife is home its a single tv/monitor.

the header is below, some of the information i understand what it is telling us.
whould i be looking for clues in the sec-CH-Ua?
or Accept?
these would be the only 2 i cant seam to figure out.

Host: localhost:5000
Connection: keep-alive
Sec-Ch-Ua: “Google Chrome”;v=“93”, " Not;A Brand";v=“99”, “Chromium”;v=“93”
Sec-Ch-Ua-Mobile: ?0
Sec-Ch-Ua-Platform: “Windows”
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: http://localhost:5000/home
Accept-Encoding: gzip, deflate, br
Accept-Language: en-AU,en-GB;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: session=eyJfZnJlc2giOmZhbHNlfQ.YU-VpQ.nKajTp7izZXTILAC21K-sH_soTo

#15

thanks, ill have a read of that later, seams like it might be the way to go.

if i can use it to achieve the look i want and only have to test it in one view, id be happy with that. doesn’t have to be anything fancy.

#16

In this case, if you just have a computer attached to a monitor then it’s nothing to do with the TV. I’ll be you just have the dimensions wrong, or other selectors.

I’d try going the other direction. Ditch alllllll the junk on the CSS link and go straight plain old bare. Get it working on your TV without any media or other special settings. I think you’ve simply added too much thinking “it’s a TV” but your browser thinks it’s a monitor.

#17

thanks zed

i ended up starting again with bootstrap, and made no media declarations, now its set to max size / reduces well when i shrink the screen.

by no means perfect but it gets the job done.

what back end code did you use for this comment box?
for my admin back end i wouldn’t mind setting up something like this
so i can see how it turns out as i’m typing.

#18

This here is Discourse and I do not recommend it at all. It’s actually pretty terrible, and it’s also a whole forum. If you want to have a way to write markdown and have it display like they do here then you’ve got to dive into javasript. I’d checkout:

or

or

Make a webpage with those in it and two panels like here. Could be a good exercise to see how you might do a replica of what Discourse is doing. The key is, when the input textarea changes you want to rerun the markdown convert in the display side (the right side here).

#19

that looks like what i’m after, ill have a play with that later i might need to do a bit of light reading of js so i can understand it a little better though.

cheers