Price Chart ideas for improvement

Ask the Community General Questions
7

Hi there, @Brad2 :waving_hand:

Thank you for waiting!

1. Here is the CSS code to change the Primary color individually for each table:

.es-widget-container {
  --table-1-primary: rgb(141, 56, 255);
  --table-2-primary: blue;
  --table-3-primary: black;
}

/* First Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) *:is(.es-title-container, .es-button, .es-bar) {
  background-color: var(--table-1-primary) !important;
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(1) .es-toggles-toggle-active) .es-features-feature-icon svg {
  fill: var(--table-1-primary);
}

/* Second Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) *:is(.es-title-container, .es-button, .es-bar) {
  background-color: var(--table-2-primary) !important;
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(2) .es-toggles-toggle-active) .es-features-feature-icon svg {
  fill: var(--table-2-primary);
}

/* Third Table */
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) *:is(.es-title-container, .es-button, .es-bar) {
  background-color: var(--table-3-primary) !important;
}
.es-widget-container:has(.es-toggles-wrapper:nth-child(3) .es-toggles-toggle-active) .es-features-feature-icon svg {
  fill: var(--table-3-primary);
}

Give it a try and let me know if it worked :wink:

I also agree that it would be awesome to have this option right in the settings and I’ve added this idea to the Wishlist on your behalf -Individual color scheme for each table.


2. Since the Secondary color controls only the font color, I’ve requested a detailed code to change the color of all text elements individually for each table. I’ll update you once the code is ready :slightly_smiling_face:


3. Regarding the Accordion feature, as far as I see your website is built on the Squarespace builder. If your Squarespace plan allows adding custom codes, you can add this Accordion block to your website, and we’ll install the widget there using a custom script :slightly_smiling_face:

1 Like