Forum Replies Created
-
AuthorPosts
-
August 24, 2020 at 3:18 pm in reply to: "Large Header Size" and "Shrinking Header" for homepage only #1240378
you can try it without css settings – so remove the settings from above and see if this will better fit to your needs
– well i first thought we can do this via child-theme functions.php :function av_change_header_layout($header){ if(!is_front_page()){ $header['header_custom_size'] = '45'; $header['header_shrinking'] = 'disabled'; $header['header_class'] .= " av_header_shrinking_disabled"; } return $header; } add_filter('avf_header_setting_filter','av_change_header_layout');but the shrinking disabled does not work – i do not know why?
but the other way round works
:
Set the options like you want to have it for all pages ( but take custom value 45px and non shrinking header )
then this on child-theme functions.php:function av_change_header_layout($header){ if(is_front_page()){ $header['header_custom_size'] = '150'; $header['header_shrinking'] = 'header_shrinking'; $header['header_class'] .= " av_header_shrinking"; } return $header; } add_filter('avf_header_setting_filter','av_change_header_layout');if you like to include another page to that settings – use a page array or any other conditional tags : https://codex.wordpress.org/Conditional_Tags
-
This reply was modified 5 years, 5 months ago by
Guenni007.
i always did it this way:
have a copy for the native language – then translate the layers manually in that copy – and place on the other language that copy. thats all – no plugin needed.on a button alb you have more styling options even for hover style –
but if you like to have it for button-row – you can select the buttons in a button-row by counting them and select via:nth-of-type(2)etc..avia-buttonrow-wrap .avia-button:nth-of-type(1) { … some css rules }or you follow this topic here to have for each button in a button-row a unique ID:
https://kriesi.at/support/topic/individual-id-for-buttons-in-button-row/#post-1232985you can style them – but you can use buttons too for that.
To have them beside each other – only a display behavior must set on this
see here an example page for button styling ( even the look is styled there but important for you is that you have button alb and can style each button on it self) put all your buttons ( aligned center ) in a common container and give a custom class to it – rest on that example page:
https://webers-testseite.de/buttons/the four buttons on that page looks this way in the layout:

