-
Notifications
You must be signed in to change notification settings - Fork 306
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Stylus refuses to save any styles or acknowledge the most basic CSS commands #1856
Comments
Show a screenshot of your editor window and your CSS code. See also https://github.com/openstyles/stylus/wiki/Writing-styles |
As you can prolly see, I'm trying to change the style of the Gradio form of FaceFusion all to the left in my tab list. |
|
Your screenshot shows the element inspector, not the console tab. |
That's not the console I want to see. Open |
In your screenshot you were almost there. Simply switch to the console in that devtools. |
So, no error there, either. |
Every context has its own console. I needed the background page context. |
Okay, when I set it to "Everything", GitHub turns red, but not Gradio. |
What is gradio URL? It works for me on https://www.gradio.app |
Setting |
The icon in your screenshot shows that the style actually applies, so you need to use devtools to find what in the site's CSS overrides your style. |
The site may have an element that's shown over the entire page e.g. youtube does that. See also this article about specificity https://github.com/openstyles/stylus/wiki/Writing-styles#specificity |
There's this guide how to add themes to Gradio: https://www.gradio.app/guides/theming-guide But that's only for programmers of Gradio apps, not for mere users of those apps, so I've asked ChatGPT, which recommended Stylus to me. |
I've posted that guide to ask you guys if that is telling you anything about how to make Stylus work with this at all. |
No, that's for their internal API. Stylus simply adds CSS to the page and lets the browser deal with it. The usual reasons for CSS not being applied:
|
I'm afraid this will take several years of me studying IT at university for me to understand how to use Stylus with Gradio. |
You need to open the Element Inspector, look around with mouse hovering to see what elements are on the page, look at their styles, try applying and changing different styles, and confirm what styles you need to save to Stylus to get the effect you want. It is very easy if you know what you are doing, but you seem completely new and you rely on AI to tell you everything so you lack basic troubleshooting skills |
I guess any video tutorial on using devtools element inspector for CSS editing might be helpful or here's one for Stylus I just found: https://www.youtube.com/watch?v=GNAptZnPAmg |
@tophf Thanks, I've been watching that video before I've even started this thread, but I gave up, because none of what the guy in the video talks about works. For example, how am I supposed to identify some "h2my program", if there's no such thing or name in the Gradio website? So I gave up on that video and made this thread instead. |
The video shows how to use devtools and it's what matters. Use devtools to look at the actual page structure so you don't try things blindly. Can you show it here? |
Remove |
It's weird that there's still an error shown after you fixed the code. Do you see this code in devtools on the right the way it's shown in my screenshot? |
Try scrolling the right panel all the way to the bottom. |
The |
Yeah, like this, but is there an entry with your code? |
Nope. |
And reload the web page. |
I don't seem to have those "Advanced" toggles. |
Could it be I have an old version? I've got v1.5.51 here. |
It has them. Just scroll the options window down. |
Click the gear icon in the Stylus popup or select |
Ohhh! |
Maybe you've copied some invalid invisible character, try removing the spaces in the code. |
I've manually typed every single character by hand now, and still the same two errors: "Empty rule" and not finding what it expects to find. |
IDK, I give up then. Maybe I'll try installing gradio locally when I have free time someday... |
Looks like it's not in an iframe, so I don't know what's wrong. |
Okay, so with Stylus not working at all on Gradio, I'll be removing it from Firefox. |
Just an casual observation, this code appears to have a vertical pipe "|" at the beginning of line 2, which would account for the 2 issues. |
Oh I thought it was a fortuitously captured insertion point that blinks at the cursor position, bcause that's how it was in my screenshot, but indeed you may be right. I expected the user to copypaste the text from the comment without adding |
Bug Report
Bug Description
I'm trying to use Stylus in Firefox. None of it works, it just plain refuses to save even the most basic, standard CSS examples, such as trying to make the background red. The editor throws up no error messages or anything.
I just click the 'Save' button, go to the website, re-load the site, and then it's telling me the list of styles is empty. This even happens when trying to apply it on all websites with
*://*/*
.HELP!
The text was updated successfully, but these errors were encountered: