Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1107573

    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,
    Karin

    • This topic was modified 1 year, 4 months ago by  karinorage.
    #1107780

    Hi 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,
    Rikard

    #1109133

    Hi 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,
    Karin

    #1109272

    Hi Karin,

    https://cl.ly/ea6f05fa0216 It looks fine on my end at the moment. Is the file modified?

    Best regards,
    Victoria

    #1112548

    Hi 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,
    Kari

    #1112624

    Hi,
    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,
    Mike

    #1112856

    hi 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,
    Karin

    #1113093

    Hi,

    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,
    Ismael

    #1113224

    Hi 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,
    Karin

    #1113431

    Hey!

    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,
    Ismael

    #1115101

    Hi 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,
    Karin

    #1115328

    Hi 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,
    Rikard

    #1115544

    hi Rikard,

    You can close the topic, I have no further questions.
    Thanks for your support.

    Kind regards,
    Karin

    #1115667

    Hi Karin,

    Thanks for the update, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘How to change CSS in config-templatebuilder/avia-shortcodes’ is closed to new replies.