Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1417157

    Hi. I noticed that my HTML contains many style elements. If you inspect the page in the attached link, you will notice something like this in HTML:
    <style type=”text/css” data-created_by=”avia_inline_auto” id=”style-css-av-3020j2-2a45f4f4300325f1c7d6d4f15bd3e269″>
    .avia-section.av-3020j2-2a45f4f4300325f1c7d6d4f15bd3e269 .av-parallax .av-parallax-inner{
    background-repeat:no-repeat;
    background-image:url(http://borgmeier.borgmeier.media/wp-content/uploads/2022/10/man_with_smartphone-paralax.jpg);
    background-position:50% 0%;
    background-attachment:scroll;
    }
    .avia-section.av-3020j2-2a45f4f4300325f1c7d6d4f15bd3e269 .av-section-color-overlay{
    opacity: 0.8;
    background-color:#242424;
    }
    </style>
    how could I completely delete these items?
    Thank you very much

    #1417216

    Hey Alex,
    Thanks for your patience, the css you have posted above is for the background image for a color section, if you remove this then the background image will not show.
    You can disable Post CSS files with this function in your functions.php

    function custom_avf_post_css_create_file( $create )
    {
    	return false;
    }
    
    add_filter( 'avf_post_css_create_file', 'custom_avf_post_css_create_file', 10, 1 );

    Best regards,
    Mike

    #1417302

    Hi Mike,

    I had already incorporated this code into functions.php because I had problems with duplicating pages. Because of this code, my HTML is broken.
    Is there a way to prevent this?
    Thank you!

    #1417312

    Hi,
    What do you mean your HTML is broken? Can you point to an example, when I look at your site it looks fine.
    Perhaps the issue is with a plugin, the best why to duplicate pages it to Enable the Avia Layout Builder Debugger and copy the shortcode.
    You should not need to disable Post CSS files or remove the inline css.

    Best regards,
    Mike

    #1417316

    Hi Mike,

    my problem was like in this post: https://kriesi.at/support/topic/alb-element-custom-styling-lost-with-duplicate-plugins/
    That’s why I wrote the code in functions.php.
    But now in html code i have this <style> element. And where in the css did I use :nth-child selector, doesn’t work properly anymore.
    I hope you understand what I mean.

    #1417393

    Hi,

    Thank you for the update.

    Did you add any custom css code in the Quick CSS field or in the style.css file? It is possible that there invalid css code there that affects the dynamic stylesheet. Please provide the login details in the private field so that we can check the issue further. Screenshots of the broken html issue will also help.

    Best regards,
    Ismael

    #1417397

    Hello Ismail,

    here is a screenshot of HTML: http://borgmeier.borgmeier.media/wp-content/uploads/2023/08/code.jpg

    The <style> elements bother me. Because I can’t work correctly with nth-child selector.

    Please help me.

    I am also attaching the login details.

    Thanks

    #1417417

    Hi,
    How are you trying the nth-child selector?
    The style should not cause any issues, if you are targeting the first image then you would use .avia-image-container:first-child
    or whatever element you are targeting use the class of that element and the nth-child selector for it’s position.
    It sounds like you are tying to use the parent class and then count elements from there.
    Try reviewing this article: Useful :nth-child Recipes

    Best regards,
    Mike

    #1417421

    Hi Mike,

    unfortunately this style gives me problems.
    For example I have this code for desktop smaller than 1200px:

    .four-column-section .col-with-icon.flex_column:nth-child(4) {
    margin-top: 50px;
    }
    and because I have two <style> elements in parrent div , it doesn’t select the fourth flex_coumn but the second one.

    But the biggest problem is that I have disable post css in several websites because I always had the problem with duplicating the pages. And I don’t know how the other pages behave responsively now, so I have to find a solution to remove these <style> elements. I hope you understand what i mean. :(

    #1417473

    Hi,
    Thanks for the feedback, I don’t think that the style is causing an issue with your css nth-child, I believe that your css doesn’t have enough specifically to override the theme margin, you would need at least an ID added to your css.
    If you could link to your page and explain what you are trying to do then we could recommend some css that will work for you.
    The css should not cause any issues when you copy the pages because you also want the css for the elements on the pages that you are copying.
    Have you tied saving your page, or the elements on the page, as a template in the Advanced Layout Builder and then applying it you are other pages?
    How are you duplicating your pages, with a plugin?

    Best regards,
    Mike

    #1417516

    Hi Mike,

    I’ll try to explain everything from the beginning, because unfortunately you don’t understand me yet.

    I had the problem of duplicating a page with plugins like in this post: https://kriesi.at/support/topic/alb-element-custom-styling-lost-with-duplicate-plugins/

    The problem is that after duplicating, the CSS is not correctly loaded on the page that was duplicated.

    here are the screenshots:
    Page before:
    http://borgmeier.borgmeier.media/wp-content/uploads/2023/08/before.jpg

    Page after:
    http://borgmeier.borgmeier.media/wp-content/uploads/2023/08/after.jpg

    So from your advice from https://kriesi.at/support/topic/alb-element-custom-styling-lost-with-duplicate-plugins/
    I wrote this code in functions.php:

    function custom_avf_post_css_create_file( $create ) {
    return false;
    }

    add_filter( ‘avf_post_css_create_file’, ‘custom_avf_post_css_create_file’, 10, 1 );

    After that, the duplication worked great.
    But I saw that the HTML looks quite different:
    Here are two more screenshots:

    HTML before functions.php was changed:
    http://borgmeier.borgmeier.media/wp-content/uploads/2023/08/code-before.jpg

    HTML after functions.php was changed:
    http://borgmeier.borgmeier.media/wp-content/uploads/2023/08/code.jpg

    The <style> elements in the second screenshot are my problem.
    I need to get them out or I should find another solution to the duplication problem.
    As I told you, I have the problem with duplicating not only on this website, but on all my websites. That’s why I changed the functions.php everywhere. And I don’t know what problems can arise now. I can’t now customize the CSS everywhere because of these <style> elements. But they really cause problems.

    Thank you for your patience.

    • This reply was modified 1 year, 3 months ago by alexgorg.
    #1417600

    Hi,
    Thanks for the explanation, when you disable the post-css files that contain the page css the css is then added to the page inline, if you remove this css your page will lose it’s css.
    You can test with this script in your child theme functions.php, it will remove it, in my test your page also loses it style.

    function remove_inline_style() { ?>
      <script>
    (function($){
        $('#top.home style[data-created_by="avia_inline_auto"]').remove();
    })(jQuery);
    </script>
      <?php
    }
    add_action('wp_footer', 'remove_inline_style');

    I have used the Yoast post duplicate in the past and didn’t notice any issues with the page style, I also tested again today and couldn’t reproduce any issues. My daily page duplication is a script I found in the WP Code plugin, here is a link to it.
    Perhaps this will work better for you than the plugin.
    If this doesn’t help, then try disabling your function that removes the post-css and Enable the Avia Layout Builder Debugger and clone your pages by copying the shortcode of the page to your new page.

    Best regards,
    Mike

    #1417661

    Hi Mike,

    the script works perfectly. I have no problems with duplicating. Thank you!
    (But this is very strange, all plugins give me problems with duplicating, and this script doesn’t. :))

    P.S: One more little detail about duplication error mit Plugins:
    the CSS is broken on the page that was duplicated, first after publishing the copy.

    #1417665

    Hi,
    Glad to hear that the WP Code duplication script is working for you, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    #1417764

    Hi Mike,

    you can close this.

    Of course it would be nice if you could explain why I have this problem with duplication, but thanks for the solution anyway.

    I wish you a nice weekend!

    #1417773

    Hi,

    Glad to know that the issue has been resolved. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Style elements in HTML’ is closed to new replies.