Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 28, 2014 at 1:58 pm #342200
    onegirlrtw

    Hello!

    I am working on a Pricing Table, and I would like to change:

    1. Background & font color of Heading Row and Pricing Row in a centered (normal) column and

    2. Background & font color of Heading Row and Pricing Row in the highlighted column

    October 29, 2014 at 4:10 pm #342770
    Yigit

    Hi onegirlrtw!

    Please add following code to Quick CSS 

    .main_color .pricing-table li.avia-heading-row, .main_color .pricing-table li.avia-heading-row .pricing-extra {
background-color: red;
color: black;
border-color: red;
}
.main_color .pricing-table li.avia-pricing-row, .main_color .pricing-table li.avia-heading-row, .main_color .pricing-table li.avia-pricing-row .pricing-extra {
background-color: blue;
color: green;
border-color: blue;
}

    Cheers!
    Yigit

    October 30, 2014 at 1:33 pm #343381
    onegirlrtw

    Hi Yigit,

    Thank you! Unfortunately this code does not seem to differentiate between the centered (normal) column and the highlighted column. Please check the example in the link (next reply).

    October 30, 2014 at 1:34 pm #343382
    onegirlrtw
    This reply has been marked as private.
    October 30, 2014 at 8:21 pm #343639
    Yigit

    Hi!

    If you would like to make them different colors, please use

    .main_color .pricing-table:nth-child(1) li.avia-heading-row {
background: #ECB876;
border-color: #E0A75E;
}

.main_color .pricing-table:nth-child(2) li.avia-heading-row {
background: #DF9C48;
border-color: #E7943B;
}

.main_color .pricing-table:nth-child(3) li.avia-heading-row{
background: #cf7c4f;
border-color: #E07A43;
}

    Best regards,
    Yigit

    October 30, 2014 at 9:23 pm #343714
    onegirlrtw

    Hi Yigit, Thank you!

    This code seems to be giving all columns the attributes of Column 1. I don’t see any difference between highlighted columns and normal columns.

    November 1, 2014 at 10:10 am #344519
    Ismael

    Hi!

    Please use this:

    .main_color .pricing-table-wrap:nth-child(1) .pricing-table li.avia-heading-row {
background: #ECB876;
border-color: #E0A75E;
}

.main_color .pricing-table-wrap:nth-child(1) .pricing-table li.avia-heading-row {
background: #DF9C48;
border-color: #E7943B;
}

.main_color .pricing-table-wrap:nth-child(3) .pricing-table li.avia-heading-row {
background: #cf7c4f;
border-color: #E07A43;
}

    Best regards,
    Ismael

    November 1, 2014 at 6:19 pm #344671
    onegirlrtw

    Thank you! This code is starting to work, however 2 things still not working:

    1. This code changes font and color in Heading Row, but not Pricing Row. I would also like to have ability to change font and color in Pricing row in both highlighted and default column.

    2. In the highlighted column, this code only changes half of the background color of the heading row. The top half of the heading row (the part that is extended to make it a heading row) is still the default background color.

    November 3, 2014 at 7:38 pm #345474
    Josue

    Hey!

    Try with this code instead:

    .main_color .pricing-table-wrap:nth-child(1) .pricing-table li.avia-heading-row, .main_color .pricing-table-wrap:nth-child(1) .avia-heading-row .pricing-extra{
background: #ECB876;
border-color: #E0A75E;
}

.main_color .pricing-table-wrap:nth-child(2) .pricing-table li.avia-heading-row, .main_color .pricing-table-wrap:nth-child(2) .avia-heading-row .pricing-extra{
background: #DF9C48;
border-color: #E7943B;
}

.main_color .pricing-table-wrap:nth-child(3) .pricing-table li.avia-heading-row, .main_color .pricing-table-wrap:nth-child(3) .avia-heading-row .pricing-extra{
background: #cf7c4f;
border-color: #E07A43;
}

    Best regards,
    Josue

    November 4, 2014 at 9:11 am #345765
    onegirlrtw

    Hi Josue,

    That worked for the Heading Row, thank you!

    But, still not changed for Pricing Row.

    I would also like to have ability to change font and color in Pricing row in both highlighted and default column.

    November 5, 2014 at 4:35 pm #346610
    Andy

    Hey!

    For Pricing Row:

    .main_color .pricing-table-wrap:nth-child(1) li.avia-pricing-row, .main_color .pricing-table-wrap:nth-child(1) li.avia-heading-row, .main_color .pricing-table li.avia-pricing-row .pricing-extra {
background: #ECB876;
border-color: #E0A75E;
color: #000;
font-family: verdana;
}

.main_color .pricing-table-wrap:nth-child(2) li.avia-pricing-row, .main_color .pricing-table-wrap:nth-child(2) li.avia-heading-row, .main_color .pricing-table li.avia-pricing-row .pricing-extra {
background: #ECB876;
border-color: #E0A75E;
color: blue;
font-family: verdana;
}

.main_color .pricing-table-wrap:nth-child(3) li.avia-pricing-row, .main_color .pricing-table-wrap:nth-child(3) li.avia-heading-row, .main_color .pricing-table li.avia-pricing-row .pricing-extra {
background: #ECB876;
border-color: #E0A75E;
color: orange;
font-family: helvetica;
}

.main_color .pricing-table-wrap:nth-child(4) li.avia-pricing-row, .main_color .pricing-table-wrap:nth-child(4) li.avia-heading-row, .main_color .pricing-table li.avia-pricing-row .pricing-extra {
background: #ECB876;
border-color: #E0A75E;
color: orange;
font-family: helvetica;
}

    Adjust “color: … ” and “font-family: … ” to your wishes.

    Cheers!
    Andy

    November 5, 2014 at 8:17 pm #346732
    onegirlrtw

    Hi Andy, Works perfectly!

    Thank you!!

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘How to change background & font color of Heading Row and Pricing Row’ is closed to new replies.