im modifying a template that is kinda cryptic and idont completely understand it. I want to change colors and other things. I managed to change mostly everything except this:
I want to change the color of that text from black to white, but that rgb(0, 0, 0) doesnt let me do it with CSS and i cant just take it off since its generated by some cryptic javascript code i cant figure out so i guess the only way is to write another javascript that overrides the color:rgb(0, 0, 0) property and make it white but im not sure on how to do it. Can you give me some ideas?
In rgb notation, white is rgb(255, 255, 255) which, I think, can be abbreviated to rgb(255). The strange thing about your example is that the div does not have an ID. I have no idea how the color could be changed in JS without an ID. Are you sure that it is correct?
Yes, its correct. And yes, its a problem it doesnt have an ID. Maybe we can do something with the class? like chaging all the elements with gwt-HTML class and that have rgb(0)? will it work?
It has nothing to do with the rgb assignation, but rather that inline styles will override css declatations.
There are a couple of ways around it, but the simplest (if you want all divs with the class name gwt-HTML to have white text) is to put this at the end of your body section, just before the </body> tag:
Code:
<script>
var divs=document.getElementsByTagName("div")
for (var i = 0; i < divs.length; i++) {
if(divs[i].className=="gwt-HTML"){
divs[i].style.color="white";
}
}
</script>
Thanks. Actually not all of them, only the ones with rgb(0) because the background is dark, so text wont be readable in black. Also, its a chat and content is generated in real time, so i need the code to change the color dynamically everything a message appears. I wonder if thats possible.
var divs=document.getElementsByTagName("div")
for (var i = 0; i < divs.length; i++) {
if(divs[i].className=="gwt-HTML" && divs[i].style.color=="rgb(0, 0, 0)"){
divs[i].style.color="white";
}
}
<script>
var divs=document.getElementsByTagName("div")
for (var i = 0; i < divs.length; i++) {
if(divs[i].className=="gwt-HTML" && divs[i].style.color=="rgb(0, 0, 0)"){
divs[i].style.color="white";
}
}
</script>
exactly right before the </body> tag? because seems like it wont let me put it there. The parsed code shows some bits of code after whatever i put before the </body> tag. I wonder if i can put it somewhere else such as within the head tag.
sounds like you're doing it wrong to me. it should be fine just before the </body> tag. can you show a link to your page?
if worse comes to worst, you can put it in the head, but you would have to wrap it in a window.onload function, to give the page time to render the divs
The problem is that i cant put it right before the </body> tag because the full code is very complex and its fully generated by javascript so i cant tell what to modify in order to get it show right there. I can put it inside head or after the <body> tag though. I will send you the link to my page by PM for security reasons. Thank you for your help.
aaaah. I get it now. This is the problem: your page creates divs, and the code I gave you will only work on divs that have already been created. I think really your best option is editing the css - if you can't do that, you would have to look for some sort of listener that tells you when a new div has been added and run the code then.
With css its imposible as you may see, since the style property in the div overrides the css style. However i would like to know more about that listener you say. Whats about?
it's not a simple thing, as there is no cross-browser implementation of a "DOM changed" listener (and why not, I may ask?)
you would have to go into the code that creates the chat, find out if there is some event that happens every time a new post is made, then run that code every time it happens.
the sleazy workaround would be to wrap the whole thing in a function and call that function every, say, half second using setInterval...
I see. That sounds terribly complicated. The source code is a real pain in the ass. I've located the piece of code that adds the rgb property to the div. Its this:
p=b.c;
terribly simple, huh? if i take it off then that rgb thing disappears from the div. However, now you wont be able to change your font color. I wish i could trace the function that does all this and just set white as the default color but this level of code is too much for me.
Reply With Quote
Bookmarks