Forum Replies Created
-
Posts
-
Das Ganze würde, wenn du denn beide nutzten wolltest ( du solltest dich allerdings für eine Version entscheiden ) so aussehen im Font Manager:
for example One : you can use the normal flyout and try to influence the slide-out behaviour.
f.e.:
.html_av-overlay-side.av-burger-overlay-active-delayed .av-burger-overlay-scroll { transform: translateY(0); } .html_av-overlay-side .av-burger-overlay-scroll { transform: translateX(0px); width: 100%; transform: translateY(-100%); transition: transform 2s ease }see: https://basis.webers-testseite.de/
PS: you do not need to set the width to 100% if you like to have smaller burger menus
and if you like to have not the whole height (standard for av-burger-overlay-scroll is 100% on enfold ) – and like to scroll inside burger menu – but then the height has to be synchronised with the transformY value
f.e: height set to 50% – then transformY(-50%)the second link you list – is nearby the option on : Main-Menu – Overlay Style : Full Page Overlay Menu
try this as selector above in the snippet from: https://kriesi.at/support/topic/disable-image-title-tooltip-on-hover/#post-1467222
var links = document.querySelectorAll('a, img, *[title]');have you activated the animation effect? – because on my test there is that extra class: av-masonry-animation-active
on yours only : av-masonry-animation-
https://webers-testseite.de/masonry-blog/on default the masonry content is placed over the whole image at the bottom.
You can avoid it by setting ( you had to play a bit with the values ) them outside the image.:this to quick css:
.av-masonry-entry:not(.av-masonry-item-no-image) { margin-bottom: 145px !important; } #top .av-inner-masonry { overflow: visible; } .av-fixed-size .av-masonry-entry .av-inner-masonry-content { bottom: unset !important; top: calc(100% - 1px); min-height: 135px; }Ok – put only your 1/4 columns in one color-section – nothing else – the heading and separator had to be in an extra section.
Because as mentioned on may page – every element will be part of that grid layout.For your anchor navigation : maybe your heading including the separator got that ID.
For the grid layouted section do not forget to set the custom class – and put all ( like on my preview image of the layout ) in that section ( all 7 )Leider kann ich ja nicht Eure Kommunikation im “Private Content” nachvollziehen ( als Participant ) aber wenn ich mir die Demo auf einem iPad ( real device 10.5 ) anschaue, dann sehe ich da keine Aussetzer. Lediglich das Umschalten von fixed auf scroll ist üblich, da wohl Safari schlecht mit background-attachment: fixed umgehen kann.
Welchen Grund hat es, das Ihr “mobile” Sektionen erstellt? Stimmen dann die Bildausschnitte nicht mehr? …
_____________
Unfortunately I can’t follow your communication in ‘Private Content’ (as a participant), but looking at the demo on an iPad (real device 10.5) I don’t see any dropouts. Only switching from fixed to scrolling is common, as Safari is probably bad at background attachment: fixed.
Why do you create ‘mobile’ sections? Are the image sections no longer correct? …
The Ajax search shows only a few results. The results are displayed in a certain order (newest; page order …); Your search term is on a page that is older than the pages shown.
The number – how many results are displayed – is set to 5 by default in Enfold. This makes sense for the normal placement at the top inside main menu. Where you have the search, you might want to increase this a little.Incidentally, if you only want to display pages (or posts) there, you could also restrict this to these post types.
Put this to your child-theme functions.php :
function avf_modify_ajax_search_query($search_parameters){ parse_str($search_parameters, $params); $params['numberposts'] = 10; $search_parameters = http_build_query($params); return $search_parameters; } add_filter('avf_ajax_search_query', 'avf_modify_ajax_search_query', 10, 1);Oswald ist einer dieser Fonts die bereits bei Google als variabler Font angeboten werden. Variable Fonts können auch Zwischenwerte annehmen. Häufig betrifft dies nur das font-weight, aber auch andere Werte wie font-höhen font-breiten etc.
Bei Oswald ist es in der Tat nur das font-weight. ( Einer dieser “Super Fonts” ist z.B. Roboto Variable ).
Wenn du also Oswald bei Google downloadest, dann erhältst du den variablen Font und in einem gesonderten Ordner (static) auch die statischen (traditionellen) Font Varianten.
Dieses zip welches du bei Google heruntergeladen hast, ist so nicht geeignet in den Font Manager von Enfold hochzuladen.Jetzt gilt es eine Entscheidung zu treffen. Nutzt man wirklich die Möglichkeit eine Schriftdefinition von font-weight: 334? ( das müßte man auch im css so anlegen ) braucht man alle font-weight von 200 bis 700 bei Oswald? Oder ist man zufrieden, die gängigen Werte zu akzeptieren und beschränkt sich auf 300, 400, 700.
Moderne Browser ( und das sind mittlerweile fast alle ) unterstützen zudem das Format woff2, welches aus performance technischen Gründen die bessere Wahl ist. Google bietet jedoch nur ttf an. Statische Schriften vermögen etliche online Tools gut in woff2 zu wandeln. Bei den variablen Fonts versagen oft alle online Tools. Ich nutze ein Command-Line Programm um solche variablen Fonts in woff2 zu wandeln. – ist aber nicht jedermanns Sache.
gute Beschreibung : LinkWenn man nun alle ttf ( würde ich als Fall-Back Lösung mit hochladen für die älteren Browser ) und woff2 hat, die man möchte:
die Statischen Fonts (ttf und woff2) in einen Ordner legen – den variablen Font in einen weiteren Ordner (ttf und woff2) – den einen nennst du Oswald – den anderen z.B. Oswald Variable.
Diese jetzt packen ( am PC gibt es keine Probleme; bei Mac zum Packen ein Programm wählen, wo man die mac spezifischen meta Daten ausschließen kann (BetterZip …)) . Diese zip sind nun bereit für den Upload in den Font Manager von Enfold.Meine Empfehlung : nimm nur das zip mit der Auswahl von statischen Fonts. Bei der Nutzung der variablen Fonts muss man beim Einrichten der Fontnutzung noch an User denken, die ältere Browser in Benutzung haben, welche keine variablen Fonts umsetzen können.
https://caniuse.com/variable-fontsWenn Sie jedoch der Meinung sind, dass die wenigen Personen, die ältere Browser verwenden, zahlenmäßig und von der Bedeutung her vernachlässigbar sind, dann reicht es aus, die variable Schriftart zu verwenden und sogar nur die woff2 im Zip zu belassen.
Hier mal die zip für Oswald – entscheide selbst:
Oswald: Link1
Oswald Variable: Link2__________________
translation by deepL:Oswald is one of the fonts that Google already offers as a variable font. Variable fonts can also take on intermediate values. Often this is just the font weight, but other values such as font height, font width, etc. are also possible.
In Oswald’s case, it is only the weight. (One of these “super fonts” is, for example, Roboto Variable).
So if you download Oswald from Google, you will get the variable font and the static (traditional) font variants in a separate folder (static).
The zip you downloaded from Google is not suitable for uploading to the Enfold Font Manager.Now you have to decide. Do you really need to use a font definition with weight: 334 (you would also have to create this in the css), do you need all the weights from 200 to 700 in Oswald? Or are you content to accept the default values and limit yourself to 300, 400, 700?
Modern browsers (which are now almost all) also support the woff2 format, which is the better choice for technical performance reasons. However, Google only offers ttf. A number of online tools can convert static fonts to woff2. For variable fonts, all online tools often fail. I use a command line tool to convert such variable fonts to woff2. – But it’s not for everyone.
Good description: Link
Now that you have all the ttf (I would upload this as a fallback solution for the older browsers) and woff2 fonts you want:On the other hand, if you believe that the few people who use older browsers are negligible in number and importance, then it is sufficient to use the variable font and even leave only the woff2 in the zip.
Put the static fonts (ttf and woff2) in one folder – the variable fonts in another folder (ttf and woff2) – one you call Oswald – the other e.g. Oswald Variable. Now zip them (no problem on a PC; on a Mac, choose a zip program that allows you to exclude the Mac-specific metadata files (BetterZip …)). These zip files are now ready to be uploaded to Enfold’s Font Manager.
My recommendation: only use a selection of static fonts. When setting up the use of variable fonts, users who use older browsers that are unable to handle variable fonts must be taken into account.
Links of Oswald Font see above.
by the way – you got a post.css ( maybe an inline css) that is:
@media only screen and (min-width: 768px) and (max-width: 989px) { .avia-section.av-dbfgfq-dd62c8cfe0da5cdb4e4a6575d399ef7e { z-index: 989; } }get rid of that setting
and a :
header { max-width: 100%; height: 150px; padding: 30px; filter: blur(0px); -webkit-filter: blur(0px); }get rid of that filter ( both )
then you can see your hamburger again
thats why i wrote:
Mostly there is the opportunity to edit the child-theme functions.php via Dashboard: …
some Providers or Security Tools hamper that Option.
be carefull if you install that child-theme on an existing installation!
Enfold has on Import/Export Options : “Import Settings From Your Parent Theme”. Button –
This generally works smoothly. The child theme then initially adopts the settings of the parent theme – including the quick css settings.But link above to docu can tell you more detailed
By the way: you do not need to edit this by ftp.
Mostly there is the opportunity to edit the child-theme functions.php via Dashboard:Dashboard – Appearance – theme file editor ( right side click f.e. on functions.php)
______________________________
after that for that test page of mine i have in quick css:
.avia_mega_div.avia_mega7 { right: calc(-100vw) !important; width: 95vw; } #top .avia_mega_div > .sub-menu { display: grid !important; margin:0; gap: 20px 0px; grid-auto-flow:row; grid-template-columns: repeat(7, 1fr); /*** that means 7 grid-cells with each 1 fraction (same size) ***/ } #top #header .avia_mega_div > .sub-menu > li { display: block !important; width: unset; position: relative; } #top #header .avia_mega_div { max-width: 100vw; /*** if it is neccessary ***/ } @media only screen and (min-width: 990px) and (max-width: 1199px) { #top #header .avia_mega_div > .sub-menu { grid-template-columns:repeat(4, 1fr); } #header .avia_mega_div { overflow-y: scroll; /*** needed - if your mega-div height is too large for your device ***/ max-height: calc(100vh - 200px); /*** depends on your header height ***/ } }do you use a child-theme ?
see here the documentation: https://kriesi.at/documentation/enfold/child-theme/
This is my recommended use of WordPress themes. You can easily change the settings of the parent theme – and these will be retained even after updates.
A child theme has on start ( you see the link above got a preset child-theme to download ) these three files : style.css / functions.php and a screenshot.png
in style.css there is the info of parent theme name and how to find the template
the functions.php is at start nearly empty ( editing that file : do not overwrite the first line )
the png is only to have a preview on themes overview.A child theme is placed besides the parent theme
on a test installation i inserted the above snippet to child-theme functions.php:
function change_max_columns_on_mega_div($args){ $args['max_columns'] = 7; return $args; } add_filter('wp_nav_menu_args', 'change_max_columns_on_mega_div', 10, 1);and put in addition ( due to the lack of calculation for this case in Enfold avia.js ) in my quick css:
.avia_mega_div.avia_mega7 { right: calc(-100vw) !important; width: 95vw; }see example page on “Mega” Menu-Item : https://basis.webers-testseite.de/
Yes – that discussion is now from me to the devs or mods – and my hope is that it will find a solution then for you.
______________
we can have that filter :function change_max_columns_on_mega_div($args){ $args['max_columns'] = 7; return $args; } add_filter('wp_nav_menu_args', 'change_max_columns_on_mega_div', 10, 1);but we had to find now a solution for the missing calculation of positioning the mega-div for that case
that would be new to me, that Enfold automatically sets a new row after 6 submenu items.
Then I’m sorry, because I see that a new submenu is set in the DOM every 6 menu items. I thought you did this manually.
____________
i see on Enfold code that there is a max_columns defined on class_megamenu.php and in helper-responsive-megamenu.php
maybe a filter could help heremy solution would be to use grid layout on that :
7 1/4 columns with no equal height inside a color-section with a custum-classsee: https://webers-testseite.de/apg/
My recommendation for images that should look the same: Crop them the same way – that is, keep them at least in the same aspect ratio.
ps : you do not need to preserve the clip-path when you switch to responsive view:
@media only screen and (max-width:989px) { .polygonright .avia-image-container-inner { -webkit-clip-path: polygon(100% 50%, 100% 100%, 0% 100%, 0% 50%, 50% 0%); clip-path: polygon(100% 50%, 100% 100%, 0% 100%, 0% 50%, 50% 0%); } .polygonleft .avia-image-container-inner { -webkit-clip-path: polygon(100% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 0%); clip-path: polygon(100% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 0%); } }you must of course adapt this to the responsive behavior, e.g. if you change the order – i.e. have all images first and then the texts. In this case, all “arrows” must point downwards.
on image elements – this selector avia-image-container-inner is best for it but if you try to have it on columns – the selector might be better the flex_column itself:
.flex_column.polygonright { -webkit-clip-path: polygon(0% 0%,68% 0%,100% 50%,68% 100%,0% 100%); clip-path: polygon(0% 0%,68% 0%,100% 50%,68% 100%,0% 100%); }ps: do not forget to use both clip-path and webkit-clip-path
you do not need to pre define the place when a new row is started at mega menu!
you can do that by setting the mega div submenu to a grid layout:https://kriesi.at/support/topic/tip-responsive-mega-div/
but:
I forgot to tell you that from the mobile phone, so I’m not talking …
You have a normal text menu on mobile phone? …
so it’s about the hamburger menu (a mega div with 7 columns next to each other on the cell phone is hardly recommendable)
next: images besides the menu-items text could be placed by doing it manually on label input field on menu page.
or look to the link – there is a way to have the featured images besides the menu-item link.do you use my snippet? – if you are using da_DK lang file
wow – no changes in your translations since version 3.6 ?
this is already done by the language files (for your language too, I hope), in German this is the case.
see here a blog example page ( the green Titles) : https://webers-testseite.de/masonry-blog/and a bit of css:
.av-masonry-entry-title .av-masonry-comment-count { font-size: 0.8rem; color: #666 }hey – ismael – can you test if this will work too:
this is a little bit different – as you can see – and with the included translation and differs between singular and plural casefunction avf_append_comments_to_masonry_title( $the_title, $entry, $atts ) { $commentCount = get_comments_number( $entry['ID'] ); $text_add = $commentCount === '1' ? __( 'Comment', 'avia_framework' ) : __( 'Comments', 'avia_framework' ); if ( $commentCount > 0 ) { $the_title .= " <span class='av-masonry-comment-count'> ({$commentCount} {$text_add}) </span>"; } return $the_title; } add_filter( 'avf_masonry_entry_title', 'avf_append_comments_to_masonry_title', 10, 3 );but isn’t it an existing feature inside postslider.php to show the comments count?
Enfold – Blog Layout – Blog Meta ElementsThe entypo icon-font on fontello is nearly identical to the enfold entypo-fontello.
Only the last line differs:
