Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #772173

    Hi –

    I would like to customize the tables on my Enfold theme.

    My Table currently has a Heading Row, with several Default Rows under it with 2 columns.

    Table Options are set at – Use the table to display tabular data, Minimal, Adjust table to screen size.

    1. How can I make the Description Column text not all caps, but BOTH lower and upper case (depending on how I type it to be)?

    2. How can I make the Heading Row a specific Color beside white, so it stands out still using my current format?

    3. How can I specify an overall height and width for the table, so there is not so much empty space in each cell and the table is smaller?

    I have about 10 different tables on the site.

    Thank you!

    #772983

    Hey lanikita,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #773028

    Hello-

    I have included the info below in a private link.

    http://saifuusa.com/portfolio-item/scalp-treatment/

    I appreciate your fast reply if possible.

    Thank you.

    • This reply was modified 7 years ago by lanikita.
    #773072

    Hi lanikita,

    Please try adding the code below to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file.

    /* Show Description Column as typed */
    th {text-transform:none;} 
    
    /* Set background color for Heading Rows */
    .avia-data-table.avia_pricing_minimal tr.avia-heading-row th {background-color: green!important} 
    
    /* Adjust cell padding */
    .avia-data-table.avia_pricing_minimal th,
    .avia-data-table.avia_pricing_minimal td{padding:5px;}
    
    

    You can go ahead and change the value of the background color as desired. The default value is #ffffff (white), and I put green just as a placeholder.

    Please also change the value of the padding as desired. The default value is 12px.

    I hope that helps! Let me know if that works for you.

    Sarah

    #773154

    Thank you! That helped!

    I just encountered another problem where code is showing on the page instead of the table after publishing at http://saifuusa.com/portfolio-item/color-cosmetics/

    If you scroll down to the bottom you can see it as follows: I am not sure what I did wrong, if you can help –

    Error –
    < 100[/av_cell][/av_row] [av_row row_style=''][av_cell col_style='avia-desc-col']Coliform (cfu/g)[/av_cell][av_cell col_style='avia-center-col']Negative[/av_cell][/av_row] [av_row row_style=''][av_cell col_style='avia-desc-col']Moulds & Yeasts Count (cfu/g)[/av_cell][av_cell col_style='avia-center-col']< 10[/av_cell][/av_row] [/av_table] [av_heading heading='Aluminum Free TiO2' tag='h3' style='blockquote modern-quote modern-centered' size='' subheading_active='' subheading_size='15' padding='10' color='' custom_font='' admin_preview_bg=''][/av_heading] [av_textblock size='' font_color='' color='' admin_preview_bg='']

    This is a cosmetics pigment made of Titanium Oxide Nanoparticles coated with Triethoxycaprylylsilane. It has enhanced spreadability and easy to formulate with. It also has improved compatibility with most oils and esters. Provides the finish product long lasting water proof effect.

    This product is also Aluminum free, makes it safer for consumers.

    [/av_textblock]

    #773381

    Hi lanikita,

    May I know what you did right before this happened? Did you change content in Color Cosmetics page? Can you please check the second column of the row after “Nickel(Ni) mg/kg”? Please make sure that there is a space after the less than sign.  

    For example. it should be this: < 2 
    Not this: <2

    The second one conflicts with the code of the page.

    Can you try and see if that solves it?

    Sarah

    #773624

    For some reason it is not working with the < (less than sign).

    I tried it with various spaces and still does not work. Is there a way to fix this?

    #773725

    Hi lanikita,

    I noticed that you used the phrase “Less than” as a placeholder for now. Clever idea!

    I’ll keep this thread open while I try to find a fix for this. I’ll get back to you as soon as I can!

    Cheers!
    Sarah

    #773763

    Hey!


    @lanikita
    if you add < inside ' < ' or " < " can you let us know if that way the issue is been solved? Thank you Cheers! Basilis

    #773867

    No, it did not work. It added a bunch of code in the cell.

    #774984

    Hi lanikita,

    Try using & l t; (without spaces) instead.
    http://stackoverflow.com/questions/5068951/what-do-entities-lt-and-gt-stand-for

    If you need further assistance please let us know.
    Best regards,
    Victoria

    • This reply was modified 7 years ago by Victoria.
    #775440

    Thanks, Victoria!

    Okay, so that solution seems to work, but it’s very temporary. What happens is that &lt; does display a less than sign without breaking the code. But as soon as you save it into WordPress, it gets transformed, if you will, to the <. This is fine, but only until you edit the entry. As soon as you edit the Portfolio Entry, the “transformed” less than sign then breaks the code yet again.

    So, lanikita, here’s what we can do. If you think that you won’t edit this page in the near future, you can go ahead and use &lt;. Otherwise, I think it’s best that you use the phrase “Less than” for now. 

    Best regards,
    Sarah

    #1242165

    Hi my dear Enfold-Team,

    I am trying to get a different colors than our default green with blue color for the pricing tables on specific pages.
    I have added e.g. the custom id ruy-blue-pricing on https://rundumyoga.com/rys-200-mutistyle-ausbildung/ and added the following code but it does not work out

    
    /* All ACADEMY Pages - blue pricing table*/
    #ruy-blue-pricing .main_color .pricing-table li.avia-heading-row {
        background: #01ced1;
    }

    Thanks a lot for your support.
    Have a lovely day ahead.

    Your sincerely,
    Sirpa

    #1242668

    Hi Sirpa,

    Please try this instead:

    #ruy-blue-pricing li.avia-heading-row {
        background: #01ced1;
    }

    Best regards,
    Rikard

    #1242714

    Hi Rikard,

    thanks a lot for your support.

    Not the result as I wanted.
    https://prnt.sc/ua1vmi

    Actually I wanted to complete replace the green parts with blue parts, also borders, and with the upper part and the upper part a bit brighter, like your default version, assuming there is some kind of transparency.

    Thanks again for your support.

    Have a lovely day ahead.

    Yours sincerely,
    Sirpa

    #1243007

    Hi,

    Please try this CSS instead:

    #ruy-blue-pricing .pricing-table li.avia-heading-row, #ruy-blue-pricing .pricing-table li.avia-pricing-row {
        background-color: #65D3D5;
        border-color: #65D3D5;
    }

    Best regards,
    Rikard

    #1243112

    Dear Rikard,

    we nearly made it;-) one part still left.

    https://prnt.sc/uavmdi

    Thanks once more!

    Have a gret day.
    Your sincerely.
    Sirpa

    #1243505

    Hi,

    Please try this CSS instead:

    #ruy-blue-pricing .pricing-table li.avia-heading-row, #ruy-blue-pricing .pricing-table li.avia-pricing-row, #ruy-blue-pricing .pricing-extra {
        background-color: #65D3D5;
        border-color: #65D3D5;
    }

    Best regards,
    Rikard

    #1243543

    Thanks a lot Rikard, that works;-).
    Have a great day,
    Yours sincerely,
    Sirpa

    #1243602

    Hi Sirpa,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1251578
    This reply has been marked as private.
    #1251798

    Hi Sirpa,

    Are you sure that you added the correct ID to the element in question? If you need further help then we would need to see the actual element which you are having problems with on your site.

    Best regards,
    Rikard

    #1251905
    This reply has been marked as private.
    #1252158

    Hi,

    Thanks for the update. The CSS is applying as far as I can see, but it looks like it’s not overriding the element settings. You can try to add !important to the CSS:

    #ruy-blue-pricing .pricing-table li.avia-heading-row {
        background-color: #01e1e5 !important;
        border-color: #01e1e5 !important;
    }
    #ruy-blue-pricing .pricing-table li.avia-pricing-row {
        background-color: #01ced1 !important;
    	border-color: #01ced1 !important;
    }
    #ruy-blue-pricing .pricing-extra {
        background-color: #01e1e5 !important;
        border-color: #01e1e5 !important;
    }
    
    /* B2B Page - color pricing table*/
    #ruy-b2b-pricing .pricing-table li.avia-heading-row {
       	background-color: linear-gradient(to bottom right, #2af598, #009efd) !important;
        border-color: #2af598 !important;
    }
    #ruy-b2b-pricing .pricing-table li.avia-pricing-row {
        background-color: linear-gradient(to bottom right, #2af598, #009efd) !important;
    	border-color: #2af598 !important;
    }
    #ruy-b2b-pricing .pricing-extra {
        background-color: linear-gradient(to bottom right, #2af598, #009efd);
        border-color: #2af598 !important;
    }

    Best regards,
    Rikard

    #1257461
    This reply has been marked as private.
    #1257819

    Hey Sirpa,

    I’m glad you were able to find a solution! If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

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