Notice: To Install styles, click the "Show Css Code" button first. The install button will work after that.

Getting an error when trying to create Style Settings

Hi,
I made a soundcloud design a while ago but now I'd like to add the option for the user to choose if they want a tiny animation going from left to right in the song progress playbar at the bottom, because I thought that some people maybe don't like it.

I've read the "placeholder" part at https://userstyles.org/help/coding, but since my style is my first and only experience using CSS, I could just try to understand what to do, and I thought that I understood it, but apparently I didn't...

This is the error message at the top that pops up when I try to save:
__________________________________________________________________
There were problems with the following fields:

Style code has an error - parse error on value "\" background-image: linear-gradient(62deg, rgba(255,85,0,0.8) 50.6%, rgba(255,0,0,0.8) 99.7%), url(https://media.giphy.com/media/SS6C8wYpWHW80/giphy.gif);" (error) on line 1036 around "essBar {
" background-image: linear-gradient(62deg, rgba(255,85,0,0.8) 50.6%, rgba(255,0,0,0.8) 99.7%), url(https://media.giphy.com/media/SS6C8wYpWHW80/giphy.gif);
__________________________________________________________________

It's weird because the CSS code is working when I'm using it the normal way.
I also tryed different variations using the "/*[[anim]]*/" (anim is my install key), even using it to replace the whole block, but I keep getting errors.

I've attached a screenshot of my style setting page with the CSS code and the options which should explain everything on how I'm trying to use it.

So.., well, any help or solution from someone with more knowledge is greatly appreciated.

If needed, you can view the whole css code here (which still has the .gif in it), but it might be a mess. :P
https://userstyles.org/styles/144070/

kind regards

Comments

  • Install Keys for options can't be named the same. Change to anim1 and anim2 or something
  • edited March 2018 Firefox
    Hi,
    good to know, but I'm still too dumb to do it properly. :/

    Error:

    Style code has an error - parse error on value "\".playbackTimeline__progressBar {" (error) on line 1035 around " ".playbackTimeline__progressBar { backgrou".


    I even tryed to take a look at other styles with settings and it seemed like they replace whole blocks, so I tried to do it this way..

    Screen attached

    edit: seems like I can't attach it here so I uploaded it to imgur: https://i.imgur.com/NcxrJuv.png

    kind regards
  • /*[[anim]]*/ should be without quotation marks
Sign In or Register to comment.