[Shawn PParticipant]

Hello,

first I would like to say that X is the best theme I have worked with so far, it is great and enjoyable.

My question is how can I personalize/customize Pricing Table that you can find here http://paccatlanta.org/membership/ It is just a sample, and I need to work on almost every and each elements on this page.

But first, how can I add individual background colors to each and every table cell? I figured out how to change the font, but no idea how to customize colors of cells, rows etc.

I didnt create it with Customizer, but its is your demo content, so the code looks like this

[pricing_table columns=”3″]
[pricing_table_column title=”Individual” currency=”$” price=”200″ interval=”Per Year”]
[icon_list]
[icon_list_item type=”ok”]Mingle with Polish-American business community[/icon_list_item]
[icon_list_item type=”ok”]Attend events at member price + personal invitation [/icon_list_item]
[icon_list_item type=”ok”]Get the assistance you need to launch your career in the U.S.[/icon_list_item]
[icon_list_item type=”ok”]We help you create resume and arrange your J-1 visa[/icon_list_item]
[icon_list_item type=”ok”]Find internships, traineeships and jobs[/icon_list_item]
[icon_list_item type=”ok”]We look for a position that matches your profile[/icon_list_item]
[icon_list_item type=”ok”]Social and Business Events Newsletter[/icon_list_item]
[/icon_list]
[button style=”font-weight: 700; text-transform: uppercase;” href=”#buy” title=”Sign Up Today!” info=”popover” info_place=”top” info_trigger=”hover” info_content=”This is a great space to discuss what sets this plan apart from the others. Don’t fret, you don’t have to use it if you don’t feel like it!”]Sign Up Today![/button]
[/pricing_table_column]
[pricing_table_column featured=”true” featured_sub=”Featured” title=”Patron” currency=”$” price=”1500″ interval=”Per Year”]
[icon_list]
[icon_list_item type=”ok”]Mingle with Polish-American business community[/icon_list_item]
[icon_list_item type=”ok”]Attend events at member price + personal invitation [/icon_list_item]
[icon_list_item type=”ok”]Find employees, interns and trainees[/icon_list_item]
[icon_list_item type=”ok”]Access to personal HR-service[/icon_list_item]
[icon_list_item type=”ok”]Attend business workshops[/icon_list_item]
[icon_list_item type=”ok”]Business introductions and referrals[/icon_list_item]
[icon_list_item type=”ok”]Opportunity to be featured in our monthly newsletter[/icon_list_item]
[icon_list_item type=”ok”]Preferred partnership status with link and logo on website[/icon_list_item]
[icon_list_item type=”ok”]Opportunity to promote company’s services[/icon_list_item]
[icon_list_item type=”ok”]Permanent visibility on all PACC Atlanta invitations and newsletters[/icon_list_item]
[icon_list_item type=”ok”]Personal introductions for business development opportunities[/icon_list_item]
[icon_list_item type=”ok”]Access to all PACC Atlanta services including market entry assistance, extensive brand development and marketing[/icon_list_item]
[icon_list_item type=”ok”]1 corporate event to promote company[/icon_list_item]
[/icon_list]
[button style=”font-weight: 700; text-transform: uppercase;” size=”x-large” href=”#buy” title=”Sign Up Today!” info=”popover” info_place=”top” info_trigger=”hover” info_content=”This is a great space to discuss what sets this plan apart from the others. Don’t fret, you don’t have to use it if you don’t feel like it!”]Sign Up Today![/button]
[/pricing_table_column]
[pricing_table_column title=”Business” currency=”$” price=”800″ interval=”Per Year”]
[icon_list]
[icon_list_item type=”ok”]Mingle with Polish-American business community[/icon_list_item]
[icon_list_item type=”ok”]Attend events at member price + personal invitation [/icon_list_item]
[icon_list_item type=”ok”]Find employees, interns and trainees[/icon_list_item]
[icon_list_item type=”ok”]Access to personal HR-service[/icon_list_item]
[icon_list_item type=”ok”]Attend business workshops[/icon_list_item]
[icon_list_item type=”ok”]Business introductions and referrals[/icon_list_item]
[icon_list_item type=”ok”]Opportunity to be featured in our monthly newsletter[/icon_list_item]
[icon_list_item type=”ok”]Preferred partnership status with link and logo on website[/icon_list_item]
[icon_list_item type=”ok”]Opportunity to promote company’s services[/icon_list_item]
[icon_list_item type=”ok”]Permanent visibility on all PACC Atlanta invitations and newsletters[/icon_list_item]
[icon_list_item type=”ok”]Introductions for selected business development opportunities[/icon_list_item]
[icon_list_item type=”star”]Discount on all selected services[/icon_list_item]
[/icon_list]
[button style=”font-weight: 700; text-transform: uppercase;” href=”#buy” title=”Sign Up Today!” info=”popover” info_place=”top” info_trigger=”hover” info_content=”This is a great space to discuss what sets this plan apart from the others. Don’t fret, you don’t have to use it if you don’t feel like it!”]Sign Up Today![/button]
[/pricing_table_column]
[/pricing_table]

Now as you can see everything taken global settings colors, but I would really need to change it to make it more readable and attractive.

Thank you in advance for help.

[Shawn PParticipant]

Also, how to customize edit the button on my contact form that is here? http://paccatlanta.org/membership/

[Shawn PParticipant]

I meant here http://paccatlanta.org/contact/ is the send button, I also would like to customize it to look different.

[ZeshanMember]

Hi Shawn,

Thank you for writing in!

You can change the colors and backgrounds for table cells using CSS. To add that, please add the following to Customizer > Custom > CSS:

.x-pricing-column {
   background: #fff;
}

The above CSS code will change the background color for entire pricing table section. If you want to target each cell/row individually, you can add “style” attribute to each list item, like so:

[icon_list_item type="ok" style="background-color: #ff0000; color: #fff;"]Attend business workshops[/icon_list_item]

To style the send button on contact page. You can add the CSS code to #Customizer > Custom > CSS. Let’s say you want to make its background red, so you can add the following CSS code:

[type="submit"] {
   background: #ff0000;
   border-color: #CC7272;
}

You can change the colors as per your desire.

Hope this helps. If you still face any problem, please let us know. We will be happy to assist you. 🙂

Thank you.

[Shawn PParticipant]

Thank you so much, I truly appreciate your help. Could you also please tell me how to add individual background colors to column titles and these cells that includes price? I would like to use differenr color for each raw.

Also, I dont know how to add individual background color to the cells that includes Sign Up button.

I would like my table to has three different colors for column titles, prices backgrounds, as well as Sign up Background.

[Shawn PParticipant]

Just that you have an idea of what I am trying to achieve here is what I have done so far http://paccatlanta.org/membership/

[RadModerator]

Sure Shawn,

For title background color :

.x-pricing-column h2 {
background: black;
}
/* for featured title like at center */
.x-pricing-column.featured h2 {
background: red;
}

And for the Signup background :

.x-pricing-column-info {
background-color: pink;
}

Hope this helps.

[Shawn PParticipant]

Thank you for prompt response, but now I need to have three different colors in three title backgrounds, as well as signup background.

The solution you gave me gives me two option for title, and one for signup. Take a look what Id like to achieve http://paccatlanta.org/membership/.

Thanks again

[Shawn PParticipant]

For now I used the Soultion that I found in this post http://theme.co/x/member/forums/topic/styling-featured-header-on-pricing-table/

I added custom id o the shortcode [pricing_table_column] for example my first code looks like

[pricing_table_column id=”first-price-header-color” featured=”false” title=”Individual” currency=”$” price=”200″ interval=”Per Year”]

then I added to css

#featured-price-header-color h2 {
background-color: #dcaa41e;

but the problem is that while I was able to get three different colors for titles, the price cells still remained uncolored and for now I just used one color for three of them by adding

.x-pricing-column-info {
background-color: #75aab7;
}

How could I add three different background colors to the price and Sign up cells, what did I do wrong?

Thanks

[ChristianModerator]

Hey Shawn,

Please add a class to your [icon_list] like [icon_list class="col-1"] then use the CSS

/* For odd rows */

.col-1 .x-pricing-column-info ul>li:nth-child(2n+1) {
background: red !important;
}

.col-1 .x-pricing-column-info ul>li {
background-color: blue !important;
}

Hope that helps. 🙂

[Shawn PParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey Shawn,

The CSS didn’t work because you missed a } in your previous CSS. It works now. I’ve also modified the CSS I’ve given previously with the code below.

/* For odd rows */

ul.col-1>li:nth-child(2n+1) {
background-color: red !important;
}

 ul.col-1>li {
background-color: #98bfca !important;
}

/* For pricing row */

#first-price-header-color .x-pricing-column-info {
background-color:gray;
}

Hope that helps. 🙂

[Shawn PParticipant]

Guys, you are great thank you so much. I really appreciate that.

[ChristianModerator]

You’re welcome Shawn.

[jenzac1Participant]

I’m trying to follow along with the instructions in this discussion and I have a couple questions. First please forgive me. I’m not professionally trained in web design or development so I may not use proper terminology.

I’m working on a pricing table as well and I’m trying to figure out how to manipulate all of the different pieces (color, border, etc..) of the pricing table. I’m not sure exactly how I want my table to look look in the end yet but I want to know how to customize each different piece.

Right now I’d specifically like to know how to:

1. Change the color of the table border
2. Remove the extra row at the bottom
3. Change the color of the text in the body of the table
4. Right now I’m changing the colors in the Customizer which obviously changes all of my tables. How do I customize just one table?

Here’s the website I’m working on: http://www.connections.betateammidwest.com/telephone/

[Author]

Posts