Forum Replies Created

Viewing 30 posts - 9,241 through 9,270 (of 11,703 total)
  • Author
    Posts
  • in reply to: How to move social icons to the right in header area? #872088

    what do you mean by right side of the page
    you mean something like this (here on the left) https://fusesocialfloating.000webhostapp.com/fuse-social-floating/

    there are alot of plugins doing this

    in reply to: playing with new demos – visual artist demo on ipad #872079

    it works as mentioned above – but first i tend to addClass and give to quick css the scroll position – but this way does not work
    i think the inline rules overwrites every other rule set

    so i decided as above to start on background scroll on alb element – set the fixed positon by quick css – and just remove that custom class set on quick css – this way works as wanted.

    Everything ok now – on ipad the background-attachment scrolls with the container.
    Before – as mentioned there was nothing but the background-color seen.

    give it to the devolpers a hint to see their demo: https://kriesi.at/themes/enfold-visual-artist/ on iphone/ipad

    in reply to: Avia child setup with JS error ? #872037

    this is the page where enfold options are shown. Have you more input of the js errors ?
    have you managed some entries in your functions.php of child-theme ?

    i think the best will be if you gave to that color-section a custom class to avoid that all your headings will be placed on top – f.e.: topheading
    than insert this in quick css:

     .avia-section.av-minimum-height.topheading .container .content {
        vertical-align: top ;
    }

    see here: https://webers-testseite.de/colorsection-100percent-with-heading/
    the distance could be styled by the padding setup in color-section

    in reply to: Sticky element in a PAGE #871884

    Actually everything is already said !

    A) erase the codes and custom-classes set by the other method

    1) download the script from here: Download
    2) Upload that script to your child-theme / js – Folder
    3) Embed that javascript file to enfold – put in functions.php of your Child-Theme:

    function include_sticky_js_file() {
    wp_enqueue_script( 'stickyelement', get_stylesheet_directory_uri().'/js/jquery.stickyelement.min.js', array('jquery', 'avia-default'), 2, true );
    }
    add_action( 'wp_enqueue_scripts', 'include_sticky_js_file', 100 );

    4) Give the custom-Class to your element you want to fix : sticky_element
    5). This comes to your functions.php of your Child-Theme:

    add_action('wp_footer', 'include_sticky_values');
    function include_sticky_values(){
    ?>
    <script type="text/javascript">
    (function($) {
    	$(window).on('load resize', function () {
              if ($(window).width() > 768) {
                /***  here comes the code to sticky element***/
                    $('.sticky_element').sticky('.entry-content-wrapper', {
                        useTransition: false,
                        animate: false,
                        offset: 85
                    });
                /***  here ends the code to sticky element***/
               }
            }).trigger('resize');
    })(jQuery);
    </script>
    <?php
    }
    

    ( in nearly all cases the direct parent element will be : entry-content-wrapper )

    6) if you have to adjust the offset because on different pages it might be other settings this part you can add inbetween the commented lines with other custom class of sticky element ( perhaps : sticky_element2, etc.)

                    $('.sticky_element2').sticky('.entry-content-wrapper', {
                        useTransition: false,
                        animate: false,
                        offset: 50
                    });

    7) add this to your quick css to have not the calculated top distance on responsive case
    you might adjust this – depending on your settings:
    ( sticky-scroll is the class added by that script to your sticky elements)

    @media only screen and (max-width: 767px){
    .sticky-scroll {top: 0!important}
    }

    8) Think of – that there is no other element in the same color-section under the sticky element – you have to open a new color-section if there are other content under it !

    in reply to: playing with new demos – visual artist demo on ipad #871865

    my workaround:

    i set up on those color-section the background-attachment to : scroll
    but give a custom-class to the color-section: bgfixed

    that class has only the meaning of setting :

    .bgfixed {
    background-attachment: fixed !important; 
    }

    on functions.php of my child-theme i detect if the device is an ipad/iphone/ipod :lol
    and remove that class only for this devices !

    add_action('wp_footer', 'remove_class_if_ipad');
    function remove_class_if_ipad(){
    ?>
    <script type="text/javascript">
    (function($) {
    	$(document).ready(function($){
    		var deviceAgent = navigator.userAgent.toLowerCase();
    		if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
    		$('.bgfixed').removeClass('bgfixed');
    		}
    	});
    })(jQuery);
    </script>
    <?php
    }

    this works with scrolling background.
    Info: i don’t know why the other way starting with fixed does not work and addClass and set the background-attachment : scroll !important. ???

    in reply to: How to move social icons to the right in header area? #871818

    do you have a live link to it – and or a screenshot how it should look like

    something like this ? https://webers-testseite.de/elegant/

    you could have it vice-versa

    • This reply was modified 7 years, 11 months ago by Guenni007.
    in reply to: How to move social icons to the right in header area? #871790

    goto your Enfold Options – Header – Extra Elements – Header Social Icons. and choose “Display in main header area”

    in reply to: Logo Center / Menu sides #871733

    schöne Grüße nach Berlin !

    wenn du das hier setzt dann geht beim Verkleinern des Screens das Logo mit in der Breite:
    dadurch floatet das letzte Element nicht mehr um – kurz vorm umschalten des responsive designs auf hamburger menu

    #header_main_alternate .main_menu ul:first-child {
        display: inline-flex !important;
    }
    in reply to: Logo Center / Menu sides #871728

    and if you like to have a bit illustration that logo got a link too:

    #menu-item-114 a:hover img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }
    
    #menu-item-114 a img {
    	-webkit-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
    }
    in reply to: Logo Center / Menu sides #871725

    ok – i see you got it:

    if you like to increase header-height now:

    #header_main_alternate, #avia-menu  {
        height: 80px !important;
    }
    
    #avia-menu li a {
        line-height: 80px !important;
    }
    in reply to: Logo Center / Menu sides #871724

    you can see it working here: https://webers-testseite.de/weber/

    in reply to: Logo Center / Menu sides #871720

    i do not know what id your new menu-item will get.
    So these ZZZ are placeholders.

    click to enlarge

    in reply to: Logo Center / Menu sides #871712

    https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990#item-description__changelog

    they have the 4.2. – but than code will be different.

    please do first all i said above

    #header_main_alternate, #avia-menu  {
        height: 80px !important;
    }
    
    #avia-menu li a {
        line-height: 80px !important;
    }

    and duplicate this menu point with the image. etc…

    in reply to: Logo Center / Menu sides #871705

    by the way – you have to be a bit earlier to mobile menu – your last menu point flows to next line on some screen width

    where to get it: i got mine from envato

    duplicate this menu point and place it on top of your menu.
    now you have two images in the menu:
    set the main_menu logo to display none. ( ZZZ will be the list-item id. – do it and than i will help you to determine)
    and on burger menu the same with the logo in the middle position

    in reply to: Logo Center / Menu sides #871699

    ah – ok that is the trick with the “logo” in the menu.

    #header_main_alternate, #avia-menu  {
        height: 80px !important;
    }
    
    #avia-menu li a {
        line-height: 80px !important;
    }

    Did you run already the new enfold 4.2 – because adressing in mobile is much more easy
    – edit no – you are running 4.12.

    duplicate this menu point and place it on top of your menu.
    now you have two images in the menu:
    set the main_menu logo to display none. ( ZZZ will be the list-item id. – do it and than i will help you to determine)
    and on burger menu the same with the logo in the middle position

    On Enfold 4.2 these list-items got there own id – so we could adress it the same way as in main_menu – and we don’t have to count the position.

    .main_menu #menu-item-ZZZ {
        display: none;
    }
    
    #av-burger-menu-ul li:nth-child(5) {
        display: none;
    }

    ________________

    PPS: if you like to have a gloomy drop-shadow set it to a light color ( yellow. etc)

    in reply to: Layout in EN Version not identical to DE Version #871681

    is it a WPML translation ?

    If so – this is not a bug – it is a feature of WPML
    This gives you the oportunity to set up a totaly different layout if you wanted.

    the point is that even the enfold options page on admin has a german and an english settings page.

    the way to synchronise it : The wanted page layout – choose (on your site it seems to be the english one.
    Go to Enfold – Import/Export. (on top you see there is an english flag ). – Export Theme-Settings File

    Change now to german ( you see even on Enfold Admin above a german flag)
    Same thing but import now the “english” Theme Settings file.
    Don’t know if the quick css is imported too – but i think – yes.

    ________________________

    Edit: . ah i see it is a sitepress plugin. But. it might be similar to the description above.

    • This reply was modified 7 years, 11 months ago by Guenni007.
    in reply to: Logo Center / Menu sides #871672

    Try Rikards advice -: Enfold( Child ) – header – header size – custom pixel value
    increase the size to 80px

    by the way – i think the status quo is more fitting for a music event site and looks better for me too!
    and – i think the link on the image should be: http://maratone-soundsystem.net/wordpress/
    not #top

    try to look what happend if you gave a dropshadow to the “logo”:

    #menu-item-114 img {
    	-webkit-filter: drop-shadow(3px 3px 10px #114232) !important;
        filter: drop-shadow(3px 3px 10px #114232) !important;
    }

    it is in the green of the background

    in reply to: Sticky element in a PAGE #871620

    A little info about sticky : there is a discussion on css3 experimental position:sticky (-webkit-sticky) and it seems that this will be included in the future browsers. ( it is something in between fixed and relative positioning – as in my solution above) and it should only be necessary to set this css rule and the top bzw bottom value )
    see here : https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

    in reply to: Sticky element in a PAGE #871586

    first of all : these are two different tryings to help you – the one from ismael – one with the including of a given jquery file by me.
    You now have to decide.

    One advantage of the code recommended from me is: it is no fixing position ! Fixed Positioning allways till now goes to troubles on tablet-pcs or ipad/iphones.
    my solution goes a different way: it calculates the top positioning concerning to scroll event. If you scroll down the top positioning increases ! and vice-versa.
    So the “fixed” element isn’t really one – but it mimics the fixed position.
    It works with the positioning relative ! This is something all browser can handle!

    By the way: this is no contest – it just reminds you to be carefull with fixed positioning.

    see the difference and decide by yourself: https://webers-testseite.de/sticky-column/
    1) make the screen of your browser window small as on mobile case ( responsive under 768px) and see what happens to the “fixed” elements.

    2) What if your icon-list has more entries? How do visitors of your site see the rest of your list ( under “Lieu” – if there are some)

    in reply to: JQuery rendering #871567

    i suppose that there are too many dependencies to other js files needed jquery. So every one of these has to be under the jquery loading.

    in reply to: JQuery rendering #871370

    by the way – all those loaders are in script-loader.php in wp-includes (of wordpress itself)

    before WP 3.9 i did it sometimes with :

    if( !is_admin()){ 
    function load_local_jQuery() {
                wp_deregister_script('jquery'); 
                wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', __FILE__, false, '1.12.4', true); 
                wp_enqueue_script('jquery'); 
                }
    add_action('wp_enqueue_scripts', 'load_local_jQuery'); 
    }

    but it does not work on new wp

    in reply to: JQuery rendering #871365

    This is normal registering of wordpress and not specific to enfold.
    I don’t know how WP-Rocket tries to do so.
    if i would like to do so i will first deregister it and than register it back again f.e.

    i have sometimes this on my functions.php –
    that loads the jquery via cdn from google servers – if it exists (or a internet connection is present)
    if not it will load the normal jquery from folder – but i do not have success on loading it in the footer.

    if( !is_admin()){ 
        $url = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'; 
        $test_url = @fopen($url,'r'); 
        if($test_url !== false) { 
            function load_external_jQuery() {
                wp_deregister_script('jquery'); 
                wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'); 
                wp_enqueue_script('jquery'); 
            }
            add_action('wp_enqueue_scripts', 'load_external_jQuery'); 
        } else {
            function load_local_jQuery() {
                wp_deregister_script('jquery'); 
                wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', __FILE__, false, '1.12.4', true); 
                wp_enqueue_script('jquery'); 
            }
        add_action('wp_enqueue_scripts', 'load_local_jQuery'); 
        }
    }

    i tested it with google loading – and it is no performance profit on it.

    but on enfold the avia-compat.js is loaded in the header – maybe this is the reason for inconsitencies if jquery is in the footer (after avia-compat.js)

    in reply to: playing with new demos – visual artist demo on ipad #871362

    no images at all. only colored backgrounds – on the demo page too!
    i prove my testings normaly on safari developer and go to responsive view. but even here everything is fine!
    Only the real devices shows

    1) this with position center center of the background images and no-repeat works on ipad:
    https://webers-testseite.de/weber/visualisation/

    2) and this here with center center and contain has only colored background and no images – like your demo-page does too!
    https://webers-testseite.de/elegant/

    in reply to: New visual artist demo #871361

    you can delete this thread here – i go on with the other one – thanks

    in reply to: New visual artist demo #871359

    hm – very similar but October 26, 2017 at 3:06 pm sorry i must have been sleepwalking on this thread her 8am is not my time :lol:
    sorry for that.

    But – is there a workaround to get an acceptable way to see the page on ipad / iphone etc.
    for me it will be ok if the images scroll with the color-sections – but nothing seen – no image only colored background is poor.

    in reply to: Sticky element in a PAGE #871352

    it would be better if you get help from a mod here – give them an admin account.
    Because you have first the trouble with parent name and child mismatch.
    This was the first thing to do – because all other work will ground on a working child-theme.
    Doing code to parent functions.php is to risky – and you will loose the things on next update.

    If this is done – i will help you furthermore. Because you have done allready alot of work on your theme it is best to have a backup of it.

    ___________

    On your page ( by the way it is page-id-4652 )
    you have those sticky column in : (#after_section_1)
    You gave to the 1/3 column the custom class: fixed_element (on code it will be .fixed_element )
    by the way you have to get rid of other solutions on that – the other codes will be causing problems on that)

    so the code will be :

    add_action('wp_footer', 'include_sticky_values');
    function include_sticky_values(){
    ?>
    <script type="text/javascript">
    (function($) {
            $(window).on('load resize', function(){
              if ($(window).width() > 768) {
                /***  here comes the code to sticky element***/
                    $('.fixed_element').sticky('#after_section_1', {
                        useTransition: false,
                        animate: false,
                        offset: 85
                    });
                /***  here ended the code to sticky element***/
               }
            });
    })(jQuery);
    </script>
    <?php
    }

    we have to play later with the offset value if it will be ok for your site

    in reply to: Sticky element in a PAGE #870846

    by the way: this js works with positioning relative and calculates the top position- so it might work on ipad, iphone too – but with jerk i suppose
    in the meanwhile i rearanged it a bit : and inserted a width for that. But i dont know why the resize event does not work immediately.
    $(window).on('load resize', function(){
    On reloading the page it works – maybe a mod could help here
    this is now for all pages – i do the rest if needed.

    add_action('wp_footer', 'include_sticky_values');
    function include_sticky_values(){
    ?>
    <script type="text/javascript">
    (function($) {
            $(window).on('load resize', function(){
              if ($(window).width() > 768) {
                /***  here comes the code to sticky element***/
                    $('.sticky_element').sticky('#av_section_1', {
                        useTransition: false,
                        animate: false,
                        offset: 85
                    });
                    $('.sticky_element2').sticky('#av_section_3', {
                        useTransition: false,
                        animate: false,
                        offset: 50
                    });
                /***  here ended the code to sticky element***/
               }
            });
    })(jQuery);
    </script>
    <?php
    }
    in reply to: Sticky element in a PAGE #870792

    to that script : it works with sticky element and surrounding parent. The fixed positioning is gone when sticky element reaches the bottom of the parent container. !
    So you must do following containeres in a different f.e. color-section !!!
    see now the test page i inserted in the same container a 1/1 under it – and this leads to something you don’t want to have.

    some words on sticky element – :

    go and have a look to different devices if the effect works on all – espacially mobile browsers. Very often the page is than unusable.
    For our script above we had to find a way to have normal behavior for responsive case ! This is possible – but performance will go down
    Another intime process must prove if window width is less than f.e 768px
    i think this should only be a gimmick to use on one page – the risk of losing users because of a low performance of the site is too high.

    in reply to: Sticky element in a PAGE #870787

    if you are working on functions.php of your child-theme it is a good advice to have a working copy of it on your desktop.
    if you make some mistakes on changing the code ( maybe a semikolon is missing or quotationmarks aren’t the right one etc. you will see a white screen and can not interact with your site.) you could alway playback the working copy via ftp to your site.

    ___________

    so now – as i said is if you have all done for implementation of the script.
    That little script is written to have an element fixed within his surrounding container !
    So you have to adress (select) two containers – the one which is fixed and the parent container of this element.

    this part of the script should be adjusted to your givings:

    
    jQuery('.sticky_element').sticky('sticky_parent_container', { …
    

    1) The parent container can be a class or an id etc. on Enfold it could be the id of the section: #av_section_1 2, 3, 4 etc.

    2) the sticky_element should be a unique class ( on my test page above i used on the bottom that class vor the 2nd and 3rd Column – that is possible.
    so go and give a custom class to the column you like to have the fixed position. (f.e.: sticky_element1, sticky_element2 etc)

    the second code ( the first was the implementation of the script itself) for functions.php of your child-theme is than:
    and this (second one) is that the script nows what to handle and how:

    add_action( 'wp_footer', 'custom_sticky_script' );
    function custom_sticky_script() {
      ?>
      <script type="text/javascript">
                jQuery(document).ready(function(){     
                    jQuery('.sticky_element1').sticky('#av_section_1', {
                    useTransition: false,
                    animate: false,
    		offset: 85
                    });
                });
      </script>
      <?php
    }
Viewing 30 posts - 9,241 through 9,270 (of 11,703 total)