www.webdeveloper.com
Results 1 to 13 of 13

Thread: Override html style property

  1. #1
    Join Date
    Jul 2006
    Posts
    373

    Override html style property

    Hi,

    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:

    HTML Code:
    <div class="gwt-HTML" style="display: inline; color:rgb(0, 0, 0);">[TEXT GOES HERE]</div>
    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?

    Thank you.

  2. #2
    Join Date
    Mar 2012
    Posts
    1,662
    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?

  3. #3
    Join Date
    Jul 2006
    Posts
    373
    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?

  4. #4
    Join Date
    Nov 2010
    Posts
    1,088
    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>

  5. #5
    Join Date
    Jul 2006
    Posts
    373
    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.

    Thank you.

  6. #6
    Join Date
    Nov 2010
    Posts
    1,088
    so...
    Code:
    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";
    	}
    }
    ?

  7. #7
    Join Date
    Jul 2006
    Posts
    373
    Hi,

    must i put the code like this:

    <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.

    Thanks.
    Last edited by supercain; 10-08-2012 at 01:52 AM.

  8. #8
    Join Date
    Nov 2010
    Posts
    1,088
    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

  9. #9
    Join Date
    Jul 2006
    Posts
    373
    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.

  10. #10
    Join Date
    Nov 2010
    Posts
    1,088
    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.

  11. #11
    Join Date
    Jul 2006
    Posts
    373
    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?

    Thank you.

  12. #12
    Join Date
    Nov 2010
    Posts
    1,088
    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...

  13. #13
    Join Date
    Jul 2006
    Posts
    373
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles