Forum Replies Created
-
AuthorPosts
-
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 4 years, 8 months ago by thatsmyname.
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
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.
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 7 years, 8 months ago by thatsmyname.
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.
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 7 years, 8 months ago by thatsmyname.
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
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
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!
January 4, 2016 at 6:55 pm in reply to: Workaround for Parallax Bug on Firefox on Android – Parallax fallback via CSS #559404thanks!
Cheers
StefanJanuary 4, 2016 at 6:35 pm in reply to: Workaround for Parallax Bug on Firefox on Android – Parallax fallback via CSS #559387Hey 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,
StefanHello,
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,
StefanHello,
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,
StefanHello,
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,
Stefani 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
StefanExcellent! 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!
StefanHello 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 9 years, 8 months ago by thatsmyname.
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,
StefanMarch 31, 2015 at 3:53 pm in reply to: align an image to top in front of fullscreen video colorsection #421238Hi 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
StefanMarch 30, 2015 at 9:33 am in reply to: align an image to top in front of fullscreen video colorsection #420273Hi 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
StefanMarch 28, 2015 at 7:43 am in reply to: align an image to top in front of fullscreen video colorsection #419797Hi 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:..and not like this:
best regards
Stefan- This reply was modified 9 years, 9 months ago by thatsmyname.
March 4, 2015 at 7:21 pm in reply to: — workaround found — alternative frontpage for mobiles #405992i 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
-
AuthorPosts