Forum Replies Created

Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • in reply to: Full screen slider always display the complete image #1200797

    Since i stumbled over this thread while searching for the same functionality, i will leave my solution here. Not sure, wether there might be an even easier solution, since it is 2020 already and the post is 6 years old. At least this works for me:

    Request:
    “is there a possibility to always display the entire image in the full screen slider, without cutting off parts of the image?”

    Solution:
    add a custom css name to your fullscreen slider element, e.g. “custom_fs_slider” (under edit > advanced > developer settings > custom css class).

    Add this code to quick css:

    .custom_fs_slider .avia-slideshow > ul > li {
        background-size: contain !important; /* resizes the background image to the size, where it fills the container in one direction, but without cropping the image on the other direction. aspect ratio is being maintained */
        background-repeat: no-repeat !important; /* makes sure, that only one instance of the picture is visible */
        /* general note: this makes most sense, when the background color of your picture is either transparent or has the same color of the background, so that you do not see borders of the background image */
    }

    Hope this helps someone. Cheers, Stefan

    • This reply was modified 3 years, 11 months ago by thatsmyname.
    in reply to: Mobile menu reveal on scroll up #957907

    Hi @ravicski,

    since it is one year ago that i tried it last time, i am not sure anymore what i did. Most probably i didn’t get it to work on mobile or it was too unstable regarding all those interfering theme settings.

    I think i didn’t get past the point, where it worked with the desktop header but not with the mobile header. And since i want my site to be as stable as possible, the whole .js workaround approach seemed to much for what it was supposed to achieve.

    Sorry for not having more details.

    Best Regards, Stefan

    in reply to: Mobile menu reveal on scroll up #770825

    finally it works on desktops.

    two things were wrong. i had the wrong headroom.js file and it needs a sticky header. so next thing will be, to get it to work on mobile.

    in reply to: Mobile menu reveal on scroll up #770816

    i am not that firm in js, but i found at least, that right in the beginning of the headroom script, the constuctor is running into this. “!Headroom.cutsTheMustard” seems to be true and then, nothing more happens.

    Headroom.prototype = {
      constructor : Headroom,
      init : function() {
        if(!Headroom.cutsTheMustard) {
          return;
        }

    somewhere else read: “Headroom.cutsTheMustard is only true if browser supports all features required by headroom.” hm..

    • This reply was modified 6 years, 12 months ago by thatsmyname.
    in reply to: Mobile menu reveal on scroll up #770811

    i found out, that the custom.js and headroom.js are running by placing prompt(); messages at several points.

    and i tried, similar as on http://wicky.nillia.ms/headroom.js/, to take simpler actions:

    .headroom--pinned { display: block !important; }
    .headroom--unpinned { display: none !important; }

    i set offset and tolerance to 0 in the custom.js, so the “display: none” part should have immediate effect. nothing happens so far.

    in reply to: Mobile menu reveal on scroll up #770795

    i tried install it via the enfold/functions.php as well:

    function avia_register_frontend_scripts() {
      $template_url = get_template_directory_uri();
      $child_theme_url = get_stylesheet_directory_uri();
    
      //register js
      wp_enqueue_script( 'avia-compat', $template_url.'/js/avia-compat.js', array('jquery'), 2, false ); //needs to be loaded at the top to prevent bugs
      wp_enqueue_script( 'avia-default', $template_url.'/js/avia.js', array('jquery'), 3, true );
      wp_enqueue_script( 'avia-shortcodes', $template_url.'/js/shortcodes.js', array('jquery'), 3, true );
      wp_enqueue_script( 'avia-popup',  $template_url.'/js/aviapopup/jquery.magnific-popup.min.js', array('jquery'), 2, true);
    
      wp_enqueue_script( 'headroom', $template_url.'/js/headroom.js', false, NULL, 'all');
      wp_enqueue_script( 'custom', $template_url.'/js/custom.js', array('jquery'), 2, true);
    
      wp_enqueue_script( 'jquery' );
      wp_enqueue_script( 'wp-mediaelement' );
    
    • This reply was modified 6 years, 12 months ago by thatsmyname.
    in reply to: Mobile menu reveal on scroll up #770788

    hi @talawar, are you setting any specifics via the enfold theme settings ui? i tried it with normal and transparent headers set to sticky and unsticky.

    it’s not working yet, but the headroom class is pointing to the right header, since the full header disappears with:
    .headroom { display: none !important; }

    so i am not sure wether the code is running but interfering with other theme settings, or if it’s not running at all.

    any ideas regarding possible interference?

    Best Regards,

    Stefan

    in reply to: Mobile menu reveal on scroll up #770732

    cool, thanks to both of you @talawar and @mike!

    i will try this out in a bit and let you know how it went.

    Best Regards and thanks again!

    Stefan

    in reply to: Mobile menu reveal on scroll up #770664

    Hi @Mike,

    thanks for you reply. Although i understand, that third party scripts are not your business, could you say, wether my approach to install a custom JS from within the child-theme is making sense?

    I am trying to do the custom JS include within the child-theme via child-theme/functions.php and child-theme/js/ for the JS Files (so that i don’t loose too much on a theme update). Are my enqueueing scripts making any sense in general for this setup (regardless if the scripts itself are working)? Is $template_url.’ referencing to “…/enfold/” or to “…/enfold-child/” ?

    Hopefully @talawar might find the time to get back on this.

    Best Regards,

    Stefan

    in reply to: Mobile menu reveal on scroll up #770618

    Hi @talawar,

    thanks for your input!

    I tried to follow your steps, but it’s not working yet.

    I put the CSS into my child themes style.css and modified helper-main-menu.php as you suggested.

    Then i am not so sure, if i did the following right. I uploaded Headroom.js to enfold-child/js/ and added your custom JS to a new file. I tried to register both files vie child-themes functions.php ( as suggested here https://kriesi.at/support/topic/custom-js/ ).

    enfold-child/functions.php:

    wp_register_script( 'sw_custom_java', $template_url.'/js/SW_custom_js.js', 'jquery', "1", true);
    wp_register_script( 'headroom_js', $template_url.'/js/Headroom.js', 'jquery', "1", true);
    
    wp_enqueue_script( 'sw_custom_java' );
    wp_enqueue_script( 'headroom_js' );

    any ideas, what i did wrong?

    Thanks!

    thanks!

    Cheers
    Stefan

    Hey Yigit,

    you’re welcome, thanks. Maybe you could leave a note here, when a fallback or other related solution moves into an Enfold release.

    Regards,
    Stefan

    in reply to: Browser support on mobile devices #559350

    Hello,

    i found a workaround for my website, which detects firefox and switches back to scroll mode. Maybe this helps here as well:
    https://kriesi.at/support/topic/workaround-for-parallax-bug-on-firefox-on-android-parallax-fallback-via-css/

    best regards,
    Stefan

    in reply to: Problem on all Firefox browsers #559349

    Hello,

    i found a workaround for my website, which detects firefox and switches back to scroll mode. Maybe this helps here as well:
    https://kriesi.at/support/topic/workaround-for-parallax-bug-on-firefox-on-android-parallax-fallback-via-css/

    best regards,
    Stefan

    in reply to: Firefox Mobile Fix – Follow-up #559348

    Hello,

    i found a workaround for my website, which detects firefox and switches back to scroll mode. Maybe this helps here as well:
    https://kriesi.at/support/topic/workaround-for-parallax-bug-on-firefox-on-android-parallax-fallback-via-css/

    best regards,
    Stefan

    in reply to: different height for transparent header #430852

    i recognized that these settings are overwriting some elements of the mobile header as well.
    so i added this code here to fix ( and by the way customize ) the mobile header:

    @media only screen and (max-width: 768px) {
    
    .html_mobile_menu_phone #header_main > .container, 
    .html_mobile_menu_phone #header_main > .container .main_menu ul:first-child > li > a, 
    .html_mobile_menu_phone #header_main #menu-item-shop .cart_dropdown_link {
      height: 55px !important;
      line-height: 55px !important;
    }
    
    .responsive #top .logo {
      display: inline;
      width: 80%;
    }
    .responsive .logo img {
      height: 55px !important;
      max-height: 55px;
      padding-top: 5px;
      padding-bottom: 5px;
      left: 0px;
    }
    
    }

    best regards
    Stefan

    in reply to: different height for transparent header #430841

    Excellent! your support is unbelievable.

    i found that the logo height is not affected as long as the logo width is not addressed as well. so i did this to increase the logo size:

    .html_header_transparency strong.logo {
      top: 20px;
      height: 80px;
      width: 80px;
    }

    and just for future forum searches and copy&paste capability, since you left some “.page-id-12” parts in there.. here comes the full code which i am using right now:

    .html_header_transparency #top .avia-builder-el-0 .container {
      padding-top: 120px;
    }
    
    .html_header_transparency #header_main > .container, 
    .html_header_transparency #header_main > .container .main_menu ul:first-child > li > a, 
    .html_header_transparency #header_main #menu-item-shop .cart_dropdown_link {
      height: 120px !important;
      line-height: 120px !important;
    }
    
    .html_header_transparency strong.logo {
      top: 20px;
      height: 80px;
      width: 80px;
    }

    thanks so much!
    Stefan

    in reply to: different height for transparent header #430245

    Hello Ismael,

    thank you for your response!

    It works partially, the header is higher, but the main site content is not moving down.

    And i would like to have more height for the logo as well. I tried adding “height:” into the “.page-id-12 strong.logo {” code, but obviously this doesn’t work.

    with .page-id-12 you are addressing this page in particular. is it possible to address all transparent headers? as if the height would be an option under “Enfold Settings”>”Header”>”Transparency Options”.

    best regards
    Stefan

    • This reply was modified 8 years, 11 months ago by thatsmyname.
    in reply to: different height for transparent header #429738

    Hello Yigit,

    thanks for your reply. I put the private data into the private box of my initial post.
    I like to set the height of my normal headers ( 60px ) as usual via the enfold settings. And then i would like to set a custom height of 120px for the transparent header which is currently active on the “projects” page.

    best regards,
    Stefan

    Hi Ismael,

    thanks for coming back.
    Yes i did create a Custom CSS class. ( in the custom css field within the image element, right ? ).
    But since i still had problems with that way, i went for the Quick CSS Version.
    – i just noticed, that the custom css field disappeared with the latest enfold update procedure yesterday. –
    –> would css code inside this field disappear as well with updates ?

    still, i would prefer a custom css version. otherwise the quick css field will be getting rather full in the future.

    So right now it looks like this under Quick CSS regarding this particular image element:

    .page-id-21 .avia-builder-el-1{
    border-radius: 0px !important;   
    position: absolute !important;
    top: 0px !important;
    right: 0% !important;
    }
    .page-id-21 .avia-builder-el-1 .image-overlay {
    background: url(https://www.schwebewerk.com/wordpress/wp-content/uploads/2015/03/bookmark_featuredproject_overlay.png) no-repeat !important;
    height:150px !important;
    width:68px !important;   
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    }
    .page-id-21 .avia-builder-el-1 .image-overlay .image-overlay-inside {	
    display: none !important;
    }

    since i tried it in several ways which didn’t work completely, how do i modify this css code properly to move it inside the custom css field?

    best regards
    Stefan

    Hi Rikard, Hi Ismael,

    thanks for your support. i tried both versions. here is what i found out:

    – Rikards Version via Quick CSS under General Styling works without problems.

    – Ismaels Version via the Custom CSS Field gets blocked by the ‘Image Styling’ Checkbox. Makes sense, but was not obvious for me. If the Checkbox is set to ‘Default’, Custom CSS works. If set to ‘No Styling’, it will block the Custom CSS Field.
    -> How could i remove the border radius (via Custom CSS) that comes with the ‘Default’ Setting of the ‘Image Styling’ Checkbox?

    best regards
    Stefan

    Hi Rikard,

    yes sure, here are two screenshots and one photoshop layout.
    hope that makes it clearer, i would like to place the blue image like this:

    photoshopped goal Layout:
    photoshopped_Goal_Layout

    ..and not like this:

    Wordpress Try Version 1:
    Wordpress_Try_Version1

    Wordpress Try Version 2:
    Wordpress_Try_Version2

    best regards
    Stefan

    i found a plugin which does a mobile redirect:
    https://wordpress.org/plugins/simple-mobile-url-redirect/
    under plugin settings i checked “only redirect homepage”.

    it works and i don’t see any complications with the theme for now, but the redirect is slowing things down a tiny bit. so i would still be happy to see this integrated within the next version of the enfold theme options panel :)

    best regards

Viewing 23 posts - 1 through 23 (of 23 total)