Forum Replies Created
-
Posts
-
1) is it an absolute width (px) or a relative one( 30%, 3em etc )?
– some browsers need here an absolute value.
2) on svg-support – did you have the standard settings or do you mark the “Force Inline SVG” ?
if support-svg inserted for the img the inline svg – an img rule will not work for that.
you have to make a rule vor svg with an absolute value of width.i do have this drop-down menu not inside the viewport often on mega-menus.
i just gave them a max-height value that is in relation to the viewport height so that if the screen-height is less than the drop-downlist height the content is scrollable:#top #header .avia_mega_div { max-height: calc(100vh - 20px); overflow: auto !important; }there must be a similar solution for normal drop-down menu.
#top #header .avia_mega_div, #avia-menu li > ul.sub-menu { max-height: calc(100vh - 20px); overflow: auto !important; }if you layout Image Elements in columns ( on my test page there are 4 1/4 columns with image elements in it)
the images have custom captions and the caption is shown allways.
( Again this is site-specific – maybe a class on one of the surrounding containers would be better)#top.page-id-34956 .av-image-caption-overlay-position { height: 50%; background-color: rgba(0,0,0,0.4); top: 50%; } #top.page-id-34956 .av-caption-image-overlay-bg { opacity: 0 !important; } #top.page-id-34956 .main_color .avia-image-container a .av-image-caption-overlay-position, #top.page-id-34956 .main_color .avia-image-container a .av-image-caption-overlay-position p, #top.page-id-34956 .main_color .avia-image-container a .av-image-caption-overlay-position p strong, #top.page-id-34956 .main_color .avia-image-container a img { transition: all 0.5s ease; color: #FFF } #top.page-id-34956 .main_color .avia-image-container a img { filter: grayscale(0.8); } #top.page-id-34956 .main_color .avia-image-container a:hover img { filter: grayscale(0); } #top.page-id-34956 .main_color .avia-image-container a:hover .av-image-caption-overlay-position { background-color: orange; } #top.page-id-34956 .main_color .avia-image-container a:hover .av-image-caption-overlay-position p, #top.page-id-34956 .main_color .avia-image-container a:hover .av-image-caption-overlay-position p strong { color: #000; }yes f.e. if you got a masonry-gallery element – you can decide to show title and excerpt allways.
so you can style on hovering the images the other elements – but here it is only title and excerpt.
( This is site-specific for my test-page only) : https://webers-testseite.de/gallery/#top.page-id-34956 .av-masonry-entry:hover .av-masonry-image-container { filter: hue-rotate(180deg); } #top.page-id-34956 .av-masonry-entry:hover .av-inner-masonry-content.site-background { background-color: orange; } #top.page-id-34956 .av-masonry-entry:hover .av-inner-masonry-content-pos * { color: #000; }i will see if it is possible with image-alb element
besides the posibility to change it via css styling.
Enfold offers that as a global setting as highlight-color:
(click to enlarge)
this is for anchor-links.If you like to highlight something else you had to set a rule for the hover state on that selector.
off topic: if you like to highlight selected text phrases in a custom color:
::selection { background: #f29811 !important; color: #000 !important; } ::-moz-selection { background: #f29811 !important; color: #000 !important; }go to the text mode and surround these phrases by a span tag:
f.e.:
<span class="nocopy"> Copyright </span>
or in a heading you can use tags too:
A Heading with <span class="nocopy">unselectable</span> partssee test page again
the form-row with
– Profilo
– Indica il prodotto…
do not closethese missing two closing div tags are near the end ( you do not want to nest here – i think)
so close the form-row divs mentioned above – and get rid of these two closing div tags at the end
surrounding<div class="wpcf7-response-output" aria-hidden="true"></div>ending up in:
<div id="responsive-form" class="clearfix"> <div class="form-row"> <div class="column-half first">Nome (*)<br><br> your spans inside </div> <div class="column-half">Cognome (*)<br><br> your spans inside </div> </div> <div class="form-row"> <div class="column-half first">Mail (*) <br><br> your spans inside </div> <div class="column-half">Telefono (*) <br><br> your spans inside </div> </div> <div class="form-row"> <div class="column-full">Profilo (*)<br><br> a lot of nested spans </div> </div> <div class="form-row"> <div class="column-full">Indica il prodotto a cui sei interessato (*)<br><br> a lot of nested spans </div> </div> <div class="form-row"> <div class="column-full">Come possiamo aiutarti (*)<br><br> a lot of nested spans </div> </div> <div class="form-row"> <div class="column-full"> a lot of tags including GDPR Compliance </div> </div> <p><input type="submit" value="Invia la tua richiesta" class="wpcf7-form-control wpcf7-submit" disabled=""> <span class="ajax-loader"></span> </p> <div class="wpcf7-response-output" aria-hidden="true"></div> </div>Another hint : if a div is opend – it should be closed too.
i do not see the whole but proove that – the two first containers of<div class="form-row">open – but do not close
on the bottom there is one closing div etc.
Can you post the whole code you got her ( please use the code-tag) then we can look on that.how did you create your layout of the product pages – did you use the enfold layout builder – and did you use color-sections or other full-width elements (grid-row etc.)?
give a class to the container that should be “protected” f.e.: nocopy
or as part of a sentence surround that with a span with that class:.nocopy *, .nocopy { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }left side with class – right side without: https://webers-testseite.de/abc/
By the way : right click on that page an choose select all ! ;)
But if you are familiar with developer tools nothing can really hamper users to select and copy thingsok – for those who are interested in my interims solution all to child-theme functions.php:
function custom_colorpicker_colors( array $colors ){ $colors = array( '#000000', '#ffffff', '#B02B2C', '#edae44', '#eeee22', '#83a846', '#7bb0e7', '#745f7e', '#5f8789', '#d65799', '#4ecac2', '#125', '#459', '#78b', '#ab0', '#de3', '#f0f', '#125', '#ab331c'); // these are the additional colors ( max 11) return $colors; } add_filter( 'avf_colorpicker_colors', 'custom_colorpicker_colors', 10, 1 ); function color_picker_styles() { echo '<style type="text/css"> .avia-style .wp-picker-holder {height: 255px !important;} .avia-style .wp-picker-holder, .iris-picker {height: 245px !important;} .avia-style .wp-picker-holder, .iris-picker {height: 245px !important;} .avia-style .wp-picker-holder, .iris-picker.av-iris-picker-rgba {height: 275px !important;} .iris-picker-inner, .iris-slider.iris-strip {height: 182px !important;} .iris-palette-container {width: calc(100% - 20px) !important;display: flex !important;flex-flow: row wrap;justify-content: flex-start;} .iris-picker.av-iris-picker-rgba .iris-palette-container {bottom:42px;} .iris-palette {width: 19px !important;height: 19px !important;margin: 1px !important;padding: 0;} </style>'; } add_action('admin_head', 'color_picker_styles');
so if you add this to your child-theme functions.php:
function custom_colorpicker_colors( array $colors ){ $colors = array( '#000000', '#ffffff', '#B02B2C', '#edae44', '#eeee22', '#83a846', '#7bb0e7', '#745f7e', '#5f8789', '#d65799', '#ab331c', '#125', '#459', '#78b', '#ab0', '#de3', '#f0f', '#125', '#459'); return $colors; } add_filter( 'avf_colorpicker_colors', 'custom_colorpicker_colors', 10, 1 );
and:function admin_head_mod() { echo '<style type="text/css"> .avia-style .wp-picker-holder { height: 255px !important; } .avia-style .wp-picker-holder, .iris-picker { height: 245px !important; } .iris-picker-inner, .iris-slider.iris-strip { height: 182px !important; } .iris-palette-container { width: calc(100% - 20px) !important; display: flex !important; flex-flow: row wrap; justify-content: flex-start; } .iris-palette { width: 19px !important; height: 19px !important; margin: 1px !important; padding: 0; } </style>'; } add_action('admin_head', 'admin_head_mod');you can see this:
with alpha-wrap there must be other settings. but just to brainstorm here a bit – and for discussion starting on that.
That will be a great thing to have on Enfold Options – General Styling an input field with f.e. 6 additional color palette inputs.
yes it is possible to change the default color picker palette by a filter –
and that will be the best way for the moment to have own color-palette. You can have 11 pre-defined colors – black and white shoud be there so 9 could be replaced – put this to child-theme functions.php:function custom_colorpicker_colors( array $colors ){ $colors = array( '#000000', '#ffffff', '#B02B2C', '#edae44', '#eeee22', '#83a846', '#7bb0e7', '#745f7e', '#5f8789', '#d65799', '#ab331c'); return $colors; } add_filter( 'avf_colorpicker_colors', 'custom_colorpicker_colors', 10, 1 );i’m looking for a method to style that pickerfield by the total length of the picker areas determines the amount of rows added under each other –
but that script had to be inserted on a special moment – i guess wp-footer is the wrong place for it !if you like to have the same buttons as Enfold offers for the header-top or the socket – you can create your own shortcode for these by putting this to child-theme functions.php:
function social_bookmarks_shortcode() { $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => ''); $social = avia_social_media_icons($social_args, false); return $social; } add_shortcode('social-bookmarks', 'social_bookmarks_shortcode');then use a text-widget to place the shortcode :
[social-bookmarks]
to have the icons besides each other a bit css is needed:#footer .widget .social_bookmarks li { clear: right !important; }The same with share buttons : go to a test-page and style the content element: social share buttons with option “use a custom set”
go and copy the shortcode from debug mode:
F.e.:[av_social_share title='Share this entry' buttons='custom' share_facebook='aviaTBshare_facebook' share_twitter='aviaTBshare_twitter']put the shortcode to a textwidget.
on gdpr ( DSGVO) reasons there is a nice plugin like shariff wrapper will create a widget for it and you can either place the global share buttons or customize them by shortcode f.e.:
[shariff services="facebook|twitter|mailto" theme="round" borderradius="50"]Goto Enfold Options – Header – Header behavior (tab) and look if you got this enabled: “Let logo and menu position adapt to browser window”
remove that activationmy solution:
do not use for that the pseudo-content : before !
make your setting for borders as usual and :
for borders all this could be a solution.avia-icongrid-borders-all li .avia-icongrid-wrapper::before, .avia-icongrid-borders-between li .avia-icongrid-wrapper::before { display: none; } .avia-icongrid.avia-icongrid-borders-all { border-bottom: 1px solid; } .avia-icongrid.avia-icongrid-borders-all li .avia-icongrid-wrapper { border: 1px solid ; }for borders between it will be more difficult – we can achieve it by outline but then the whole wrapper must have overflow: hidden – and that will disturb the flip effect to be visible outside.
Responsible for that behavior is the construction of the border via pseudo-container box-shadow and a z-index of that higher than the z-index of the content.
.avia-icongrid-borders-all li .avia-icongrid-wrapper:before, .avia-icongrid-borders-between li .avia-icongrid-wrapper:before { content:""; … z-index:8 }we had to find a solution on that
Some hints on updating via ftp:
https://kriesi.at/support/topic/some-hints-and-advice-to-update-enfold/#post-1056107I do not replace the enfold folder installed – i rename it and upload the new enfold. So if there are troubles like you have it is just a few steps to get back to your former version.
STRANGE BEHAVIOR : if you choose the border option : on styling tab: “Grid Borders” ( both border options lead to that result )
the backside links do not workcan you confirm this with one of your installations?
There was a hint that ended up in a solution for me:
https://kriesi.at/support/topic/special-characters-within-code-blocks-on-3rd-party-forms/#post-1253220This is the disadvantage of placing installations in subfolders and not thinking that security plugins can of course affect them.
Can be closed – it is solved
where did you switch Wordfence to learning mode?
Edit ok i found it – All Options – basic firewall options.
this hint is good for a problem i got with code block too.But what I didn’t think about the firewall is that the installation caused the problems was in a subfolder of another site.
There Wordfence was installed and activated on that “Parent Installation”
( webers-testseite.de and another wordpress in webers-testseite.de/subfolder/ )
That the installation there also affected the subfolder installation – I didn’t think of that.Brilliant tip – Thanks
yes Günter – but that is a very simple insertion.
But before, even komplex svg could be inserted without trouble. They were not shown on layout preview but layout itself could be seen and could be edited after insertion.See home4 on that !
you can see that the layout isn’t shown on top – so no Editing of the layout could be done – allthough the shortcode is correct.
The Frontend of that page works!:
And Enfold Shortcode-Verarbeiter : “Keine Fehler wurden bei der Analyse der Shortcodes erkannt.”That Plugin can help you to have new buttons on that text-editor ( don’t know if it works on block-editor too )
f.e.:
That plugin is if you want to have more than this line-break button – because now Enfold ( or maybe it is a new thing from WP ) shows a button on visible mode:
can you see this:
if you click : Enfold will insert the tags itself (
<br class=”avia-permanent-lb” />); switch to text mode then you will see what i mean
If it has to be above the title – change the selector and insertBefore:
function metaAfterTitle(){ ?> <script> (function($){ $(".template-blog .post-entry").each(function(){ var postTitle = $(this).find('.av-heading-wrapper'); var metaInfo = $(this).find('.post-meta-infos'); $(metaInfo).insertBefore($(postTitle)); }); })(jQuery); </script> <?php } add_action('wp_footer', 'metaAfterTitle');you can test always – even each functions via Developer Tools and the Console
just open the concerning page/post and put the pure script to the console and press return.
see video:
Vimeofilmi am a participant like you, and thats why i could not read private content area and if you prefer to hear it from a mod that needs to be improved in the code then that’s ok for me too.
You could have just tested the code – it wouldn’t have been that much work.
not that is the error – the error is in your syntax:
you Code is :
jQuery(metaInfo).insertAfter(postTitle);
and it has to be:
jQuery(metaInfo).insertAfter(jQuery(postTitle));the other mentioned is only stylistic point of view. Instead of using on the whole code jQuery each time a $ is set – you can do it as said above.
