Changing the style properties via Tritium

Question

Newbie question, I'm working on a simple scenario: Changing the background color and the text of a giving element on my page using Tritium. My page looks like this:

<div class="hero" id="hero">
<div id="heroContentShort">
    <div class="heroContentShort">
        <h1 style="text-transform:capitalize;">My Text<span style="text-decoration:underline;font-weight:bold;"><a href="/pages/new.html" style="color:#FFFFFF">- on Moovweb</a></span></h1>
    </div>
</div>

On my .TS file I have the following:

insert("div", class:"cus_title"){
    insert("div", class:"cus_row1"){
      move_here("//div[@id='hero']/div/div/h1")
      attribute("background", "red")
      text("My New Text")
    }
  }

The above is successfully changing the text, although is not preserving any format nor is changing the background color to red.

What I'm doing wrong?

Thanks

score 3 · Answer 1 · answered May 23 '13 at 17:01

First and foremost, I highly recommend you not do the coloring in tritium. The DOM and the style should be separate. I would recommend you put this at the bottom of your main.scss file if you do not want to create your own page. Then you would do:

.cus_row1 {
  background-color: red;
}

That would get the background color to work perfectly, and correctly.

However, if (for some reason) you HAD to do this in tritium, I would instead do this:

  insert("div", class:"cus_title"){
    insert("div", class:"cus_row1"){
      move_here("//div[@id='hero']/div/div/h1")
      attribute("style", "background-color: red")
      text("My New Text")
    }
  }

The first reason, is that the background attribute is deprecated. Second, the user agent stylesheet can overwrite it. I hope this works for you!

Changing the style properties via Tritium

1 Answers1