How do I change the color of text in the html editor

[Ron Austin]

Link to my site: http://www.suwanneearc.org
SMF version: SMF ver. 2.02
TP version: TP ver. 1.106
Default Forum Language: English
Theme name and version: BR Finale
Browser Name and Version: Firefox 8
Mods installed: Staff List, Gallery Lite
Related Error messages: No error messages

When I try to edit a html block it is hard to see the green on dark grey.
I checked the default style and the text is green on white, which is easy to see.

I would like to change the text color to yellow or gold or white - something that would show up better on the dark grey background.  I only want the text color to change while I am in the BR Final theme.

I went to the BR Final folder and looked at the css.index but couldn't see where the color was defined.  I suspect that it is using the default color.

Any help would be greatly appreciated.

[Maxx1]

Ron,

If you pm me temp admin access log-in I'll check this and the header that is way off at the top!
I work at Crip's site anyway!
Not to worry I'll tell you what I find so you'll know!

If you have other little stuff, let me know tomorrow I'll try to hix them!

regards,
Maxx

[Ron Austin]

Thanks a lot Maxx1.  I have set up an account and have PM'd you the details.

[Maxx1]

Ron Plz ck your PM!

regards,
Maxx

[ZarPrime]

Ron Austin,

I'm sorry I missed this topic when you first posted it.  I will let Maxx try to solve your issue but, Maxx, if you need help with this, feel free to touch base with me.

FWIW, let me see if I can relate some of the issues with this.  That green font text color that Ron is talking about is actually neither part of TinyPortal nor of the custom theme.  It is actually part of the Whizzywig plug-in that is used in TinyPortal.  That color is #060, but can also be represented as #006600.  Again, this color can conceivably be changed in the /tp-files/tp-plugins/javascript/whizzywig/whizzywig.js file though that value (#060) is located in 2 different spots in the javascript code, on line 54 and line 61 ...

Code Select Expand


o(idTa).style.color='#060';
o(idTa).style.zIndex='2';
} else w('<input type="hidden" id="wzhid_'+idTa+'" name="'+idTa+'" />');
h(idTa);
var frm=o(idTa).parentNode;
while (frm.nodeName != 'FORM') frm=frm.parentNode;//if not form, keep trying
addEvt(frm,"submit",syncTextarea);
w('<style type="text/css">button {vertical-align:middle;padding:0;margin:1px 0} button img{vertical-align:middle;margin:-1px} select{vertical-align:middle;margin:1px}  .wzCtrl {background:ButtonFace; border:2px outset ButtonShadow; padding:5px;} #sourceTa{color:#060;font-family:mono;}</style>');


I'm not sure which code you would have to change or even whether you would have to change both.  Some experimentation on this would have to be done.

The problem manifests itself when you are using the editor with a dark theme.  This is because the textarea that the font is used with will be dark as well on a dark theme, and likely clash with that green font color and be difficult to see.

The easiest way to fix this would be to change the font color so that it would look good on both a light and a dark background.  The following website may be useful --> http://www.zspc.com/color/index-e.html

When you get to that site, put #006600 (or #060) in for the "TEXT RGB:", select the BGCOLOR radio button above it, and then start clicking on different colors for the background.  If you first click the pure white square in the upper right corner of the color box, you'll note that the green text looks good on a white background.  If you then click on the pure black squre in the lower left of the color box, you'll see that the green font is a little hard to see on a black background.

After a little bit of experimentation, I have found that #FF6600 (or #F60) for the "TEXT RGB:" looks pretty good on both a white and a black background.  Thus, that color would generally be a good choice for the font text color in the javascript, if you wanted to change it.  In other words, it would probably work for both dark themes and light themes, for the most part.

Now, if you didn't want to change the font color specified in the javascript file, the only alternative is to change the "textarea" background color in the index.css file of the custom theme.  If this is what you choose to do, Maxx can help you with that.  Oh, and BTW Ron, I'm sure that Maxx has mentioned this to you, but, if you are going to make changes like this, be sure to first backup the original files that you are editing, in case you make a mistake.

ZarPrime

[Maxx1]

Jim,

Thanks for your input here did not know this!
Very interesting...
regards,
Maxx

[Ron Austin]

Thanks for the valuable information Zar Prime.  Maxx1 has been very helpful also.  Sure is nice to have knowledgeable people help out a noob like me.

I'll let you know how the color change works out.

[Maxx1]

Jim,

Do you think we could add this to our TP tweaks list, if we get a bunch little things tweaked out, they could be all tested at my site and then if Brad wants can add them all at once???

just thinking!

regards,
Maxx

[ZarPrime]

Well, it's possible but I don't want to add too many things into a tweaks list, if you know what I mean.  I already added the RSS block feature request to the bugtracker.  Something like this is just a change to the javascript for the editor and is not really an issue per se with TinyPortal.  However, if it will let users with dark themes be able to use the editor easier, it might be a worthwhile tweak.

Have you been able to figure out what edits have to be made in the javascript file for the editor to look good on both light and dark themes yet?

ZarPrime

[Maxx1]

no this why I was asking , if we should look into this, I fixed the problem that Ron had with the one block by re writing the HTML resizing the images and tables with HTML code, so he should not be in a rush for this right now, if we think it worth trouble I'll dig into it right a way!

I'm also considering some other things, but We can take them one at a time!

regards,
Maxx