Forum Replies Created
-
AuthorPosts
-
can you check if the code above works for you.
open the parent theme functions.php and insert that code just in that place where the comment is:/* * register custom functions that are not related to the framework but necessary for the theme to run */
nearby lines 772ff
just before:
require_once( 'functions-enfold.php');
A child theme is not so hard to install. There are good instructions for this in the Enfold online documentation.
April 9, 2020 at 12:26 pm in reply to: Adding social media icons to mobile menu on mobiles only #1202250and maybe this is an additon to the code above for very long lists of social media icons an alternative way to have more space:
/********* adjust to your needs ***************/ @media only screen and (max-width: 768px) { .main_menu .social_bookmarks { display: none !important; } .avia-menu.av_menu_icon_beside { padding-right: 0; margin-right: 0; border-right: none !important; } } @media only screen and (min-width: 769px) { .main_menu .social_bookmarks:not(.sub-menu) { overflow: visible !important; display: flex !important; flex-flow: row wrap; justify-content: space-between; align-content: center; } .main_menu .social_bookmarks:not(.sub-menu) li { flex: 0 1 30%; line-height: unset !important; margin: 2px 0; } .only-burger.menu-item-social { display: none } } /********* Replacement for the above medie queries ***************/
April 9, 2020 at 12:04 pm in reply to: Adding social media icons to mobile menu on mobiles only #1202244i changed on my test-page a little the css
so on the ipad from landscape to portrait mode it now has an effect. Just to prove if it works when the device is tilted.April 9, 2020 at 11:57 am in reply to: Adding social media icons to mobile menu on mobiles only #1202242instead of append in :
mobileMenu.find('#av-burger-menu-ul').append(…
you can prepend that additional burger menu list-point.
but then you had to find your own styles – my job is done now ;)April 9, 2020 at 11:36 am in reply to: Adding social media icons to mobile menu on mobiles only #1202226so now my solution with split point at 768px – but you will see that you can easily customize it
( you had to remove the solutions from above ! )
see here: https://webers-testseite.de/pureinstall/this comes to child-theme functions.php:
function ava_custom_script_mod_social(){ ?> <script> (function($){ $('#header').one('click', '.av-main-nav-wrap', function() { var isMobile = $('.av-burger-menu-main').css('display'), social = $('#header .social_bookmarks').clone(true).addClass('sub-menu'), mobileMenu = $('.av-burger-overlay'); mobileMenu.find('#av-burger-menu-ul').append('<li class="only-burger menu-item-social av-active-burger-items"><a itemprop="url" alt="Social Bookmarks" style="" href="#"><span class="avia-bullet"></span><span class="avia-menu-text">Social Bookmarks</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span></a></li>'); if( social.length ){ mobileMenu.find('.only-burger.menu-item-social').append(social); } }); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_custom_script_mod_social');
this will end in a DOM like this: one li as a normal burger li with submenu social list:
Guess i think caused by missing css for burger social links these are in addition on quick css:
#av-burger-menu-ul .menu-item-social > a { pointer-events: none; } /********* adjust to your needs ***************/ @media only screen and (max-width: 767px) { .main_menu .social_bookmarks { display: none !important; } .avia-menu.av_menu_icon_beside { padding-right: 0; margin-right: 0; border-right: none !important; } } @media only screen and (min-width: 768px) { .only-burger.menu-item-social { display: none } } /************ End of media query for that *********************/ #av-burger-menu-ul .menu-item-social a .avia-menu-text { font-style: italic; } #av-burger-menu-ul .only-burger.menu-item-social { border-top: 1px dashed gray; border-bottom: none !important; } .html_av-overlay-side-classic #top .av-burger-overlay li.menu-item-social a { border : none !important } .responsive #top #av-burger-menu-ul .social_bookmarks.sub-menu { margin-left: 30px; overflow: visible; float: left !important; display: block !important; height: auto } #av-burger-menu-ul .social_bookmarks.sub-menu li { display: block; margin: 3px 10px; float: left; } #av-burger-menu-ul .social_bookmarks.sub-menu li a { padding: 10px !important; display: table-cell !important; float: none !important; border-radius: 0 !important } #top #wrap_all #av-burger-menu-ul .av-social-link-facebook a { padding: 10px 13px !important;} #top #wrap_all #av-burger-menu-ul .av-social-link-rss:hover a{color:#fff; background-color:#ffa133!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-facebook:hover a{color:#fff; background-color:#37589b!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-twitter:hover a{color:#fff; background-color:#46d4fe!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-whatsapp:hover a{color:#fff; background-color:#00e676!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-mail:hover a{color:#fff; background-color:#9fae37!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-dribbble:hover a{color:#fff; background-color:#e44885!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-linkedin:hover a{color:#fff; background-color:#419cca!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-search:hover a{color:#fff; background-color:#222222!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-gplus:hover a{color:#fff; background-color:#de5a49!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-behance:hover a{color:#fff; background-color:#008cfa!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-flickr:hover a{color:#fff; background-color:#ff0086!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-forrst:hover a{color:#fff; background-color:#234317!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-myspace:hover a{color:#fff; background-color:#000000!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-tumblr:hover a{color:#fff; background-color:#345574!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-vimeo:hover a{color:#fff; background-color:#31baff!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-youtube:hover a{color:#fff; background-color:#a72b1d!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-pinterest:hover a{color:#fff; background-color:#cb2027!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-skype:hover a{color:#fff; background-color:#12a5f4!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-instagram:hover a{color:#fff; background-color:#a67658!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-five_100_px:hover a{color:#fff; background-color:#222222!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-soundcloud:hover a{color:#fff; background-color:#F76700!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-xing:hover a{color:#fff; background-color:#006567!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-vk:hover a{color:#fff; background-color:#597BA5!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-reddit:hover a{color:#fff; background-color:#FF4500!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-yelp:hover a{color:#fff; background-color:#d32323!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-kununu:hover a{color:#fff; background-color:#2fb313!important; }
because there are no IDs cloned – there are no duplicate IDs in the DOM at a time.
By the way, this is not an orthographic error with :
one(‘click’ …
i was not sure if it would be added with every click. The jQuery .one() is then there to execute it exactly once.April 9, 2020 at 9:11 am in reply to: Adding social media icons to mobile menu on mobiles only #1202170This is not the first time such a request has been made to display the social icons in the Burger Menu.
Maybe there would be an option here to make this much easier to implement.
In main menu there are hooks that make it easier to edit them ( ava_inside_main_menu ). Maybe you should at least implement such a hook in the burger menu.i was now looking into source code if there is an easier way to add those icons to burger menu.
April 8, 2020 at 10:33 pm in reply to: Adding social media icons to mobile menu on mobiles only #1202035Well on my little code i had to find a way that the burger icon has a state that it has been clicked allready.
See here : https://webers-testseite.de/
but it only works if the burger has been opend one time. Don’t know why – maybe a mod knows a way.This is a load resize basis with debounce function so you can change screen width and you will see that it works ( as long the burger has been opend once.
___________
but let’s not get ahead of ourselves. Why can’t both of them be in the DOM, and by means of media querries only be faded in and out.
April 8, 2020 at 9:24 pm in reply to: Adding social media icons to mobile menu on mobiles only #1202018see edit the same time you post your comment
April 8, 2020 at 8:56 pm in reply to: Adding social media icons to mobile menu on mobiles only #1202010the difficulty for that is that a reaction on resize ( for example turn an ipad from landscape to portrait mode) is a performance-intensive way to observe. This is the reason why these functions almost always interact with a debouncing function.
Do you need the socket social media icons? If not – maybe you can try not to clone the icons but to detach them (that lines above)
$(socialString).each(function() { $(this).detach().appendTo('#av-burger-menu-ul'); });
edit ah now i see what is your aim : it is a page like this : https://kriesi.at/themes/enfold-creative-studio/ and you only want to shift the social icons to hamburger if screens are to narrow – that an overlap with logo will happen.
-
This reply was modified 5 years, 2 months ago by
Guenni007.
April 8, 2020 at 8:03 pm in reply to: Adding social media icons to mobile menu on mobiles only #1201999first question : you really mean only for mobile devices – or do you mean on small screens (<768px) ?
where do you like to use the shortcodes.
On default the shortcode usage isn’t activated for all places.
you can activate f.e. shortcode use on content or on widgets via child-theme functions.php:add_filter('widget_text', 'do_shortcode'); add_filter('the_content', 'do_shortcode');
April 7, 2020 at 9:35 pm in reply to: Hide blog navigation prev and next arrows until a specific scroll point #1201705You mean you want to change the direction and you want to stay in the same category!
Here we go: https://kriesi.at/support/topic/change-previous-next-buttons-in-portfolio-items/#post-1164041
April 7, 2020 at 7:41 pm in reply to: Beitrags-Titel auf Blogseite – Überschrift in H1 darstellen #1201690in den Listen würde ich es nicht machen, da dann mehrere h1 pro Seite existieren würden. Auch wenn in Zeiten der OnePager das nicht mehr ganz so streng betrachtet wird, ist es doch früher so gewesen, dass immer nur eine h1 pro Seite existieren sollte.
Daher ist h2 das Mittel der Wahl.
In den einzelnen Blogbeiträgen selber ist es jedenfalls dann eine h1 siehe: https://kriesi.at/themes/enfold-2017/2014/08/24/a-nice-entry/
Wenn es bei Euch anders sein sollte gebt mal bitte einen link dazu.
DankeApril 7, 2020 at 10:46 am in reply to: Creating diagonal at the bottom on Full Screen Slider #1201544Just for info : if you like to get the 5deg Angle of Enfold rotation slanted containers.
tangent of 5deg * 100vw = 8.75vw
so if you set these values to that svg :#top .divider .avia-slideshow svg.bottom { position: absolute !important; bottom: -1px !important; height: 8.75vw; z-index: 90; width: 100vw !important; transform: rotateY(180deg); }
you will have nearly the 5deg incline here.
and… https://webers-testseite.de/pureinstall/fullscreen-slider/April 6, 2020 at 8:17 pm in reply to: Creating diagonal at the bottom on Full Screen Slider #1201354by the way : if you play with the height of #top .divider .avia-slideshow svg.bottom
you can influence the inclination.you see here the svg container on hovering in devoloper tools the svg – the upper part of it is transparent – the lower one is filled with color
Dreieck is the german word for triangle –-
This reply was modified 5 years, 2 months ago by
Guenni007.
April 6, 2020 at 8:12 pm in reply to: Creating diagonal at the bottom on Full Screen Slider #1201351Well an elegant way would be to use svg dividers here.
See here with red color and a different svg –
with the svg in the code below and if you fill the svg with the background-color of your following container it will look like the slanted things from color-section.
https://webers-testseite.de/buttons/you see the method is usefull to have very nice and semitransparent dividers.
if it is a full-screen slider you can insert an svg into the slider-container by this in child-theme functions.php:
function insert_dividers(){ ?> <script> (function($){ $('.divider.bottom .avia-slideshow').append('<svg version="1.1" id="triangle" class="bottom" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="300px" viewBox="0 0 1500 300" preserveAspectRatio="none"><g fill="#900"><polygon points="1500,0 1500,300 0,300 "/></g></svg>'); })(jQuery); </script> <?php } add_action('wp_footer', 'insert_dividers');
Give a custom class to your fullscreen slider: divider bottom
you see on that svg – it has its own ID and a class and the triangle is filled red to see better what happens here.
you can fill the triangle later by quick css very easy by:#triangle g { fill: #fff !important; }
you now only have to shift the svg inside the slider and give a z-index to it:
#top .divider .avia-slideshow svg.bottom { position: absolute !important; bottom: -1px !important; height: 300px; z-index: 90; width: 100vw !important; transform: rotateY(180deg); } .divider .avia-slideshow-dots { bottom: 100px; position: absolute; }
if you like to have the other directiion of incline – get rid of transform: rotate
btw: if you wonder why there are two classes on that slider element?
i use this method with different svgs : top and bottom – so i got a lot of svgs as dividers – the divider class is for inducing the insertion; the bottom1, 2, 3 etc is for the different svgs i like to insert. the class inside svg ( bottom or top) is just for quick css to position the svg the right way.or – you determine a different image-size as source for the lightbox image
for masonry galleries – this to child-theme functions.php:function avia_change_masonry_thumbnail_link($size){ return "full"; } add_filter('avf_avia_builder_masonry_lightbox_img_size', 'avia_change_masonry_thumbnail_link', 10, 1);
then it will take the full image size ( original uploaded Image ) for it
btw: for different images ( image lightbox or gallery etc.) there are different filters to use
avf_avia_builder_gallery_image_link or
avf_avia_builder_helper_lightbox_sizePPS: for your mobile rendering of the image : no solution yet.
hi ismael – guess it is ruled in the fixed-date.php of that plugin
see here:
https://pastebin.com/F4Rce0c4
and in parsidate.php there is the conversion method:
https://pastebin.com/RaT6wqGy-
This reply was modified 5 years, 3 months ago by
Guenni007.
open that page in editor.
On the right side there is a toggle with “Layout” – look at “Footer Settings” – there you arei do this without plugin and embed it via codeblock:
<embed src="https://Your-Domain/wp-content/uploads/Musical.pdf" width="100%" height="800" type="application/pdf">
or via:
<embed src="https://drive.google.com/viewerng/viewer?embedded=true&url=https://Your-Domain/wp-content/uploads/Musical.pdf" width="100%" height="800">
result page: https://webers-testseite.de/pdf-on-website/
Last version works better on Safari!
you can use ordered list for it and nested too – but this is something not easy to create with editor in visual mode – in text mode it looks like this f.e.
<ol> <li>first level first list point <ol> <li>second level first list point</li> <li>second level second list point</li> <li>second level third list point</li> </ol> </li> <li>first level second list point</li> </ol>
you see how it works ?( the list point with sublevel has a complete list in it and closes after that the list point.
______________
i would give to the text alb element a custom-class f.e.: special-lists
Then you can select it easier :.special-lists ol { list-style-type: decimal; } .special-lists ol ol { list-style-type: lower-alpha; }
see result: https://webers-testseite.de/ordered-list/
see a list of list-style-types here: https://css-tricks.com/almanac/properties/l/list-style/-
This reply was modified 5 years, 3 months ago by
Guenni007.
do you only want to show the latest sticky on that slider first?
a sticky in sticky does not exist afaik.
But you have to describe a little better what you want to achieve.You can have the newest stickies on top – and you can limit it to a given number.
rsort( $sticky ); is something could be helpful here – maybe a mod knows a solutionApril 3, 2020 at 10:22 pm in reply to: Hide blog navigation prev and next arrows until a specific scroll point #1200678if you mean those post navigation arrows that link to the next or previous post
try this in your child-theme functions.phpfunction show_aviapostnav_onscroll(){ ?> <script> (function($) { $(".avia-post-nav").css("background-color", "0"); $(document).ready(function(){ $(window).scroll(function() { if ($(document).scrollTop() > 120) { // your wanted scroll distance $(".avia-post-nav").css("opacity", "1"); } else { $(".avia-post-nav").css("opacity", "0"); } }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'show_aviapostnav_onscroll');
-
This reply was modified 5 years, 3 months ago by
Guenni007.
Thanks – perfect : i didn’t look for $id_sizes in source.
but nevertheless even if – i couldn’t extend that array : but now i understand the sizes as the screen-width options.
the only thing to add for other participants here is of course to add the missing CSS instruction here:
f.e..av-masonry-col-7 .av-masonry-entry { width: 14.2%; }
On one of my enfold playground testpages – i got under each of my single post a post slider with other post to show randomly.
First: I do not want to show the current post in this post slider on single posts.
Second: i’d like to have allway that one ( or more ) sticky post on the beginning of that list.These codes comes to child-theme functions.php:
The first is easier to obtain:
function ava_exclude_current_post($query) { if (is_singular('post')) { $exclude = avia_get_the_ID(); $query->set( 'post__not_in', array($exclude) ); } } add_action('pre_get_posts', 'ava_exclude_current_post');
so i exclude the current ID from query.
The second request:
add_filter('avia_post_slide_query','avia_order_by_random', 10, 2); function avia_order_by_random($query, $params) { $include = array(); $sticky = get_option( 'sticky_posts' ); $args = array( 'post__not_in' => $sticky, 'orderby' => 'rand', // here you can influence the orderby option of the non sticky post to your needs ); $posts = get_posts( $args ); foreach($posts as $post) { $include[] = $post->ID; } if ( !is_sticky() ) { $include = array_merge($sticky, $include); }; $query['post__in'] = $include; $query['orderby'] = 'post__in'; return $query; }
orderby: https://developer.wordpress.org/reference/classes/wp_query/#order-orderby-parameters
if you only want this on special pages you have to work with if-clauses.
April 3, 2020 at 11:06 am in reply to: Enfold 4.7.4 Youtube Video in Footer Widget does not work #1200458Great; – can be closed
April 2, 2020 at 9:08 am in reply to: Farb-Sektion auf mobilen Geräten ausblenden / Logo soll nicht komprimiert werden #1200029du gibst da ein nicht ganz unwichtiges Stichwort : verpixelt.
Eignet sich dein Logo eventuell um es als vektorgrafik umzusetzen?
Wenn ja solltest du erwägen, es als svg zu verwenden. Aber irgendwann kommt der Punkt, da ist die Bildschrimauflösung dann maßgebend.
Unterhalb von 0,3pt Strichstärke lösen normal Bildschirme schon schlecht auf.
____________you’ve got a big point there: pixelated.
Is your logo possibly eligible for vector graphics?
If so, you should consider using it as svg. But there comes a point when the screen resolution is decisive.
Below a line width of 0.3pt, normal screens already have a poor display resolution.by the way there is that alb : page content with its shortcode:
[av_postcontent link='page,36445']
with 36445 in this example is the page ID. but it does not work with do_shortcode example above.and 2nd btw: we are also interested in a public solution. You never know when you might need it.
sorry this should go to another toppic what i posted here – …
thanks Ismael Is that on basis of 4.7.4 ?
because there is f.e. the whole part
if( ! function_exists( 'avia_wp_get_the_title' ) ){…
missing.
And some minor/major differences
With that : there are some difficulties with blog pages to show – but maybe it is an inconsitency with WP 5.4__________________
On this file i only replaced on basis of 4.7.4 the part of alternate logo and added the new:
if ( ! function_exists( 'avia_get_attachment_id' ) ) {…
https://pastebin.com/D3XRT7tr
with that it works great – thanks -
This reply was modified 5 years, 2 months ago by
-
AuthorPosts