Forums » Advanced Editor Forum » Read Thread

This is probably a thread I'll be updating periodically, as I'm sure to have more than one question relevant to this subject.

1) I've recently learned HTML and CSS, and am now learning javascript, and testing how CSS works in the editor (only just disabled the white box text editor). I could get the text to turn blue using style="color:blue" inside the <p> opening tag, but when I tried to define a class with the following code, it didn't work:

  <style>
  .colorblue {
    color: blue;
  }
  </style>
  
  <p class="colorblue">text that should be blue but isn't</p>

I copy pasted the code into an HTML/CSS/javascript testing site and it worked the way it was supposed to, so I suspect this is a CYS-specific issue. Does CYS not let you define classes? Is there something else I'm doing wrong?

2) Also, are there any general resources for using CSS and javascript on CYS? I checked the articles but didn't find anything other than Peng's article on HTML. Does CYS allow for the use of functions, objects, etc., or is the use of CSS and javascript limited to affecting the text as it appears?

This thread will probably be updated with more questions as I learn more javascript.

You've come to the wrong place! Asking such questions!

I just steal stuff others have made. Hopefully some more knowledgeable members chime in.

I did have issues trying to use classes as well, but I imagine there's some way to do it. There's no way the tedious approach is the only option, right?

P.S.

Ain't that funny? It works!

When I use style, I put the style tag in the global page with a $PAGETEXT := $PAGETEXT + statement. Then I apply the styles there as well, leaving just the P tag in the page itself.

I tried to play with this a few months back. From what I've seen html/js/css code only worked when changing the page text variable:

$PAGETEXT:= $PAGETEXT+"(cool HTML/JS/CSS stuff)"

I think you can even use values from the site %VARIABLES for js calculations but not vice versa. For example:

%PARAM:=8

$PAGETEXT:= "(script)var foo= "  +%PARAM+   ";
document.write('This is Foo: '+foo);
(/script)

(style)
  .colorblue {
    color: blue;
  }
  (/style)
  
  (p class='colorblue')text that should be blue(/p)"

Just checked that code and it worked. Just switch the () to <>, and also if you want to use "" for strings inside it would only let you use ' ' instead. Because all the terms are already inside a big " ". At least that's how I understand it.

 

Hope this helps.

1) This should work, but the cascading nature of CSS means that some other selector might be overriding it. You can always use the inspect element tool, and specifically the "computed" tab, to see exactly how an element's final style is chosen.

2) Using styles and scripts in the forums is limited, but you are given a bit more free rein in storygames. Though lack of classes/ids does make referencing specific elements tricky, lol.

Thanks everyone for the suggestions!

Zake: Weird, I'm not sure why the text looks like that for you. On my screen it's showing up as regular text. What browser are you using?

Ogre: Thanks, I'll try that.

Elad: Thanks, I'll try that too.

Bradin: Thanks, I'll use the inspect tool for troubleshooting.

Go to your profile page and check recent posts. That's where I saw it, it doesn't work in the forum. (I'm using Chrome).