Forum Replies Created
-
Posts
-
against that squeeze :
@media only screen and (max-width: 767px) { .responsive #top #wrap_all #header .container { width: 97%; max-width: 97%; } #menu-item-shop .cart_dropdown_link { padding: 0 25px; } /* === against that jump on header positioning absolute / fixed === */ .responsive #top #wrap_all #header.av_header_transparency { position: fixed !important; } }for that small images below – there is in relation to its own dimension a big padding (7px for images that are approx. 30px)
so set the padding to a smaller value:#top div .avia-gallery .avia-gallery-big, #top div .avia-gallery img { padding: 2px; }here the big image above is included to that new padding – so that the large image is aligned with the block of small images.
________
I always set my lightbox so that the background does not scroll.
There is now a filter for this which you can set in the child-theme functions.php.add_filter( 'avf_default_lightbox_no_scroll', '__return_true' );Apart from that, I don’t see the reason why these extreme heights are set for mfp-bg and mfp-wrap. The usual values are 1600 to a little over 2000px, why is it twice that in your installation? …
https://github.com/KriesiMedia/enfold-library
on the bottom of that page there is a link under “Online Resources from Third Party Developers”
@Ismael : can you erase from GitHub Library on “Online Resources from Third Party Developers” the
“Disable loading of Google fonts and host them on your on server by Guenni007Disable loading of Google fonts and host them on your on server by Guenni007”
it is a bit deprecated since Enfold Font Manager is established.Don’t get me wrong: the marquee tag is long outdated (and probably the effect too ;)), but you can use a keyframe animation for this element, for example.
F.e. see page and code on that page: https://enfold.webers-webdesign.de/partnerlogo-element/
use instead:
@media only screen and (max-width: 767px) { .responsive #top .av-special-heading .av-subheading p { font-size: 36px !important; line-height: 1.5em !important; } }because you have set in your css:
@media only screen and (max-width: 767px) { body, p, .entry-content { font-size: 18px !important; line-height: 1.6 !important; } }it is necessary to do so aswell with !important
what you try to influence on the hamburger script file?
you can deregister the parent script and register child-theme edited files then.
My recommendation is to have the same tree structure as the parent – create a js subfolder in your child-theme directory.if you use the option of enfold to use minified files – you had to upload both files – in your case:
avia-snippet-hamburger-menu.js and avia-snippet-hamburger-menu.min.jsto get the minified version you can use this : https://codebeautify.org/minify-js
put this in your child-theme functions.php :
function wp_change_hamburger_script() { $vn = avia_get_theme_version(); $child_theme_url = get_stylesheet_directory_uri(); $min_js = avia_minify_extension( 'js' ); wp_deregister_script( 'avia-hamburger-menu' ); wp_enqueue_script('avia-hamburger-menu-child', "{$child_theme_url}/js/avia-snippet-hamburger-menu{$min_js}.js", array('avia-default'), $vn, true); } add_action( 'wp_enqueue_scripts', 'wp_change_hamburger_script', 100 );have a look at : https://webers-testseite.de/bemopriv/
the heading had to be styled for responsive case – but I didn’t feel like doing that anymore.the layout is based on a grid-row element
this is the enfold shortcode of the grid-row:
[av_layout_row min_height_percent='percent' min_height_pc='60' min_height='0' border='' fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' color='main_color' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' fold_timer='' z_index_fold='' mobile='av-flex-cells' mobile_breaking='' mobile_column_order='' id='' custom_class='full-bg-image' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-m6f9v8gq' sc_version='1.0'] [av_cell_three_fourth vertical_align='middle' padding=',,,' av-desktop-padding=',,,80px' av-medium-padding=',,,80px' av-small-padding='3' av-small-padding_sync='true' av-mini-padding='20' av-mini-padding_sync='true' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' link_dynamic='' linktarget='' title_attr='' link_hover='' mobile_display='' mobile_col_pos='0' custom_class='' template_class='' av_uid='av-m6f9ukqb' sc_version='1.0'] [av_four_fifth first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_width='10' row_boxshadow_color='' margin='0px' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' mobile_breaking='' mobile_column_order='' border='1' border_style='solid' border_color='#000000' radius='15' radius_sync='true' min_col_height='' padding='30' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' column_boxshadow_width='10' column_boxshadow_color='' background='bg_color' background_color='rgba(0,0,0,0.5)' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' src_dynamic='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='' av-mini-parallax_parallax_speed='' fold_timer='' z_index_fold='' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' link='' link_dynamic='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='' template_class='' aria_label='' element_template='' one_element_template='' av_uid='av-t574on' sc_version='1.0'] [av_heading heading='FREEZE FLAT™' tag='h1' style='blockquote modern-quote' subheading_active='subheading_above' show_icon='' icon='ue800' font='entypo-fontello' size='' av-desktop-font-size-title='48' av-medium-font-size-title='42' av-small-font-size-title='36' av-mini-font-size-title='28' subheading_size='' av-desktop-font-size='36' av-medium-font-size='28' av-small-font-size='24' av-mini-font-size='20' icon_size='' av-desktop-font-size-1='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='custom-color-heading' custom_font='#ffffff' subheading_color='#ffffff' seperator_color='' icon_color='' margin='' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' headline_padding='' headline_padding_sync='true' av-desktop-headline_padding='' av-desktop-headline_padding_sync='true' av-medium-headline_padding='' av-medium-headline_padding_sync='true' av-small-headline_padding='' av-small-headline_padding_sync='true' av-mini-headline_padding='' av-mini-headline_padding_sync='true' padding='10' av-desktop-padding='' av-medium-padding='' av-small-padding='' av-mini-padding='' icon_padding='10' av-desktop-icon_padding='' av-medium-icon_padding='' av-small-icon_padding='' av-mini-icon_padding='' link='' link_dynamic='' link_target='' title_attr='' id='' custom_class='iceglas' template_class='' element_template='' one_element_template='' av_uid='av-m6e7xj5g' sc_version='1.0' admin_preview_bg=''] The Original [/av_heading] [/av_four_fifth][/av_cell_three_fourth][av_cell_one_fourth vertical_align='bottom' padding='' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_sync='true' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' link_dynamic='' linktarget='' title_attr='' link_hover='' mobile_display='' mobile_col_pos='0' custom_class='' template_class='' av_uid='av-u4sunr' sc_version='1.0'] [av_video src='https://www.youtube.com/watch?v=W73GdyDSHuU' mobile_image='https://webers-testseite.de/wp-content/uploads/dynamic_avia/avia_video_thumbnails/youtube/W73GdyDSHuU/W73GdyDSHuU.jpg' attachment='49853' attachment_size='full' video_autoplay_enabled='aviaTBvideo_autoplay_enabled' html5_fullscreen='aviaTBhtml5_fullscreen' format='16-9' width='16' height='9' conditional_play='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-m6f9u95o' sc_version='1.0'] [/av_cell_one_fourth] [/av_layout_row]But this mockup : https://i.gyazo.com/9aa08ac46047a586058391b52466bdf8.jpg
will need more css. I think it could be reached by grid layout …you can manage it by clip-path.
But the following section had to be handled the same way on top of that section
see ( css code including ): https://enfold.webers-webdesign.de/enfold-one-page-agency/the shift of that edge you like to have – had to be the same value on both sections! so % will not be ok ( the % is in relation to the section height – and that maybe different for both sections) for the shift. It had to be a absolute value – or a relative value that is the same for both sections ( f.e. screen width)
now only the polygone points declare the form of your separator. The points coordinates are starting top left and goes clockwise.
see f.e. : Clippy__________
to explain what I mean by shift: Starting from a rectangular polygon with an additional point at the bottom, in the example I move this point upwards by an amount (10vw). This means that the y-coordinate is 100% – 10vw. The same goes for the bottom left point.
So that there is no gap, I have to do the same with the following section. But then for the first and second point of the polygon.
besides the possibility to set it directly in the element itself:
(here an example with screen-width less than a given value)
you can manage it by quick css too:
(you only missed to select the p tag inside your selector)@media only screen and (max-width: 767px) { #top .av-special-heading .av-subheading p { font-size: 24px } }Dear @bemodesign, like you, I am just a fellow participant here, but I am happy to help where a solution might be interesting.
I have no idea why publicly accessible pages – your example page you mention above – are not allowed to be mentioned here. If this is exactly what you want to use as a realisation for your site. This limits you to solutions from moderators only. So I am no longer involved in the process of finding a solution.f.e.:
input[type="checkbox"]:not(:checked), input[type="checkbox"]:checked { position: relative; pointer-events: none; opacity: 0; width: 3.4rem !important } .input_checkbox_label .required { position: relative !important; left: 0 !important; } input[type="checkbox"] ~ label { position: relative !important; display: block; min-height: 2rem !important; } input[type="checkbox"] ~ label::before { position: absolute ; display: block !important; content: ""; top: 0; left: 0 !important; width: 3.0rem !important; height: 1.6rem !important; pointer-events: all; border-radius: 0.8rem; background-color: #fff; border: #adb5bd solid 1px; } input[type="checkbox"] ~ label::before { transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; } input[type="checkbox"]:checked ~ label::before { color: #fff; border-color: #adb5bd; background-color: #fff; } input[type="checkbox"] ~ label::after { content: ""; position: absolute !important; display: block; width: 1.4rem !important; height: 1.4rem !important; top: 0.16rem; left: 0.25rem; background-color: #832c32 !important; border-radius: 50%; transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out; transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out; background: no-repeat 50%/50% 50%; } input[type="checkbox"]:checked ~ label::after { background-color: #00841b !important; -webkit-transform: translateX(1.2rem); transform: translateX(1.2rem); }
PS: on that demo page this is working on the scratch – but it might be necessary to adjust display option and left positioning. Depends on setup.
what is this matomo script for? that is the console error warning – maybe deactivate it – and refresh all cache and merging after that and have a look.
fopen warning : maybe a caching problem – do you have a caching tool working – i can see Comet Cache – maybe try to deactivate that too- and see.
by the way where is this /volume4/web/ directory ? Warning is : no permission to that directory …
these settings are all browser controlled.
There is only the way to have a background-color from external css – see: https://kriesi.at/support/topic/info-about-radios-or-checkboxes-background-color/Styling the radios or checkboxes could be achieved – if you put the f.e. checkbox to opacity : 0 and then place a styled version to replace it:
see : https://webers-testseite.de/kontakt/or see: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox
you see this is always based on :
input { opacity: 0; cursor: pointer; height: 0; width: 0; }you find different solutions in the internet – f.e. on https://getcssscan.com/css-checkboxes-examples
yes – i think you are right . Allthough there are translatables in the code of enfold
__( 'Read More Text', 'avia_framework' ), __( 'Read more', 'avia_framework' ), __( 'Read Less Text', 'avia_framework' ), __( 'Read less', 'avia_framework' ),on many languages these ( f.e. on german) tranlations are missing.
but for dutch there is: Lees minder and Lees meer inside the lang files – so i guess you only want to change that translation? One solution could be to have your own translation files – or to use a plugin to change these translations.
I don’t know how you have implemented multilanguage support for your installation. With WPML you have separate pages. There you could rename it manually in the element.
So now not only your own websites that you create for your customers are secret (which I can understand), but also an example page that you find on the public Internet?
Why not using the code tag for your code? Link
No one can copy paste the code for his own use.Since I use contactform 7, I can’t say whether this has always been the case: the subject in the email header is always :
sent by contact form at bloginfo.if a hint on the bottom of your e-mail is enough – you can put this to your child-theme functions.php:
function add_page_info_to_form_email($message, $new_post, $form_params) { // Get the current page URL and title $page_url = get_permalink(); $page_title = get_the_title(); // Append the page information to the message $message .= "\n\n--\nSent from the page:\n" . $page_url . "\n"; return $message; } add_filter('avf_form_message', 'add_page_info_to_form_email', 10, 3);yes – and your mentioned code above : a.cart_dropdown_link leads me to the wrong direction.
But better is to post the link to that page – so i can inspect it there. – is it the priver page?
(f.e. the demo page Enfold Shop does not have that account login icon inside main nav. it is on header_top.)#top #header .av-main-nav #menu-item-wc-account-icon > a { color: #f19809; font-size: 28px; }or if you like to have a hover effect on this:
#top #header .av-main-nav #menu-item-wc-account-icon > a { color: #f19809; font-size: 28px; transition: color 0.7s ease; } #top #header .av-main-nav #menu-item-wc-account-icon > a:hover { color: #1c60c7; }the data-av_icon is on the following span tag:
#top a.cart_dropdown_link { right: 15px; } #top a.cart_dropdown_link span[data-av_icon] { font-size: 28px; color: var(--enfold-header-color-color); } /* === to influence the counter === */ #top a.cart_dropdown_link span.av-cart-counter { height: 20px; left: 64%; font-size: 18px; line-height: 20px; border-radius: 50%; background: var(--enfold-header-color-primary); color: var(--enfold-header-color-constant-font); margin: -22px 0 0 2px; padding: 2px 6px; }i inserted above the default colors – change them to your needs
First : this is not the enfold implemented magnificPopup lightbox. Next: what is wrong with those iframe popups? What you like to see or rule for those lightboxes?
you are talking about a color-section – and its background image – right? i can not see the header image in your question.
vw is another relative length value. https://css-tricks.com/the-lengths-of-css/#aa-vw
1vw is equal to 1% of the width of the viewport ( viewport width = vw)
so if you like to have the background-image to have full width – you can set the bg-image to cover the container – so it has a width of 100vw.
Now if you got a background-image that has a 16:9 aspect ratio then. 16 = 100vw and 9 = x vw ?
Simple rule of three the height of the container had to be 56.25vw.you see my example page that this is a responsive color-section. The only problem is that now the height of the container no longer grows with its content. But if you only got a heading f.e. with fluid font-size – this will work in that manner.
you had to know the aspect ratio of your bg-image. then you can calculate the height of that section in relation to 100vw of width.
f.e. if your bg-image is a 16/9 image – then the height should be 56.25vw. So you can force the height to be of that height of the image.This will work if your content does not grow over that height.
See an example here: https://webers-testseite.de/colorsection-responsive/Everything you need is already available in Enfold. You are not forced to use an additional plugin. If you are the licence holder (including web font usage), you can convert and use your desired font f.e. by : https://transfonter.org/
my recommendation is to generate woff2 and as fallback solution the ttf fonts.
The downloaded zip file could be used allready by enfold Font Manager, but however, I would only advise you to rename the zip file. In the Enfold Font Manager, the name of the zip file will appear as the font name (the css font name is not affected by this, it is generated from the font itself).
