Forum Replies Created
-
AuthorPosts
-
yes in the else statement of :
if( ! empty( $logo ) )
there will be no image so no alt nor title.
The aria label should stay :
i replaced those lines from 822 to closing else statement with:$aria = ''; $aria = 'aria-label="' . __( 'Fallback Logo', 'avia_framework' ) . '"'; /** * Return a complete modified aria-label="" attribute string * * @since 5.6.5 * @param string $aria * @return string */ $aria = apply_filters( 'avf_avia_logo_link_aria_label', $aria ); $logo = "<{$headline_type} class='logo bg-logo'><a href='{$link}' {$aria} >{$logo}{$sub}</a></{$headline_type}>"; }
see on pastebin the whole code.: https://pastebin.com/8BsvVC6T
but i guess that Günter will fix it soon – in a better way. than i can do.
yes i can confirm that i have this too – a bit different:
___________________
you can use this snippet to avoid output that fallback image or the blog_name
function change_logo_on_empty_logo_input($logo){ if(empty(avia_get_option('logo'))){ $logo = ""; } return $logo; } add_filter('avf_logo_final_output','change_logo_on_empty_logo_input');
That’s up to you: I make no claims to copyright ;)
the heading is only a “heading” for those bookmark links: you can see it in the screenshot of mike:
“Social Bookmarks” thats allor here:
July 30, 2023 at 8:07 pm in reply to: How to display “Enfold Main Menu” and “Enfold Secondary Menu” in burger menu #1414960use your footer menu for that. If you do not like to show that menu – set it to display: none. via quick css.
it goes without saying that the hamburger menu must be set to full page overlay!this snippet goes to child-theme functions.php:
function footer_menu_to_hamburger_menu(){ ?> <script> (function($){ $('#header').one('click', '.av-main-nav-wrap', function() { var isMobile = $('.av-burger-overlay').css('display'), footerMenu = $('#avia3-menu'), mobileMenu = $('#av-burger-menu-ul'), footerMenuClone = $('#avia3-menu').clone(true).addClass('second-burger-menu').css('display', 'block'); if( footerMenu.length ){ (footerMenuClone).insertAfter(mobileMenu); } }); })(jQuery); </script> <?php } add_action('wp_footer', 'footer_menu_to_hamburger_menu');
this to your quick css:
#socket .sub_menu_socket { display: none } #top .av-burger-overlay-inner { display: inline-table; top: 0 !important; } .html_burger_menu_active #header .avia-menu .av-burger-overlay .menu-item { display: block !important; } #top .av-burger-overlay #av-burger-menu-ul { display: table-cell; vertical-align: middle !important; width: 50vw; padding: 0px 5vw !important; text-align: right !important; text-transform: uppercase; border-right: 1px dashed #999; /**** a separator if you like ***/ } #top .av-burger-overlay .second-burger-menu { display: table-cell !important; width: 50% !important; height: 100%; left: 50vw !important; padding: 0px 5vw; vertical-align: middle !important; text-align: left; text-transform: uppercase; z-index: 115; } .html_burger_menu_active #header .avia-menu .av-burger-overlay .second-burger-menu .menu-item { font-size: 24px; line-height: 2.7em; padding: 0.3em 0; } .html_burger_menu_active #header .avia-menu .av-burger-overlay .menu-item a { color: #FFF !important; } .html_burger_menu_active #header .avia-menu .av-burger-overlay .menu-item a:hover { opacity: 0.7; } .html_burger_menu_active #header .avia-menu .av-burger-overlay-inner .avia-menu-fx { display: none; } #top .av-burger-overlay-bg { background-image: url(/wp-content/uploads/background.jpg); background-repeat: no-repeat; background-size: cover; opacity: 1; filter: brightness(0.1); }
PS: the behavior of shifting the content left side was the setting before testing your requested hamburger option – it is part of non-fullpage overlay that hamburger pushes the content side
July 30, 2023 at 4:31 pm in reply to: How to display “Enfold Main Menu” and “Enfold Secondary Menu” in burger menu #1414934there is no such option in enfold by default. Yes – that page is an enfold page – but there might be custom script combining overlay main menu with footer menu.
one thing to mention on inserting these snippets to child-theme functions.php: Sometimes you had to set the priority of the function to be before loading of datepicker. So a 10 might be usefull as priority – f.e.:
function exclude_datepicker_dates() { ?> <script type="text/javascript"> var unavailableDates = ["17/12/2017", "12/12/2017", "18/6/2017"]; function unavailable(date) { dmy = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear(); if (jQuery.inArray(dmy, unavailableDates) == -1) { return [true, ""]; } else { return [false, "", "Unavailable"]; } } </script> <?php } add_action('wp_footer', 'exclude_datepicker_dates', 10);
and to keep in mind – counting starts at zero : Sunday is Day: 0 of the week and
and you do not like to use the video alb instead for it?
There you have the option to have a user defined image as preview image – and on advanced tab you can choose “Show in lightbox”by the way – in which form did you enter the youtube link? as
https://www.youtube.com/watch?v=ID
i would have centered them in a different way. Not only because the fit-content is not supported on all mobile browsers or IE’s: Link
The isHeading is only the “first level” Menu Item text. I did not set it as a first level item with a submenu (expandable) in the code. That would be quite possible. But I didn’t want to do without a heading for the sub-menu items.
if you like to try a littel different solution – as said above – using socket social icons
see result on : https://pureinstall.webers-testseite.demy snippet for child-theme functions.php:
function social_footer_icons_to_hamburger_menu(){ ?> <script> (function($){ $('#header').one('click', '.av-main-nav-wrap', function() { var isMobile = $('.av-burger-menu-main').css('display'), isHeading = "Social Bookmarks", social = $('#socket .social_bookmarks').clone(true).addClass('sub-menu').css('display','block'), mobileMenu = $('.av-burger-overlay'); mobileMenu.find('#av-burger-menu-ul').append('<li class="menu-item-social av-active-burger-items" role="menuitem"><span class="avia-menu-text">'+isHeading+'</span></li>'); if( social.length ){ mobileMenu.find('.menu-item-social').append(social); } }); })(jQuery); </script> <?php } add_action('wp_footer', 'social_footer_icons_to_hamburger_menu');
this to quick css ( had to be adjusted to your needs)
#socket .social_bookmarks { display : none ; } #top #av-burger-menu-ul { padding: 120px 0px 0px !important } #av-burger-menu-ul .menu-item-social { display: table; width: 100%; } #top #av-burger-menu-ul .menu-item-social .avia-menu-text { display: block; width: 100% !important; padding: 15px 50px 5px; text-align: left !important; font-style: italic; }
These icons are there : scroll inside your overlay menu – they are placed at the bottom.
on my opinion a nested ul should be inside a li element. Then it would be easier to position the sub-level element inside that List element.Next tip: i would use for it the socket social icons. If you do not like to see them – it would be easy to set them to display: none.
Because – we do not run into conflict with the header_meta social icons. : it could happen that on bigger mobile devices ( tablets ) when opening the hamburger and closing it again switching to landscape view social icons may not be visible on header_meta.The layer slider setting for the slider in question is really only suppressed for mobile devices – not for small screen sizes. Or was your slider indeed displayed on mobile phones despite the setting?
btw. you should change the font color on hovering the menu-items
f.e.:#top #header .av-main-nav > li:hover > a .avia-menu-text, #top #header .av-main-nav > li:hover > a .avia-menu-subtext { color: #FFF; text-shadow: 1px 1px 3px #000 }
it shows now the same color as the background-color.
if you like to preserve your column setting – do not place an empty 4/5 and an 1/5 – just use a 1/1 container
inside an image alb with image position right. Choose the image size on entering your media.this is my css for that page : https://enfold.webers-webdesign.de/charlie/
in this case it might be the best to use a custom class – f.e.: image-right-top then:
#top .avia-section.image-right-top .container { width: 100% !important; max-width: 100% !important; padding: 0; } #top .avia-section.image-right-top .content { vertical-align: top !important; padding: 0; }
do not try to put an extra container to that color-section.
Just place two background-images for that container.
so remove the image inside and place just a quick css :.avia-section.av-lkbs50gw-4f6252733029933ed3712caa877cf044{ background-image:url(https://asiantradeassociation.com/wp-content/uploads/2023/05/92d074ce-66c0-4850-8020-88c18c9d9ebd-231x300.webp), url(https://asiantradeassociation.com/wp-content/uploads/2023/07/pexels-karolina-grabowska-40221071.jpg); background-position: calc(100% - 50px) 50px , left top; background-size: 200px auto , cover !important; background-repeat:no-repeat; background-attachment:scroll; }
see here: https://webers-testseite.de/multiple-background-images/
as a participant as you are – i do not see any private content message.
i do not know what is the name of your uploaded font for that teams icon!ok – now i tried to do it with a font file
i only uploaded that teams icon : font name is teams so i used:function avia_add_custom_social_icon($icons) { $icons['Teams'] = 'teams'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1); function avia_add_custom_icon($icons) { $icons['teams'] = array( 'font' =>'teams', 'icon' => 'ue800' , 'display_name' => 'Teams Link'); return $icons; } add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
ok – your mentioned code – your font is called fontello or do you use the existing : entypo-fontello font.
then your code is wrong with the name of the fontnext : on docu there is an example code – using images instead of font icons . You will have the opportunity to have better social icon instead f.e:
from : https://iconduck.com/icons/185336/teams
( here with 40px icon – but adapt it to your needs )#top .social_bookmarks li, #top .social_bookmarks li a { width: 40px; height: 40px; } #top #wrap_all .av-social-link-teams a:before{ content: ""; width: 40px; height: 40px; display: inline-block; vertical-align: middle; background: url(/wp-content/uploads/teams.png) no-repeat center center; background-size: contain; }
the link you can set in options on enfold
see: https://enfold.webers-webdesign.de/#footeryou are welcome
But:. a color-section has that fold/unfold option too !
so you can put your column layout and what ever you like to one color-section and do the same thing to it ;)
and use 1/2 columns as usualyou can surround your “blocks” (h6 p and ul) in text-mode by div with a custom class – f.e.: <div class=”no-column-break”></div>
and then :
.no-column-break { break-inside: avoid-column; }
<div class="no-column-break"> <h6>Hvilke fordele har WooCommerce ift. at oprette en webshop?</h6> WooCommerce er en fleksibel og brugervenlig e-handelsplatform, der integreres sømløst med WordPress. Nogle af de primære fordele inkluderer: Brugervenlighed: Let at installere og opsætte, selv for brugere uden tekniske færdigheder. <ul> <li>Tilpasning: Et stort udvalg af temaer og plugins giver mulighed for at tilpasse webshoppen til dit brand og design.</li> <li>Produktstyring: Nem håndtering af produkter, kategorier, lagerbeholdning og priser.</li> <li>Sikkerhed: Regelmæssige opdateringer sikrer en pålidelig og sikker webshop oplevelse.</li> <li>Stor fællesskabsstøtte: En aktiv brugerbase og et stort udvikler fællesskab tilbyder support og ressourcer.</li> </ul> </div> <div class="no-column-break"> <h6>Hvordan adskiller WooCommerce sig fra andre e-handelsplatforme?</h6> WooCommerce skiller sig ud på flere måder: <ul> <li>WordPress-integration: Det er en integreret løsning til WordPress, hvilket gør det nemt at tilføje e-handelsfunktionalitet til en eksisterende WordPress-hjemmeside.</li> <li>Skalerbarhed: Det er velegnet til både små og store webshops, da det tilbyder en bred vifte af udvidelser og tilpasningsmuligheder.</li> <li>Åben kildekode: Det er baseret på åben kildekode, hvilket betyder, at det er gratis at bruge og muligt at tilpasse efter behov.</li> <li>Fleksibilitet: Det er let at tilføje og administrere produkter, integrere betalingsmetoder og udvide funktionaliteten via plugins.</li> </ul> </div> <div class="no-column-break"> <h6>Hvordan hjælper WooCommerce med at gøre styringen af en webshop nemmere?</h6> WooCommerce er designet med brugervenlighed i tankerne: <ul> <li>Intuitivt kontrolpanel: Et brugervenligt kontrolpanel giver let adgang til produkter, ordre, lager og andre indstillinger.</li> <li>Responsivt design: Webshoppen vises pænt på både computere og mobile enheder, hvilket er afgørende for en god brugeroplevelse.</li> <li>Indbygget betalingsintegration: Muligheden for at integrere populære betalingsgateways gør det nemt at håndtere transaktioner.</li> </ul> </div> <div class="no-column-break"> <h6>Hvilke udvidelser er tilgængelige for WooCommerce?</h6> WooCommerce har et bredt udvalg af udvidelser og plugins: <ul> <li>Betalingsgateways: Tilføj forskellige betalingsmuligheder, såsom QuickPay, Bambora, PayPal, Stripe og mange flere! Forsendelsesmetoder: Integrer med forskellige forsendelsesudbydere for at tilbyde forskellige leveringsmuligheder til dine kunder.</li> <li>Produktanmeldelser: Lad kunderne give anmeldelser, hvilket øger troværdigheden og tilliden til dine produkter. Salgsovervågning: Få indblik i salgsstatistikker og kundeaktivitet for at optimere din webshop.</li> <li>Hos ICONIQ bygger vi også moduler Gutenberg som er kompatible med WooCommerce, samt integrerer de fleste systemer du arbejder med.</li> <li>Hvorfor er WordPress et ideelt valg til at drive en webshop gennem WooCommerce?</li> </ul> </div> <div class="no-column-break"> <h6>WordPress er en af de mest populære CMS-platforme med mange fordele:</h6> <ul> <li>Brugervenlighed: Nem at bruge og administrere indhold, selv for dem uden tekniske færdigheder.</li> <li>Stor fællesskabsstøtte: En stor og aktiv brugerbase giver let adgang til support og ressourcer.</li> <li>SEO-venlighed: WordPress er godt optimeret til søgemaskiner, hvilket hjælper med at forbedre webshoppenes synlighed online.</li> <li>Skalerbarhed: Det er velegnet til både små og store webshops, da det tilbyder en bred vifte af udvidelser og tilpasningsmuligheder.</li> </ul> </div> <div class="no-column-break"> <h6>Gutenberg’s fordele for WooCommerce webshop:</h6> Gutenberg gør det lettere for webshop-ejere, at skabe en imponerende og kraftfuld webshop oplevelse uden at skulle ty til kompleks kodning. Med Gutenberg’s blokredigeringsfunktion kan du tage din WooCommerce webshop til næste niveau med visuel kontrol og kreativ frihed over dit indhold. Du får bl.a. følgende funktioner: <ul> <li>Visuel redigering: Se ændringer i realtid.</li> <li>Mere kontrol over layout: Nem organisation af indhold.</li> <li>Nem integration af indhold: Integrer WooCommerce produkter på flere måder med Gutenberg.</li> <li>Fremtidssikret: Fokus på kontinuerlige forbedringer og fokus på performance, uden du skal gøre noget.</li> <li>Mindre kodeafhængighed: Reducer behovet for kompleks kodning.</li> <li>Forbedret brugeroplevelse: Enkel og intuitiv brugergrænseflade.</li> <li>Hastigheden i top: Gutenberg sikre den bedste performance og dermed en bedre brugeroplevelse.</li> </ul> ICONIQ bygger integrationen mellem Gutenberg og WooCommerce og skræddersyr setuppet, så det passer til dit brand og udtryk. </div>
and did you see the link : https://enfold.webers-webdesign.de/multicolumn-text-block/
by the way – you can hamper floating of lists-items to the next text-column or breaking p-tags :
https://enfold.webers-webdesign.de/multicolumn-text-block/in german tradition these stying mistakes are called “Hurenkind” and “Schusterjunge”
Hurenkind (whore child)
occasionally called son of a dog, around 1900 freak, since the 1980s sometimes widow. This is the name given to the last line of a paragraph when it is also the first of a new page or column. According to an old prejudice, “son of a dog” did not know who their father was – their origins were unclear. Impoverished, they begged on the streets. If the last line of a paragraph slips to the next page (or paragraph), when you turn to that page you don’t know what content that first line refers to. So the origin of the line at the top of the page was lost like that of a whore child.Schusterjunge (cobbler’s boy)
sometimes also called orphan. This is the name given to a line of a new paragraph at the end of the page or column, which is continued on the following page. In the past, it was often the cobblers who took in orphan boys for apprenticeship. These cobbler boys had to leave the household at the end of the apprenticeship and did not know where they could go afterward for the entire apprenticeship. Cobbler workshops were on the lower floor of the building. If only the first line of a paragraph still hangs on the page, when you read that lone line you don’t know what will happen next. So the continuation of the line at the bottom of the page is uncertain, like the life of a cobbler’s boy.just if another participant comes to this topic:
you can order your social media icons on setting them in the “Social Media Profile” in the right sequence – from top to bottom is left to right.
Unfortunately, you can’t drag and drop the fields into position.Well, Günter is already working on it for the next version – to include improvements that are related to ARIA:
https://kriesi.at/support/topic/wai-aria/
in the meantime test this quick fix:function wai_aria_fixes(){ ?> <script> window.addEventListener("DOMContentLoaded", function () { (function($) { $('.avia-svg-logo a').attr('aria-label', 'SVG Logo'); $('.avia-standard-logo a').attr('aria-label', 'Logo'); $('.av-main-nav .av-burger-menu-main').attr('role', 'menuitem'); $('#av-burger-menu-ul').attr({ 'aria-haspopup' : 'true', 'aria-controls' : 'menu2', }); })(jQuery); }); </script> <?php } add_action('wp_footer', 'wai_aria_fixes');
-
AuthorPosts