Forum Replies Created
-
AuthorPosts
-
just a forgotten array for toggle_container and developer_options_toggle
wrong post – sorry
-
This reply was modified 5 years, 8 months ago by
Guenni007.
i have no developer tab too on my avia_sc_submenu ALB
February 3, 2020 at 6:13 pm in reply to: Add caption in lightbox under image in masonry gallery #1181007February 3, 2020 at 1:10 pm in reply to: Add caption in lightbox under image in masonry gallery #1180904by the way – you can place the bottom bar inside the Image – because if you got a lot of text it will sometimes be out of the viewport.
so look to the example-page above again! This is css for that:.page-id-32904 .mfp-bottom-bar { top: initial; bottom: 40px; width: calc(100% - 20px); margin: 10px; background: rgba(0, 0, 0, 0.4); }
Thanks Mike – I’ll keep that in mind.
The reason why I want to do it this way is to make it easier for me when transferring a styled page to a new customer.
For example, if I think a contact page is finished and good, it is not necessary to go through the whole CSS for the page-id of the contact page, because then the contact page always has the ID: Contact in addition to the page ID.
All my css is referenced then to #top.kontakt etc. pp.
_
And it has the advantage that you can see directly to which page this refers to in the Quick css – without having to look up which page-id the page currently has.February 2, 2020 at 8:08 pm in reply to: Add caption in lightbox under image in masonry gallery #1180698well what i did now:
give a custom-class to that masonry alb element: lightbox-with-description ( you can adjust this to a more easier class )
Fill out the description fields –
I decided to create an own markup for mfp – it is easier to address then with class : mfp-description in the bottom-bar
Adjust the page id to yours or get rid of that if clause ( think of to delete one of the last curly brackets then on the end )
Choose on Masonry ALB to show both Title and Description !!! ( i set the description to display: none then to have it only on lightbox )
https://webers-testseite.de/masonry/function popup_masonry_with_description() { if(is_page(32904)){ ?> <script type="text/javascript"> (function($){ $(window).load(function(){ $('.av-masonry.lightbox-with-description a.av-masonry-entry.lightbox-added').magnificPopup({ type: 'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '<div class="mfp-bottom-bar">'+ '<div class="mfp-title"></div>'+ '<div class="mfp-description"></div>'+ '<div class="mfp-counter"></div>'+ '</div>'+ '</div>', }, mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded', closeOnContentClick: false, midClick: true, gallery: { enabled: true }, callbacks: { change: function() { $(this.content).find('.mfp-description').html('<p>'+$(this.currItem.el).find('.av-masonry-entry-content').html()+'</p>'); }, }, }); }); })(jQuery); </script> <?php } } add_action('wp_footer', 'popup_masonry_with_description');
some css for quick css:
.page-id-32904 .lightbox-with-description .av-masonry-entry-content.entry-content { display: none; } .page-id-32904 .mfp-description { color: #fff; width: 85% } .page-id-32904 div .mfp-title { font-size: 24px; } .page-id-32904 .mfp-description p { line-height: 24px; margin: 0 !important; }
you always have to look for the right selector. On some portfolios ( f.e. Masonry Portfolio Grid ) these images are background-images and no avia-image
but the transform on hover goes to the same selector:
on many instances it looks nicer to have the hovered style colored so:.avia_desktop .av-masonry-entry .av-masonry-image-container { -webkit-filter: grayscale(100); filter: grayscale(100); } .avia_desktop .av-masonry-entry:hover .av-masonry-image-container { -webkit-filter: grayscale(0); filter: grayscale(0); }
PS : The best thing is to familiarize yourself with the development tools of each browser ( most of them have one ) to always find the right selectors. It is not that difficult. Point the mouse to the place you want to investigate, and then click on “investigate” or similar in the context menu (usually the right mouse button).
February 2, 2020 at 9:18 am in reply to: Change slide-entry-title entry-title from h3 to h2 #1180648im looking for a solution with filter of enfold: avf_customize_heading_settings
maybe a mod can give us advice to use it on that element
___________________________but this will work fast too with maybe with more specifity if the selectors in that line:
replaceElementTag( …)
are more “picky”:function replace_tags_with_tags(){ ?> <script> (function($) { function replaceElementTag(targetSelector, newTagString) { $(targetSelector).each(function(){ var newElem = $(newTagString, {html: $(this).html()}); $.each(this.attributes, function() { newElem.attr(this.name, this.value); }); $(this).replaceWith(newElem); }); } replaceElementTag('h3.entry-title', '<h2></h2>'); }(jQuery)); </script> <?php } add_action('wp_footer', 'replace_tags_with_tags');
by the way – there are css settings for h2 ( f.e. uppercase etc. ) you have to adjust those settings after change
you can have on that snippet more than one replacement . just add new lines as:
replaceElementTag('h3.entry-title', '<h2></h2>');
under each other – semicolon separatedSo for blog.php the postslider give his part in it so context is : avia_sc_postslider
but this does not have effect:function my_avf_customize_heading_settings( array $args, $context, array $extra_args = array() ){ if( $context == 'avia_sc_postslider' ){ $args['heading'] = 'h2'; // change heading from h3 to h1 $args['extra_class'] = 'custom-class'; // add an extra class for styling } return $args; } add_filter( 'avf_customize_heading_settings', 'my_avf_customize_heading_settings', 10, 3 );
to use the filter we need to have the
on a avia_sc_content_slider it could be done this way:
function my_avf_customize_heading_settings( array $args, $context, array $extra_args = array() ) { if( 'avia_sc_content_slider' == $context && is_array( $extra_args ) && in_array( 'slider_entry', $extra_args ) ) { $args['heading'] = 'h2'; $args['extra_class'] = 'custom-class'; } return $args; } add_filter( 'avf_customize_heading_settings', 'my_avf_customize_heading_settings', 10, 3 );
Or:
with extra_args : slider_title___________
but how to handle it on : avia_sc_postslider
the extra_args are a bit different there$default_heading = 'h3'; $args = array( 'heading' => $default_heading, 'extra_class' => '' ); $extra_args = array( $this, $index, $entry );
And how to use it globaly with no custom-class ?
February 1, 2020 at 10:16 pm in reply to: Change slide-entry-title entry-title from h3 to h2 #1180557hm on every page i look for – f.e.: https://kriesi.at/themes/enfold-2017/category/uncategorized/
the headings are allready on h2.
So is there a link to your pages i can see the issue?Or do you mean the grid layout: https://kriesi.at/themes/enfold-2017/blog/blog-default/
i thought that the word-break: break-all does not insert a dash.
There are already in the Chrome Forums petitions to take up hyphens soon (again)
Best Method is to set the “Predetermined breaking points” in a word manually with soft-hyphens.
these are f.e.­
see: Link
so you can have in a heading:super­cali­fragilistic­expi­alidocious
__________Only read further if you are familiar with editing code in php files.
One big disadvantage is on that – you do not see the once inserted softhyphens or non-breaking space if you will edit the alb.
And sometimes these editons will be lost on updating that alb ( headings f.e.)Günter wrote a little Plugin to use special characters on Inputfields ( tables, headings etc ) for example if you have a greater than sign :
Link to the github
if you open that little php file: avia-special-characters-plugin.php you see on lines 41ff the list
because i do not want to write 3# before and 3# my list is edited to:$this->translate = array( '#lt#' => '<', '#gt#' => '>', '#amp#' => '&', '#91#' => '[', '#93#' => ']', '#quot#' => '"', '#34#' => "'", '#br#' => '<br/>', '#p#' => "< p >", '#shy#' => '', '#nbsp#' => ' ', );
sorry Boardsoft rendered the last signs in the wanted way – here is the image :
from that on – if you wrote in a header #shy# a softhyphen will be added – and it resists editing that alb and you see it in preview where you have set those special characters. Frontend renders them as wanted.
I guess he doesn’t want to have result suggestions under the search box.
try this in child-theme functions.phpadd_action('avf_frontend_search_form_param', 'av_disable_ajax_search',9); function av_disable_ajax_search($params) { $params['ajax_disable'] = true; return $params; }
January 29, 2020 at 12:36 am in reply to: Little bug in ALB – option to add cell beneath a row doesn't fit #1179251put this to quick css:
adjust right position to your language – seems to be a matter of translation:
on english it is just Add Cell (very short).avia-set-cell-size { right: 135px !important; }
Wenn man mal im Text irgendwo das heutige Datum benutzen möchte kann man sich einen Shortcode selbst in die child-theme functions.php setzen
:function date_shortcode() { $datum = date_i18n( 'l, j. F Y' ); return $datum; } add_shortcode('datetoday', 'date_shortcode');
ist dann so zu benutzen:
[datetoday]
schau mal hier ganz unten: https://webers-testseite.de/3columns/PS: diesen Shortcode kann man im Übrigen auch im Copyright Feld von Enfold einsetzen. !
Verstehe ich nicht – du kannst doch im Kontaktformular ein neues Kontaktform Element einfügen und editieren: unter Form Element wählst Du dann Datepicker.
PS dieses Datumsformat richtet sich im Wesentlichen nach den allgemeinen Einstellungen die du in WordPress gewählt hast – läßt sich aber auch individuell anpassen
It was just a trick to have this tab editable.
But with stretched layout it is not necessary, because the dynamic-css.php has a rule for this.
In this case the background color of the socket determines the html background color.have you refreshed the cache and the merging of enfold css?
show me the link to your site please
just for info : and now i found the reason why it is socket color: see dynamic-css.php lines 912ff
case '.socket_color': $output .= " html, #scroll-top-link, #av-cookie-consent-badge{ background-color: $bg; } #scroll-top-link, #av-cookie-consent-badge{ color: $color; border:1px solid $border; } .html_stretched #wrap_all{ background-color:$bg; } ";
so the code says – if you have a socket color and stretched layout – background-color is of html the same
So as i mentioned – allthough it might be body or html background – the color you set on socket is at the bottom when you have stretched layout.
or do it via quick css – this is the or
html { background-color: #FFFFFF !important }
Thats why i said : Go back to general layout and switch back to stretched Layout
This Tab : body background is only editable if you have the other layout settings – after saving – switch back your general layout.If you have boxed or fixed layout – you can ignore this – because then the body background is editable on default.
You never stop learning – it seems to be the socket background color too – allthough it is not present?
Seems only then on stretched layout that socket color is on background. . So guess you have to make bothgo to enfold genral layout – switch to boxed or fixed frame layout :
now go to general styling : body background : set it to a color. Save your settings
Go back to general layout and switch back to stretched Layout.i can not see private content – cause i’m participant as you.
so make it pubplic – or show me a page on demo sites where the problem arises too.
Or describe it better : what alb do you use and what options for it – then i can help
otherwise you had to wait til mods are heresometimes it helps on css to be more specific:
#top .avia-slideshow .avia-caption-title { -webkit-hyphens: auto; hyphens: auto; }
or if you can’t find a selector try it with
hyphens: auto !important
first : for what is the code above – Or where is the selector ?
second: in chrome – there is no support for auto on normal usage ( only on android and mac )
https://css-tricks.com/almanac/properties/h/hyphenate/#browser-supporton default (base.css line 54) the font is determined as:
body {font: 13px/1.65em "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; -webkit-text-size-adjust: 100%; }
that is a shortened form of font-size: 13px ; line-height: 1.65em
you see that line-height here has a relative value.If you set a different font-size on : Enfold – General Styling – Fonts : Default content font size
this value is set to a different font-size.the standard font-size definitions are set on base.css ( line 92ff):
h1 { font-size: 34px; line-height: 1.1em; margin-bottom: 14px;} h2 { font-size: 28px; line-height: 1.1em; margin-bottom: 10px; } h3 { font-size: 20px; line-height: 1.1em; margin-bottom: 8px; } /*28*/ h4 { font-size: 18px; line-height: 1.1em; margin-bottom: 4px; } /*21*/ h5 { font-size: 16px; line-height: 1.1em; } /*17*/ h6 { font-size: 14px; line-height: 1.1em; }
January 24, 2020 at 3:24 pm in reply to: Left Side: One big column; Right Side: More Elements #1178143just use the grid-row element – you can set the cellsize to 3/4 and 1/4
on the left your content ( it is a drag and drop element like color-section) and put in the cells 1/1 container.
If you like to have now the grid-row element not full-width : you can do it only with css – but i did this to child-theme functions.php
function grid_layout_notfull(){ ?> <script> (function($){ $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize color1"></div>'); $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" }); $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 50px"}); })(jQuery); </script> <?php } add_action('wp_footer', 'grid_layout_notfull');
you have to adjust that script to your Enfold Settings of Content Width.
https://webers-testseite.de/nesting-columns/i got for this for all focus states and on tabs
.tab.active_tab, :focus { outline: none !important; }
-
This reply was modified 5 years, 8 months ago by
-
AuthorPosts