Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 9, 2017 at 8:17 pm #790556
    pavlika

    I’ve used the Code Block to add custom image button. But enfold is changing the code and adds extra hover elements which disrupt the original code. How can avoid this?

    My Original Code

    <div class="yr-kutu">
<div class="yr-top-container">
<a href="/dedektor-videolari/"><div class="yr-container">
<img class="yr-image" style="width: 100%;" src="/wp-content/uploads/2015/10/videolar.jpg" />
<div class="yr-overlay">
<img class="yr-orta-resim" src="/wp-content/uploads/referans_detay_dugme.png" />
<div class="yr-text">detaylı incele</div>
</div></div></a>
</div>
<div class="yr-kutu-yazi"><a href="/dedektor-videolari/">Videolar</a></div>
<div class="yr-kutu-yazi-alt"></div>
</div>

    Modified cofe by enfold

    <div class="yr-kutu">
<div class="yr-top-container">
<a href="/dedektor-videolari/" style="position: relative; overflow: hidden; display: block;" class="yr-image"><div class="yr-container">

<img class="" style="width: 100%;" src="/wp-content/uploads/2015/10/videolar.jpg">
<div class="yr-overlay">
<img class="yr-orta-resim" src="/wp-content/uploads/referans_detay_dugme.png">
<div class="yr-text">detaylı incele</div>
</div>
	</div><span class="image-overlay overlay-type-extern" style="left: -5px; top: 0px; overflow: hidden; display: block; height: 323px; width: 333px;"><span class="image-overlay-inside"></span></span></a>
</div>
<div class="yr-kutu-yazi"><a href="/dedektor-videolari/">Videolar</a></div>
<div class="yr-kutu-yazi-alt"></div>
</div>
    May 9, 2017 at 9:54 pm #790632
    Basilis

    Hey pavlika,

    Yes, that is happening because of the elements.
    If you want to modify them, you will need to create that HTML as shortcodes and use the shrotcode.
    That way, you will only have the code been used as should.

    Let us know if you have more questions

    Best regards,
    Basilis

    May 10, 2017 at 8:08 am #790891
    pavlika

    Thanks for the reply Basilis,

    I’ve created a shortcode but it doesn’t work. Still, the code below is added which interrupts the hover actions. But when I add the shortcode in a code block and hit preview there is no modification. but if I update the page and load the page regularly shortcode become modified.

    <span class="image-overlay overlay-type-extern" style="left: -5px; top: 0px; overflow: hidden; display: block; height: 343px; width: 353px;"><span class="image-overlay-inside"></span></span>

    and this added to “a” tag
    style="position: relative; overflow: hidden; display: block;"

    any thoughts?

    May 10, 2017 at 8:20 am #790898
    Nikko

    Hi,

    Try to use this solution:

    1. Go to Appearance > Widgets and create a Custom Widget Area
    2. Use a text widget, place it in the newly created Widget Area, and put your html codes there
    3. Edit the page you want to put the code and use Widget Area in Content Area of Advanced Layout Builder
    4. Save

    Hope this helps :)

    Best regards,
    Nikko

    May 10, 2017 at 8:31 am #790903
    pavlika

    Thanks for the fast reply Nkko,

    However, there is no change.

    Maybe a condition should be added to the related JS.

    Regards

    May 10, 2017 at 8:37 am #790907
    Nikko

    Hi,

    I’m not really sure what your html code does, but the workaround I suggested should preserve the html content as it is written. Is the code being changed again? or the html code you have added didn’t work as you have intended it to? if it’s the latter can you give us a link, so we can take a closer look and also what you are trying to achieve.

    Best regards,
    Nikko

    May 10, 2017 at 9:00 am #790917
    pavlika

    Hi Nikko,

    Please check this test page I’ve added a link to the plain-HTML which I want to see as it was.

    May 10, 2017 at 5:22 pm #791224
    Nikko

    Hi,

    I see, I thought you were referring on the backend. Unfortunately, I am not able to change that behavior though I could point out to you what file and function is adding that: js/avia.js, this function function avia_hover_effect(container) in line 675-766. Sorry couldn’t fix it at the moment and have already spent some time with it but will try to figure that out.

    Best regards,
    Nikko

    May 10, 2017 at 10:43 pm #791368
    pavlika

    Thank you, Nikko. I’ve just disabled the function and everything is fine. I will be good to bypass code block, I hope the main coding team can handle this.

    May 11, 2017 at 1:49 am #791407
    Nikko

    Hi,

    Glad we could help :)

    Best regards,
    Nikko

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