Change color of feature icons in Pricing Table

[user2283]

@Max @Helga It’s not working on the duplicate widget I created. Take a look at the screenshot and let me know the solution for this. The CSS is added accordingly mentioned in this thread.

[Max]

Hi there, @user2283

The thing is that you’ve added the code for the wrong icon (Check Mark Circle instead of Stop icon).

If you add a code for the Stop icon, everything will work fine:

.es-features-feature-icon-stop {
  fill: blue !important;
}

Let me know if this explains things or if you have any questions left

[user2283]

@Max It works. Can you help me how to change the colors of the white features section like on the left side dark color? Thank you!

[Max]

Sure! You can change it in the Head Column section on the Appearance tab of your widget’s settings:

Let me know if you have any further questions

[user2283]

@Max No, I want to change the color of small text background where the pink icon, and 2/mon text is. All rows on the right side which are white now.

[Max]

Ah, I see. Apologies for misunderstanding!

You can change the background color of a specific row using this CSS code:

.es-features-feature:nth-child(2) {
  background-color: green;
}

Here you should set the order number of the row you’d like to customize:

Try it out and let me know if it helped

[user2283]

@Max

.es-features-feature:nth-child(2) {
  background-color: green;
}

@Max Where I can find what the color code of the rows now? Like one is dark now and one is lighter. Where I can get the color codes of that? Is there not any way in the widget setting to change the color from their rather then adding custom css for each because I’ve many tables.

[Max]

The color code for the darker background is rgba(17, 17, 17, 0.05), the 2nd color is just white.

You can find them on the Styles tab by inspecting the element through the DevTools:

Unfortunately, there is no way to change the background color of the rows in the settings, but I agree that it would be great to have this option.

I’ve added this idea to the Wishlist on your behalf - Option in the settings to change the background color of each row. If more users upvote it, it might be considered in the future

[user2283]

@Max

rgba(17, 17, 17, 0.05)

Thank you @Max There is white space/color at the bottom. Where it comes from? How I remove the extra space or change the color of the white part? I’ve attached the screenshot for the reference where red line is. Thank you

[user2283]

@Max In mobile view, it looks like this which is not good. Can you please assist me on this? Thank you

[Max]

Sure! We’ve added this code to the Custom CSS field to fix both issues:

.es-features-feature:nth-child(4),
.es-column-container:before {
  background-color: #101d33;
}

Since there were some unpublished changes in your widget, we’ve saved d the code in the settings, but haven’t published it on your website.

If you like the result, feel free to click on the Publish button in your widget editor

[user2283]

Thank you @Max . I’ve two questions now. Why there is extra space at the bottom and secondly can we add lines between the columns so for example after business light grey line which show separation between Business and Professional columns content? So it not look all on same?

[user2283]

@Max Do we have any class to target the areas where I mark red lines to change the color of each?

[user2283]

@Max Take a look at this as well. In my previous table of Local SEO, I’ve alternate colors where I’ve the features with icon and text but in this table it looks different. The code is same though. Can you help me with this please?

[Max]

1. Here is the code to remove the padding at the bottom:

.es-column-padding-block {
  display: none;
}

2. This code will change the color of the dividers between columns to make them more noticeable:

.es-column-container:after {
  border-color: red !important;
}

3. Do you wan t to individually target each line within each column? For example:

Metadata Organization Business line - red

Metadata Organization Professional line - black

Metadata Organization Enterprise line - white

Is that something you’d like to achieve?

4. Do you mean that the background of all lines is the same? If this is the case, you just need to set different color codes for the lines. Currently, it’s the same for all lines:

[user2283]

@Max Let me explain what I’m looking for. As you can see in the picture, there is a red checkmark I draw and I want the same color across the line in next 3 boxes where the pink icon is under Business, Professional and Enterprise. So the background color on Metadata Optimization Box, I want the same color to continue in next 3 boxes where the checkmark icon is. So I’ve alternate row colors.

Similarly, there is a yellow mark I draw and I want the same color across the line in next 3 boxes where the pink icon is under Business, Professional and Enterprise.

Red and Yellow are just on purpose to show you. The colors will be different and I can change that in css once you provide me.

I hope I explain better this time

[Max]

For this, you just need to change different colors for each row. Currently, the codes for all lines have the same color:

If you change it, you’ll be able to make them different:

Please let me know if this explains things or if you have any questions left

[user2283]

@Max

.es-features-feature:nth-child(2) {
  background-color: green;
}

@Max I still see the gap on last row is bigger then above rows. Can you please assist me with this?

[Max]

Please let me check it with the devs. I’ll update you tomorrow

[Max]

Thank you for waiting!

Please add this code to the Custom CSS field and let me know if it worked

.es-column-element {
  margin-bottom: 0;
}