Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #1223188

    Want a small static, independant Ad that has a logo, text and link, to appear on the left side of the page, over the top of the slider.
    See screenshot with Purple AD box on the left side of page: https://photos.app.goo.gl/bK6wQqTakMJzsE6m8
    Is this possible with the theme or do you know a plugin to get this effect?

    #1223566

    Please let me know on this issue. Thank you

    #1223623

    you can place a container as you like – best place on a fullwidth slider might be the avia-slideshow-inner container:

    style a div as you like to have. Copy that html code.
    clean up the html code to remove spaces between tags (inside a tag you can have it)

    for better select i gave the slideshow alb element a custom-class: ads-in-slider

    here is an example page: https://webers-testseite.de/bemodesign/
    here is the jQuery Code for it – put it in child-theme functions.php:

    function insert_to_a_fullwidth_slider() { 
    if(is_page(37941)){
    ?>
    <script>
    (function($){
    	$( '.avia-fullwidth-slider.ads-in-slider .avia-slideshow-inner' ).append('<div class="add-in-slider" style="background-color: #21495d; padding:0 20px 10px 20px; border-radius:0px 0px 30px 0px ; "><section class="av_textblock_section " itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="avia_textblock  av_inherit_color " style="color:#ffffff; " itemprop="text"><p><img class="alignnone" src="https://webers-testseite.de/wp-content/uploads/rhino-on-blob.png" alt="rhino-logo" width="150"></p><div class="hr hr-short hr-left" style="margin: 10px 0;"><span class="hr-inner"><span class="hr-inner-style"></span></span></div><p>Skip your<br>security deposit<br>with <a href="https://guenterweber.com" target="_blank" rel="noopener noreferrer">Rhino</a></p></div></section></div>');
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action('wp_footer', 'insert_to_a_fullwidth_slider');

    i gave a custom-class to the inserted div too : add-in-slider
    sorry sounds equal but isn’t – change it to your needs.

    then some options for the inserted div in quick css:

    .page-id-37941 .add-in-slider {
        position: absolute;
        border: 1px solid #fff;
        display: inline-block;
        z-index: 10;
        top: -1px;
        left: -1px;
        box-shadow: 3px 3px 20px #fff;
    }
    #1223657

    Hi,

    Please refer to @guenni007’s post above :)


    @guenni007
    Thanks for your help as always! :)

    Regards,
    Yigit

    #1223917

    This is perfect! I know how to add the Quick CSS code, but not sure how to add the top code. Do I add it to the Function.php file or to the “Fullwidth Easy Slider” – “Developer Settings”? Please specify where to add and I can change it up. Thanks!!

    #1223986

    Hi,

    The first code would go into your functions.php file, just make sure that you replace the number 37941 with the ID of your page, since the code is page specific.

    Best regards,
    Rikard

    #1224017

    I would strongly recommend to install a child theme for Enfold.
    You could of course place it in the functions.php of the parent theme, but these entries would be lost with the next update.
    So you have exactly one place for such snippets – the child-theme functions.php.

    See here some info and donwload a predefined child-theme: https://kriesi.at/documentation/enfold/child-theme/

    I do that from the beginning of all my installations – but Enfold offers some tools to take over the parent-theme settings.
    On Enfold – Import/Export there are some buttons that could help you.

    My experience and the reading here on board show that the following procedure is probably the most successful:

    • Parent Theme active : export theme settings file
    • Child Theme activate then : import that file.

    for responsive case maybe you decide to shrink a bit or to remove parts of the content:

    @media only screen and (max-width: 767px) {
      .page-id-37941 .add-in-slider {
        transform-origin: left top;
        transform: scale(0.6);
        transition: all 0.7s ease
      }
    }
    
    @media only screen and (max-width: 480px) {
      .page-id-37941 .add-in-slider img,
      .page-id-37941 .add-in-slider .hr-short{
        display: none
      }
    }

    As Rikard said – you had to adjust it to your page-id

    #1224183

    Yes! I got this to work. Thank you so much. Now, how do I add this to more than 1 page?

    Also I see where it says “.add-in-slider” and also “.ads-in-slider”. Does this matter? See examples from your code below:

    $( ‘.avia-fullwidth-slider.ads-in-slider
    custom-class: ads-in-slider
    inserted div too : add-in-slider

    #1224190

    And is it possible to make the whole thing be a link?

    #1224376

    these are only custom-classes – if you like to rename it – just do it and then change the code accordingly.
    ( thats why i mentioned a : sorry sounds similar but isn’t )

    You know how to give a custom class to an Enfold Element ?

    The code above is the code from my test-page for you – so it is site-specific as Rikard mentioned – if you have this on every page – and want it on every fullwidth slider you can get rid fo page-id and of first custom class.

    But this is to insert it the place you like – if a fullwidth-slider has that custom-class f.e. now : my-fullwidth-slider-with-that-ads :
    if the fullwidth-slider did not have that class – it will not have the additional div

    function insert_to_a_fullwidth_slider() { 
    ?>
    <script>
    (function($){
    	$( '.avia-fullwidth-slider.my-fullwidth-slider-with-that-ads .avia-slideshow-inner' ).append('<div class="my-styling-for-that-ads" …>…</div>');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'insert_to_a_fullwidth_slider');

    a custom-class just to have a simpler selector – now for f.e.: my-styling-for-that-ads

    .my-styling-for-that-ads {
        position: absolute;
        border: 1px solid #fff;
        display: inline-block;
        z-index: 10;
        top: -1px;
        left: -1px;
        box-shadow: 3px 3px 20px #fff;
    }
    #1224383

    if you like to have a big area as aktive link you can surround inside that div the section which is all arround the content (to surround the whole div i would not try) – because an anchor as a block-level element is hard to style f.e. with border-radius and it is hard to position in that manner so my solution now on that page this way:

    <div class="my-styling-for-that-ads" …><a href="https: …><section>your content </section></a></div>
    and give the padding to the section or to the textblock as here in the code:

    function insert_to_a_fullwidth_slider() { 
    ?>
    <script>
    (function($){
    	$( '.avia-fullwidth-slider.my-fullwidth-slider-with-that-ads .avia-slideshow-inner' ).append('<div class="my-styling-for-that-ads" style="background-color: #21495d; border-radius:0px 0px 30px 0px"><a href="https://YOUR-DOMAIN.com" target="_blank" rel="noopener noreferrer"><section class="av_textblock_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="avia_textblock  av_inherit_color " style="padding:0 20px 10px 20px; color:#FFF " itemprop="text"><p><img class="alignnone" src="/wp-content/uploads/rhino-on-blob.png" alt="rhino-logo" width="150"></p><div class="hr hr-short hr-left" style="margin: 10px 0;"><span class="hr-inner"><span class="hr-inner-style"></span></span></div><p>Skip your<br>security deposit<br>with <strong>Rhino</strong></p></div></section></a></div>');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'insert_to_a_fullwidth_slider');

    just for a better understanding the inserted div – see a solo html page with that div only and the tree-structure:

    but we need that div in a one-liner to insert it with append in the functions.php. Otherwise we will have a php error on that.

    PS : you then can have too a hover style for the whole div:

    .my-styling-for-that-ads:hover {
        background-color: #0040ff !important;
    }
    #1224750

    Ok, that is way too confusing, Ha. I just want this on every Full Width Slider. But when i remove the code, “if(is_page(19)) {” from the Function.php file, the site goes critical.

    1. What is the code I need to add to the function.php file

    2. What is the code I need for the Quick CSS?

    3. Do I need to add anything for the “Custom CSS Class” on the Full Width Slider or keep blank?

    #1224751

    Just FYI. This is what I have right now for the Function.php:

    <?php
    function insert_to_a_fullwidth_slider() {
    if(is_page(19)){
    ?>
    <script>
    (function($){
    $( ‘.avia-fullwidth-slider.ads-in-slider .avia-slideshow-inner’ ).append(‘<div class=”add-in-slider” style=”background-color: #6318ce; padding:0 20px 10px 20px; border-radius:0px 0px 30px 0px ; “><section class=”av_textblock_section ” itemscope=”itemscope” itemtype=”https://schema.org/CreativeWork”><div class=”avia_textblock av_inherit_color ” style=”color:#ffffff; ” itemprop=”text”><p>rhino-logo</p><div class=”hr hr-short hr-left” style=”margin: 10px 0;”><span class=”hr-inner”><span class=”hr-inner-style”></span></span></div>Moderne residents can use Rhino</br>to skip their security deposit</br>and save cash!</p></div></section></div>’);
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action(‘wp_footer’, ‘insert_to_a_fullwidth_slider’);
    /*
    * Add your own functions here. You can also copy some of the theme functions into this file.
    * WordPress will use those functions instead of the original functions then.
    */

    #1224752

    I added login to the Private:

    #1224890

    All opening brackets need a closing one!
    so if you get rid of: if(is_page(19)){

    you had to find the corresponding closing curly bracket. -( the round one are neutral the open and just closes a few letters behind)

    that is the reason why your code is not without error.

    Another hint: here on board it might be usefull to insert code as code – therefor we had here the code tag above.
    First click on code – then insert your code – click now on /code (oben a tag – close a tag as always)

    To look what might be not correct it is best to have it 1/1 – boardsoft changes if you do not use the code tag the content ( f.e. quotation marks to something different etc. pp )

    #1225814

    Hi bemodesign,

    Did you get it working with Guenni007’s help or do you need more help?

    Best regards,
    Victoria

    #1225968

    Yes!!! Thanks for all your help. Looks great!

    #1225972

    Hi,

    Great! Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    #1225978

    close please

    #1226000

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘place a small "static ad" over the top of the slider’ is closed to new replies.