'XML Code View' CSS is broken. Major pain to Elemental modders!

from Elemental Forums

The .alt css command in line 102 of style.css is over-riding the .codeblock li.alt command on line 24.

To give this (and the other .codeblock backgrounds) higher precedence you should add #aspnetForm in front.

Eg:

#aspnetForm .codeblock li.alt

As it stands right now the code blocks are illegible.

38,447 views 12 replies
Reply #1 from Elemental Forums Top

Hi again.

This can be solved in just a few minutes.

The XML display is seriously broken in the forums and the fix I mentioned above works (I tested it). Can someone please simply add #aspnetForm to the start of line 24 in the styles,css file?

Reply #2 from WinCustomize Forums Top

What URL are you specifically having an issue with?  Depending on the site, the CSS changes drastically so unfortunately I am unable to help unless I know which site is the one with the problem.

Bara

Sins of a Solar Empire: Rebellion
Reply #3 from Elemental Forums Top

Try testing from Elemental boards. Specifically, posting XML code from the game files does very funky things (every other line with black background).

Reply #4 from Elemental Forums Top

Yes. It is the Elemental forum.

But all my suggested change does is force the code to give precedence to the id rather than the class.

Reply #6 from Elemental Forums Top

Quoting GunslingerBara, reply 2
What URL are you specifically having an issue with?  Depending on the site, the CSS changes drastically so unfortunately I am unable to help unless I know which site is the one with the problem.

Bara

I had assumed that their was only a single stylesheet called 'style.css'. Now I can see you have a master stylesheet https://forums.elementalgame.com/css/Base/style.css

And a theme style sheet https://forums.elementalgame.com/Themes/Elemental%20v2/css/style.css

My earlier suggestion was to change the master stylesheet so I understand your reluctance.

However, there is an equally easy fix within the theme stylesheet.

The problem is that the class 'alt' is used both in the forum posting AND in the alternate rows of the code editor. The alt class in the forum is specified in the theme stylesheet while the alt class in the code view is specified in the master stylesheet.

The alt class in the forum (line 102) is always applied to a div so instead of:

Code: css
  3. <div class="cssRule insertInto cssEditableRule ">
  4. <div class="cssHead focusRow "><span class="cssSelector ">.body .forum .post .replies .alt</span> {</div>
  5. <div class=" ">
  6. <div class="cssPropertyListBox ">
  7. <div class="cssProp focusRow editGroup "><span class="cssPropName editable ">background</span><span class="cssColon ">:</span><span class="cssPropValue editable ">none repeat scroll 0 0 #151510</span><span class="cssSemi ">;</span></div>
  8. </div>
  9. </div>
  10. <div class="editable insertBefore ">}</div>
  11. </div>

if a div qualifier is added it corrects the problems:

Code: css
  3. <div class="cssRule insertInto cssEditableRule ">
  4. <div class="cssHead focusRow "><span class="cssSelector ">.body .forum .post .replies div.alt</span> {</div>
  5. <div class=" ">
  6. <div class="cssPropertyListBox ">
  7. <div class="cssProp focusRow editGroup "><span class="cssPropName editable ">background</span><span class="cssColon ">:</span><span class="cssPropValue editable ">none repeat scroll 0 0 #151510</span><span class="cssSemi ">;</span></div>
  8. </div>
  9. </div>
  10. <div class="editable insertBefore ">}</div>
  11. </div>

or you could use the 'reply' class instead of the div:

Code: css
  3. <div class="cssRule insertInto cssEditableRule ">
  4. <div class="cssHead focusRow "><span class="cssSelector ">.body .forum .post .replies .reply.alt</span> {</div>
  5. <div class=" ">
  6. <div class="cssPropertyListBox ">
  7. <div class="cssProp focusRow editGroup "><span class="cssPropName editable ">background</span><span class="cssColon ">:</span><span class="cssPropValue editable ">none repeat scroll 0 0 #151510</span><span class="cssSemi ">;</span></div>
  8. </div>
  9. </div>
  10. <div class="editable insertBefore ">}</div>
  11. </div>

Tested both of these and they work.

+2 Loading…
Reply #7 from Elemental Forums Top

Awesome, man! You've spread joy to modders everywhere who want to be able to add readable XML blocks in "reply" posts.
k1  

Gnilbert

Reply #8 from Elemental Forums Top

*Bump*

Please, with Elemental being soooooo XML heavy in modding this is really important. Particularly as modding will be focussed on more heavily in the very near future. It is such an easy fix as well.

If this is a problem is there any way we can put our own style tags in the editor to over-ride the formatting? I tried this but it didn't stick.

Reply #9 from Elemental Forums Top

If modders using the Elemental forums want to fix this I found a reasonably simple work-around through a Firefox plugin.

Details are here:

https://forums.elementalgame.com/396187

BTW, Bara or whoever else will fix this, the default font colour also needs to be corrected as well. I see that the style sheet was worked on recently so the old line numbers are a little out.

Suggest now adding the .codeblock overrides back in to the Theme style.css as a new entry because of the font colour change.

Code: css
  3. #aspnetForm .codeblock li {
  4. color:#000;
  5. }
  6. #aspnetForm .codeblock li.alt {
  7. background:none repeat scroll 0 0 #F8F8F8;
  8. }

Just adding the 'aspnetForm' id to the .codeblock class gives it precedence.

+1 Loading…
Reply #10 from Elemental Forums Top

I've fixed the alternate background and changed the text color to black.  However, I've kept the alternate background to a light grey to help differentiate between multiple-line XML and single-line XML.

Note that it may require a hard refresh (Ctrl + F5) for the CSS to update.

Bara

+1 Loading…
Reply #11 from Elemental Forums Top

Awesome news!  k1

One less thing for Das123 to complain about. (J/K) ;P

Reply #12 from Elemental Forums Top

Quoting Gravedancer, reply 11
One less thing for Das123 to complain about. (J/K)

Lol :grin:  

Thanks Bara. Working great. :)