Author Topic: Can't change font color  (Read 1517 times)

INEPTPablo

  • Newbie
  • *
  • Posts: 3
    • View Profile
Can't change font color
« on: April 20, 2019, 11:59:26 AM »
I include the Seating Chart on my layout. If I configure it to use a predefined global property, which has a dark green background, it shows nicely. If I configure it to local properties and I set the font color to black and background to a lighter color the table always displays with white text and grid. I cannot change these colors, yet I see different colors in some of the predefined layouts. What's the trick? Besides the setting window changes, I tried a style attribute: <seatingchart style="font-family: Arial; font-size: 36pt; font-weight: bold; color: #ff0000; width: 100%" format="diagram" columns="3">, just as a test. nothing.

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 6216
    • View Profile
Re: Can't change font color
« Reply #1 on: April 22, 2019, 05:36:38 PM »
You can change the colors using the tableBodyFont and tableEdgeFont attributes of the seatingChart token.  I would advise using the Token Builder dialog, because it's a lot easier and those attributes are somewhat complicated.  For example:

<seatingChart tableEdgeFont='{"Name":"Segoe UI","Size":18,"Bold":false,"Italic":false,"Color":"#fff","BGColor":"#048","Underline":false,"Grad":{"ColorFrom":"#048","ColorTo":"#000","Type":0}}' tableBodyFont='{"Name":"Segoe UI","Size":18,"Bold":false,"Italic":false,"Color":"white","BGColor":"#080","Underline":false,"Grad":{"ColorFrom":"#080","ColorTo":"#000","Type":0}}'>

To use the Token Builder, just use the mouse to highlight part of the text and the "Edit Token" button should become green.  Click Edit Token and it will open the Token Builder dialog to easily edit the token.  When you're done changing options, press OK and the proper text will be re-inserted back into the cell contents.

FYI, the reason the cell font/colors don't extend to the seating chart is because the seating chart is built using HTML tables, and IE (and other browsers a long time ago) had a bug which didn't allow the table to inherit font characteristics.  So the attributes had to be added to the <seatingChart> token.

famous58

  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: Can't change font color
« Reply #2 on: March 15, 2022, 05:14:53 PM »
Is this also why I'm not able to center the cell in the container? No matter what I do the seating chart is aligned left.

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 6216
    • View Profile
Re: Can't change font color
« Reply #3 on: March 15, 2022, 09:23:21 PM »
Is this also why I'm not able to center the cell in the container? No matter what I do the seating chart is aligned left.

Layout items that render using tables are "block" items, and centering them (as well as other styling operations) doesn't work quite the same.  But it's usually not hard to overcome, as long as you know how.  Try wrapping the token in a <div> with its display set to inline-block.  For example:

<div style="display: inline-block">
  <rankings showTimeOut="true" showRoundOut="true" showHitman="true" showHits="true" showWinnings="true" showPoints="true" showColumnTitles="true" showPlayerImages="true">
</div>


The centering of the cell should then be able to center that.