bubble text on the hotspot image connector page

I would like to change the background color of the bubble text on the hotspot image connector page, among other things. However, I can't find the right CSS code. Does anyone know the CSS code for the bubble text?

Try something like the following:
.x_connectorHotspotImage_page div.hotspot_bubble {
color: red;
}

Hi @Ron. The code doesn't work anymore. I think because of Xerte 3.14. Can you give me the new code... or can you explain how to find the right code. Because I can't find it with F12.

Hi Corine
You're right there does seem to be a difference between 3.13 and 3.14 preventing my previous suggestion from working in 3.14 and I'm not sure what exactly.
However where are you adding this? Are you adding at project level or in the styles property of your connector page? If the latter you can just use:
div.hotspot_bubble {
color: red;
}
I usually include the page selector so that I can add the css at project level and only impact that page type or even when added on the page too. However something seems to have changed that is preventing that from working now so try without the page selector?

HTH
Ron

Thanks. It works now. I use the styles properties at page-level. Most of the time.

Hi
Just a quick update and general comment.
Firstly there was a change in 3.14 to fix an issue with the bubbles so that they are always above the page content which meant they were no long part of the same div structure as previously and therefore using .x_connectorHotspotImage_page div.hotspot_bubble no longer works but div.hotspot_bubble on it's own does.
However the reason I originally suggested using .x_connectorHotspotImage_page div.hotspot_bubble which worked in 3.13 is because it's better to use custom css in one place at project level but still limit what it impacts to specific page types. Lets say you have 3 different hotspot image connector pages in your project you really don't want to have to have the same custom css repeated in each of those pages so that if something changes you have to edit all 3 pages. Of course that gets even more of a problem if you have the same thing in multiple projects. For me the only reason to put the custom css at page level is if you only want to impact that page or if you want different changes on other pages.
In this specifc example if you use just
div.hotspot_bubble {
color: red;
}
at project level it will change all instances of text color in those divs on all your hotspot image connector pages (and any other pages where the same class is used) but then you can change it in one place.

HTH
Ron