Forum Replies Created

Viewing 30 posts - 511 through 540 (of 11,529 total)
  • Author
    Posts
  • in reply to: Change a color sitewide #1473903

    You can see at the bottom that I have used the backcolor: #ea675b

    i do not see your setting – i can see that on socket – there is the color: #081f5e
    which is then saved from enfold as: –enfold-socket-color-bg

    have a look at: general styling – socket – Socket Background Color

    in reply to: WordPress / Enfold and Content Security Headers #1473898

    in the meantime i have some more entries on that in my htaccess file:

    <IfModule mod_headers.c>
    	Header set Referrer-Policy "no-referrer"
    	Header set Referrer-Policy "strict-origin-when-cross-origin"
    	Header set X-Frame-Options "sameorigin"
    	Header set X-XSS-Protection "1; mode=block"
    	Header set X-Content-Type-Options "nosniff"
    	Header set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
    	Header always set Content-Security-Policy "upgrade-insecure-requests"
    	Header always set Permissions-Policy "geolocation=(), midi=(),sync-xhr=(),accelerometer=(), gyroscope=(), magnetometer=(), camera=(), fullscreen=(self)"
    	Header set Cross-Origin-Embedder-Policy "unsafe-none"
    	Header set Cross-Origin-Opener-Policy "same-origin"
    	Header set Cross-Origin-Resource-Policy: "same-site"
    </IfModule>

    with this setting i do not have neither on pagespeed insights nor on lighthouse ( inside chrome browser ) any errors – just warnings.
    you can see results here : https://securityheaders.com/?q=webers-testseite.de&followRedirects=on
    Although this is criticized, it does not prevent you from receiving the 100 points ;)

    i fear that you will block some scripts by script-src ‘self’ on advanced layerslider.

    in reply to: Blog – Selection filters with more than one category #1473897

    you are not talking about the blog Element of Enfold?
    even a conditional logic is present to show post if the got one of those categories or only if they have all of them.

    first – maybe you decide not to have this immense padding of 100px of that cell – because expanding the content will end in a very hight container.
    next: set for the background-image position : bottom center.
    put this to your quick css and adjust to your needs:

    #top .av-fold-unfold-container.unfolded {
      background-color: rgba(0,0,0,0.3);
      border-radius: 15px;
      padding: 10px;
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
    }

    if you like to have a semi-transparent white bg – change to rgba(255,255,255,0.6)
    but then i would change font color to f.e. #333

    #top .av-fold-unfold-container.unfolded p {
      color: #333;
    }
    in reply to: color section transparent over another color section #1473889

    The first color-section : got custom class: bg-fixed
    this color-section got the one background-image: substrato_background_page_topbut set it to scroll (background-attachment)
    this is for quick css ( maybe we had to adjust later on – please activate that example page again):

    .bg-fixed {
      background-size: 0px !important;
      overflow: hidden;
      position: relative;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    
    .bg-fixed:before {
      background-image: inherit !important;
      background-repeat: inherit !important;
      background-size: cover;
      background-position: inherit;
      content: "";
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1 !important;
      pointer-events: none;
    }

    Now for the following color-section ( just for that bg-image) with the substrato_separatore.png – that image is 265px heigh –
    On Layout Tab : set section height to “Miniumum custom height in px ” to 265px
    Open “Margin and Padding” Tab : check “Custom Margins” and enter -260px (Top and Bottom) – this will shift the section to top.
    On Styling Tab – “Custom Background Color” and set the slider on the right to minimum (0.01) that is defacto : transparent
    Background Image – now your separator – set to scroll – Bottom Center and repeat-x
    on Advanced Tab : set a higher z-Index e.g. 2 – and give (if needed) a custom class to that section f.e. shifted-bg

    If you got this we will look what to adjust then.
    maybe this might be necessary:

    #top .bg-fixed ,
    #top .shifted-bg {
      position: relative;
    }
    in reply to: How to deactivate google fonts? #1473860

    i have installed contact form 7 to nearly all of my enfold installs. They do not load Google Fonts at all. Do you use f.e. google recaptcha in contact forms?
    Google Recaptcha is loading extra google fonts (f.e. Roboto or Google Sans.

    in reply to: color section transparent over another color section #1473847

    First: See here a quick takeover of your logo as svg separators – these are set as patterns, so they are not responsive – but fill the entire width with this pattern unit. On element (color section – or column) you can set a height for them. And of course the fill color.

    https://webers-testseite.de/bildvergleich/

    Second: have a look at this: https://webers-testseite.de/donkey/
    The problem with background-attachment: fixed is that a lot of mobile devices do not support it well. So Enfold decided to switch for mobile devices to background-attachment : scroll.

    One trick was to use the background-attachment: scroll from the beginning setup. We can make then a pseudo-container (before or after anyway) that inherited background-image. Because it is now a seperated container we can set it to position : fixed
    We then add a clip path to the actual color section so that the inheriting pseudo-container is only displayed below the parent section.
    This is well supported by all browsers and mobile devices. etc. – follow the link above.

    All is ruled by a custom class for the color-section.

    PS: that post is from 2020 – so it might be that inset (0 0 0 0) works now on all browsers for the clip-path. That is much easier to understand and to write down in css code.

    But: it will be hard to style with two background-images … i’m afraid we’ll have to go back to your previous solution.

    Have a look if this could be a working solution for you – then i will start to explain how:
    https://webers-testseite.de/substrato/

    in reply to: color section transparent over another color section #1473826

    well – remove that second color section and put this to your quick css:

    #top.page-id-238 #av_section_1 { 
      background-image: url(https://substratosfera.it/wp-content/uploads/2024/12/substrato_separatore.png), url(https://substratosfera.it/wp-content/uploads/2024/12/substrato_background_top-1.png);
      background-repeat: no-repeat;
      background-position: bottom left, 100% 0%;
      background-size: 130%, contain;
      background-attachment: scroll, fixed;
    }

    but : if i look to your logo – it might be a good idea to transform the upper part and the lower part as svg to a custom divider ;)
    do you have your logo as verctor based file? – post a link please

    in reply to: blog entries do not appear #1473782

    why is that doubled on that blog page?
    what do you mean by: “Only if I enter their urls completely”

    in reply to: Creating a centered email opt-in #1473781

    or try instead:

    #top.home #av-layout-grid-1 fieldset {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      gap: 5px;
    }
    
    #top.home #av-layout-grid-1 fieldset p {
      width: unset;
    }
    
    #top.home #av-layout-grid-1 fieldset p:first-of-type {
      width: 50%
    }
    
    #top.home #av-layout-grid-1 fieldset p:first-of-type input {
      border: 1px solid #be363c;
      border-radius: 26px 0 0 26px
    }
    
    #top.home #av-layout-grid-1 fieldset p .button {
      border-radius: 0 26px 26px 0;
    }

    and maybe you style that black box a bit too : change background-color and add some css :

    .custom-black-box {
      background-color: rgba(0,0,0,0.3);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
    in reply to: Creating a centered email opt-in #1473779

    try:

    #top.home #av-layout-grid-1 fieldset {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      gap: 20px;
    }
    
    #top.home #av-layout-grid-1 fieldset p {
      width: unset;
    }
    
    #top.home #av-layout-grid-1 fieldset p:first-of-type {
      width: 50%
    }
    
    #top.home #av-layout-grid-1 fieldset p:first-of-type input {
      border: 1px solid #be363c;
    }
    

    is this an option for that special button:

    #top.home #av-layout-grid-1 fieldset p .button{
      border-radius: 0 26px 26px 0
    }
    in reply to: Changing buttons colors to gradient #1473778

    i did not compare both css rules , but you should know:
    If there are two or more CSS rules that point to the same element, the selector with the highest specificity will “win”, and its style declaration will be applied to that HTML element. Every CSS selector has a position in the specificity hierarchy.

    the #top selector has a high hierarchy – so that rule wins – and even by this – the ID wins.

    Unfortunately, it is becoming more and more common to set a porperty value to !important in order to enforce a css rule. In many cases, it would only be necessary to adapt the selectors better.

    in reply to: color section transparent over another color section #1473777

    It would be much easier to give advice if we could see the page it concerns. If there is a link in the private content, you will have to wait for the mods.

    in reply to: Fixed frame with 1px border #1473753

    as participant – i do not see your page – so hope Mike has a good idea. But keep in mind: better to place them fixed and to position them all top left.

    in reply to: Install Google Tag Manager #1473745

    and if you realy like to have that noscript inside body tag use instead:

    function ava_google_tag_custom_script() { 
    ?>
    <!-- Google Tag Manager -->
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXX');
    </script>
    <!-- End Google Tag Manager -->  
    <?php
    }
    add_action('wp_head', 'ava_google_tag_custom_script');
    
    /*** Google Tag Manager Body Script *****/
    function google_tag_manager_body_code() { 
    ?>
    <noscript>
      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
      height="0" width="0" style="display:none;visibility:hidden"></iframe>
      </noscript>
      <!-- End Google Tag Manager (noscript) --> 
    <?php
    }
    add_action( 'ava_after_body_opening_tag', 'google_tag_manager_body_code');
    in reply to: Install Google Tag Manager #1473744

    And you only trust Mods ?

    function ava_g_tag_custom_script() { 
    ?>
    <!-- Google Tag Manager -->
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXX');
    </script>
    <!-- End Google Tag Manager -->  
    
    <!-- Google Tag Manager (noscript) -->
    <noscript>
      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
      height="0" width="0" style="display:none;visibility:hidden"></iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) --> 
    <?php
    }
    add_action('wp_head', 'ava_g_tag_custom_script');

    the reason why this fails – is that a lot of participants do not use the code tag on posting snippets here : https://kriesi.at/support/topic/adding-google-tag-manager-in-enfold/#post-1473588

    in reply to: Install Google Tag Manager #1473740

    can you test if the setting on : SEO Support – Search Engine Optimization Support – Meta Tag “robots” : Use Enfold default settings.
    clear cache and merging and look if it is still there. If not then your SEO external Plugin is causing it.

    in reply to: Masonry Gallery with Button in Caption #1473712

    thats nice – and if we set those “buttons” to display : none. – we can make a light box from that masonry to show first the images – with a button link in the bottom bar:

    see: https://webers-testseite.de/portfolio-raster/

    the trick is in the magnific popup script inside callback :

    elementParse: function(item) {
    	var bgImage = item.el.find('.av-masonry-image-container').css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
    	item.src = bgImage;
    },

    that i look for the background-image of that image container – and get the url – and declare it to the item to open in lightbox.
    because by that snippet of ismael – there is now additional info on the masonry item – this href i use for an avia button in the lightbox (just a little bit upgraded by some custom css )

    The new robots tag, indexifembedded, works in combination with the noindex tag only when the page with noindex is embedded into another page through an iframe or similar HTML tag, like object. For example, if podcast.host.example/playpage?podcast=12345 has both the noindex and indexifembedded tag, it means Google can embed the content hosted on that page in recipe.site.example/my-recipes.html during indexing.

    But as menitioned above – i do not have that on any enfold page. This is something that might come from a plugin.
    the one and only place where Enfold places a noindex is in function-set-avia-frontend.php lines 466ff in the function: function avia_set_follow()
    and this is just for the <meta name=”robots” …/> for is_search

    a indexifembedded is completely not found in enfold folder ! if this setting comes from enfold it has to be mentioned in the source code.

    in reply to: I have alignment issues #1473671

    Better you insert on logo input field the original size! – or at least a file that has a min height of 90px (your header starts at 88px height)
    in this case ( your logo goes right to the outer borders of the png ) only a littel padding is needed:

    .logo a img {
      padding: 2% 0;
    }

    i guess it is because you have inserted a recalculated format (300px x 50px) that is not bigger than the min-height of your setting.
    If you put in a logo img that has a height of 100px – it will be o.k. from the beginning.

    then you do not have to use this:

    .logo a img {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      padding: 3px 0 
    }

    Can you test please:

    put this to your child-theme functions.php:

    add_theme_support('avia_show_alb_responsive_image_option');
    

    after that open your masonry element and look to advanced tab – performance : do not use responsive images.
    This i hope will end in showing the original image instead of the smaller calculated images.

    On styling tab choose (just for testing purposes) “no scaling (original width…)” now see if the uploaded images are yellowish too.
    If not then there went something wrong on recalculating the smaller (for responsive purpos) image formats.

    maybe put this to child-theme functions.php to show original images in lightbox:

    function custom_alb_lightbox_image_size( $size, $context ){
      if( $context == ('av_gallery' || 'avia_masonry') ){
        return 'original';
      }
      return $size;
    }
    add_filter( 'avf_alb_lightbox_image_size', 'custom_alb_lightbox_image_size', 10, 2 );

    If this shows now in masonry and on lightbox the well saturated images – then you can use once the plugin : https://wordpress.org/plugins/force-regenerate-thumbnails/ and recalculate all images. This i hope will correct the mismatch. After recalculation you can delete that plugiin from your installation.

    in reply to: I have alignment issues #1473646

    put this to your quick css – if you do not like to set custom classes or remove min-height option etc.
    i address them by different selectors.
    You can decide when the columns will break on change of that 900px / 899px values

    @media only screen and (min-width: 900px) {
      #top.home #av_section_1 .entry-content-wrapper {
        display: grid !important;
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr;
      }
    }
    
    @media only screen and (max-width: 899px) {
      #top.home #av_section_1  .entry-content-wrapper {
        grid-template-columns: 1fr;
      }
    }
    
    #top.home #av_section_1  .entry-content-wrapper:before,
    #top.home #av_section_1  .entry-content-wrapper:after {
      display: none;
    }
    
    #top.home #av_section_1  .container {
      height: unset !important;
    }
    
    #top.home #av_section_1  .entry-content-wrapper .flex_column {
      width: unset !important;
      min-height: unset !important;
    }
    
    #top.home #av_section_1  .entry-content-wrapper .flex_column:nth-of-type(2) {
      align-self:  end;
      margin: 30px 0 0 !important;
    }
    
    #top.home #av_section_1  .entry-content-wrapper .flex_column:nth-of-type(1){
      align-self: start;
    }
    
    #top.home #av_section_1 .content {
      padding: 0 !important;
    }
    in reply to: I have alignment issues #1473642

    did you really read my post and followed the link i offered?

    Do you use any plugin that transforms your jpg to webp – and then uses these webp instead.
    see :

    supposedly it is a jpg according to the file extension – in fact it is a webp. The conversion may be the reason for the color shift.

    Inspecting your original “jpg” : https://chappledesign.com/wp-content/uploads/2024/12/64_TR6_Triumph_05.jpg

    photoshop does not open it as jpg – renaming it to webp – opens in Photoshop!

    @mike – it is as mentioned just before head tag is closing. But i do not have it on any of my enfold installations even on those which are in combination with Yoast SEO.

    but nevertheless in combination with that “new” indexifembedded it is ok :
    https://developers.google.com/search/blog/2022/01/robots-meta-tag-indexifembedded

    But can you please link to an image that shows the unwanted effect.

    in reply to: I have alignment issues #1473612

    nice to see the page now – then it is much easier to give advice.
    First – why do you use the image as background? – use it as image element inside that column.
    Best would be to give a custom class to that flex-column with your image.

    to see an interims result – that could be done:

    @media only screen and (min-width: 768px) {
      .flex_column.av-cvo-a82f70a62f8490e3b0b75af0c90996f9 {
        position: absolute;
        bottom: 0
      }
    }

    But: i guess we can have better results if you do not use the equal height option! because in responsive case the height of those containers are too big.
    So can you please give to the flex-column with that image a custom class and remove the equal height option – then i check if there is a better solution for every screen width.

    See example with css code : https://webers-testseite.de/greg/

    in reply to: Content Slider Customization #1473611

    if you got different content height the arrows will adjust because of 50% position – maybe it is best to have an absolute value for the top position.
    Next i think they should not lay over content
    Because the demo ( Link ) only got smallarrow setting and no headings – this is a interims solution:

    #top .avia-smallarrow-slider-heading {
      height: 100%;
      position: absolute;
    }
    
    #top .avia-smallarrow-slider .avia-slideshow-arrows {
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3
    }
    
    #top .avia-smallarrow-slider .avia-slideshow-arrows .prev-slide {
      left: -35px
    }
    
    #top .avia-smallarrow-slider .avia-slideshow-arrows .next-slide {
      right: -35px
    }
    in reply to: Fixed frame with 1px border #1473609

    i guess – as the frames – it will be better for positioning to choose display : fixed
    I don’t know how the vw unit reacts to the scroll bar thickness. However, it seems to be the case that this must unfortunately be taken into account. For this reason alone, it is important to align all four pseudo containers to the top left.
    for the mentioned Demo this works in all browser i do have on my Mac (FF dev, FF, Safari, Chrome)

    .av-frame:before,
    .av-frame:after {
        pointer-events: none;
        display:block !important;
    }
    
    .av-frame.av-frame-top.av-frame-vert:before {
        content: '';
        left: 30px;
        top: 30px;
        height: calc(50vh - 30px);
        width: calc(50vw - 38px);
        border-top: 1px solid #102f5d !important;
        border-left: 1px solid #102f5d !important;
        position: fixed;
    }
    .av-frame.av-frame-right.av-frame-hor:before {
        content: '';
        left: calc(50vw - 8px);
        top: 30px;
        height: calc(50vh - 30px);
        width: calc(50vw - 38px);
        border-right: 1px solid #102f5d !important;
        border-top: 1px solid #102f5d !important;
        position: fixed;
    }
    .av-frame.av-frame-bottom.av-frame-vert:before {
        content: '';
        left: calc(50vw - 8px);
        top: 50vh;
        height: calc(50vh - 30px);
        width: calc(50vw - 38px);
        border-right: 1px solid #102f5d !important;
        border-bottom: 1px solid #102f5d !important;
        position: fixed;
    }
    .av-frame.av-frame-left.av-frame-hor:before {
        content: '';
        left: 30px;
        top: 50vh;
        height: calc(50vh - 30px);
        width: calc(50vw - 38px);
        border-left: 1px solid #102f5d !important;
        border-bottom: 1px solid #102f5d !important;
        position: fixed;
    }

    if you got a different frame width than 10px we had to adjust some settings.

Viewing 30 posts - 511 through 540 (of 11,529 total)