-
Posts
-
Hi,
I am using a child-theme, but there is some css I which I cannot override, which is the “display:block;” in this section in the table.css in
/wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/table
@media only screen and (max-width: 767px)
{
.responsive div .avia_responsive_table .avia-data-table table,
.responsive div .avia_responsive_table .avia-data-table tbody,
.responsive div .avia_responsive_table .avia-data-table tr,
.responsive div .avia_responsive_table .avia-data-table td,
.responsive div .avia_responsive_table .avia-data-table th{display:block;border-top:none; border-right:none; border-left:none; text-align: center;}
.responsive .avia_responsive_table .avia-data-table{border-style:solid; border-width: 1px;}
.responsive .avia_responsive_table .avia-data-table .avia-pricing-row .avia-desc-col{text-align: center;}
.responsive .avia_responsive_table .avia-data-table .avia-button-row, .responsive .avia_responsive_table .avia-data-table tr:first-child th{display:none;}
.responsive .avia_responsive_table .avia-data-table td:before {
display:block;
font-style: italic; font-size: 11px;
}How can I change this without actually editing /wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/table/table.css?
Thanks,
KarinHi Karin,
You can change it in that file but it will be overridden on updates. Where can we see the problem of the CSS not being overridden?
Best regards,
RikardHi Rikard,
Yes, exactly, that’s why I want to create a solution in the child-theme for this.
The problem is, the “display:block;” in /wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/table should be overridden with nothing.
Normally I would override something with other CSS code. Like for example “color:black” in the enfold-theme with “color:white” in the child-theme. But in this case I need to get rid of the “display:block” without adding another “display:xxxx”.
In the private content part I added credentials.Thanks,
KarinHi Karin,
https://cl.ly/ea6f05fa0216 It looks fine on my end at the moment. Is the file modified?
Best regards,
VictoriaHi Victoria,
Yes, and that is my point. I don’t really want to modify the file, because it will be overridden by updates.I know how to override CSS in the theme-files by something in the child-theme CSS, but in this case I want to override the “display:block” by something that removes the “display:block”, but how do I do that? I can’t use any other “display:xxxx”, I tried that already.
I thought of copying this directory: /wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/table
to /wp-content/themes/enfold-child/config-templatebuilder/avia-shortcodes/table but how do I get to point to this particular directory so that the child-theme’s file is loaded?Thanks,
KariHi,
Please copy your /wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/table (or any shortcode folder) to your child theme in a folder named “shortcodes” like this:
/wp-content/themes/enfold-child/shortcodes/table/
in this folder please include the modfied table.css
then add this code to the end of your child theme functions.php file in Appearance > Editor:function avia_include_shortcode_template($paths) { $template_url = get_stylesheet_directory(); array_unshift($paths, $template_url.'/shortcodes/'); return $paths; } add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);Now your custom file will be loaded.
Best regards,
Mikehi Mike,
Thanks, I did what you wrote, but somehow the original table.css from /wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/table keeps being loaded. I tried with and without the table.php in the /wp-content/themes/enfold-child/shortcodes/table/
Also changed different settings in the Performance-tabs of the Enfold Settings /wp-admin/admin.php?page=avia: disable or enable compression css and js.
But it keeps loading from the main theme. Am I missing something?thanks,
KarinHi,
The default display property of elements is either block or inline. Why do you need to remove the “block” value? Have you tried to change the display property to “inline” instead of overriding the whole file?
You can find more info about different types of display property value in the following link.
// https://www.w3schools.com/cssref/pr_class_display.asp
Best regards,
IsmaelHi Ismael,
Frankly, I would not be asking if I haven’t tried all these options.But if you want to see it for yourself , uncomment the display:block and try all display variations:@media only screen and (max-width: 767px)
{
.responsive div .avia_responsive_table .avia-data-table table,
.responsive div .avia_responsive_table .avia-data-table tbody,
.responsive div .avia_responsive_table .avia-data-table tr,
.responsive div .avia_responsive_table .avia-data-table td,
.responsive div .avia_responsive_table .avia-data-table th{/*display:block;*/border-top:none; border-right:none; border-left:none; text-align: left;}I was much more happy with the solution Mike gave me, but how to make sure that the table.css from /wp-content/themes/enfold-child/shortcodes/table/ is being loaded instead from /wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/table ?
Thanks,
KarinHey!
Thank you for the update.
You should be able to accomplish the same thing using the following css code.
@media only screen and (max-width: 767px) .responsive #menu div .avia_responsive_table .avia-data-table td { display: inline-block; width: 50%; vertical-align: top; } }Screenshot: https://imgur.com/a/7hJbGn2
Regards,
IsmaelHi Ismael.
It’s working! Thank you so much!
(One thing: the opening “{” was missing in your solution, but anyway I’m glad it’s working now)Regards,
KarinHi Karin,
Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikardhi Rikard,
You can close the topic, I have no further questions.
Thanks for your support.Kind regards,
Karin
- The topic ‘How to change CSS in config-templatebuilder/avia-shortcodes’ is closed to new replies.