Give an absolute width (or height) to them not a relative like auto or %
it could be a very big value – the rest will be done by display options of the surrounding container.f.e. :
img[src*=".svg"] { width: 2500px; display: block; }no private content for me – because i’m participant as you are.
Please excuse the delayed reaction, sometimes I also have to work and satisfy my own customers.so again my question : my testpage ( https://webers-testseite.de/cynthia/tuddal/ )
is it the way it should work? Or does your customer have other demands?
See also now the responsive case and behavior of the logo and the other heading linksThe above is not all you need – but an overview what is the clou on it.
There’s a lot to do. Some in the child-theme functions.php and then in quick css. Whereby you have to find out what needs to be removed from the one set so far.
I just wait and see if there is still interest in the solutions. Unfortunately it was more often the case that I wrote some detailed descriptions with pictures and then suddenly another solution, e.g. a different header constellation, was used.Later today I will show you how I have implemented the result. Basically it is the integration of the “logo” into the calculation routine of the shrink script.
We will add your Logo not by having a menu list point in the top-menu but only by placing it via child-theme functions.php and absolute positioning.
And this will be the only logo you need for that.
On your page you beginn the logo height at 300px – and it should end at 66px – so shrink-factor is 4.545
you can see here what we need to obtain that in the avia-snippet-sticky-header.js : https://kriesi.at/support/topic/shrinking-of-header-amount-an-info/#post-1044887
With that shrinkfactor we can calculate the two values to influence in the shrink script. The only the thing to do in this script will be the integration of the new “toplogo” to that calculation. No panic i will send you the edited script-file: https://pastebin.com/gi40An1c
Download-link: https://pastebin.com/dl/gi40An1cBut for now enough – detailed info later! IF – you are interested in that solution
what was the source for those png’s ?
Do you have any illutrator files of that file – or an eps – sometimes eps are vectorbased too.but if there is no vectorbased source on that – it will work because the letters are under that logo sign.
So when setting the header-scrolled to overflow: hidden it will do the job too:
See example page.do you have a svg on your logo ?
you can see here a playground with your logo – but if we had a svg we could set single parts of the logo to not be seen when the header is scrolled.
https://webers-testseite.de/cynthia/tuddal/i only have styled it yet for the wider screens – but when you got the svg this comes next.
Hello Rikard just have a look at the report – there the corresponding url is listed each time.
Wheelchair user to the passer-by: “Could you please drive me up the mountain there? – but for safety reasons, I’ll pull the handbrake!”
If I point with the mouse to a supposed headline and then call up the developer tools per context menu regarding this element, the corresponding css properties are displayed directly, and I am also directly at the position in the DOM.
Of course I can call the developer tools in another way – but then I have to search for the corresponding place until I am in the DOM tree where I want to go.
So why should I as a helpful person voluntarily make life difficult for myself.on the link of the masonry items – you have a class: portfolio_entries-xyz the xyz is the portfolio “category” ( this is actually a taxonomy)
you can place it in a pseudo-container like:
see here: https://webers-testseite.de/pureinstall/portfolio-masonry/
(this was originally a help to place the selection next to the masonry.).portfolio_entries-buecher .av-masonry-outerimage-container:before { content:""; width: 100%; height: 100%; position: absolute; background-image: url(https://webers-testseite.de/pureinstall/wp-content/uploads/Buecher.png); background-repeat: no-repeat; background-size: 100px; background-position: center 30%; z-index: 2; }and: on posts and categories the class is: category-xyz the category name is the xyz
context menu button of the mouse is suppressed – this makes working with the developer tools very tedious.
for background-attachment : fixed
there is a better way to have it – because on IOS Devices – this looks strange – on scrolling it flickers
( google on that background-attachment : fixed and Safari Browsers )there is a little trick to have that: the background-image that should have background-attachment : fixed goes to the pseudo container :before –
and that container is set to position fixed!
So the code above will look like this ( for my page-id ) :#top.page-id-38479 { background-image: url(https://webers-testseite.de/wp-content/uploads/IMG_bg.jpg); background-repeat: repeat; background-position: center center; background-attachment: scroll; } #top:before { background-image: url(https://webers-testseite.de/wp-content/uploads/IMG_background_treatments.png); background-repeat: repeat-y; background-position: left top; content: ""; position: fixed; width: 100%; height: 100%; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } #top.page-id-38479 #main { background-color: rgba(255,255,255,0.2) !important; } #top.page-id-38479 .main_color { background-color: transparent !important; } .html_stretched #top.page-id-38479 #wrap_all { background-color: transparent !important; }with the fixed image on repeat-y now
See here an example page: https://webers-testseite.de/transparenzen/
and the css code for it:
#top.page-id-38479 { background-image: url(https://webers-testseite.de/wp-content/uploads/IMG_background_treatments.png), url(https://webers-testseite.de/wp-content/uploads/IMG_bg.jpg); background-repeat: no-repeat, repeat; background-position: top left, center center; background-color: transparent !important; background-attachment: scroll } #top.page-id-38479 #main { background-color: rgba(255,255,255,0.2) !important; } #top.page-id-38479 .main_color { background-color: transparent !important; } .html_stretched #top.page-id-38479 #wrap_all { background-color: transparent !important; }First of all – what kind of layout do you have choosen on Enfold: General Layout : a stretched or a boxed or at the end a fixed frame layout?
If you have a boxed layout f.e. – you will have then on General Styling a “Body Background” OptionBut this is only one part of your example page.
If you like to have a full transparent content – like on your example page there had to be a lot of css settings to be made.best would be if you start with that boxed layout – it is possible to have this with a fixed frame.
It is hard to have this with a slideshow in the background..
That was my old attempt to reach this – but the slideshow timing will not be synchronized the more time passes:
https://webers-testseite.de/goldfinger/
( These are two identical slideshows that runs on theory synchronized – the one on top shows only a narrow strip and has a high z-index – the other has a low z-index)
But that is not necessary for your solution with a static background-image.
It will be best to help you if we can see the page it concerns.
it is easy to have a body background-image via quick css f.e. and even to have more than one background-image on the same container:
you see on that page how it is done for a 1/1 container with three background-images and different settings :
https://webers-testseite.de/multiple-background-images/in other words it is possible to have this http://naturkosmetik-studio.at/Images/IMG_background.png as one background pattern that is set to repeat or not to scroll away – and those leaves too but with no repeat.
As always on Envato / themeforest:
https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990login to your account : https://themeforest.net/sign_in
maybe you have a /products etc in your bin!
empty that bin and try againNo Problem to install it !
https://webers-testseite.de/pureinstall/i do it always this way: https://kriesi.at/support/topic/some-hints-and-advice-to-update-enfold/#post-1056107
August 11, 2020 at 11:47 am in reply to: How can I require at least one checkbox to be checked #1236650I changed the code a little bit above. So that you don’t have only one Acceptance checkbox – assign a class to the IDs – here I have chosen acceptance.
You have to be careful when assigning multiple elements – they are separated by commas but are enclosed in quotes as group.
$('#avia_5_1 , #avia_6_1').addClass('acceptance');
all your acceptance checkboxes must be listed herenow you can also see the advantage over .filter : Only if all elements with the class pass the filter, the statement is considered true.
see again: https://webers-testseite.de/contact/function change_submit_button(){ if(is_page('123456')){ ?> <script type="text/javascript"> (function($){ $(document).ready(function(){ $('#avia_5_1 , #avia_6_1').addClass('acceptance'); $(".acceptance").prop('checked', false); $('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({ 'background-color': 'red', 'pointer-events': 'none', }); $(".acceptance").on( "click", function(){ var a = $(".acceptance" ); if(a.length == a.filter(":checked").length){ $('form.avia_ajax_form').find('input[type="submit"]').val("Submit").css({ 'background-color': 'green', 'pointer-events': 'auto', }); } else{ $('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({ 'background-color': 'red', 'pointer-events': 'none', }); } }); }); })(jQuery); </script> <?php } } add_action('wp_footer', 'change_submit_button');you have set an important rule to all buttons
font-family : butler lightso entypo-fontello is lost.
try this :
#top #footer #searchsubmit { background-color: #464f5a !important; font-family: entypo-fontello !important; line-height: 0 !important; } .avia-search-tooltip { top: 100% !important; } #footer .avia-arrow-wrap .avia-arrow { background-color: #464f5a !important; } #searchform #s { border : none !important; }and i guess you have some troubles with : CORS: https://kriesi.at/documentation/enfold/icon/#icons-are-showing-as-rectangular-boxes-
Yes – it is the way you style your menu to have not the treestructure there but besides each other.
Look how you reach it in your css and try to substitute it by:
#footer .widget { padding: 0; margin: 30px 0 30px 0; overflow: visible; } #footer .widget_nav_menu ul { display: flex; flex-flow: row wrap; justify-content: center; } #footer .avia-search-tooltip { top: 100% !important; margin-left: -130px; }but i do not know why the ajax search proposals aren’t there – did you switch of that feature?
on my test page is stayes at the menu.
can you try this:function shift_search_icon(){ ?> <script type="text/javascript"> (function($){ $('#avia-menu').find('#menu-item-search').clone().appendTo('#menu-menu3'); $('#avia-menu').find('#menu-item-search').remove(); })(jQuery); </script> <?php } add_action('wp_footer', 'shift_search_icon');just to see if detach() is the problem
Well a quick and dirty way would be to activate the main menu search icon ( Dashboard – Enfold Child – Main Menu: “Append search icon to main menu”)
– and shift this to your other menu:function shift_search_icon(){ ?> <script type="text/javascript"> (function($){ $('#avia-menu').find('#menu-item-search').detach().appendTo('#menu-menu3'); })(jQuery); </script> <?php } add_action('wp_footer', 'shift_search_icon');ok – we posted the same time.
How did you create that footer? is it a page as footer ?Or do you mean a navigation in the #footer ( not footer : #socket) – and you put a widget to one of your #footer columns by : navigation menu widget ???
as far as i know
1) the enfold main menu is always: .main_menu
( a class here because if you got menu below logo there will be an extra container ( #header_main_alternate) for that cloned menu)
2) the top menu : #avia2-menu
3) footer menu: #avia3-menu
these are theme_locations not names of the menu.are you familiar with developer tools of your browser? Inspect the footer menu and see what ID this menu has got.
but nevertheless – have you seen my concerns about the position?
August 10, 2020 at 2:21 pm in reply to: How can I require at least one checkbox to be checked #1236428to go this way via filter would not be necessary here, but I just left it like that for my Contact Form 7 form. I can assign a class to these acceptance checkboxes, and I can use this class to address several boxes; and only if all of them are checked, the Send button is released.
by the way normal transition on submit button is 0.3s ease-in-out
you can have it in this case a little different by:.avia_ajax_form p input[type="submit"] { -webkit-transition: all 1s linear; transition: all 1s linear; }August 10, 2020 at 2:11 pm in reply to: How can I require at least one checkbox to be checked #1236427You like to have an acceptance button – but for enfold contact form?
By the way – dear Dev’s – might be a nice to have thing: acceptance Checkbox
You had to know the ID of the checkbox you like to have as an acceptance button. ( on my example it is checkbox with ID: avia_5_1 )
if you are not familiar with developer tools – you even can count from top to bottom – left to right. – you see on my test page that it is the 5th element on that form.
By the way – if it is the last visible element before submit you can use as selector even the class: av-last-visible-form-element
With the setting of that checkbox you can style and influence the behavior of the submit button:this code here is for a specific page – you had to adjust it to your page ID.
code comes to child-theme functions.php:
function change_submit_button(){ if(is_page('38472')){ ?> <script type="text/javascript"> (function($){ $(document).ready(function(){ $('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({ 'background-color': 'red', 'pointer-events': 'none', }); $("#avia_5_1").on( "click", function(){ var a = $("#avia_5_1"); if(a.length == a.filter(":checked").length){ $('form.avia_ajax_form').find('input[type="submit"]').val("Submit").css({ 'background-color': 'green', 'pointer-events': 'auto', }); } else{ $('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({ 'background-color': 'red', 'pointer-events': 'none', }); } }); }); })(jQuery); </script> <?php } } add_action('wp_footer', 'change_submit_button');PS: Change value ( Stop, Submit ) to your needs.
results page: https://webers-testseite.de/contact/ -
This reply was modified 5 years, 5 months ago by
-
AuthorPosts
