Forum Replies Created
-
Posts
-
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.
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; }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 = 0i 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),
put 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);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.
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; }Does 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)
Be 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.cssis 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.
