Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 27, 2021 at 11:06 am #1312698
    nickthe

    Hi there,

    Our customer would like to have a different backround colour for each heading in a table.
    When i try to change the colour for the heading it changes all the headings to the same colour and i can not find the css rule to seperate the headings.
    I will attach an image so you can better understand what i mean: https://ibb.co/1GCrcrz

    I have the real url in the private area if it helps.

    July 29, 2021 at 5:22 am #1313158
    Rikard

    Hey nickthe,

    You can try to add the styling directly to the text, like so:

    <span style="color: red;">This text is red</span> and this is not.

    Or add a class to the text:

    <span class="my-custom-table-text">This text can be targeted with a class</span>

    Then target the text using CSS like this:

    .my-custom-table-text {
  color: red !important;
}

    If you want to target the text without adding custom markup, then you would likely have to use nth-child in your CSS: https://www.w3schools.com/cssref/sel_nth-child.asp

    Best regards,
    Rikard

    August 6, 2021 at 9:34 am #1314773
    nickthe

    Hi Rikard,

    Thanks for the reply and sorry for the late response. Maybe i didnt explain it very well but i am not trying to change the colour of the text, i am trying to change the brown backround colour inside of the table that is in the photo (ihave an arrow pointing to the spot i am talking about). I want to make each section that i have put an arrow on a different colour. For exam, were it says upcoming auctions backround colour : black. Where it says past auctions backround colour: red and where it says more backround colour :blue. (these colours are only for example).

    Thanks in advance,
    Nick

    August 8, 2021 at 5:05 am #1315085
    Rikard

    Hi,

    Thanks for the update. You can try CSS like this to target the different heading rows:

    li.avia-heading-row:nth-child(1) {
  background-color: red !important;
}

    That will target the first instance. If you copy the CSS and change the 1 to 2, then it will target the second instance.

    Best regards,
    Rikard

    August 10, 2021 at 8:42 am #1315991
    nickthe

    Hi Rikard,

    Thanks for the response, i tried this but it only worked for the first heading (1).
    I used the below css for the heading 2 Upcoming Auctions background but it did not work.
    li.avia-heading-row:nth-child(2) {
    background-color: red !important;
    }
    Any other solutions?

    Thanks in advance,
    Nick

    August 11, 2021 at 6:56 am #1316201
    Rikard

    Hi Nick,

    I don’t have any other solutions for you. If you need further help then include admin WordPress login details in private.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.