How to fix the XML Code View here in the forums (SOLVED! No longer needed)

As it stands at the moment, the site CSS is corrupting the way the code-view should be seen.

We see

when we should be seeing

Hopefully this will be fixed soon but it does heavily impact on us modders because any code put into code-view is illegible.

I got sick of waiting for this to be corrected (yes, I'm very impatient) but you can fix it yourself if you are using FireFox as your browser. If you aren't using FireFox I would highly recommend it anyway - regardless of whether you want to fix this issue or not.

Anyhow, once you have FireFox running, grab an add-on called Stylish (Tools --> Add-ons and search for Stylish). It will appear in the bottom right of your browser (as in the screen shots above).

Navigate to a forum entry with XML code so you can test things and right-click the Stylish icon. Then select Write new style --> For forums.elemental.com...

Name it whatever you want. I called mine Elemental Forum Fix Code Block and at the bottom of the edit panel place the following CSS code:

Code: css
  1. .codeblock li {
  2. color:#000000 !important;
  3. }
  4. .codeblock li.alt {
  5. background:none repeat scroll 0 0 #F8F8F8 !important;
  6. }

And that's all you need to do.

Even if you are using Internet Explorer and can some-how overwrite the CSS code, it won't work because IE doesn't support the !important declaration used to force precedence of these commands.

7,205 views 6 replies
Reply #1 Top

Here is a test XML sample so you can test it...

Code: xml
  1. <Test>
  2.   <BadCode>This doesn't work because of the .alt conflict</BadCode>
  3.   <ThisOK>This works because there is not the .alt conflict</ThisOK>
  4.   <BadCode>This doesn't work</BadCode>
  5.   <HangOn>Hmmm, the font is too light.</HangOn>
  6.   <BadCode>This doesn't work</BadCode>
  7.   <StillBadCode>The font color is also a problem</StillBadCode>
  8. </Test>

Reply #2 Top

    Nice fix. Didn't know about this add on. Is there a way to modify it so the "list" or numbers don't show up when code is copied?

    Example:

    1. <Test>
    2.   <BadCode>This doesn't work because of the .alt conflict</BadCode>
    3.   <ThisOK>This works because there is not the .alt conflict</ThisOK>
    4.   <BadCode>This doesn't work</BadCode>
    5.   <HangOn>Hmmm, the font is too light.</HangOn>
    6.   <BadCode>This doesn't work</BadCode>
    7.   <StillBadCode>The font color is also a problem</StillBadCode>
    8. </Test>
    Reply #3 Top

    Quoting James009D, reply 2

    Nice fix. Didn't know about this add on. Is there a way to modify it so the "list" or numbers don't show up when code is copied?
    End of James009D's quote

    The editor used in the website is called TinyMCE and all it is doing is formatting an ordered list (so numbered by default). There is nothing we can do about this on the website end. But stripping them out is fairly simple if your editor can handle regular expressions. Most editors should be able to this. I know that Eclipse, Edit Pad Pro, and Ultra Edit all can

    What you do is turn on Regular Expressions in your find/replace. then search for the following pattern but replace it with nothing:

    ^\s*\d+\.\s{0,2}

    RegEx looks confusing but is very powerful for this sort of work.

    What the above pattern does is:

    ^           Start at the beginning of a line

    \s*         Look for white space between zero and unlimited times (there are two spaces at the start but this also allows for a single tab etc.

    \d+        Look for a digit between one and unlimited times.

    \.           Look for a period

    \s{0,2}   Look for more white space between zero and two times (I had another two spaces added before the code kicked in)

    When it finds a match it will simply strip it out

    Hope this helps. :)

    Reply #5 Top

    Yay. Thanks for the update.

    Reply #6 Top

    Thanks Bara. :)