Signature Text Box

[C4G-TK]

Good Morning!

I am using RC3 with a dark theme.  My input textboxes are all darker in nature except in the signature area where you type in your signature..  Because I use a dark theme, my font color is light, so my problem is that I have a light font color with a light input background.  This is the only place where I have this trouble.

I've looked in Profile.template and in index.css, but can't seem to figure out how to change the background color from white to something darker in order for people to see what they've typed!  LOL

Posted a few examples of other input boxes on the forum and the signature box to show what I'm talking about. 

Could someone point me in the right direction, so I can play with getting it to a workable color, please?

Thanks.


BTW, I uninstalled the Current Signature and Signature Dropdown Choices Mods and it had no effect on the box, so they aren't interfering.  This is the only input box on the forum that shows up as white.  All other boxes show up dark (which are correct)!



In index.css, it shows as this

Code Select Expand

input, button, select, textarea
{
font: 95%/115% verdana, Helvetica, sans-serif;
color: #FFFFFF;
background: #272727;
border: 1px solid #474747;
padding: 2px;
}

But, THAT one input box just doesn't want to obey!  LOL  So, what do I add to make it obey?

[Kays]

Try doing a view source of that page and see if there's a class applied to that field.

[C4G-TK]

Ok, I did the page source and went ahead and deleted the parts that pertained to the Signature Dropdown Choices Mod.  I deleted other things that I thought didn't pertain to it as well.

This is what I'm left with:

Code Select Expand

<dl>
<dd>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function bbc_highlight(something, mode)
{
something.style.backgroundImage = "url(" + smf_images_url + (mode ? "/bbc/bbc_hoverbg.gif)" : "/bbc/bbc_bg.gif)");
}
// ]]></script>
<textarea class="editor" onkeyup="calcCharLeft();" name="signature" rows="5" cols="50">test</textarea><br />
<dt>
<strong>Current Signature:</strong><br />
<dd class="signature">test</dd>
</dt>
<script type="text/javascript" src="http://www.neighborhoodq.com/Themes/default/scripts/spellcheck.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[
function tick()
{
if (typeof(document.forms.creator) != "undefined")
{
calcCharLeft();
setTimeout("tick()", 1000);
}
else
setTimeout("tick()", 800);
}
function calcCharLeft()
{
var maxLength = 500;
var oldSignature = "", currentSignature = document.forms.creator.signature.value;
if (!document.getElementById("signatureLeft"))
return;
if (oldSignature != currentSignature)
{
oldSignature = currentSignature;
if (currentSignature.replace(/\r/, "").length > maxLength)
document.forms.creator.signature.value = currentSignature.replace(/\r/, "").substring(0, maxLength);
currentSignature = document.forms.creator.signature.value.replace(/\r/, "");
}
setInnerHTML(document.getElementById("signatureLeft"), maxLength - currentSignature.length);
}
addLoadEvent(tick);
// ]]></script>
</dd>
</dl>



What do I do next? 

Normally, I would have gone into my Profile,template and looked for a windowbg or catbg or something in the code and changed it to see if it made a difference, but I just don't see anything.

[Kays]

Check the CSS for the class editor there might be a background written in there. (look in editor.css I think)

Code Select Expand


<textarea class="editor" onkeyup="calcCharLeft();" name="signature" rows="5" cols="50">test</textarea>

Also, not that it's effecting anything, the JavaScript before that code is a part of the mod you are manually removing.

[C4G-TK]

Ok...
I went back and I uninstalled the two mods.

I am left with this:

Code Select Expand

<dl>
<dt>
<strong>Signature:</strong><br />
<span class="smalltext">Signatures are displayed at the bottom of each post or personal message. BBCode and smileys may be used in your signature.</span><br />
<br />
<input type="button" value="Spell Check" onclick="spellCheck('creator', 'signature');" class="button_submit" />
</dt>
<dd>
<textarea class="editor" onkeyup="calcCharLeft();" name="signature" rows="5" cols="50">[center][size=12pt][color=pink][b]If you&#039;re having trouble, feel free to message me for assistance![/b][/color][/size][/center]</textarea><br />
<span class="smalltext">Max characters: 500; characters remaining:  <span id="signatureLeft">500</span></span><br />
<span class="smalltext">Images in your signature must be no higher than 200 pixels</span>
<script type="text/javascript" src="http://www.neighborhoodq.com/Themes/default/scripts/spellcheck.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[
function tick()
{
if (typeof(document.forms.creator) != "undefined")
{
calcCharLeft();
setTimeout("tick()", 1000);
}
else
setTimeout("tick()", 800);
}
function calcCharLeft()
{
var maxLength = 500;
var oldSignature = "", currentSignature = document.forms.creator.signature.value;
if (!document.getElementById("signatureLeft"))
return;
if (oldSignature != currentSignature)
{
oldSignature = currentSignature;
if (currentSignature.replace(/\r/, "").length > maxLength)
document.forms.creator.signature.value = currentSignature.replace(/\r/, "").substring(0, maxLength);
currentSignature = document.forms.creator.signature.value.replace(/\r/, "");
}
setInnerHTML(document.getElementById("signatureLeft"), maxLength - currentSignature.length);
}
addLoadEvent(tick);
// ]]></script>
</dd>
</dl>

