Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 12, 2018 at 8:38 am #1008789
    bakbek

    Hi, how can make the following changes to a table:

    Background color of the title row to be – #353535
    Background color of the middle coloum to be – #eef0ed
    Backgroun color of both the first and third columns to be – #ffffff
    How to center align the text in the thrid column and make it narrower in width compared to the first 2 columns?
    Change the color of the contet in the third column to #37bb41

    Thanks!

    September 13, 2018 at 4:21 am #1009179
    Ismael

    Hey DROR,

    Thank you for using Enfold.

    You can use these css codes to change the colors.

    
/* title row */
.main_color .avia-heading-row th {
    background: #353535;
    color: red;
}

/* middle column */
.main_color tr td:nth-child(2) {
    background-color: #eef0ed;
    text-align: center;
}

/* 1st and 3rd column */
.main_color tr td:nth-child(1), .main_color tr td:nth-child(3) {
    background-color: #ffffff;
}

/* text color of 3rd column */
.main_color tr td:nth-child(3) {
    color: #37bb41;
}

    Don’t forget to remove the browser cache and toggle the theme’s file compression settings.

    Best regards,
    Ismael

    September 13, 2018 at 8:23 am #1009267
    bakbek

    Thanks. I added a title to the table, how can I make it the same as in the screenshot with a green background and white text and have it aligned to the center?

    How can I make the third column (left column) be narrower than the other 2? instead of 33% of each column width I’d like it to be 35%, 35% and 30% for example. Is that possible?

    And finally, i’d like these changed to only take effect on the table on this specific page. How do I do that?

    September 13, 2018 at 5:42 pm #1009549
    Ismael

    Hi,

    Thanks for the update.

    You can use these css codes to control the width of the columns.

    div .avia-table {
   table-layout: auto;
}

.main_color tr td:nth-child(2), .main_color tr td:nth-child(1) {
    width: 35%;
}

.main_color tr td:nth-child(3) {
    width: 20%;
    white-space: nowrap;
}

    If you want to apply this modification on a specific table, turn on the custom css class field.

    // https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Best regards,
    Ismael

    September 14, 2018 at 12:14 pm #1009876
    bakbek

    So if I give the table the css class of table01, where do I add that in the first set of codes you provided me with?

    And also, I added a title to the table, how can I make it the same as in the screenshot with a green background and white text and have it aligned to the center?

    Thanks.

    September 16, 2018 at 3:12 pm #1010410
    Victoria

    Hi bakbek,

    Can you disable caching and minification for now?

    
table caption {
    text-align: left;
}

    Best regards,
    Victoria

    September 16, 2018 at 9:33 pm #1010518
    bakbek

    Hi Victoria, that just aligns it to the left but I want to align it to the center, make it bigger, with a green background and white font. How can I do that?

    September 17, 2018 at 7:54 am #1010603
    Ismael

    Hi,

    You can use this css code to change the style of the table caption.

    .main_color table caption {
    background: green;
    color: #ffffff;
    padding: 20px;
    font-size: 2em;
    font-weight: 600;
}

    Best regards,
    Ismael

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