Changing the style properties via Tritium - css

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;">- on Moovweb</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

Answer 1

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!