Customizing the Pricing Table Continued

Support
#1

Hi There,

I’m trying to customize the featured sub-title text and interval text but what ever I try in the CSS at the page I can’t get it to work.

All the other elements I could modify thanks to the other topics at this side.

Can you advice me which css-tag to use to change the color of the text

My current CSS is:

/* 4 column Pricing Tables /
@media only screen and (max-width: 600px) {
.x-pricing-table[class="-column"] .x-pricing-column {
width: 100%;
}
}

/* to remove icons /
.x-pricing-column-info ul>li [class=“x-icon-”] {
display: none;
}

/* Pricing Table Column 1 */
.pricingtable-col1 h2 {
background-color: #ddd;
}

.pricingtable-col1 .x-pricing-column-info {
/* background-color: orange; */
}

.pricingtable-col1 h3,
.basic-class .x-interval {
/* background-color: #ffa500; /
/ color: white; */
text-align: center;
letter-spacing: 2px !important;
}

.pricingtable-col1 .x-ul-icons li {
/* background-color: orange !important; */
}

/* to change button background color */
.pricingtable-col1 .x-btn {
color: #F9F2FF;
border-color: #EC971F;
background-color: #EC971F;
}

.pricingtable-col1 .x-btn:hover {
color: #F9F2FF;
border-color: #F0AD4E;
background-color: #F0AD4E;
}

/* Pricing Table Column 2 /
.pricingtable-col2 h2 {
/ background-color: #23a8e1 !important; */
}

.pricingtable-col2 h3, .x-pricing-column.featured-sub {
background: #414141;
color: white !important;
}

/* pricing background color*/
.pricingtable-col2 .x-pricing-column-info {
background-color: #23a8e1;
color: white;
}

.pricingtable-col2 .basic-class .x-interval {
color: white;
background-color: #23a8e1;
text-align: center;
letter-spacing: 2px !important;
}

.pricingtable-col2 h3,.x-interval-sub {
background-color: #23a8e1;
text-align: center;
letter-spacing: 2px !important;
}

.pricingtable-col2 .x-ul-icons li {
background-color: #23a8e1 !important;
}

/* to change button background color */
.pricingtable-col2 .x-btn {
color: #F9F2FF;
border-color: #EC971F;
background-color: #EC971F;
}

.pricingtable-col2 .x-btn:hover {
color: #F9F2FF;
border-color: #F0AD4E;
background-color: #F0AD4E;
}

/* Pricing Table Column 3 */
.pricingtable-col3 h2 {
background-color: #ddd;
}

/* pricing background color*/
.pricingtable-col3 .x-pricing-column-info {
/* background-color: orange; */
}

.pricingtable-col3 h3, .basic-class .x-interval {
/* background-color: #ffa500; /
/ color: white; */
text-align: center;
letter-spacing: 2px !important;
}

.pricingtable-col3 .x-ul-icons li {
/* background-color: orange !important; */
}

/* to change button background color */
.pricingtable-col3 .x-btn {
color: #F9F2FF;
border-color: #EC971F;
background-color: #EC971F;
}

.pricingtable-col3 .x-btn:hover {
color: #F9F2FF;
border-color: #F0AD4E;
background-color: #F0AD4E;
}

/* Pricing Table Column 4 */
.pricingtable-col4 h2 {
background-color: #ddd;
}

/* pricing background color*/
.pricingtable-col4 .x-pricing-column-info {
/* background-color: orange; */
}

.pricingtable-col4 h3, .basic-class .x-interval {
/* background-color: #ffa500; /
/ color: white; */
text-align: center;
letter-spacing: 2px !important;
}

.pricingtable-col4 .x-ul-icons li {
/* background-color: orange !important; */
}

/* to change button background color */
.pricingtable-col4 .x-btn {
color: #F9F2FF;
border-color: #EC971F;
background-color: #EC971F;
}

.pricingtable-col4 .x-btn:hover {
color: #F9F2FF;
border-color: #F0AD4E;
background-color: #F0AD4E;
}

#2

Hi Rick,

Thanks for writing in! You can use the following CSS rules to target those elements. Change the color values according to your preference.

.x-pricing-column .x-featured-sub {
    color: red;
}
.x-pricing-column-info .x-interval {
    color: green;
}

Hope that helps.

#3

The Interval text for each class add works:

.pricingtable-col1 .x-pricing-column-info .x-interval {
color: #6A6C6E;
}

.pricingtable-col2 .x-pricing-column-info .x-interval {
color: white;
}

.pricingtable-col3 .x-pricing-column-info .x-interval {
color: #6A6C6E;
}

.pricingtable-col4 .x-pricing-column-info .x-interval {
color: #6A6C6E;
}

However for the featured subtext the class was ignored and I had to put in

.x-pricing-column .x-featured-sub {
color: white;
}

#4

Hi Rick,

In that case, could you please provide us with the URL to your example page, so that we can inspect your elements and assist you accordingly.

Thanks!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.