Sydney Pro Price table Widget "Features in bold"

Hi,

I would like to have some of my features in the price table in bold. Is this possible without using custom CSS?

The price tables are located here:

There is currently 6 tables. I want the first feature on the top 3 tables in bold.
Its these texts if this is confusing.

  1. Then £27 per month
  2. Then £54 every 3 months
  3. Then £155 per year

Tried this but didnt really solve it:

.sydney-pricing-table:first-child .plan-feature:first-child {
font-weight: bold;
}

So how will I write this custom CSS to make table 1,2,3:s first feature bold with affecting table 4,5,6 which is in another price table widget.

Thanks in advance

Hello there,

To help you easier styling your specific price tables, assign a custom class name from page builder. Edit your selected “Sydney: Pricing tables” widget, expand the Attributes tab which is located in the right side, then insert a class name in the Widget Class input field. For example: my-pricing-1

Then use the below CSS code to style the feature name:


.my-pricing-1 .sydney-pricing-table h4 {
  font-weight: bold;
}

The code above applies for all feature names. To target specific the first pricing table, use this code:


.my-pricing-1 .sydney-pricing-table:nth-of-type(1) h4 {
  font-weight: bold;
}

For the second one, use this:


.my-pricing-1 .sydney-pricing-table:nth-of-type(2) h4 {
  font-weight: bold;
}

I hope this reply helps.

Regards,
Kharis

Hi Kharis and thanks for your help.

However, didnt solve my problem.

I added a class in attributes in Sydney Pricing Tables under Widget Styles/Attributes/Widget Class,
named it my-pricing-1

Then added the following Custom CSS code:

.my-pricing-1 .sydney-pricing-table h4 {
font-weight: bold;
}

Unfortunately that didnt change anything.

I did it wrong or perhaps my explanation was poor?
No way of wrapping text in features in <span>? or just use this <b>Then £27 per month</b> that would be much easier :slight_smile:

Thanks again

I think you misunderstood, your suggestion is making the header h4 bold, didnt realize this first. What I want is to make the first plan feature bold. “Then £27 per month” in next price table “Then £54 every 3 months” and in the third price table “Then £155 per year”. Those feature should be bold, not the others.

Tried this code:
.my-pricing-1 .sydney-pricing-table .plan-feature {
font-weight: bold;
}

That however makes all the features bold so need to target the first feature only

BEst regards

This code solves the first feature in the first pricing table but cant figure out for price table 2 and number 3

.my-pricing-1 .sydney-pricing-table:first-child .plan-feature:first-child {
font-weight: bold;
}

Hello there,

Try this code:


.my-pricing-1 .sydney-pricing-table:nth-of-type(2) .plan-feature:first-child,
.my-pricing-1 .sydney-pricing-table:nth-of-type(3) .plan-feature:first-child {
  font-weight: bold;
}  

Regards,
Kharis

Yeah that worked like a charm, where do you find those references?

Thanks alot Kharis

Take a look at this w3schools.

Regards,
Kharis