-
AuthorPosts
-
June 16, 2020 at 8:55 pm #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?June 18, 2020 at 3:40 am #1223566Please let me know on this issue. Thank you
June 18, 2020 at 9:49 am #1223623you 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; }
June 18, 2020 at 11:34 am #1223657Hi,
Please refer to @guenni007’s post above :)
@guenni007 Thanks for your help as always! :)Regards,
YigitJune 19, 2020 at 12:35 am #1223917This 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!!
June 19, 2020 at 8:35 am #1223986Hi,
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,
RikardJune 19, 2020 at 10:59 am #1224017I 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
June 19, 2020 at 11:29 pm #1224183Yes! 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-sliderJune 19, 2020 at 11:56 pm #1224190And is it possible to make the whole thing be a link?
June 21, 2020 at 6:47 am #1224376these 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 divfunction 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; }
June 21, 2020 at 7:26 am #1224383if 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; }
June 23, 2020 at 1:04 am #1224750Ok, 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?
June 23, 2020 at 1:05 am #1224751Just 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></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.
*/June 23, 2020 at 1:06 am #1224752I added login to the Private:
June 23, 2020 at 3:12 pm #1224890All 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 )
June 26, 2020 at 2:08 pm #1225814Hi bemodesign,
Did you get it working with Guenni007’s help or do you need more help?
Best regards,
VictoriaJune 26, 2020 at 6:59 pm #1225968Yes!!! Thanks for all your help. Looks great!
June 26, 2020 at 7:25 pm #1225972Hi,
Great! Did you need additional help with this topic or shall we close?
Best regards,
Jordan ShannonJune 26, 2020 at 8:06 pm #1225978close please
June 27, 2020 at 12:05 am #1226000Hi,
If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘place a small "static ad" over the top of the slider’ is closed to new replies.