Looking at the page source and seeing where the information shows, I now understand why you said the editor.css file.

Because the information that I entered in the box correlates to the following part of the source:

Code Select Expand

<textarea class="editor" onkeyup="calcCharLeft();" name="signature" rows="5" cols="50">[center][size=12pt][color=pink][b]If you&#039;re having trouble, feel free to message me for assistance![/b][/color][/size][/center]</textarea><br />

I get it now.  (Lightbulb went off there...lol)  If I understand the code correctly, it is saying that the textarea is being defined by the editor, that it calculates the characters left by what you type in the box for the signature and that the box itself is 5 rows by 50 characters or columns.  (I'm not good with coding, but after sitting and looking at it and looking at it, I get it now. (DING!)

So, I went to the editor that I have on my forum which there are two.  One says editor and the other is the editor_ie.  I went ahead and compared both of them to the theme that I am using and my theme does not replace the original files of Curve. 

So, I took the next step which was to download another copy of RC3 and compare the two files I am using with that of the download.  (Just to make sure I was using the correct files and that nothing had happened in the original transfer.  Both of these files are exactly alike with no changes to them.  I tested changing the backgrounds to #999999 to see if there was any change, hard refresh, cleared the cache on the forum, and nothing changed.  The current code is back to how it was.

Code Select Expand

/* This is the editor's playground (textarea for non-wysiwyg, iframe for wysiwyg). */
.editor, .rich_editor_frame
{
border: 1px solid #808080;
padding: 2px !important;
margin: 0;
}

.rich_editor_frame
{
background: #fff;
}

/* The resize handle. */
.richedit_resize
{
height: 5px;
font-size: 0;
background: #eee url(../images/bbc/resize-handle.gif) no-repeat 50% 1px;
border: 1px solid #ddd;
border-top-width: 0;
cursor: s-resize;
}


So, I'm narrowing it down, right?  My next plan of action was to look at my excel sheet that lists all the files that have been altered by Mods that I use.  As expected, none of my mods change anything in editor.css which is pretty much what I had already determined.  HOWEVER...DING DING DING... I did have a mod that changed the editor.js code, so I'm now looking to see what that Mod changed.  I may just uninstall the mod real quick to see if the signature area restores because that will definitely tell me if that's the culprit.  But, I'm going to compare what the code changed regardless even if it doesn't revert back to normal.  Will update in a bit.

Update:
Uninstalling the mod did nothing, so I went ahead and uploaded a fresh version of the editor.js (just in case) from RC3.  Still no change.

Ok, now I'm at a loss again.

[C4G-TK]

Finally making some progress here!!!!!!!!!!!

Ok, I couldn't figure it out, so I decided to go ahead and update my other forum to RC3 and after installing each Mod on that forum, I would check the signature area under that site.  (I didn't want to have to go back and uninstall/reinstall EVERY mod on the site that was having the problem because I have 60+ mods on that site)

So, I installed my 20th Mod GOOGLE MEMBER MAP, and BOOOM!  The signature area turned white!  I found the culprit.  Now, to try to figure out from the code why it did it.




BINGO!!!!!!!!!!!!

Find:
Code: [Select]

Code Select Expand

#map input, textarea {background-color: #ffffff;}
and change the #ffffff to a suitable color!

Finally fixed! BOOYAH!



Thank you Kays for helping me along the way!  The advice may not have lead me to the actual solution, but without going on the path, I wouldn't have found it in the end.  Thank you much!

[Kays]

Glad you got it sorted out.

If you are using FIreFox, there is the FireBug addon which will allow you to check which classes affect an element. It probably would of shown the root of this problem.

[Arebias]

Would have been nice for you to share what file you made this edit in. 

Anyway after an hour and a half of searching here it is for anyone else:  themes/default/Profile.template.php