Forum Replies Created

Viewing 30 posts - 931 through 960 (of 11,499 total)
  • Author
    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.

    in reply to: Mask / Cut-outs for images #1465984

    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/

    in reply to: Mask / Cut-outs for images #1465983

    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.

    in reply to: Add clickable logo/image to sub menu #1465956

    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.

    in reply to: Add clickable logo/image to sub menu #1465827

    btw – you had to decide what you do in responsive case- because you haven’t any navigation now.

    in reply to: Add clickable logo/image to sub menu #1465824

    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.
    in reply to: Import just one single page from a demo #1465554

    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.)

    in reply to: iconbox background color #1465551

    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 ;)

    in reply to: Unload unused CSS/JS automatically #1465548

    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');
    in reply to: iconbox background color #1465543

    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;
    }
    in reply to: change the timing of the shrinking header #1465538

    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

    in reply to: change the timing of the shrinking header #1465537

    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/

    in reply to: “Bold” Schrift nur Farbwechsel #1465416
    in reply to: Site Logo issue #1465210

    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);
    in reply to: strange text in top left corner #1465193

    It is still there – it is that green bar with text on the left ( text is nearby the green color )

    in reply to: strange text in top left corner #1465187

    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 ?)

    in reply to: Site Logo issue #1465182

    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.

    in reply to: Custom font not loading on safari #1465130

    Well – if you open your linked css:
    https://use.typekit.net/rww4dia.css

    you 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.

    in reply to: “font-weight” for “strong” tag #1465128

    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.
    in reply to: Custom font not loading on safari #1465093

    can you please give a feedback – how you solved it ;)

    in reply to: “font-weight” for “strong” tag #1465070

    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)

    in reply to: Different logo on pages and posts (transparent header) #1465007

    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.

    in reply to: Custom font not loading on safari #1464938

    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 );
    in reply to: Use Original-Image in lightbox #1464930

    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.

    in reply to: Custom font not loading on safari #1464882

    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.

    in reply to: header bg in a transparent header #1464762

    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.

    in reply to: header bg in a transparent header #1464753

    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.

    in reply to: header bg in a transparent header #1464548

    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)
    }
Viewing 30 posts - 931 through 960 (of 11,499 total)