Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 21, 2015 at 6:56 pm #556127
    paulsimo0

    I am currently building a website and have a table I would like to style, but not sure of the CSS I would need to write. On the webpage (link shown in private content) you will see an image of a table (taken from an old website) and the actual table itself. I would like the colours in the table to reflect the colours in the image. I don’t need rounded corners or increased text size, just the background colours and text colours.
    I hope you can guide me in the right direction.

    Regards
    Paul

    December 21, 2015 at 9:29 pm #556191
    Basilis

    Hi paulsimo0!

    add the following to your custom CSS

    th {
background: red;
color: white;
}
td.avia-center-col {
background: #E9AE4E;
}

    let us know if that works for you, the way you need.

    Regards,
    Basilis

    December 21, 2015 at 10:07 pm #556208
    paulsimo0

    Hi Basilis

    That’s almost there, thank you. The first and third columns are not quite what I would like, but its certainly getting there, please see the page below. I also noticed the text in the third row is darker than the text in the second and fourth rows, could these all be made the same darker text.

    I’m not sure if it as any of the other CSS that may be stopping it showing as the image at the top of the page, I have included all of the CSS I Have added.

    @media only screen and (max-width: 1185px) { .html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
    .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;}
    .html_mobile_menu_tablet #mobile-advanced{display:block;} }

    li#menu-item-396 .avia-menu-fx, li#menu-item-397 .avia-menu-fx, li#menu-item-398 .avia-menu-fx, li#menu-item-452 .avia-menu-fx, li#menu-item-703 .avia-menu-fx, li#menu-item-712 .avia-menu-fx, li#menu-item-713 .avia-menu-fx, {
    display: none;
    }
    .avia-menu-text img {
    position: relative;
    top: 10px;
    }

    @media screen and (max-width: 767px) {
    .avia-menu-text img {
    position: relative;
    top: 0px !important;
    }
    }

    @media only screen and (max-width: 768px) { .only_desktop { display: none !important; }}

    @media only screen and (min-width: 769px) { .only_mobile { display: none !important; }}

    .testimonial {
    color: #ffffff;
    font-size: 18px;
    }

    .testimonial2{
    color: #ff4000;
    font-size: 18px;
    }

    .font-white {
    color: #ffffff;
    font-size: 16px;
    }

    .event-date {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    }

    .distance {
    color: #ff4000;
    font-size: 22px;
    font-style: italic;
    font-weight: bold;
    }

    #top .av_header_glassy.av_header_transparency #header_main {
    background-color: rgba(255,255,255,0.8); }

    #top div .avia-gallery img { border-style: solid; padding: 0; border-color: #cccccc;} #top #wrap_all .avia-gallery-1 .avia-gallery-thumb a { width: 16%; margin: 0px; }

    @media screen and (max-width: 767px) {
    #wrap_all { position: relative !important; } }

    .element-form {
    text-align: left;
    color: #A81010;
    border-top-width: medium;
    border-right-width: 0px;
    border-bottom-width: medium;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #aaaaaa;
    border-bottom-color: #aaaaaa;
    padding-left: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 18px;
    font-weight: bold;
    text-transform: capitalize;
    font-family: Open Sans, Geneva, sans-serif; }

    #top .input-text, #top input[type=”text”], #top input[type=”input”], #top input[type=”password”], #top input[type=”email”], #top input[type=”number”], #top input[type=”url”], #top input[type=”tel”], #top input[type=”search”], #top textarea, #top select { background-color: #ffffff !important; }

    th {
    background: red;
    color: white;
    }
    td.avia-center-col {
    background: #E9AE4E;
    }

    I hope this helps.
    Regards
    Paul

    December 23, 2015 at 6:23 am #556886
    Rikard

    Hi,

    Please try the following as well:

    tr td:first-child {
background-color:#F3D49E;
}

.avia-heading-row th {
background-color:#FF4000 !important;
}

    Thanks,
    Rikard

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