Can you please describe in more detail how you want the header to look on small screens (or mobile devices)?
Do you want the header to stay fixed at the top? Do you want the header to shrink after scrolling, etc.? Maybe you can show a sketch.
you can see here a testpage where the header is still fixed on top – and i think it will be no problem to give to the header_bg a background-image after scroll: https://webers-testseite.de/

if you mean that rotating preloader you can try this in your quick css:

.home .av-siteloader {
    border: none !important;
    content: url(/wp-content/uploads/alternative-image.png);   /***  might be a svg file too ***/
    width: 150px;
    height: 150px;
}

if you are referring to the logo above the rotating image:

.home .av-preloading-logo {
    content: url(/wp-content/uploads/alternative-image.png); 
    width: 450px;
}

dimensions you had to test yourself.

well to include a custom-post-type to search results this is the snippet:

function include_custom_search( $query ) {
    if ( $query->is_search ) {
    $query->set( 'post_type', array( 'post', 'page', 'custom_post_type' ) );
    }  
    return $query;
}
add_filter( 'pre_get_posts', 'include_custom_search' ); 

maybe it works the other way too :

function exclude_from_search($query) {
  if ( !$query->is_admin && $query->is_search) {
    $query->set('post_type', array('page','post') );
  }
  return $query;
}
add_filter( 'pre_get_posts', 'exclude_from_search' );

The icon import option of Enfold is only intended for icon fonts.
These have a predefined structure. To take full advantage of these font icons, they must still be monochrome black. It is therefore not possible to add coloured icons.
The idea behind this is to be able to colour them using css: color (font color).
However, coloured icons can be uploaded to the media library as svg or png. These could then replace existing icon fonts via css.

______

L’option d’importation d’icônes d’Enfold est uniquement destinée aux fontes d’icônes.
Elles disposent d’une structure prédéfinie. Pour tirer pleinement parti de ces fontes d’icônes, celles-ci doivent toujours être noires monochromes. Il n’est donc pas possible d’ajouter des icônes de couleur.
L’idée derrière cela est de pouvoir les css: color en utilisant la couleur (couleur de la police).
Toutefois, les icônes colorées peuvent être téléchargées dans la médiathèque sous forme de svg ou de png. Elles pourraient alors remplacer les fontes d’icônes existantes via css.

the question is – how did you update via ftp manually?
Did you really erased the old enfold folder and upload a new one? or do you try to write over all existing files etc. pp.

My way to update in a save way ( because you will have a rollback version ) is:
https://kriesi.at/support/topic/some-hints-and-advice-to-update-enfold/#post-1056107
You don’t need now the rollback – because the existing version is now corrupted or buggy. When overwriting an exiting folder it depends with the ftp programs on which parameters one sets. Is it always overwritten? What happens to files that are no longer in the new folder – or have been renamed? etc.

Next – i see on your screenshot that your child is renamed to Fysio ( not Enfold ) – do you have that too for the parent theme? ( This would not be necessary – but some users even want to obfuscate even that ) – But there are a few things to keep in mind.

see: https://enfold.webers-webdesign.de/#portfolio

main part is – i think for you to slow down the transition between – maybe you try first only:

.mfp-zoom-in .mfp-figure, .mfp-zoom-in .mfp-iframe-holder .mfp-iframe-scaler {
    opacity: 0; /*** here you can influence the transition opacity - test with 1 to see the difference ***/
    -webkit-transition: all 2s ease-out;
    transition: all 2s ease-out;
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
}

___________________________________
– on my page i had :

.mfp-ready .mfp-figure {
  opacity: 0;
}

.mfp-zoom-in .mfp-figure, .mfp-zoom-in .mfp-iframe-holder .mfp-iframe-scaler {
    opacity: 0; /*** here you can influence the transition opacity - test with 1 to see the difference ***/
    -webkit-transition: all 2s ease-out;
    transition: all 2s ease-out;
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
}
.mfp-zoom-in.mfp-bg,
.mfp-zoom-in .mfp-preloader {
  opacity: 0;
  -webkit-transition: all 2s ease-out;
  transition: all 2s ease-out;
}
.mfp-zoom-in.mfp-image-loaded .mfp-figure, .mfp-zoom-in.mfp-ready .mfp-iframe-holder .mfp-iframe-scaler{
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg,
.mfp-zoom-in.mfp-ready .mfp-preloader {
    opacity: 0.85;
}
.mfp-zoom-in.mfp-removing .mfp-figure, .mfp-zoom-in.mfp-removing .mfp-iframe-holder .mfp-iframe-scaler {
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg,
.mfp-zoom-in.mfp-removing .mfp-preloader {
    opacity: 0;
}
.mfp-iframe-scaler{ overflow: visible; /*so the close button is shown*/}
.mfp-zoom-out-cur { cursor: auto; }
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer; }

the scale-factor is up to you – maybe a scale-factor nearby the 1 looks better

The same with the color-section on top:

i guess that this is the troublemaker:

@media only screen and (max-width:1100px) {
 #top #wrap_all .av_header_transparency,
 .av_header_transparency #advanced_menu_toggle {
  background:transparent!important;
  position:absolute!important
 }
}

the class: av_header_transparency is a class that is removed when the header is scrolled.
The switch from absolute to relative is the reason for that “jump”

what do you try to reach with it?

you see – if i inspect the demo-link from above and add (virtually) in the dev tools the css :
(click to enlarge)

use on that the quick css input field.

if you mean this “Gallery with Preview” on https://kriesi.at/themes/enfold/shortcodes/gallery/
try:

#top .image-overlay .image-overlay-inside::before {
  content: "\e80f" !important;
  font-size: 50px;
  color: #fff !important;
}

#top div .avia-gallery .avia-gallery-big {
  padding: 0px;
  border-style: none;
}

#top div .avia-gallery img {
  border-style: none;
  /*** padding: 0px; *** - if you like ***/
}

no quick css – this is a snippet for functions.php.
Most layouters want to change the heading tag for SEO reasons; you can adjust the headings so e.g. the h3 to the h4 appearance via css of course, but that would be a bad solution from my point of view.

You can insert that in your parent theme as well, either the way of your link in the magazine.php file – or you put that snippet into your parent theme functions.php. But on the parent functions.php there are good and bad places to insert such code.
I guess one of the good places is just before the end of it:
( click to enlarge the images )

Next But you always have to do the edit – everytime you update your theme – this is really not a practical solution
( with magazine.php the same)

Maybe a plugin is a good solution for you: https://wordpress.org/plugins/code-snippets/
I did not test it – but it seems to be very popular with over 600.000 installations. Then those snippets comes to the plugin dialog
Edit : tested right now – and it works !

• This reply was modified 3 years ago by Guenni007.