Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

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.

1 answer

1 vote

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

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)

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:

&#9899;

Seems to be specifically for "Medium Black Circle" and 

&#128994; 

Shows a green circle.  

Regards,

Shannon

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.

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

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

Like Daniel Santos likes this

Hi @Shannon Spaniol 

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.

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

@Shannon Spaniol  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? 

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

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:  

CleanShot 2020-01-14 at 17.21.26.png

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

Like # people like this

Thanks @Shannon Spaniol 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.

Like Shannon Spaniol likes this

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

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

480 views 24 9
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you