Forum Replies Created
-
Posts
-
as i said above – there is a custom class to which the hyphenation goes.
Class name of content to hyphenate is on default : hyphenateif you got now a text-block element give him that custom class.
As you mentioned the word to look for is hyphenation – and the WordPress Plugin is Hyphenator : https://de.wordpress.org/plugins/hyphenator/
i’m very happy with that – i often use it on pages where my customers like to have justified text.Hyphenator automatically inserts separators in the content, so that at the end of line the text is wrapped with a dash if applicable. Hyphenator.js, a JavaScript available under the terms of LGPL v3, is used. It fields the algorithm known from OpenOffice and LaTeX. As this is executed client-sidedly, it adapts itself to the respective browser environment and thus avoids a faulty display. The script is particularly suitable for justification and supports a variety of languages.
to avoid unnecessary use of the whole thing, you simply assign a user-defined class (default is hyphenate) for the textblocks you like to hyphenate in that manner.
hm stange – you see here on Enfold 4.4.1 that portfolio – it has only one other portfolio in the same “category” = frontside
and you see that there is only that other portfolion in the left right navigation: https://webers-testseite.de/portfolio-item/pirol-hifi/to have vice-versa post navs you can use this:
add_filter( 'avia_post_nav_entries', 'enfold_customization_postnav', 10, 2); function enfold_customization_postnav($entries, $settings) { $entries['prev'] = get_next_post($settings['same_category']); $entries['next'] = get_previous_post($settings['same_category']); return $entries; }and sorry i did not read that it is a portfolio:
the portfolio “categories” aren’t real categories – they are ( as for events too) taxonomies:add_filter('avia_post_nav_settings', 'avia_post_nav_settings_mod'); function avia_post_nav_settings_mod($settings) { if(is_singular('portfolio')) { $settings['taxonomy'] = 'portfolio_entries'; $settings['same_category'] = true;} return $settings; }PS: please use for code the code block element on top of the input field:
click once code – enter your code – click it a second time
or enter your code – activate the whole code you entered with your mouse – press once code button.
the code is therefore difficult to read and to check – in addition, certain characters are converted by Boardsoft. The code in the code block can be copied and inserted directly to your functions.php of your child-themeand you realy mean mobile devices and not smaller screens?
you can try this:
.avia_mobile .home #av_section_1 .av-parallax { display: none !important; } .avia_mobile .home #av_section_1 { background: #7db9e8; background: -moz-linear-gradient(45deg, #7db9e8 0%, #ffffff 80%); background: -webkit-linear-gradient(45deg, #7db9e8 0%,#ffffff 80%); background: linear-gradient(45deg, #7db9e8 0%,#ffffff 80%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#ffffff',GradientType=1 ); } .avia_mobile .home #av_section_2 .av-parallax { display: none; } .avia_mobile .home #av_section_2 { background-image: -ms-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); background-image: -o-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #DDDDDD)); background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); background-image: linear-gradient(to bottom, #FFFFFF 0%, #DDDDDD 100%); }can you please try this instead in your functions.php of your child-theme:
add_filter( 'avia_post_nav_settings', 'enfold_customization_same_cat' ); function enfold_customization_same_cat( $s ) { $s['same_category'] = true; return $s; }the link to your image is correct – but your css entry has a different link !
this is what is in your css:
.myicon .av-icon-char { background-image: url('http://wpg.com.gridhosted.co.uk/wp-content/uploads/dynamic_avia/wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/myicon.png'); background-size: contain; background-repeat: no-repeat; background-position: center center; }maybe you have to erase the old merged css files of your enfold !
your link in the css to the image is not correct:
.myicon .av-icon-char { background-image: url('http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/myicon.png'); background-size: contain; background-repeat: no-repeat; background-position: center center; }on uploading my images – i do not want to have a recalculation – because my images are best optimized as possible.
so i sometimes have that function :add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );but on that customer site i do not have this in use.
on Enfold 4.4.1 this is set by default ? – but even if so – the algorithm seems to be a bit strange.
My images are on compression level (Photoshop) from 35 to 60%) depends on the content.
decompress – crop – compress will cause in more memory size but less sharpness.
In times where f.e. mozjpeg is able to nearly create good compression good resolution images it might be good to have this for creating the cropped image sizes.PS Optimus free only handels images less than 100kb
nearby – the selector is not the iconbox_icon:
.myicon .av-icon-char::before { visibility: hidden; } .myicon .av-icon-char { background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); background-size: contain; background-repeat: no-repeat; background-position: center center; }by the way the kriesi logo above has a lot of transparency arround the logo. If you do not have this space the image will be bigger.
if you are interested in this solution – it might be possible in a similar way: https://webers-testseite.de/cynthia/logo2-on-slider/
if you are activating the shortcodes for polylang via your functions.php of your child-theme:
function polylang_shortcode($atts, $content = null){ if (empty($content)) return ''; extract( shortcode_atts( array('lang' => ''), $atts ) ); if (empty($lang)) return "<h3>You must specify 'lang' using shortcode: polylang</h3>"; return ($lang == pll_current_language()) ? $content : ''; } add_shortcode('polylang', 'polylang_shortcode');you then can use this in all text fields – and a lot of enfold options input fields too (like footer copyright field) on this :
[polylang lang="en"]PhoneNumber for english sites [/polylang][polylang lang="de"]PhoneNumber for german sites[/polylang]etc. pp
:lol by the way – first i thought this might be a nice gimmick – but it is to complicated to make it real look beautiful:
well you can use your full-screen slider aswell and add your logo via jQuery function.
Here on my testpage i have given the slider the custom-class: place-logo
then i put into functions.php of my child-theme:
Test-page: https://webers-testseite.de/cynthia/logo-goes-to-slider/
function add_logo_to_slider() { ?> <script> (function($){ $('.place-logo .slideshow_caption').before('<img class="sliderlogo" src="https://webers-testseite.de/cynthia/wp-content/uploads/2018/07/full-logo.png" alt="Logo on Slider" />'); })(jQuery); </script> <?php } add_action('wp_footer', 'add_logo_to_slider');and make a setup for your added image for each slide number like:
/* rule for all slides in the slider */ .sliderlogo { position: relative !important; width: 40% !important; top: 35%; transform: translateY(-50%); -webkit-filter: drop-shadow(2px 2px 3px #ffffff); filter: drop-shadow(2px 2px 3px #ffffff); } /* if you like to have semitransparent background with padding for slide 1 */ .slide-1 .sliderlogo { background-color: rgba(255,255,255,0.2); padding: 40px; } /* if you like to shift in x direction for slide 2 */ .slide-2 .sliderlogo { margin-left: 10% !important; }but yes of course – but
I prefer it of course if it runs here over the forum, because I do not always have time to deal directly with the questions. Furthermore, the advantage of swarm intelligence should not be underestimated.
maybe this could help you – put it in your functions.php of your child-theme:
// Word replacement function replace_text($word){ $changings = array( // Word to replace => New text - comma separated 'Grundlagen' => 'Basis', 'dolor' => 'something else' ); $word = str_replace(array_keys($changings), $changings, $word); return $word; } // WP filter for the content and the Exerpt (content excerpt) add_filter('the_content', 'replace_text'); add_filter('the_excerpt', 'replace_text');you see how it works ?
this is what you like to replace:'Grundlagen' => 'Basis',
if you like to replace more these lines are separated by commata – the last instruction does not need a comma at the endby the way you can even replace with html expressions:
'Lorem' => '<abbr title="#">Lorem</abbr>',PS: this will work case-sensitve
by the way another question : why do you nearly always use png files – even if there was no transparency in use (except analytics – but it has here a white background – so a jpg could do the job too) ?
f.e. your water-cabana.png has a size of 1.6MB – the same jpg file with no quality loss : 143kb ( for transfer volumen – both have the same 2.56MB when they are opend)same with the other images. The five images on your landing page got on total with png : 4,5MB. with jpg : 500kb
don’t know if this is the reason for that behavior – I don’t believe it – but for performance reasons you should always prefer jpg – if you don’t need the transparent option.i’m shure that it will work with code in functions.php too – but for the “standard-enfold” user this might be a fine method to do it.
Same with responsive videobackground via adv. layoutbuilder even on mobile devices with autostart : https://webers-webdesign.de
Selfhosted Video and video as background-slidemy last test over the socket was successful.
you have to position the slider on the wanted page – then shift it with that DOM function on Slider Settings
see here between footer and socket with prependTo #socket : https://webers-testseite.de
in this case you can have alll those options to set : so i would input to that button – with iframe=true option
https://www.youtube-nocookie.com/embed/0f1fZgnhmJw?enablejsapi=1&ecver=2&cc_load_policy=1&rel=0&showinfo=0&autoplay=1&color=white&iv_load_policy=3&iframe=truesee here: https://webers-testseite.de/slider-with-video-button/
by the way you can see here : https://developers.google.com/youtube/youtube_player_demo – if you click “show player parameters” what the options are.
accept the ecver2 ( this is for not having video suggestions on pausing the video)by the way looping will not work with one video in the playlist! (only if you have the same video in the playlist)
ok – you can see here on my webdesign page https://webers-webdesign.de
that even a video ( this is a selfhosted video) works well on adv. layerslider – even on small screens (by the way on modern mobile advices too). So there must be some inconsistancies on your setting. Did you try a different image? Is it a reproduceable effect? Did you recognize that it is on a specific screen width range (f.e. between 768 and 990px )Edit: on slider settings / misc – there is an option : “Use srcset attribut” – which on default is enabled i guess.
sometimes not all images are present in the set. (some cleaning plugins looking for not used images maybe have erased those resolutions) – maybe that causes the fault on your page. Try to disable it – empty all caches and caching tools ( even the browser cache) – if that was the error – you can regenereate the all thumbnails for this image to have a complete srcset – and reactivate this option againEdit2: for what is the colorsection before the slider with that 1px hr in it?
Why don’t you use the full-width slider element (not the full-screen one) with your video as one slide.
you don’t have the need to have caption or buttons. and you can set up the video to loop. The only thing is that the controlelements can’t be completely hidden for vimeo videos. So the user could pause the video. After some time the control elements are hidden on default.
result see here: https://webers-testseite.de/video-tut/you have no content over your video – so no reason to have here a color-section.
for the burger menu – you can do this:
#av-burger-menu-ul { vertical-align: top !important; padding: 125px 0 !important; } .html_av-overlay-side #top #wrap_all .av-burger-overlay li a { line-height: 1.8em; }and you have to find a solution for ipad ( your menu is than not the hamburger ones) and some menu points float over the following content.
best could be to break the menu at 990px (Enfold Menu Options Dialog)
___________
for your logo on small screens :
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .container { width: 95%; max-width: 95%; } .main_menu ul:first-child > li > a { padding: 0 8px !important; } }and a bit more elegant but not as mighty as the code above is to have on enfold options dialog under the favicon input field an apple touch icon input field ! : put this to your functions.php of your child-theme (all credits goes to the other Günter)
function my_avf_option_page_data_add_elements( array $avia_elements = array() ) { $slug = "avia"; $id = 'favicon'; $new_element = array( "slug" => "avia", "name" => __( "Apple Icon", 'avia_framework' ), "desc" => __("Specify an Apple Touch Icon for your site.", 'avia_framework')." <br/>".__("Accepted formats: .png", 'avia_framework')."<br/>".__("best format will be 158px in square", 'avia_framework'), "id" => "avia_appleicon", "type" => "upload", "label" => __( "Use Image as Apple Icon", 'avia_framework' ) ); $found = false; $index = 0; foreach( $avia_elements as $key => $element ) { $index++; if( isset( $element['id'] ) && ( $element['id'] == $id ) && isset( $element['slug'] ) && ( $element['slug'] == $slug ) ) { $found = true; break; } } if( ! $found ) { $avia_elements[] = $new_element; } else { $avia_elements = array_merge( array_slice( $avia_elements, 0, $index ), array( $new_element ), array_slice( $avia_elements, $index ) ); } return $avia_elements; } add_filter( 'avf_option_page_data_init', 'my_avf_option_page_data_add_elements', 10, 1 );why don’t you try the other sliders ( they have buttons options and headings options – and they are on default responsive)
fullwidth-slider and fullscreenslider – i think the first fits for you
see here: https://webers-testseite.de/video-tut/you always can add those icons like this (but i think this is yigits code – with more options):
add_action('wp_head', 'ava_add_icons'); function ava_add_icons() { ?> <link rel="shortcut icon" type="image/x-icon" href="/wp-content/uploads/icons/favicon.ico"> <link rel="icon" type="image/x-icon" href="/wp-content/uploads/icons/favicon.ico"> <link rel="icon" type="image/gif" href="/wp-content/uploads/icons/favicon.gif"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon.png"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon.png"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-57x57.png" sizes="57x57"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-60x60.png" sizes="60x60"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-72x72.png" sizes="72x72"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-76x76.png" sizes="76x76"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-114x114.png" sizes="114x114"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-120x120.png" sizes="120x120"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-128x128.png" sizes="128x128"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-144x144.png" sizes="144x144"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-152x152.png" sizes="152x152"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-180x180.png" sizes="180x180"> <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-precomposed.png"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-160x160.png" sizes="160x160"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-196x196.png" sizes="196x196"> <meta name="msapplication-TileImage" content="/wp-content/uploads/icons/win8-tile-144x144.png"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-navbutton-color" content="#ffffff"> <meta name="application-name" content="homeurl.de"/> <meta name="msapplication-tooltip" content="homeurl.de"/> <meta name="apple-mobile-web-app-title" content="homeurl.de"/> <meta name="msapplication-square70x70logo" content="/wp-content/uploads/icons/win8-tile-70x70.png"> <meta name="msapplication-square144x144logo" content="/wp-content/uploads/icons/win8-tile-144x144.png"> <meta name="msapplication-square150x150logo" content="/wp-content/uploads/icons/win8-tile-150x150.png"> <meta name="msapplication-wide310x150logo" content="/wp-content/uploads/icons/win8-tile-310x150.png"> <meta name="msapplication-square310x310logo" content="/wp-content/uploads/icons/win8-tile-310x310.png"> <?php }a nice but german page to create those different sizes is: web-stuebchen.de
