Forum Replies Created
-
AuthorPosts
-
Abdeckung durch das weiß unten beim Hovern:
.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content, .av-flex-size.av-caption-on-hover-hide .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content { width: calc(100% + 2px); }
aber eventuell sieht es sogar eleganter aus, wenn du da einen Abstand wählst.
Denn der weiße Hintergrund und dann das weiße Overlay … ?.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content, .av-flex-size.av-caption-on-hover-hide .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content { width: calc(100% - 20px); margin: 10px; }
PPS: eigentlich sollte das Overlay auf einem mobilen Endgerät bereits geöffnet sein ! ( nicht auf kleinen screens aber auf echten physikalischen Endgeräten)
Enfold hat für mobile Endgeräte im html oben explizit Klassen eingeführt.
Wenn du mit einem Mobile Phone die Seite öffnest, dann ist automatisch avia_mobile als Klasse an html also als Selector z.B. dann:
.responsive.avia_mobile …
das kannst du dann also nutzen um die Elemente explizit für Handy und Co zu stylen. Problem: der hover style ist on touch aktiv.just a short info on media querries : there are not only media query for screen width but also for orientation:
so you can have something like this:
@media only screen and (max-width: 989px) and (orientation: landscape) { … }
PS: the opposite is “portrait”
you can have aspect-ratio or resolution etc.e.g.: for retina displays:
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ }
October 6, 2023 at 10:11 am in reply to: Hamburger Menu only on Startpage – all other normal text-link ,enu #1421592use that filter : avf_burger_menu_active
function custom_burger_menu_active( $active, $context ){ if( is_page(3) ) { return true; } return $active; } add_filter('avf_burger_menu_active', 'custom_burger_menu_active', 10, 2 );
change the is_page to your homepage id or use is_home( ) or is_frontpage( )
(yes there are differences between them – wheather the landing page is blog page or static page ;)Nice – but maybe it is best to select the div by its active state – because not always the first toggle is opend at start:
function custom_header_code() { ?> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', (event) => { if (window.innerWidth <= 768) { const div = document.querySelector('div.active_tc'); const p = document.querySelector('.activeTitle'); if(div || p) { div.classList.remove('active_tc'); p.classList.remove('activeTitle'); } } }); </script> <?php } add_action( 'wp_head', 'custom_header_code' );
and if you really want to have it only on mobile devices – you can have that without screen width detection.
function custom_header_code() { if(wp_is_mobile()){ ?> <script type="text/javascript"> window.addEventListener("DOMContentLoaded", function () { const div = document.querySelector('div.active_tc'); const p = document.querySelector('.activeTitle'); if(div || p) { div.classList.remove('active_tc'); p.classList.remove('activeTitle'); } }); </script> <?php }} add_action( 'wp_head', 'custom_header_code' );
only if you choose the selector activeTitle – the symbol in front will be set to closed ( + )
ok – the page with version 4.5.2. does not have this option (so it has all these -webkit- prefixes included).
The default on 5.6.6 is: modern browsers only. – So the missing vendor prefixes could have been a reason.Isn’t the most logical explanation that something changed in the Enfold code between those two versions? Probably something having to do with either burger menu or with logo/menu settings or with mobile settings.
see here an excerpt of legacy-enfold.css :
/* Contains vendor prefixed CSS rules that have been removed from core files because no longer needed Cannot be minified because old rules are removed !!!! @source enfold/css @since 5.6.3 */ … .av-burger-menu-main{ -webkit-transition: padding 0.3s ease-out; } .av-hamburger--spin-r .av-hamburger-inner::after { transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .av-hamburger--spin-r.is-active .av-hamburger-inner { -webkit-transform: rotate(-225deg); } .av-hamburger--spin-r.is-active .av-hamburger-inner::after { -webkit-transform: rotate(-90deg); -webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); } #av-burger-menu-ul li a{ -webkit-transition: none; } #top #wrap_all #av-burger-menu-ul > li{ -webkit-transition: opacity 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; -webkit-transform: translate3d(0,0,0); /*fixes disapearing in ios*/ } .avia_desktop.avia-safari #top #wrap_all #av-burger-menu-ul > li { -webkit-transform: none; } .html_av-overlay-side .av-burger-overlay-scroll{ -webkit-transform: translateX(350px); transform: translateX(350px); -webkit-transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1); } etc. etc. …
these are all concerning to hamburger – and a lot more
___________
What happend if you use not the smaller hamburger icon?-
This reply was modified 1 year, 9 months ago by
Guenni007.
did you see the download link in: https://kriesi.at/support/topic/icon-box-numbers-icons/#post-1421348
Link: https://webers-webdesign.de/numbers.zipEdit here – because topic closed already:
html body [data-av_iconfont="numbers"]::before { font-family: 'numbers'; font-weight: bold !important; font-size: 1.6em; position: relative; left: -5px }
to center the numbers !
By the way – the plain numbers could be styled to white icon colored background on the enfold albs itself.
Or by custom css and quick css rules.Edit – the download above includes Numbers on backgrounds. This is easier to handle then to have additional css.
you can download here an uploadable numbers font iconset i made from myriad bold fonts:
one sans-serif and one serif font (myriad and times)
and if you like to adjust font-weight and size:
#top .avia-font-numbers, body .avia-font-numbers, html body [data-av_iconfont="numbers"]::before { font-family: 'numbers'; font-weight: bold !important; font-size: 1.6em; }
yes – that is the way – and although this can be done very quickly with e.g. Illustrator with the font of your choice, you can also find free icons.
You can download them as svg and upload them to Fontello. Just drag them into the Custom Icons field.see here f.e. a free iconset – you can download each as svg.
https://www.flaticon.com/free-icon-font/2_8986257PS: i tested that font – Unfortunately, the glyphs there are not properly prepared. Therefore, in such a case, one takes an intermediate step via the icomoon app (link). Upload this svg there and then download the set. The svg contained in the zip can then be uploaded to fontello. They have the correct size now.
you can see here that my old ipad 3 mini (iOS 12.5.7 – that last one i could install on that device) caused some troubles on newer alb element like the before/after image.
https://kriesi.at/support/topic/enfold-options-page/see my comment here on apples philosophy to handle older devices:
https://kriesi.at/support/topic/enfold-options-page/#post-1406649on newest Enfold there is that new option on “Show Advanced Options” see what is there on “Old Browser Support”
Try the option “Support old Browsers”
in the option “only modern Browsers” all f.e. -webkit- prefixes will not be there
– and that might be necessary css for the older iOS 12.5.7 on your iPhoneTest that – but do not forget to refresh all cache and or merged files by enfold
hast du es als Hintergrund Video eingebettet? oder als Video auf der Seite mittels Video Element?
https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
https://developer.chrome.com/blog/autoplay/
https://webkit.org/blog/6784/new-video-policies-for-ios/Mit Autoplay werden die Filme also stummgeschaltet.
September 21, 2023 at 6:53 pm in reply to: cannot find the Enfold theme. the wordpress only show one theme #1419949Did you use the theme installer zip file only – and not the whole complete zip –
after that – goto dashboard – themes and activate the themeYes – i belong to the Text inside <summary>XYZ</summary>
by the way if you like to have only one details open at the same time:
function only_one_details_open(){ ?> <script type="text/javascript"> (function($){ $('details').on('click', function(){ $('details').not(this).removeAttr("open"); }); })(jQuery); </script> <?php } add_action('wp_footer', 'only_one_details_open');
By the way : not your Question – i know but
this is something i miss on default too:
the image sizes generated by enfold are all ( some are squared) in landscape format.
At least one image format should be created in portrait mode, e.g. for team members. Of course, the aspect ratios required for landscape shots are not suitable for such portrait shots. Here, 3:4 or 4:5 would probably be common formats.you can do that by a snippet inside child-theme functions.php:
add_image_size( 'news_size', 175, 260, false ); add_image_size( 'portrait', 900, 1200, false ); add_image_size( 'portrait_small', 450, 600, array( 'center', 'top' ) ); // this is with crop : true and crop properties function my_custom_sizes( $sizes ) { return array_merge( $sizes, array( 'news_size' => __( 'News Size' ), 'portrait' => __( 'Portrait' ), 'portrait_small' => __( 'Portrait small' ), )); } add_filter( 'image_size_names_choose', 'my_custom_sizes' );
but: this only works on uploadiing images. If you like to recalculate the existing images – use a recalculation plugin ( force regenerate Thumbnails etc.)
OK
Of course you can replace the details text. (not that one in the tag – but surrounded by the details tag)one way could be the very old way to set something in this html :
<details> <summary>Details</summary> Click here to add your own text </details>
you can add that to the team member description field – there are warnings about using tags – but it will work!
Or you do not enter the description to the team member element but in a separate text-block under the team member element.
On newer enfold versions there are options to fold/unfold text-block element just below the content input text area.see both alternatives here:
https://webers-testseite.de/team-member/did you switch on Enfold – Theme Options : near the bottom : “Select Your Editor”.
well I think it’s good that the error occurred. A mod should definitely log in with you.
On the one hand, I think you are loading all the scripts that Enfold has on the current page. Which is not necessary. You can set this in the Enfold settings under Performance – Disabling of Template Builder Elements: Load only used Elements.I don’t know where some of these entries have come from:
<script type="text/javascript" src="data:text/javascript;base64, … " defer=""></script>
i think they come from a plugin trying to optimize or cache existing scripts.
My first advice is : deactivate this lightspeed cache – or any other “optimization” Plugin and see if that corrects the situation. ( Allthough it is installed on the other page too)
After that you can activate one by one – alway flush cache between those trials to see.Please allways use the code tag here on board to post code snippets!
It is hard to read and to inspect only from text input.
Often errors occur if wrong quotation marks are set – but with text mode these are transfrered to slanted one – This particular source of error cannot therefore be properly assessed. etc.Yes – works nice!
how did you insert that #header_main_secondary?
And you do not like what you see? ;)
Gtmetrix uses lighthouse too – so i can not believe that the LCP and FCP is so bad on pagespeed and on Gtmetrix not.A fantastic TTFB !
Given the load times, I wouldn’t care about the number of DOM elements.
PS : that page does not belong to you: https://menainfosec.com/
PPS: brotli is even better than mod_deflate / gzip ;)
Do you belong to your website?
You are still on enfold 4.2 ?
Think of your images on uploading. First do you realy need png files overall? f.e. – your content-slider Mena-Info as png 437kb as jpeg : 53kb.
etc. pp. – if your Partners do offer svg files for their logos ( Global Cyber Aliance) use them instead.You haven’t activated gzip for your homepage!
Ask your provider if modules are installed ( f.e. mod_deflate) if so – we can activate the compression by a htaccess fileIf this is the matter (Self Hosted Fonts) – Mikes way should work.
on uploading the fonts via that Font Manager – the @font-face rules are generated – maybe those are still on those origin path.
Thanks – I can wait until you get it fixed – no rush.
interesting Question – and still relevant after such a long time.
I also wondered about the poorer loading times of a start page – especially these resources were named there for the poorer values (pagespeed insights – lighthouse). It should be possible, with the above-mentioned settings, not to load these resources if you have not selected videos as slides.by the way: to avoid this with nth-child use instead nth-of-type:
https://tympanus.net/codrops/css_reference/nth-of-type/ -
This reply was modified 1 year, 9 months ago by
-
AuthorPosts