Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1219022

    Hi, I gave the table the class ‘sponsorbedragen’ and I’ve made some changes, but I only want those changes to be visible at the tables with the class ‘sponsorbedragen’. How can I do that? It’s not working everywhere..

    td.avia-highlight-col {
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #aea04b !important;
    }
    
    .main_color .avia-data-table th.avia-highlight-col {
    border-color: #ebebeb;
    color: #000000;
    background-color: #f5f3ed !important;
    }
    
    .main_color tr:nth-child(even) {
    color: #000000 !important;
    }
    
    td, th, tr, .main_color .avia-data-table .avia-highlight-col {
    background-color: #f5f3ed;
    font-size: 19px;
    }
    
    .sponsorbedragen th:first-child {width: 25%;}
    .sponsorbedragen th:nth-child(2) {width: 60%;}
    .sponsorbedragen th:nth-child(3) {width: 15%;}
    
    .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 {
    letter-spacing: 0px;
    }
    
    .sponsorbedragen tr td:first-child {
    font-weight: bold;
    }
    
    @media only screen and (max-width: 767px) { 
    .avia-data-table-wrap.avia_responsive_table td:before {
    display: none !important;
    }
    }
    
    @media only screen and (max-width: 767px) {
    .responsive .avia_responsive_table .avia-data-table, 
    .responsive div .avia_responsive_table .avia-data-table tbody, 
    .responsive div .avia_responsive_table .avia-data-table tr, 
    .responsive div .avia_responsive_table .avia-data-table td, 
    .responsive div .avia_responsive_table .avia-data-table th {
    border: none !important;
    }
    }
    
    @media only screen and (min-width: 768px) {
    .responsive .avia_responsive_table .avia-data-table, 
    .responsive div .avia_responsive_table .avia-data-table tbody, 
    .responsive div .avia_responsive_table .avia-data-table tr, 
    .responsive div .avia_responsive_table .avia-data-table td {
    border: none !important;
    }
    .responsive div .avia_responsive_table .avia-data-table th {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #969696 !important;
    }
    }
    
    @media only screen and (min-width: 768px) {
    .page-id-25 .responsive .avia_responsive_table .avia-data-table, 
    .page-id-25 .responsive div .avia_responsive_table .avia-data-table tbody, 
    .page-id-25 .responsive div .avia_responsive_table .avia-data-table tr, 
    .page-id-25 .responsive div .avia_responsive_table .avia-data-table td {
    border: 1px solid #969696 !important;
    }
    .page-id-25 .responsive div .avia_responsive_table .avia-data-table th {
    border: 1px solid #969696 !important;
    }
    }
    
    @media only screen and (max-width: 767px) {
    td {
    padding: 0px;
    }
    td.avia-highlight-col {
    padding-bottom: 20px !important;
    }
    }
    
    tr.avia-heading-row {
    border-bottom: 1px solid #000000 !important;
    }

    thanks!

    #1219170

    Hey jannnnnneke,

    Please provide a link to the site/page in question so we can look into this issue further. Link us to the page where you have this table.

    Best regards,
    Jordan Shannon

    #1219255

    Oh sorry, thought I did! See private data!

    #1219496

    Hi,

    Adjusted the css a bit. Please test:

    .sponsorbedragen td.avia-highlight-col {
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #aea04b !important;
    }
    
    .main_color .avia-data-table.sponsorbedragen  th.avia-highlight-col {
    border-color: #ebebeb;
    color: #000000;
    background-color: #f5f3ed !important;
    }
    
    .main_color .sponsorbedragen tr:nth-child(even) {
    color: #000000 !important;
    }
    
    td, th, tr, .main_color .sponsorbedragen.avia-data-table .avia-highlight-col {
    background-color: #f5f3ed;
    font-size: 19px;
    }
    
    .sponsorbedragen th:first-child {width: 25%;}
    .sponsorbedragen th:nth-child(2) {width: 60%;}
    .sponsorbedragen th:nth-child(3) {width: 15%;}
    
    .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 {
    letter-spacing: 0px;
    }
    
    .sponsorbedragen tr td:first-child {
    font-weight: bold;
    }
    
    @media only screen and (max-width: 767px) { 
    .avia-data-table-wrap.avia_responsive_table td:before {
    display: none !important;
    }
    }
    
    @media only screen and (max-width: 767px) {
    .responsive .avia_responsive_table .avia-data-table, 
    .responsive div .avia_responsive_table .avia-data-table tbody, 
    .responsive div .avia_responsive_table .avia-data-table tr, 
    .responsive div .avia_responsive_table .avia-data-table td, 
    .responsive div .avia_responsive_table .avia-data-table th {
    border: none !important;
    }
    }

    @media only screen and (min-width: 768px) {
    .responsive .avia_responsive_table .avia-data-table,
    .responsive div .avia_responsive_table .avia-data-table tbody,
    .responsive div .avia_responsive_table .avia-data-table tr,
    .responsive div .avia_responsive_table .avia-data-table td {
    border: none !important;
    }
    .responsive div .avia_responsive_table .avia-data-table th {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #969696 !important;
    }
    }

    @media only screen and (min-width: 768px) {
    .page-id-25 .responsive .avia_responsive_table .avia-data-table,
    .page-id-25 .responsive div .avia_responsive_table .avia-data-table tbody,
    .page-id-25 .responsive div .avia_responsive_table .avia-data-table tr,
    .page-id-25 .responsive div .avia_responsive_table .avia-data-table td {
    border: 1px solid #969696 !important;
    }
    .page-id-25 .responsive div .avia_responsive_table .avia-data-table th {
    border: 1px solid #969696 !important;
    }
    }

    @media only screen and (max-width: 767px) {
    td {
    padding: 0px;
    }
    td.avia-highlight-col {
    padding-bottom: 20px !important;
    }
    }

    tr.avia-heading-row {
    border-bottom: 1px solid #000000 !important;
    }

    Best regards,
    Jordan Shannon

    #1220902

    Thanks! But how can I make this code only for tables with class sponsorbedragen? On normal tables I do want to have a border.

    @media only screen and (min-width: 768px) {
    .responsive .avia_responsive_table .avia-data-table,
    .responsive div .avia_responsive_table .avia-data-table tbody,
    .responsive div .avia_responsive_table .avia-data-table tr,
    .responsive div .avia_responsive_table .avia-data-table td {
    border: none !important;
    }
    .responsive div .avia_responsive_table .avia-data-table th {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #969696 !important;
    }
    }
    #1220903

    BTW, the only thing that now has changed is the color of the even rows. I cleared cache.. so its not all working. Do you understand what I’m trying to do? So I want all this to be working for ONLY tables with class=”sponsorbedragen”:

    td.avia-highlight-col {
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #aea04b !important;
    }
    
    .main_color .avia-data-table th.avia-highlight-col {
    border-color: #ebebeb;
    color: #000000;
    background-color: #f5f3ed !important;
    }
    
    td, th, tr, .main_color .avia-data-table .avia-highlight-col {
    background-color: #f5f3ed;
    font-size: 19px;
    }
    
    .sponsorbedragen tr td:first-child {
    font-weight: bold;
    }
    
    @media only screen and (max-width: 767px) { 
    .avia-data-table-wrap.avia_responsive_table td:before {
    display: none !important;
    }
    }
    
    @media only screen and (max-width: 767px) {
    .responsive .avia_responsive_table .avia-data-table, 
    .responsive div .avia_responsive_table .avia-data-table tbody, 
    .responsive div .avia_responsive_table .avia-data-table tr, 
    .responsive div .avia_responsive_table .avia-data-table td, 
    .responsive div .avia_responsive_table .avia-data-table th {
    border: none !important;
    }
    }
    
    @media only screen and (min-width: 768px) {
    .responsive .avia_responsive_table .avia-data-table, 
    .responsive div .avia_responsive_table .avia-data-table tbody, 
    .responsive div .avia_responsive_table .avia-data-table tr, 
    .responsive div .avia_responsive_table .avia-data-table td {
    border: none !important;
    }
    .responsive div .avia_responsive_table .avia-data-table th {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #969696 !important;
    }
    }
    
    @media only screen and (max-width: 767px) {
    td {
    padding: 0px;
    }
    td.avia-highlight-col {
    padding-bottom: 20px !important;
    }
    }
    
    tr.avia-heading-row {
    border-bottom: 1px solid #000000 !important;
    }
    • This reply was modified 3 years, 8 months ago by jannnnnneke.
    #1221101

    Here are login details if you want to have a look! Thnx :)

    #1222544

    Hi,
    Sorry for the late reply and thanks for the login, I found your css in your Quick CSS, but it was not modified for sponsorbedragen so I made the changes and moved your css to the WordPress > Customize > Additional CSS just until we are sure it’s working correctly.
    Please clear your browser cache and check.

    Best regards,
    Mike

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