[PamelaParticipant]

Hi X Team,

Can you please tell me how to change three styles on my pricing table:

1) the background colors of each headline
2) reduce the font size of the price
3) insert a line in between each row in each column as depicted in the attached graphic

Here is the link to the http://westsidevirtualwebdesign.com/website-design-service/

Credentials follow in next post.

Thank you very much for your help in advance.

[PamelaParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thank you for writing in! #1 Add a unique class to each of your Table columns (e.g. myclass) and then define that class on Custom > Global CSS on Customizer.

.x-pricing-column.myclass h2 {
	background-color: red;
}

#2 Add this as well:

.x-pricing-column .x-pricing-column-info h3 {
	font-size: 30px;
}

#3 And this

.x-pricing-column-info ul>li,
.x-pricing-column-info ul>li:last-child {
	border-bottom: 1px solid #000;
}

Add this Custom CSS on top of the GLobal CSS.

After that check your entire custom CSS for syntax error here: http://csslint.net/ and resolve all found errors.

Cheers!

[PamelaParticipant]

Hi there,

I added many variations of the following code, and even tried other pricing table code in the forums, but nothing changes. I added !important just to see colors change, but nothing changes.

I even created a brand new pricing table page with just a pricing table on it, but it doesn’t change either.
http://westsidevirtualwebdesign.com/pricing-table/

Can you please help?

Thanks in advance.

/* Pricing Table Code */

/* First Row Main Header */
.my-class .x-pricing-column h2 {
    background: #416941;
    color: #fff;
}

/* Features Odd Rows */
.my-class .x-pricing-column ul.x-ul-icons li:nth-child(2n+1) {
    background: #e5e5e5;
    color: #000;
}

/* Features Even Rows */
.my-class .x-pricing-column ul.x-ul-icons li:nth-child(2n) {
    background-color: #cccccc;
    color: #000;
}

/* Pricing Row */

.my-class .x-pricing-column-info h3 {
    background-color: #000;
    color: #fff;
}

/* Featured Column Header Color */

.my-class .x-pricing-column.featured h2 { 
    background: #d0021b;
}

/* Featured Column Header Color */

.my-class [type="submit"] {
   background: ##d0021b;
   border-color: ##940113;
}

/* Check Mark Color  */

.my-class .x-pricing-column i.x-icon-check {
    color: #416941;
}

/* Times Color  */

.my-class .x-pricing-column i.x-icon-times {
    color: #d0021b;
}

[JoaoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[PamelaParticipant]

This reply has been marked as private.

[PamelaParticipant]

Was able to do everything except change the column header background.

[JoaoModerator]

Hi There,

Please use: .x-pricing-column.featured h2 {
    
    background-color: #2c3e50 !Important;
}

Hope it helps

Joao

[PamelaParticipant]

Thanks for your help!

This is the code I used.

/* Pricing Columns */

.x-pricing-column-info ul>li,
.x-pricing-column-info ul>li:last-child {
border-bottom: 1px solid #e5e5e5;
}

.x-pricing-column .x-pricing-column-info h3 {
font-size: 35px;
letter-spacing: 0px !important;
font-size: 3.4rem;
}

.x-pricing-column-info .x-price {
font-size: 35px !important;;
letter-spacing: 0px !important;
font-size: 3.4rem;
}

#x-section-2 .x-pricing-table .x-pricing-column:nth-child(1) h2 {
background: #7e92b2;
color:white;
}

#x-section-2 .x-pricing-table .x-pricing-column:nth-child(2) h2 {
background: #536e98;
color:white;
}

#x-section-2 .x-pricing-table .x-pricing-column:nth-child(3) h2 {
background: #294a7f;
color: white;
}

Thanks again so much for your support.

You can close this thread.

[NicoModerator]

Happy to hear that.

Thank you for sharing also the code. it would help others as well.

Feel free to ask us again.

Thanks.

[Author]

Posts