Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 29, 2018 at 9:54 pm #963950
    cupflppr

    can u please assist me, id like to create a nicely designed table but i dont understand how to use your CSS to do so.

    this is what i found on your documentation page:
    /*—————————————-
    // CSS – Table row bg
    //————————————–*/

    /* Table rows */
    #top .avia-table tr {
    color:#0e0e0e;
    }

    /* Table border */
    #top .avia-table tr th,
    #top .avia-table tr td,
    #top .avia-table tr {
    border: none!important;
    box-shadow: 0px 1px 1px -1px rgba(31, 31, 31, 0.85);
    }

    /* Alternate row color */
    #top .avia-table tr:nth-child(odd)
    {
    background: #eff2f3 !important;
    }
    #top .avia-table tr:nth-child(even)
    {
    background: #d7dcdd !important;
    }

    /* Table head */
    #top .avia-table th {
    background: #3b5998;
    color: #e9e8dd;
    }

    at the bottom of my page is a table. i dont know why it defaults to ALL CAPS and ALIGN right.
    id like to control the colors, CAPS, style etc… of the rows and columns like your example

    can u please assist.

    June 1, 2018 at 8:07 am #965096
    Rikard

    Hey cupflppr,

    Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-1176 th {
    text-transform: none;
    color: red; 
}

    Best regards,
    Rikard

    June 1, 2018 at 2:41 pm #965381
    cupflppr

    now the uppercase text is gone which is good. the RED needed to be the TOP ROW only. that code made all the other rows red, so i changed it to BLACK for now and everything is aligned RIGHT and needs to be aligned LEFT

    i tried adding text-align: left;
    but it didn’t do anything.

    i want it to look like this:
    https://www.dropbox.com/s/bxvffqom3ihsb7r/correct.png?dl=0

    currently it looks like this:
    https://www.dropbox.com/s/a6s2f6covlqk6tg/current.png?dl=0

    i just need all text aligned LEFT and the TOP ROW Bold Red Text
    please help.

    June 4, 2018 at 4:55 pm #966627
    Victoria

    Hi cupflppr,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.main_color .avia-data-table.avia-table-1.avia-builder-el-8 .avia-heading-row .avia-desc-col {
  background-color: red;
  color: #fff;
}
.main_color .avia-data-table.avia-table-1.avia-builder-el-8  * {
  text-align: left;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 4, 2018 at 7:18 pm #966741
    cupflppr

    FANTASTIC!! looks amazing, TY.

    June 4, 2018 at 7:59 pm #966760
    Jordan Shannon

    Hi,

    I’m glad Victoria was able to help you. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How to style a table like your examples.’ is closed to new replies.