-
Posts
-
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!
Hey lanikita,
Could you post a link to the site in question so that we can take a closer look please?
Best regards,
RikardHello-
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.
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
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]
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:<2The second one conflicts with the code of the page.
Can you try and see if that solves it?
Sarah
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?
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!
SarahHey!
@lanikita if you add < inside ' < ' or " < " can you let us know if that way the issue is been solved? Thank you Cheers! BasilisHi lanikita,
Try using & l t; (without spaces) instead.
http://stackoverflow.com/questions/5068951/what-do-entities-lt-and-gt-stand-forIf you need further assistance please let us know.
Best regards,
VictoriaThanks, Victoria!
Okay, so that solution seems to work, but it’s very temporary. What happens is that
<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
<. Otherwise, I think it’s best that you use the phrase “Less than” for now.Best regards,
SarahHi 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,
SirpaHi Sirpa,
Please try this instead:
#ruy-blue-pricing li.avia-heading-row { background: #01ced1; }Best regards,
RikardHi Rikard,
thanks a lot for your support.
Not the result as I wanted.
https://prnt.sc/ua1vmiActually 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,
SirpaHi,
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,
RikardDear Rikard,
we nearly made it;-) one part still left.
Thanks once more!
Have a gret day.
Your sincerely.
SirpaHi,
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,
RikardHi Sirpa,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
VictoriaHi 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,
RikardHi,
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
- You must be logged in to reply to this topic.