How to set font color on a text inside a group on event?

[tomaszs]

Hello,

Steps to reproduce:

1. Open Google Web Designer
2. Add text called "text1". Set color of the text to red.
3. Add text called "text2".
4. Select both texts and create a group called "textgroup"

Now you want to change the color of text1 to blue on mouseover:

5. Add event to text1. Select "text1" as the receiver and mouseover as the event, and CSS as the instruction.

6. Put CSS instruction: "color" with value "blue" and "background-color" to value "yellow".

7. Preview the result in browser - you see red text. Mouse over the text1

Effect:

Background color of text1 changes to yellow.
Text color does not change to blue.

Expected behaviour:

Text color does change to blue.


----

I've reviewed the CSS and it ocurrs that when you set red color in the text editing options above the designer field it is applied to a class applied to the span with text inside "text1".

But when you set color in event designer it is set to "text1" div.

So browser inherits the blue settings but overrides it with red color since it's more specific. It is standard CSS behaviour.

So my question is:

How to set properly color of text to blue in event using Google Web Designer?
Is there any way to indicate in event editor i want it to be applied to child span node?
Can i set a ID to text span? So i can set it as event receiver in event designer?

Or is there other way to do it? I've tried !important, but it does not work.

[Sukhbir Kaur]

Hi ,

Can you please try the following steps and let me know if it works for you . You can try  applying styles to the text container instead of selecting  text ( span ) and styling .

Steps: 

1 . Create a GWD Ad / HTML file 

2.   Select the Text tool and draw  a text container on stage .

3. Type some text " Hello" 

4. In PI add element ID  "text1"

5. Select the Text tool and draw  a text container on stage .

3. Type some text " World" 

4. In PI add element ID  "text2"

6. Select both the text container and convert it to a group 

7 . Add a group Id in PI " TextGrp"

8 Right click on the group to Add Event 

   TextGrp>mouseover>Setstyles>Textgrp text1 > background : Green   color Yellow 

9 . Save and preview in browser 

 I have a attached the sample file for your reference 

I hope this helps .

Thanks

Sukhbir

(GWD Team)