Forum Replies Created
-
AuthorPosts
-
I would create an external format in my image processing program and then place the images there so that they have the height and width corresponds to the true proportions. Here, unfortunately, we come to the probable fact that such a can will look lost next to the barrel.
see here : i put all images in the same outer image dimensions ( 400 x 600 )
and then inserted the individual images in the image program according to their size. As a result, the png’s all have the same size, but the contents are proportional to each other.download them here: https://webers-testseite.de/Kelly.zip
see – with code on the example page: https://webers-testseite.de/lunar-kitten/
if the place is too narrow the grids will autoflow – if you like to flow only to a 2/2 grid then we had to set a media query.
i set the image background to a color – so you can see that the images got the same outer dimensions.- This reply was modified 4 hours, 51 minutes ago by Guenni007.
The easiest way to do this is if the images are in this ratio ;) – why force something via css that can already be created this way during creation.
or try instead :
.avia_textblock.bottomlined { display: table; } .avia_textblock.bottomlined > div { min-width: 80px; display: table-cell; float: none; border: none; padding-right: 10px !important; }
to better select that text-block section – and to not influence other text-blocks – give that avia-textblock a custom class f.e.: bottomlined
then put this to quick css:
.avia_textblock.bottomlined { display: table; } .avia_textblock.bottomlined > div { min-width: 130px; display: table-cell; float: none; border: none; padding-right: 30px !important; }
play a bit with min-width value
#top #footer { padding: 5px 0 ; } #top #footer .widget { margin: 10px 0 ; } #top #socket .container { padding-top: 10px !important; padding-bottom: 10px !important; }
next : you got this inside your css:
add_filter('wf_pklist_alter_additional_fields', 'wf_pklist_alter_additional', 10, 3); function wf_pklist_alter_additional($extra_fields, $template_type, $order) { if ($template_type ==='packinglist' && !empty($extra_fields)) { if ('No'===$extra_fields['Copia Literal']) { unset($extra_fields['Copia Literal']) } if('No'===$extra_fields['Copia en PDF']) { unset($extra_fields['Copia en PDF']) } ksort($extra_fields) } return $extra_fields } add_filter('weglot_replace_url', 'th9e_weglot_replace_url', 99, 3); function th9e_weglot_replace_url($replaced_url,$url,$language){ if(strpos($url, 'thwcfe_uploads') !==false) { return $url } return $replaced_url }
this is not meant for css. These are code snippets that belong to a functions.php ( best for child-theme functions.php)
and that is placed twice – remove that too (both):
.html_header_top.html_header_sticky #header { position: sticky !important }
The labeling there for the Enfold header options is misleading. Enfold sets the header to position : fixed when this option is selected.
position : sticky and position: fixed are not equivalent
i can see on your page that this is set on enfold child css – the default setting is by enfold in layout.css:
so that was my question
Also, I added the CSS you wrote under the Enfold Child Theme Options—General Styling—Quick CSS section, but it is still not working. Your suggestions may have confused me, so if you could please verify, that would be great. Thanks!
Thats why i told you to remove that setting from quick css
bei WPML ist es so, das es auch das Backend sprachlich aufsplittet ist. Heißt du hast oben entsprechend auch viele Sprachen.
Ob das “All Languages” funktioniert weiss ich nicht. Ich habe es immer so gemacht, das ich zunächst die eine Sprache fertig layoutete, dann oben umstellte, und die Einstellungen übertrug.Wie geht das: Enfold bietet dir die Möglichkeit unter Import/Export die Einstellungen (Theme Settings File ) zu exportieren. Das führst du für die eine Sprache aus, wechselst dann zur anderen und importierst dann das soeben abgespeicherte Theme Settings File.
Viele finden es als lästig so zu agieren, ich finde das man es aber auch als Feature sehen kann. Du kannst so z.B. auf Farbvorlieben in den entsprechenden Ländern reagiern – Schriftarten verschieden setzen. etc. pp.
can i see the page?
No – envato is not up to date! –
Otherwise, make it a competition! Anyone who wants to should send in a demo. The content is already known. Maybe a few hints on what new features should be emphasised.
PS: The news about 6.0.7 has already been sent out, but you can still download the old version from Envato.Without seeing the specific page, I’m afraid I can’t help.
if you really want to change only on mobile devices – there is a
wp_is_mobile( )
f.e:
function av_change_mobile_logo($logo){ if(wp_is_mobile()){ $logo = "/wp-content/uploads/your-mobile-logo.png"; } return $logo; } add_filter('avf_logo','av_change_mobile_logo');
Ok – i will remove that example page.
on Advanced tab of the Element : under Performance – choose : “Do not use Responsive Images”
if you do not have that choice: put this to your child-theme functions.php:add_theme_support('avia_show_alb_responsive_image_option');
then the webp will do their job. For some reason, the images from the srcset are superimposed.
maybe it is because your images are no jpg images. They are webp files.
it should work with webp too, but i do not know how browsers act with a different file extension.Edit: hm – the webp (renamed) do not work – and it does not work with webp graphics.
I don’t quite understand this yet, because the images viewed in the Pure Browser are both sharp.November 19, 2024 at 4:34 pm in reply to: Show a default search field instead of search icon #1471663so i can see your search input field. You like to center it now – that this box will have the same alignment than the other nav items?
so remove the display options first for that menu-item:
#menu-item-3327 { height: 90px; display: flex; align-items: center; }
it is important to use the navigation as flex container:
( have a look if this is better)#avia-menu { display: flex !important; flex-flow: row nowrap; justify-content: space-between; align-items: center; } #menu-item-3327 { margin-right: 10px; } .dgwt-wcas-search-input { height: 35px !important; } .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit { height: 35px; background-color: #22689e !important; } .dgwt-wcas-sf-wrapp .dgwt-wcas-ico-magnifier{ overflow: visible } .dgwt-wcas-sf-wrapp .dgwt-wcas-ico-magnifier path { fill: #FFF !important; stroke: #FFF; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; } .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::before { display: none; }
if you only have a slideshow – without buttons and without links on the slides – you can have left side image: prev – and right side image : next
only by css:
(the navigation arrows must be selected as navigation controls – but we do not show them).avia-slideshow-arrows.avia-slideshow-controls { height: 100% !important; width: 100% !important; display: block; position: absolute; top: 0; left: 0; } #top .avia-slideshow-arrows a { width: 50% !important; height: 100%; top: 0; margin:0 !important; padding: 0 !important; opacity: 0 !important; } #top .avia-slideshow-arrows a.prev-slide { left: 0; } #top .avia-slideshow-arrows a.next-slide { right: 0; }
if you like to have that arrows – we must have that css in addition:
(and remove the opacity : 0 above)#top .avia-slideshow-arrows a.prev-slide:before { text-align: left; } #top .avia-slideshow-arrows a.next-slide:before { text-align:right; } #top .avia-slideshow-arrows a:before { top: 50%; width: 30px; height: 60px; } #top .avia-slideshow-arrows a.prev-slide:before { left: 20px; padding-left: 20px } #top .avia-slideshow-arrows a.next-slide:before { right: 20px; left: auto; padding-right: 20px }
see css solution in action : https://webers-testseite.de/easy-slider-navigation/
but if you have buttons inside those slides we have to do it via child-theme functions.php:
( without the css above – but without prev next option – but you can use buttons on sliders )function next_slide_on_image_click() { ?> <script type="text/javascript"> window.addEventListener("DOMContentLoaded", function () { (function($){ $('.avia-slide-wrap img').click(function() { $(this).closest('.avia-slideshow').find('.avia-slideshow-arrows a.next-slide').trigger('click'); }); })(jQuery); }); </script> <?php } add_action('wp_footer', 'next_slide_on_image_click');
the crux is – if you have links on your images – they will interfere with prev – next navigation.
If no links are assigned to the images, then it is possible to have left side prev – right side next.if you got no additional links on the images but buttons inside the slide we can have next slide for image click.
You should be more specific about that. Does it no longer work in general or do you mean on mobile devices?
If you select this option in Enfold under Header- Header behavior, the header is generally set to position: fixed. Based on your nickname, I see on your page that the header is set to position: sticky. Did you set this yourself via quick css?
PS: Quick Css input field is just to place css rules – no script or php snippets. ( functions or add_filter rules etc.)
so remove those non css instructions and that css:
.html_header_top.html_header_sticky #header { position: sticky !important; }
and place functions or filters to the child-theme functions.php. If you do not use child-theme then try one of those plugins to inject snippets.
Unfortunately, I have no experience with such plugins, so I can’t recommend one. Maybe a mod here knows a good one.Next: how did you place the cart icon into the navigation?
November 18, 2024 at 8:16 pm in reply to: Menü für Smarphone zu lang – lässt sich nicht scrollen #1471595und du hast absichtlich das mega-div so gestaltet, daß immer eine neue Zeile aufgemacht wird?
Denn eigentich ist so ein Menu prädestiniert für ein multi-column mega-div.Trotzdem mal so: du weißt besser wie hoch dein Header inclusive Nav und Breadcrumb maximal ist, das sollte dann mindestens unten abgezogen werden:
#header .avia_mega_div { overflow: auto; height: calc(100vh - 200px); }
November 18, 2024 at 8:05 pm in reply to: Page as footer is identified in HTML as main and not as a footer #1471594There in the post Mike linked to – it was about bringing the #footer/#socket to full width.
If this is not your intention, but only the reordering of the DOM, then you can correct the css accordingly.so disregard the css specified there and instead:
@media only screen and (min-width: 990px) { #footer, #socket { width: calc(100% - 300px); left: 300px; } } @media only screen and (min-width: 768px) and (max-width: 989px) { #footer, #socket { width: 73vw; left: 27%; } }
for the rest of the code i had to see a pure installation of header left.
because i have a loto of settings for header on that installation that disturbs the settings here.
f.e.: the mobile header below 768px is fixed etc.on pastebin – this is the already edited footer.php. You can download it there.
If you place it to your child-theme root directory ( just besides style.css, functions.php and screenshot.png) it will automatically work.
you can see the changings because they are commented in that file. i just shifted the closing div of #main to the top.
it seems to work as long as you do not need the curtanin effect footer – with footer-page it works too – see example pages
https://enfold.webers-webdesign.de/enfold-consulting/
or
https://enfold.webers-webdesign.de/enfold-photography-portfolio/on those two pages i aditionally added:
.responsive #top #footer .container, .responsive #top #socket .container, .responsive #top #footer-page .container { max-width: 95vw; }
… see private content
Please read this first : Enfold has understood the footer as part of #main from the very beginning. This means placing the containers within this main. I don’t know if this has any advantages, but many other themes have it as a sibling of header and main. I just skimmed over whether you could change the position with a child theme footer.php; however, I think you would then run into more conflicts than you would solve.
#wrap_all will have then:
- #header
- #main
- #footer
- #socket
see: https://enfold.webers-webdesign.de/enfold-consulting/
I believe that the option for the footer: “sticky with curtain effect” will be difficult to implement.
see footer.php changings (lines 11 and … ) https://pastebin.com/JUyUhwDs
#footer, #socket, #footer-page { z-index: 1000; } #footer-page { position: relative; }
just remove the portfolio from those snippets:
function avf_template_builder_content_postimage_mod($content = ""){ if( is_singular('post') && ( '1' != get_post_meta( get_the_ID(), '_avia_hide_featured_image', true ) ) ) { $featuredImage = get_the_post_thumbnail( $the_id, 'original' ); $content = '<header class="entry-content-header"><div class="page-thumb">' .$featuredImage. '</div></header>' . $content ; } return $content; } add_filter('avf_template_builder_content', 'avf_template_builder_content_postimage_mod', 10, 1); //image-sizes: widget, square, featured, featured_large, extra_large, portfolio, portfolio_small, gallery, magazine, masonry, entry_with_sidebar, entry_without_sidebar, medium, large function custom_post_featured_image_link( $image_link, array $current_post, $size ){ if( is_singular('post') && ( '1' != get_post_meta( get_the_ID(), '_avia_hide_featured_image', true ) ) ) { $image_link = get_the_post_thumbnail( $current_post['the_id'], 'original' ); /**** or medium, square etc. ***/ } return $image_link; // echo $image_link; if you want to get rid of link function } add_filter( 'avf_post_featured_image_link', 'custom_post_featured_image_link', 10, 3 );
November 15, 2024 at 12:13 pm in reply to: Search form AJAX results contains hidden products #1471398by the way : to influence the search query – to include for example attachments you can do :
code snippet removed – because it does not work as expected. – sorry
November 15, 2024 at 11:31 am in reply to: Search form AJAX results contains hidden products #1471396i got an additional solution – even if you like to hide some special posts :
it limits the results to 5 posts – and excludes the post-id’s 68 and 55 but shows only published posts – and with no passwordfunction avia_filter_ajax_search_results( $search_parameters ){ $defaults = array('numberposts' => 5, 'post_type' => array( 'post', 'portfolio', 'page' ), 'post__not_in' => array(68,55), 'post_status' => 'publish', 'post_password' => '', 'suppress_filters' => false); $_REQUEST['s'] = apply_filters( 'get_search_query', $_REQUEST['s']); $search_parameters = array_merge( $defaults, $_REQUEST ); return $search_parameters; } add_filter('avf_ajax_search_query', 'avia_filter_ajax_search_results', 10, 1);
by the way – would it be possible to limit not the whole results to 5 – but for each post_type ?
November 15, 2024 at 11:17 am in reply to: Lightbox: disable click through other images on page #1471395or just set the gallery in ismaels snippet to false:
gallery: { enabled: false},function ava_popup_init() { ?> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.av-popup-no-nav, .av-popup-no-nav a').magnificPopup({ type: 'image', midClick: true, // Allow opening popup on middle mouse click gallery: { enabled: false}, }); }); </script> <?php } add_action('wp_head', 'ava_popup_init');
or you take – mikes snippet to redeclare these formats – but with setting of crop to false!
( but the solution above is more elegant, and also shows the full resolution )function avf_customization_modify_thumb_size( $size ) { $size['entry_without_sidebar'] = array( 'width' => 845, 'height' => 9999 , 'crop' => false ); $size['entry_with_sidebar'] = array( 'width' => 1210, 'height' => 9999 , 'crop' => false ); return $size; } add_filter( 'avf_modify_thumb_size', 'avf_customization_modify_thumb_size', 10, 1 );
the limitation value is not the width value – so you got smaller images. This is as Mike mentioned for the new images only – but if you recalculate the thumbs even the older posts will have that new size (without cropping)
-
AuthorPosts