Forum Replies Created
-
AuthorPosts
-
September 4, 2024 at 12:11 pm in reply to: Full page video that scrolls into a text page possible with Enfold? #1466207
so we can misuse the overlay option of enfold on that – to have all DOM elements we need. Because if you use it – enfold will generate an av-section-color-overlay container.
The settings there are not for us important – just the fact that a container is created in the right position.See: https://webers-testseite.de/snowfall-video/
for even more usability it might be nice to have an observer if the section is in viewport or not – my script now only is working with scroll top value and a given range to top ( here in my example 400px)
if that is o.k. for you just scroll to the end of the page to see code-snippet.
Trick is to use a huge inset shadow with rgba values – and the scroll amount will influnce the a-value of that color.
or you can use a hidden clip-path on that page to have a similar result – this is than manually done by quick css:
See f.e.: https://webers-testseite.de/clippy/
The text can only be wrapped if the image and text are in the same container.
here you see how to use shape-outside: https://webers-testseite.de/clippy-2/
first – there is an enfold option to use some predefined forms on image element : Advanced Tab – Mask Overlay:
if you look what enfold does in your DOM :
so there is a mask-image definition and a svg file is used on that.
you see the path of those predefined svg files – so it might be possible to have custom mask-images too. Maybe there is a way via filter (f.e. avf_mask_overlay_images) to define custom images – similar to custom dividers.
I check that – or maybe a mod/dev can tell us how to have custom mask-images.you can see it here https://webers-testseite.de/transparent-header/
with my custom-class on that menu-item : only-subnav
i used the footermenu for the first submenu on that page. So i had to set it for footer-menu to display none in this case#top #sub_menu1 .only-subnav { padding: 0 !important; float: left; top: 7px; } #sub_menu1 .only-subnav a { background-color: transparent !important; } #top #sub_menu1 .only-subnav img { margin: 0 !important; height: 40px } #top .sub_menu_socket .only-subnav { display: none; }
I have not yet fully styled this for the Responsive case – because I only want to set this temporarily.
btw – you had to decide what you do in responsive case- because you haven’t any navigation now.
As far i can see this is a submenu based on the existing main-menu :
just go to your Dashboard – Appearance – Menus place your custom link ( or if it is an existing link (f.e. home) ) to that menu – and put the image link to the label:
Give a custom class to that menu-item ( it is easier to select ) or do set the menu-item-id to display non on main menu.
Thats all.PS : as you can see – i use that to have a logo inside my hamburger menu.
this could be placed via that custom-class – or menu-item-id. to the left side of your sub-menu
f.e. for the portfolio item :
#sub_menu1 #menu-item-64 { float: left; }
-
This reply was modified 10 months, 1 week ago by
Guenni007.
After inserting the enfold shortcode and saving it, some settings must be made manually: Activating the sidebar and options (which sidebar should be displayed; etc.)
did you insert your custom class to the css above instead of .custom-class ? ;)
and next hint: the custom class input field has to be filled with no dots before the classes ;)
if you do not use google maps – do not enter the google maps api key in enfold options.
i guess that will be enough.if not you can try this in your child-theme functions.php:
function ava_disable_gmap() { add_filter('avf_load_google_map_api', function($load_google_map_api) { $load_google_map_api = false; return $load_google_map_api; },10,1); add_filter('avia_google_maps_widget_load_api', function($load_google_map_api) { $load_google_map_api = false; return $load_google_map_api; },10,1); } add_action('after_setup_theme', 'ava_disable_gmap');
i guess you are using the icon above the title option!
if your custom class is on iconbox Element itself – it will be on the parent element of the content – so:#top .custom-class .iconbox_content { background-color: #efefef; }
Unfortunately my change still suffers from the fact that the change does not work on resize – maybe one of the mods has an idea how to update the trigger_distance on resize.
Edit: – i added to that debouncedresize function on the bottom ( lines 165ff) – that var again:
win.on( 'debouncedresize', function() { el_height = $( elements ).attr( 'style',"" ).first().height(); set_height(); trigger_distance = $('.trigger').length ? $('.trigger').offset().top - $('.trigger').height() + el_height - 50 : 0 ; });
here is my whole avia-snippet-sticky-header.js : https://pastebin.com/9nCV8GiV
the timing depends on the scroll speed. Therefore, this cannot be changed. However, you could either set a fixed size after which the shrink process should only start, or – even more flexibly – provide an element with a trigger that only then starts the shrink event.
set a class to trigger that color-section ( use it only once on the page )
i use now trigger – here as custom class.and added a variable to that list ( just under topbar_height ) – and changed calculation:
topbar_height = header_meta.length ? header_meta.outerHeight() : 0, trigger_distance = $('.trigger').length ? $('.trigger').offset().top - $('.trigger').height() + el_height - 50 : 0 , set_height = function() { var st = win.scrollTop() - trigger_distance, st_real = st; newH = 0
i do not know why i had to insert a correction distance (50px) ( alot depends on if your header_meta scrolls away or not etc. )
you know how to have a child theme avia-snippet-sticky-header.js ?
see example page – and scroll to that colored section on bottom: https://webers-testseite.de/anders/
Unfortunately, most online generators are not free, although this was explicitly stated in the Google search. (for example, if you want the logo as an svg file),
August 23, 2024 at 7:44 am in reply to: hide “— Advanced Layout Builder” text under appearance / menus #1465208put this into your child-theme functions.php
it will remove the status from all standard post types – but leave it for important post states ( password protected, privacy etc. )
function remove_post_state( $post_states, $post ) { if("! has_blocks( $post->ID )") {unset($post_states['wp_editor']);} if("!= Avia_Builder()->get_alb_builder_status($post->ID)") {unset($post_states['avia_alb']);} return $post_states; } add_filter('display_post_states','remove_post_state',999,2);
It is still there – it is that green bar with text on the left ( text is nearby the green color )
how did you embed Google Tag Manager?
there is a phrase
<!– End Google Tag Manager –> Add this to the <body> section: <!– Google Tag Manager (noscript) –>
have a look if you have made some transfer errors on : https://kriesi.at/support/topic/adding-google-tag-manager-script-to-the-site/#post-1447012
if you used that – the noscript version should also be in the head section and not inside body tag.
So have a look inside your functions.php ( child-theme ?)
to create a logo you can try to start here: https://www.vecteezy.com/
you may also want to choose the svg format directly – then fillout some Keywords of your site – and add logo as last keyword. – In the list of suggestions you can indicate on the left that the suggestions are free of charge.Well – if you open your linked css:
https://use.typekit.net/rww4dia.cssyou see what it does: there is the @import url rule – and : font-family:”espiritu”
if you look deeper to that css – you see that you can download those files via those urls ( even as otf)
@font-face { font-family:"espiritu"; src: url("https://use.typekit.net/af/cb2cbd/00000000000000007736dd40/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/cb2cbd/00000000000000007736dd40/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/cb2cbd/00000000000000007736dd40/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); font-display:auto; font-style:normal; font-weight:400; font-stretch:normal; }
you only have to give the downloaded files a meaningfull name and the correct file extension ;)
so maybe you host those fonts on your own server.
As I understand it, he has a font that already looks very bold in the regular style. If it is then rendered to 700 by the browser, it is probably no longer legible.
I think he wants to use the colour change of the strong tag, and probably also the SEO highlighting by setting the same, but without setting these elements to 700.f.e.: Lilita One or Alfa Slab One
PS – @solf : Is it really too complicated to insert a rule into quick css? The way via advanced styling would not have occurred to me.
-
This reply was modified 10 months, 3 weeks ago by
Guenni007.
can you please give a feedback – how you solved it ;)
just place on your quick css the font-family of your needs and set the font-weight to : normal ( usually 400) – maybe with an important .
#top b, #top strong { font-weight: 400; }
if you only like to correct this for the given font ( you know better your font-name)
here with open-sans example#top.open-sans b, #top.open-sans strong { font-weight: 400; }
August 20, 2024 at 9:54 pm in reply to: Differenct footer in different page with ava_before_page_in_footer_compile #1465009Does it necessarily have to run via the functions.php?
You could also make the selection in editor mode on the right side in the layout on the corresponding page (https://lingualearn.ch/assessement/) to not display a footer or page. And then either manually – or insert another page at the bottom using the post content element.By the way, I no longer see this ALB element in the selection in Enfold 6.0.3.
Edit: OK – it is now on layout tab ( before it is inside content tab)
August 20, 2024 at 9:25 pm in reply to: Different logo on pages and posts (transparent header) #1465007Be careful with the Illustrator standard classes (cls-x). If you also have it elsewhere on your page (e.g. through an inline SVG file), the last CSS rule counts.
it is this snippet:
add_action('wp_head', 'enfold_customization_add_scripts'); function enfold_customization_add_scripts() { ?> <link rel="stylesheet" href="https://use.typekit.net/rww4dia.css"> <?php }
that my comment is for. On my htaccess file i do not allow loading from different sources than my own domain.
If i would place such a snippet – it will not be loaded – allthough the snippet might be correct.if that is not the reason for not loading – try to enqueue that css file:
function enqueue_external_css() { wp_enqueue_style( 'adobe_typekit', 'https://use.typekit.net/rww4dia.css' ); } add_action( 'wp_enqueue_scripts', 'enqueue_external_css', 20 );
_______________
i do not know if your first snippet do run with newest enfold. This code snippet has been valid for half an eternity.
For my installations i use now instead:function my_output_google_webfonts_script( $activate ){ return false; } add_filter( 'avf_output_google_webfonts_script', 'my_output_google_webfonts_script', 10, 1 );
can you try this in your child-theme functions.php:
function custom_alb_lightbox_image_size( $size, $context ){ if( $context == ('av_gallery' || 'avia_masonry') ){ return 'original'; } return $size; } add_filter( 'avf_alb_lightbox_image_size', 'custom_alb_lightbox_image_size', 10, 2 );
here both (gallery and masonry-gallery) will be influenced.
Or perhaps your security settings (htacces file, etc.) prevent you from using URLs other than those of your own domain. So loading from
https://use.typekit.net/rww4dia.css
is not allowed.To reach the responsive behavior if you have a svg as logo – Enfold added some code to svg tag depending on logo position.
if you have logo on the left side :preserveAspectRatio="xMinYMid meet"
that means it stays on x-position on the left and preserves the middle Y-position.
if logo is centered – it will be :preserveAspectRatio="xMidYMid meet"
if logo is on the right – it will be :preserveAspectRatio="xMaxYMid meet"
by the way: if such a code is allready inside the svg tag – enfold will overwrite that for the logo insertion.
first: You then no longer need to change the svg code to make further settings regarding the dimensions.
#top .logo svg { padding: 5px 0; }
(although I think it’s actually good if everything remains legible even when it’s shrunk)
in your case – i picked up your svg code from your site and open it in a good vectorbased Program. ( Adobe Illustrator or for Mac from Apple: Affinity
btw. that Affinity Suite : With three programs, they offer at least as much functionality as the Adobe programs and currently cost 90 euros (one-off payment | incl. tax) for all three programs.
In your case, I can see that a lot of unnecessary groups have been created. So I first ungroup all the existing groups and removed several clipping masks. I then created some meaningful groups (the branding is a group, and the subliner is a group).
Unfortunately, these programs (Adobe Illustrator etc.) always create meta data that has no need to be placed in the actual vector code. I remove such code manually. For multi-colored or even gradient-filled areas, the different classes on the paths make sense, but if groups or even the whole svg only have one color, I manually delete this information and only add it back to the groups. This sounds very time-consuming, but with a good text editor it can easily be done in one go using search and replace.
you see that i replace even one space behind the class and replaced it with nothing – Replace All will do the job then.
PS: my personal preference with svg is to leave only the viewbox in the svg-tag and remove widths and heights.
ok – now you have inserted the blue one :
put to your quick css:html.html_header_transparency #header .logo #strokmatic-logo { fill: #FFF !important; }
and please remove those 3 === from rule:
=== #top .av_header_transparency .header_bg { opacity:1; filter:alpha(opacity=100) }
-
This reply was modified 10 months, 1 week ago by
-
AuthorPosts