Forum Replies Created
-
AuthorPosts
-
January 29, 2024 at 3:49 pm in reply to: How to add a button to Easy Slider that is consistent on all slides #1432402
have a look at: https://webers-testseite.de/easy-slider/
January 29, 2024 at 12:43 pm in reply to: How to create a text box next to an image where both resize together #1432380your image has an aspect ratio of 5/4 = 1.25
the column on the left is 3 units wide – and the column on the right 2 units – so the height must be 2*1.25 = 2.5
above your 1310px ( keep the padding left/right of 50px in mind ) etc. …see with css on : https://webers-testseite.de/gatehealing/
you see that below approx. 1000px, the height of the text determines the overall height – and the background-image on the right is cropped then.
January 29, 2024 at 11:43 am in reply to: How to create a text box next to an image where both resize together #1432368ok – now i understand – but: a basic principle of a column layout is that the column that has the most content determines the height. Otherwise you would have an overhang.
This is the reason for a background image. It then adapts to the growing content when “cover” is selected, but the content of the image is then also cropped.
If the content of the column with the text is not the determining element of the height, then it could be set by calculation so that the background image determines the height.
see here ( a bit different to your request ) how to calculate the setting: https://webers-testseite.de/isp/
pull the screen width to narrower width and see – that as long the content of the text cell is less – the background image resizes with the rest responsively.
Many of the suggested changes to the theme here on the board – are a lot easier to realize if you set up a child theme. That’s why I strongly recommend doing this.
However, there are probably also good plugins that can insert code snippets like the one above without a child theme.try ( if you do not like animation eliminate that part )
#avia2-menu #menu-item-4542 { color: #cc0033 !important; font-size: 1rem; animation: pound 3s infinite alternate; } @keyframes pound { to { transform:scale(1.1) } }
i would layout four 1/4 columns inside a color section with a custom class f.e.: special-sixth-grid
and then place this to your quick css:
( fr is abreviation for fraction – means part – so if there are for 100% = 6fr : 1fr 2fr 1fr 2fr that is your setting of 1/6 2/6 1/6 2/6 )#top .special-sixth-grid .entry-content-wrapper { display: grid; margin: 0; gap: 20px; grid-auto-flow: row; grid-template-columns: 1fr 2fr 1fr 2fr; align-self: stretch } @media only screen and (min-width: 768px) and (max-width: 989px) { .responsive #top .special-sixth-grid .entry-content-wrapper { gap: 20px; grid-template-columns: 1fr 2fr; } } @media only screen and (max-width: 767px) { .responsive #top .special-sixth-grid .entry-content-wrapper { gap: 20px; grid-template-columns: 1fr; } } #top .special-sixth-grid .entry-content-wrapper:before, #top .special-sixth-grid .entry-content-wrapper:after { display: none; } #top .special-sixth-grid .entry-content-wrapper .flex_column { width: unset !important; margin: 0 !important; }
see an example page ( only the top part – i added to an existing example page ): https://webers-testseite.de/4on1-flexbox-model/
January 28, 2024 at 11:00 pm in reply to: How to create a text box next to an image where both resize together #1432318something like this: https://kriesi.at/support/topic/text-around-an-image/
January 28, 2024 at 6:27 pm in reply to: Which multiple image sizes are safe to disable and delete #1432287and by the way – Enfold has a no compression level on those recalculated images – that will cause some unnecessary big file-sizes f.e. it might happen that the big sizes 1500×630 and 1500×430 are bigger in file-size than the uploaded original!
screenshot from enfold default setting:
so after erasing some image-sizes – and before recalculating the preserved image-sizes – put this snippet to your child-theme functions.php (change the 55 to what you like to have):
add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1); add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1); function avf_set_quality_mod($quality) { $quality = 55; return $quality;}
put this to your child-theme functions.php:
function ava_custom_script_mod_social(){ ?> <script> (function($){ $('#header').one('click', '.av-main-nav-wrap', function() { var isMobile = $('.av-burger-menu-main').css('display'), isHeading = "Social Bookmarks", social = $('#header_main .social_bookmarks').clone(true).addClass('sub-menu'), mobileMenu = $('.av-burger-overlay'); mobileMenu.find('#av-burger-menu-ul').append('<li class="only-burger menu-item-social av-active-burger-items"><a itemprop="url" alt="Social Bookmarks" style="" href="#"><span class="avia-bullet"></span><span class="avia-menu-text">'+isHeading+'</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span></a></li>'); if( social.length ){ mobileMenu.find('.only-burger.menu-item-social').append(social); } }); var htmlString = $('#socket .social_bookmarks').clone().find('li a'), socialString = []; htmlString.each(function() { var socialClass = $(this).parent('li').attr('class'), socialItems = $(this).wrap('<li class="'+ socialClass + ' menu-item menu-item-avia-special menu-social"></li>').parent().unwrap(); socialString.push(socialItems); }); var socials = socialString.reverse(); $(socials).each(function() { $(this).appendTo('#avia-menu'); }); $('#avia-menu .menu-social').css('float', 'right'); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_custom_script_mod_social');
if you do not like to have a heading on those bookmarks
replace that one line in the snippet above:isHeading = " ",
then this to your quick css:
#av-burger-menu-ul .menu-item-social > a { pointer-events: none; margin-bottom: 10px; } #av-burger-menu-ul .menu-item-social a .avia-menu-text { font-style: italic; } .html_av-overlay-side-classic #top .av-burger-overlay li.menu-item-social a { border: none !important } .responsive #top #av-burger-menu-ul .social_bookmarks.sub-menu { margin-left: 30px; overflow: visible; float: left !important; display: block !important; height: auto } #av-burger-menu-ul .social_bookmarks.sub-menu li { display: block; margin: 3px 15px; float: left; } #av-burger-menu-ul .social_bookmarks.sub-menu li a { padding: 10px !important; display: table-cell !important; float: none !important; border-radius: 0 !important; } #av-burger-menu-ul .social_bookmarks.sub-menu li a:before { position: relative; font-size: 1.8em; top: 2px !important; } #top #wrap_all #av-burger-menu-ul .av-social-link-facebook a { padding: 10px 13px !important;} #top #wrap_all #av-burger-menu-ul .av-social-link-facebook:hover a{color:#fff; background-color:#37589b!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-instagram:hover a{color:#fff; background-color:#a67658!important; } #top #wrap_all #av-burger-menu-ul .av-social-link-youtube:hover a{color:#fff; background-color:#a72b1d!important; }
if you do not want to have the burger nav horizontally centered :
#top #av-burger-menu-ul { vertical-align: top !important; padding-top: 150px !important; }
result should be:
see here a comparison of normal and italic font of montserrat ( just chaning it in developer tools to render the normal font as italic )
Yes – the small “a” is different !
some serif fonts do have more specific differences in comparison. On performance reasons – do not upload those italic font-styles.
the package you can download from google on fonts that have “variable fonts” contains a subfolder with those static fonts.
Enfold could handle variable fonts – but you had to know how to work with those variable fonts.if you only like to upload those static fonts – pull this folder form that zip file to your desktop – rename it to “Montserrat” and (important) zip it for PC ( not including the invisible OSX files generates with their compression options.). Betterzip f.e. has a drop-window where you can choose for what system you zip it.
Why this is important. if you upload that zipped file you will have an additional font in there:
__________________
Next : Google does only offer ttf files for you. but it might be better to upload woff2 files ( brotli compression ) as font-files.
( less loading times on woff2 ). So it might be good to have both woff2 ( for modern Browsers ) and ttf (for older browser support)
see: https://kriesi.at/support/topic/host-web-font-yourself-some-info/#post-1364066
use transfonter to generate woff2 and ttf files – put them in one folder – rename the folder to your needs ( Montserrat ) – and upload that.
As mentioned there – think if you realy need an italic font to upload – because browser rendering might do a good job to of normal font.can you test in your quick css:
@media only screen and (min-width: 480px) { .responsive #top #header .main_menu .social_bookmarks { z-index: 5; line-height: 90px; margin-left: -40px } } @media only screen and (max-width: 479px) { .responsive.av-burger-overlay-active #top #wrap_all #header .social_bookmarks, .responsive.av-burger-overlay-active #top #wrap_all #main .av-logo-container .social_bookmarks { display: block; } .responsive #top #header .main_menu .social_bookmarks { z-index: 5; line-height: 90px; margin-left: 20px; } }
but i guess you had to think about a different position for those social bookmarks – maybe the header_meta is a good place for it. Because on screens smaller than 1400px your main menu overlaps your logo and the social bookmarks nav floats into a second line.
-
This reply was modified 1 year, 5 months ago by
Guenni007.
January 27, 2024 at 9:08 am in reply to: The flag of languages not appear in phone burger menu. #1432188you can use a default text block element – and insert that media file to it:
(click to enlarge the screenshot)
1 – position the cursor to a place where you like to insert your image ( btw. you can later drag&drop the image to a different place)
2 – click that button “Add Media” – the media library opens and you can choose the file.
3 – you can adjust the dimension on pulling one edge of the image ( without pressing any key on your keyboard – it will preserve aspect ratio)
4 – click on the inserted image to see the option to set a floating ( or determine it already in step 2 )
5 – you can set additional settings to that image on clicking the edit button ( pencil )
5.1. … on that new popup ( without screenshot ) you can do different things ( like a class to the image, or to the link if it is set, …)
a custom class (e.g. alignright-margins) to the image could be very nice – to determine the margins arround a floating image f.e.img.alignright-margins { margin: 0 0 20px 30px; }
do not forget to save your settings.
or as mentioned above the plugin: https://en-gb.wordpress.org/plugins/regenerate-thumbnails-advanced/
First: install the plugin. Start by deleting all calculated Image-sizes by:
Second: enter the snippet to your child-theme functions.php and
Third: go to that plugin again and recalculate the preserved image-sizes:
please try : https://wordpress.org/plugins/force-regenerate-thumbnails/ as mentioned above – i guess this is the tool to recalculate all files by erasing the existing ones.
But be carefull – if you have inserted on your content an image with an image-size that will be deleted – you then have no image in the frontend.
January 26, 2024 at 1:22 pm in reply to: Align Menu on the bottom of header instead of center #1432130can your try in quick css:
@media screen and (min-width:1226px) { #top #header .av-main-nav > li > a { line-height: unset !important; height: unset !important; } #top div.avia-menu { height: 100%; } #top #avia-menu { position: relative; top: calc(100% - 35px) } }
we now have:
$img_size = apply_filters( 'avf_tab_subsection_image_size', 'square', $atts ); $src = wp_get_attachment_image_src( $atts['tab_image'], 'square' );
but does the src not hamper the usage of the add_filter ? ;)
we should have :
$src = wp_get_attachment_image_src( $atts['tab_image'], $img_size );
no effect on using:
function change_tab_image_size() { return "portfolio_small"; } add_filter('avf_tab_subsection_image_size','change_tab_image_size', 10);
hab die 5.6.10 drauf, und Problem ist behoben – danke dafür
The snippet above ensures that during the upload of new files, when creating the various file formats, some of the intended formats are no longer created.
This does not affect existing file formats.
For this you need these regenerate thumbnails plugins once to recalculate here and to remove file formats that no longer exist.
After recalculating you can deinstall those plugins.i see that you have set on the page /our-clinic/about for the other cell a min-height – that will be possible if you want only the flip-background image to cover only ( including crop ) – you have to remove all paddings on that cell with the flip-box and set the same min-height / height option there !!!
my method above is only to have totaly responsive bg-image for flipyou can test if for the above page by:
.av-layout-grid-container.av-li73q-e1db10c26939acc99331ee70921182c6 .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-flipback, .av-layout-grid-container.av-li73q-e1db10c26939acc99331ee70921182c6 .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-front { margin: 0 !important; } .av-layout-grid-container.av-li73q-e1db10c26939acc99331ee70921182c6 { min-height: 500px !important; } .av-layout-grid-container.av-li73q-e1db10c26939acc99331ee70921182c6 .avia-icon-grid-container, .av-layout-grid-container.av-li73q-e1db10c26939acc99331ee70921182c6 .article-icon-entry { min-height: 500px !important; } .responsive #top #wrap_all .flex_cell.av-5cyqiu-1b136132ec762676c6173331de16be40{ padding: 0 !important; }
i would give the grid-row a custom class or ID and set the css for that.
that video is a background-video or a placed video element?
On video element try to set up a pseudo container – but best would be to set a custom class to the video
.avia-video .avia-iframe-wrap:after, .avia-video .mejs-container:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left:0; background: linear-gradient(to bottom, rgba(255,255,255,0.01) 0%,rgba(6,133,229,1) 80%); opacity: 0.8; z-index: 5 !important; pointer-events: none; }
does your page have on html a lang attribute?
because your pages are password protected i can not inspect it.for polylang try in child-theme functions.php:
function av_change_logo_link($link){ $lang = pll_current_language('locale'); switch ($lang) { case 'fr_FR': $link = "https://backlink_to_french_page"; break; case 'de_DE': $link = "https://backlink_to_german_page"; break; } return $link; } add_filter('avf_logo_link','av_change_logo_link');
adjust your languages with the examples given above
____________
or shorter if it is one default and one extra lang:function av_change_logo_url($link){ $lang = pll_current_language('locale'); if ($lang == 'ro-RO') { $link = "https://your_needed_link"; } return $link; } add_filter('avf_logo_link','av_change_logo_url');
guess for Romanian it is ro_RO
i guess i took the plugin above because some of those tools do not remove the already existing thumbnails.
one plugin that is more clear in this is: https://en-gb.wordpress.org/plugins/regenerate-thumbnails-advanced/it has a clean-up function “Delete unused Thumbnails”
But : after erasing some of those image-sizes – you had to regenerate your thumbnails : there are some good plugins to do so.
f.e.: https://wordpress.org/plugins/force-regenerate-thumbnails/if your language plugin set the correct lang attributes to html – you an use it as:
( this example is for german pages a new logo link)function av_change_logo_link_on_different_languages($link){ $currentlang = get_bloginfo('language'); if($currentlang=="de_DE"){ $link = 'https://lang_specific_link'; } return $link; } add_filter('avf_logo_link','av_change_logo_link_on_different_languages');
does that solution work if burger menu is active?
on menu.js we got this setting:
/** * If we have burger menu active we ignore sticking submenus */ if( burger_menu.is(":visible") ) { this.css({top: 'auto', position: 'absolute'}); fixed = false; return; }
so – if i like to have that – i prepare to have child-theme alb elements ( unfortunately some settings in menu.css are set to important, so that you have to drag along menu.php and menu.css as well. Actually only a menu.js would be necessary.)
see: https://kriesi.at/support/topic/still-fighting-with-managing-default-image-sizes/#post-1418393
or: https://kriesi.at/support/topic/bilder-speicher/#post-1422743
Read the comments carefully in those snippets – some image-sizes are needed for backend to work.
-
This reply was modified 1 year, 5 months ago by
-
AuthorPosts