Forum Replies Created
-
Posts
-
this is your slideshow test 2 page?
responsive on enfold means: the columns goes to 100% width. Then the order is determine by the mentioned above.
if you like to reach that of your screenshot – you had to place these 3 columns best in an extra color-section. That is easier to handle.
Then best a custom class is added to that color-section to better select that columns. A custom flex layout should then be set by css.
Means – after first responsive break – the one flex-item will have 100% – the others will have 50% width.If it will be a slideshow – you like to have an event on those arrows under the image? what is the function of that X in the middle ? – and on the right side the counter should count the images automatically?
see here with a possible css code : https://webers-testseite.de/slideshow-test2/
may i ask you just a question – what benefit has a button label with the ID – That’s not very meaningful for visitors. Perhaps I am overlooking the usefulness of such a button.
if you only like to have the reverse order :
__________________
if you choose the third option on that – than go to advanced tab (erweitert) – and choose the responsive position
This is only needed if you got date columns with uncommon format. Like Dots ( 10. 12. etc. Jan. Feb. ) or fullnames of the month.
I guess a normal format like 24-07-2024 could be handled without that way.do you know how to get the avia shortcodes for that element?
Just style your partner logo element on a f.e. new page without any wrapper elements ( espacially color-section )copy that code – f.e.:
[ av_partner heading='' type='slider' columns='1' navigation='arrows' control_layout='av-control-default' nav_visibility_desktop='' nav_arrow_color='' nav_arrow_bg_color='' nav_dots_color='' nav_dot_active_color='' size='no scaling' img_size_behave='no_stretch' border='' img_border='' img_border_width='' img_border_width_sync='true' img_border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' padding='' padding_sync='true' animation='slide' transition_speed='' autoplay='false' interval='5' heading_tag='' heading_class='' img_scrset='' lazy_loading='disabled' el_id='' custom_class='' template_class='' av_uid='av-lyyz7l6u' sc_version='1.0'] [ av_partner_logo id='1225'] [ av_partner_logo id='1224' id_dynamic='' hover='' link='' link_dynamic='' link_target='' linktitle='' av_uid='av-lyyz76rg' sc_version='1.0'] [/av_partner]and insert that code to your footer widget. If you don’t use that element on your pages – it might be neccessary to activate that option on enfold – performance: “Scan Widgets For Theme Shortcodes”
Attention: You must replace “[ av_…” with “[av_…” (remove space between “[” and “av_…” )
i solved it with the help of moment.js script ( with locale settings ):
function fix_for_sorttable(){ ?> <script> window.addEventListener("DOMContentLoaded", function () { (function($){ $('.avia-table.sortable').each(function(){ // this is the heading of the column with dates - you had to adjust to your needs var dateTableIndex = $(this).find('thead th:contains("Dat")').index(); var dateChildNumber = parseInt(dateTableIndex)+1; $(this).find('tbody td:nth-of-type('+dateChildNumber+')').addClass('date'); }); $(".date").each(function(idx) { // change the locale setting to your needed language - spcifications may occur like de_at - for austria moment.locale('de'); var datum = $(this).text(), // this is the code for my used german date format like : 16. Mai 1962 datum_formated = moment( datum , 'DD. MMMM YYYY').format('YYYY-MM-DD'); $(this).attr("sorttable_customkey", datum_formated); }); })(jQuery); }); </script> <?php } add_action('wp_footer', 'fix_for_sorttable');the format YYYY-MM-DD is sortable
see: https://webers-testseite.de/sortable-table/I think the childtheme table.php is not needed as we can trigger this by giving the data table the custom class: sortable
I have tested this and there should be no problems for standard tables.
______________Unfortunately, it looks different for tables that are to be sorted by date. As long as you use standard english date formats you are probably on the safe side. Unfortunately, in Germany we like to use the dot as a separator and the month names are of course different.
So e.g. 16. Mai 1962 etc. is then not sorted correctly.here is my snippet to give to each td under a “Datum” ( my trigger heading word )
see solution on the next posting
However, this does not have the desired result either, because here too, for example, local date format entries are not taken into account. The result is that a NaN is returned for e.g. Mai / Dez etc or 16.05.2001.
Or in other words – how do we get a date field to have a sorttable_customkey attribute in the form yyyymmdd ?
and that with a given local date formate like 16. Mai 2001brilliant – I didn’t think of this little trick to use it again as $header_content[‘cats’].
So – definitely use this snippet. I see you know how to get rid of the word “in”.i think there must be a way to reorder an existiing array .
inside magazine.php there is on lines 1545ff :$header_content = array( 'time' => "<time class='av-magazine-time updated' {$markupTime}>{$time}</time>", 'author' => $author, 'cats' => $cats, 'tags' => $tags, 'title' => "<{$titleTag} class='av-magazine-title entry-title {$titleCss}' {$markupTitle}>{$title}</{$titleTag}>" );And that is the reason why the cats are placed over the titles.
Edit : code erased see snippet from Ismaelbut: as mentioned above – maybe there is a very easy way to reorder that array.
mayby a mod knows a method to influence the generation of that sequence – perhaps via filter: avf_magazine_header_content
but here is a quick jQuery function for child-theme functions.php:
function change_position() { ?> <script> (function($){ $('.entry-content-header').each(function() { movedElement = $(this).find('.av-magazine-title'); targetElelemt = $(this).find('.av-magazine-cats-wrap'); $(movedElement).insertBefore($(targetElelemt)); }); })(jQuery); </script> <?php } add_action('wp_footer', 'change_position');you mean in the logo of the example demo page?
There are a lot of suitable candidates. One of the better-known commercial fonts is probably: Avenir Next LT Pro
(In GillSans or Helvetica New, for example, the centre E stroke ends on a line with the other ‘arms’.)
If you like to know which google font is similar to that – see here f.e.: https://similarfont.io/3-google-fonts-similar-to-avenir-next
See Prompt: https://fonts.google.com/specimen/Prompt?preview.text=ENFOLD&query=Promptthis is the logo for transparency / glassy headers.
You can find a switch on Theme Options : Transparency Options (Contains options for transparency header)
here you can replace that logo or set the color for menu items for transparency headersa note : my Wordfence scan shows that after the last WP update, old files from the previous version remained in the folders – and these are mainly related to the editor files!
try to start in that mode with the “automatic” click on that unseen button:
function trigger_alb_on_load(){ ?> <script> (function($){ $(window).on('load', function(){ setTimeout(function() { $("#avia-builder-button").trigger('click'); }, 300); }); })(jQuery); </script> <?php } add_action('admin_head-post-new.php', 'trigger_alb_on_load');they got a nice docu – i think there is no special trick for it: https://krpano.com/docu/embedpano/#top
Why don’t you assign an additional special category to these portfolios? “Guest”
As far as I know, no further intervention is necessary then!
The Portfolio Grid is now: Whether you have selected the sort option or not, this taxonomy appears there as the class on grid-entry : XYZ_sort
In your case then guest_sortalthough I believe that it is rather good if visitors can interact with autoplay videos. Turning it off is certainly better than leaving the website because a video is annoying!
Super : i didn’t think of that: https://img.savvyify.com/image/Enfold-Support-6295.9iVHK !
and this is the way the class: widget_nav_hide_child comes to the menu.besides that : this is the shortcode for polylang lang switch:
function custom_polylang_langswitcher() { $output = ''; if ( function_exists( 'pll_the_languages' ) ) { $args = [ 'show_flags' => 1, 'hide_if_empty' => 0, 'show_names' => 1, 'echo' => 0, ]; $output = '<ul class="polylang_langswitcher">'.pll_the_languages( $args ). '</ul>'; } return $output; } add_shortcode( 'polylang_langswitcher', 'custom_polylang_langswitcher' );there are a lot of args you can use to manage the way it looks like:
/** * @param array $args { * Optional array of arguments. * * @type int $dropdown The list is displayed as dropdown if set, defaults to 0. * @type int $echo Echoes the list if set to 1, defaults to 1. * @type int $hide_if_empty Hides languages with no posts ( or pages ) if set to 1, defaults to 1. * @type int $show_flags Displays flags if set to 1, defaults to 0. * @type int $show_names Shows language names if set to 1, defaults to 1. * @type string $display_names_as Whether to display the language name or its slug, valid options are 'slug' and 'name', defaults to name. * @type int $force_home Will always link to home in translated language if set to 1, defaults to 0. * @type int $hide_if_no_translation Hides the link if there is no translation if set to 1, defaults to 0. * @type int $hide_current Hides the current language if set to 1, defaults to 0. * @type int $post_id Returns links to the translations of the post defined by post_id if set, defaults not set. * @type int $raw Return a raw array instead of html markup if set to 1, defaults to 0. * @type string $item_spacing Whether to preserve or discard whitespace between list items, valid options are 'preserve' and 'discard', defaults to 'preserve'. * @type int $admin_render Allows to force the current language code in an admin context if set, default to 0. Need to set the admin_current_lang argument below. * @type string $admin_current_lang The current language code in an admin context. Need to set the admin_render to 1, defaults not set. * @type string[] $classes A list of CSS classes to set to each elements outputted. * @type string[] $link_classes A list of CSS classes to set to each link outputted. * } */some quick css:
.lang-item { display:inline; padding-left:5px; list-style:none; }You have installed WPML now, haven’t you?
because: https://kriesi.at/support/topic/the-flag-of-languages-not-appear-in-phone-burger-menu/#post-1432364a few minutes ago i could open the url
http://www.lzau.at/wp-login.phpand it opens some kind of login page – try to login to that page.
(it seems that they forget to install a working certificate). I guess you now are working on that
Try in quick css:
@media only screen and (max-width: 1050px) { #top #header .av-main-nav > li.menu-item { display: none !important; } #top #header .av-burger-menu-main { cursor: pointer; display: block !important; } }yes – or if you like to have on responsvie case first the menue then the copyright info use instead as media query:
@media only screen and (max-width:767px) { #socket .container { flex-flow: column-reverse wrap; align-items: center; } #socket .container > * { display: inline-block; width: unset !important; } }put these two snippets inside your child-theme functions.php:
add_action('ava_after_footer_output', function() { echo '<div id="subsocket" class="container_wrap subsocket_color"><div class="container">'; echo !dynamic_sidebar('subsocket'); echo '</div></div>'; }); function subsocket_color_set($color_sets){ $color_sets['subsocket_color'] = 'Subsocket'; return $color_sets; } add_filter( 'avf_color_sets', 'subsocket_color_set', 999 );after that go to your widgets and create a new widget area named: subsocket
the first snippet is to have a new widget area – the second snippet is for having your own color styles for that area by enfold options.
Inside the new widget area you can have all widget you like to have.
to have less height and paddings etc. just a little css:
#subsocket > .container, #subsocket .widget { padding: 0; } #subsocket p { margin: 0; } #subsocket .av-special-heading { margin: 10px auto; }for changing the position of copyright info and footer menue – the idea of Mike is perfect:
#socket .container { display: flex; flex-flow: row-reverse wrap; justify-content: space-between; } #socket .container::after { display: none; } #socket .sub_menu_socket { display: flex; align-items: center; } @media only screen and (max-width:767px) { #socket .container { flex-direction: column; align-items: center; } #socket .container > * { display: inline-block; width: unset !important; } }Wenn Du es nicht in der Sidebar möchtest stell doch auf den Seiten oben ein menu ein : Content Elements : “Full width submenu”
das kann man auch auf sticky setzen ( standardmäßig scrollt es aber im responsiven Fall dann weg )aber das auf deiner Beispielseite ist genau so ein widget menu:
PS: das wäre so ein menü shortcode:
function print_menu_shortcode($atts, $content = null) { extract(shortcode_atts(array( 'name' => null, ), $atts)); return wp_nav_menu( array( 'menu' => $name, 'echo' => false ) ); } add_shortcode('menu', 'print_menu_shortcode');so einzusetzen:
[menu name='menu_name']PPS: sticky sidebar: https://webers-testseite.de/sticky-sidebar/
if you choose display : flex for a container – always think of all containers inside!
even a pseudo-container will follow this.maybe a :
#socket > .container:after { display: none }will clarify things here.
PS : does it belong to the known page – with that name in the footer ?
i have some ideas to reach a better – userfriendly approach.
there is a nice hook in enfold placing a widget area after the footer : ava_after_footer_output
see footer sections here: https://consulting.webers-testseite.de/ich schätze, dass die 6 Unterseiten inclusive der Service Seite so erstellt wurden, das hier im Editor der jeweiligen Seite unter “Layout” von den Standardeinstellungen für Seiten abgewichen wird, und dort dann eine Sidebar ausgewählt wird. Also dann z.B. “Left Sidebar” dann dort “Sidebar Pages” oder sogar eine custom Sidebar gewählt wird.
Diese Seiten musst du jedoch ausschließlich ohne Full-Width Elemente aufbauen : also nur mit Columns.
Fullwidth Elemente wie Color-Sections oder Grid-Rows würde die Sidebar nach unten verschieben.In diese Sidebar legst Du dann ein “Navigation Menu”. – das kann ein bestehendes Menu sein – diese besteht dann aus den Unterseiten der Elternseite.
Hier z.B. habe ich das genutzt um die Datenschutzseite zu strukturieren:
https://guenterweber.com/datenschutz/
PS: hier siehst Du dann auch, was passiert, wenn du oben doch eine Color-Section nutzt – die Sidebar rutscht dann runter.Meine Empfehlung wäre schon eher den Code für die functions.php zu nehmen.
siehe den Endkommentar meinerseits.Da post ids und page ids wohl offenbar bei Enfold mit als Klasse bei html geführt werden sollte es reichen nur diese aufzuführen.
Damit der Selector stärker wird solltest Du noch das html vor die Klasse setzen.
Pass auf, das alle selectoren durch Kommata getrennt sind, nur der letzte in der Reihe erhält kein Komma vor der eröffnenden Klammer.die variablen kannst du natürlich anpassen. Je nachdem, was du ersetzen willst. Die Liste was Enfold da anlegt bezieht sich auf die Einstellungen – siehe unten – die Farben bzw. anderen Werte entsprechen den Styling-Einstellungen
html.html_entry_id_777, html.html_entry_id_778, html.html_entry_id_779 { --enfold-header-color-bg: #eee; --enfold-main-color-bg: #eee; --enfold-footer-color-bg: #eee; --enfold-alternate-color-bg2: #eee; --enfold-header-color-bg2: #eee; --enfold-socket-color-bg: #eee; --enfold-socket-color-border: #eee; }Beispiel-Liste was alles von Enfold als variablen geführt werden.
:root { --enfold-socket-color-bg:#333333; --enfold-socket-color-bg2:#555555; --enfold-socket-color-primary:#ffffff; --enfold-socket-color-secondary:#aaaaaa; --enfold-socket-color-color:#eeeeee; --enfold-socket-color-meta:#999999; --enfold-socket-color-heading:#ffffff; --enfold-socket-color-border:#444444; --enfold-socket-color-constant-font:#333333; --enfold-socket-color-button-border:#dddddd; --enfold-socket-color-button-border2:#888888; --enfold-socket-color-iconlist:#333333; --enfold-socket-color-timeline:#333333; --enfold-socket-color-timeline-date:#000000; --enfold-socket-color-masonry:#444444; --enfold-socket-color-stripe:#ffffff; --enfold-socket-color-stripe2:#ffffff; --enfold-socket-color-stripe2nd:#bbbbbb; --enfold-socket-color-button-font:#333333; --enfold-footer-color-bg:#222222; --enfold-footer-color-bg2:#333333; --enfold-footer-color-primary:#ffffff; --enfold-footer-color-secondary:#aaaaaa; --enfold-footer-color-color:#dddddd; --enfold-footer-color-meta:#919191; --enfold-footer-color-heading:#919191; --enfold-footer-color-border:#444444; --enfold-footer-color-constant-font:#222222; --enfold-footer-color-button-border:#dddddd; --enfold-footer-color-button-border2:#888888; --enfold-footer-color-iconlist:#333333; --enfold-footer-color-timeline:#333333; --enfold-footer-color-timeline-date:#000000; --enfold-footer-color-masonry:#222222; --enfold-footer-color-stripe:#ffffff; --enfold-footer-color-stripe2:#ffffff; --enfold-footer-color-stripe2nd:#bbbbbb; --enfold-footer-color-button-font:#222222; --enfold-alternate-color-bg:#fcfcfc; --enfold-alternate-color-bg2:#ffffff; --enfold-alternate-color-primary:#719430; --enfold-alternate-color-secondary:#83a83d; --enfold-alternate-color-color:#666666; --enfold-alternate-color-meta:#8f8f8f; --enfold-alternate-color-heading:#222222; --enfold-alternate-color-border:#e1e1e1; --enfold-alternate-color-constant-font:#ffffff; --enfold-alternate-color-button-border:#507210; --enfold-alternate-color-button-border2:#61861b; --enfold-alternate-color-iconlist:#d0d0d0; --enfold-alternate-color-timeline:#d0d0d0; --enfold-alternate-color-timeline-date:#a0a0a0; --enfold-alternate-color-masonry:#eeeeee; --enfold-alternate-color-stripe:#93b652; --enfold-alternate-color-stripe2:#82a541; --enfold-alternate-color-stripe2nd:#94b94e; --enfold-alternate-color-button-font:#ffffff; --enfold-main-color-bg:#ffffff; --enfold-main-color-bg2:#fcfcfc; --enfold-main-color-primary:#719430; --enfold-main-color-secondary:#83a83d; --enfold-main-color-color:#666666; --enfold-main-color-meta:#919191; --enfold-main-color-heading:#222222; --enfold-main-color-border:#e1e1e1; --enfold-main-color-constant-font:#ffffff; --enfold-main-color-button-border:#507210; --enfold-main-color-button-border2:#61861b; --enfold-main-color-iconlist:#d0d0d0; --enfold-main-color-timeline:#d0d0d0; --enfold-main-color-timeline-date:#a0a0a0; --enfold-main-color-masonry:#ebebeb; --enfold-main-color-stripe:#93b652; --enfold-main-color-stripe2:#82a541; --enfold-main-color-stripe2nd:#94b94e; --enfold-main-color-button-font:#ffffff; --enfold-header-color-bg:#ffffff; --enfold-header-color-bg2:#f8f8f8; --enfold-header-color-primary:#719430; --enfold-header-color-secondary:#444444; --enfold-header-color-color:#333333; --enfold-header-color-meta:#808080; --enfold-header-color-heading:#000000; --enfold-header-color-border:#e1e1e1; --enfold-header-color-constant-font:#ffffff; --enfold-header-color-button-border:#507210; --enfold-header-color-button-border2:#222222; --enfold-header-color-iconlist:#d0d0d0; --enfold-header-color-timeline:#d0d0d0; --enfold-header-color-timeline-date:#a0a0a0; --enfold-header-color-masonry:#e7e7e7; --enfold-header-color-stripe:#93b652; --enfold-header-color-stripe2:#82a541; --enfold-header-color-stripe2nd:#555555; --enfold-header-color-button-font:#ffffff; --enfold-header_burger_color:inherit; --enfold-header_replacement_menu_color:inherit; --enfold-header_replacement_menu_hover_color:inherit; --enfold-font-family-theme-body:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif; --enfold-font-size-theme-content:13px; --enfold-font-size-theme-h1:34px; --enfold-font-size-theme-h2:28px; --enfold-font-size-theme-h3:20px; --enfold-font-size-theme-h4:18px; --enfold-font-size-theme-h5:16px; --enfold-font-size-theme-h6:14px; --enfold-font-size-content-font:18px }
