How to change color of a html symbol used in html table and post data on confluence ?

[Shaw]

I'm trying to change the color of a html geometric symbol when post data of a html table on confluence . I followed utf-8 html character from here https://www.w3schools.com/charsets/ref_utf_symbols.asp

 The problem is that the color of this symbol isn't changing and shows black colored filled circle on confluence page . Where as in an online html editor this code prints a green colored circle. 

I tried below in my code:

'<span style=\'color: transparent; text-shadow: 0 0 0 rgb(0, 128, 0);\'>&#9899;</span>'

here is the final html result:

<table><tbody><tr><td>symbol <span style=\'color: transparent; text-shadow: 0 0 0 rgb(0, 128, 0);'>&#9899;</span></td></tr></tbody></table>

On confluence it prints as:

symbol ⚫

I want to have this circle symbol filled and print with a different color other than black. I'm not sure if this is a confluence problem or the way I'm using <span> style is incorrect or css property text-shadow not allowed .

I followed this as an eg https://stackoverflow.com/questions/48152562/changing-font-color-of-html-symbol

Kindly help.

[Shannon S]

Hello Shaw,

Happy to help with this.

Can you let me know what macro you are using or where you are inserting this code in Confluence exactly? Is this on the new editor?

Can you confirm that your Confluence version is the Confluence Cloud version?

Regards,

Shannon

[Shaw]

Hello Shannon ,

Actually, I'm inserting this html tags/ code(as a string variable) in a python script (.py file) and on executing the script that prints /reports this on confluence(using confluence API) as a table format result with that symbol wherever I'm inserting it. Primarily, I'm just concerned if its possible to change the color of html circle symbol (symbol unicode used &#9899; and span style to change its color)

[Shannon S]

Thanks Shaw,

I'm not quite sure why that might not be working, but would it be possible to just use the unicode for the color of the symbol you desire? 

For example:

⚫

Seems to be specifically for "Medium Black Circle" and 

🟢 

Shows a green circle.  

Regards,

Shannon

[Shaw]

Actually, on trying unicode char &#128994; it prints a square symbol instead of a green circle emoji. Hence , used medium black circle html emoji unicode and trying to change its color.

[Shannon S]

Shaw,

Thank you for your patience. I'm currently looking into this for you and should have more information on this in next few days.

Regards,

Shannon

[Shannon S]

Shaw,

Thank you for your patience.

This is likely because Confluence Cloud restricts any kind of modification of the theme itself, per Functional Differences in Confluence Cloud. This would include font color change (or symbols on a page, in this case.)

I asked earlier if you could confirm if you were on the Confluence Cloud version, but I didn't get that confirmation from you on your reply from the 30th. Can you please confirm that this is indeed for Confluence Cloud?

We will need some more information so we can test this on our end.

1. If my understanding is correct, you're sending some storage format via a Python file to a Confluence REST API Endpoint. Is that right? 
2. I won't require the full Python script itself, but please include the snippet where the symbol is being transformed to green.
3. What is the exact endpoint you are using?
4. What is in the body you are sending to the endpoint?

Please provide the exact steps you're following in order to accomplish this. Ideally, the green circle emoji should display in Confluence, because Confluence is able to display the unicode emojis. 

We'll work to determine (1) why the black symbol can't change from black to green, and (2) why the green circle emoji is not displaying.

Thank you!

Regards,

Shannon

[Shaw]

Hi @Shannon S 

Thanks for the reply and reaching out . 

I believe we use Confluence Cloud Standard.

Here is how I'm making a call in my python code:

base_url = 'https://somehostdomain/wiki/rest/api/content/' + page_id
...
...
# data processing logic
...

payload = {'id': page_id, 'type': 'page', 'status': 'current', 'title': 'Confluence report', 'space': {'key':'confluence_spaceKey'}, 'ancestors':[{'id':ancestor_page_id}], 'body': {'storage': {'representation': 'storage', 'value': data_value}}, 'version': {'number': version, 'minorEdit': 'true'}}

response = requests.put(base_url, data=json.dumps(payload), headers={'Content-Type': 'application/json'}, auth=HTTPBasicAuth(user,API_token))

Above, data_value variable is basically a  var that holds the html data as a string(unicode code and other html data ) which I'm trying to update to a confluence page. All html data is getting posted to confluence page perfectly fine except the color of that medium circle html unicode character.

 Hope this helps in giving some idea.

[Shannon S]

Hi Shaw,

Thank you for providing that. However, I'm missing some important details which I was requesting earlier. I'll need to see exactly what is inside the variable "data_value", the full body of the request. 

Thank you for your help!

Regards,

Shannon

[Shaw]

@Shannon S  I assumed that was clear from my original posted question and code block. Sorry about that. Here is a sample of what data_value variable holds .

data_value = '<table><tbody><tr><th><span style=\'color:red;\'>Title</span></th></tr><tr><td><span style=\'color: transparent; text-shadow: 0 0 0 rgb(0, 128, 0);\'>symbol &#9899;</span></td></tr></tbody></table>'

Does it help now? 

[Shannon S]

Hi Shaw,

We specifically needed to see how you were sending the storage format to Confluence, since from your original example we only saw the plain HTML. Thank you for providing that information.

We're running some tests now, and will get back to you shortly.

Regards,

Shannon

[Shannon S]

Hi Shaw,

Thank you for your patience. We were able to confirm that this type of customization will work in Confluence Cloud.

You'll first want to make sure that you're formatting the storage format properly before you send it to Confluence. In our test, we sent a GET request to obtain the page body via REST API to make sure the correct formatting is being used. See REST API Examples > Read content, and expand the body for details on how to do that. Example:

https://YOUR-SITE.atlassian.net/wiki/rest/api/content/#######?expand=body.storage

We then edit the body storage to include the example from the Stack Overflow page. I.e.:

<span style=\"color: rgb(42, 170, 82);\"> ● </span>

There are a few things to note:

1. The green circle emoji (&#128994;) is a new emoji as of 2019. Because of this, it will not display on all operating systems. I am on macOS Catalina and I am able to view it.  My colleague, who is on Linux (Ubuntu 18.10), sees a rectangle instead. This is the reason that was not working for you earlier.
2. We then tested using the black circle emoji (&#9899;), which was the emoji you were looking to change. When we ran the changes, we can confirm they went through on my colleague's Linux workstation. However, if I view the same page in macOS, you can see it's back to black. (See the image below.) I believe this is because macOS is displaying it as an image instead of as a symbol.
3. Finally, we tested using the unicode version of the symbol (&#9679;) and can confirm this also works. In this case, I can see the changes on macOS too. 

In the image below, the black circle emoji and black unicode circle have been changed to green, although the original black circle emoji is still displaying for me because I'm on macOS:  

My recommendation would be to use the unicode in your example instead of the emoji. This way you can ensure that the experience is the same across all environments.

I hope this helps, but do let me know if you continue to have any issues.

Regards,

Shannon

[Shaw]

Thanks @Shannon S I believe it could be the compatibility with OS X. I hadn't upgraded to Catalina OS X until this week and now after update when I use that green circle emoji symbol it shows perfectly fine on confluence as compared to others who haven't upgraded. To be on a safer side I'll use the option 3. unicode version of the symbol (&#9679;) with the necessary RGB hex code/color.

Thanks for looking into the issue.

[Shannon S]

Hi Shaw,

You're welcome! I'm glad we were able to test this on a variety of environments to help narrow down your issue.

If you continue to have any trouble with this feel free to let us know.

Regards,

Shannon