Forum Replies Created
-
Posts
-
the timing depends on the scroll speed. Therefore, this cannot be changed. However, you could either set a fixed size after which the shrink process should only start, or – even more flexibly – provide an element with a trigger that only then starts the shrink event.
set a class to trigger that color-section ( use it only once on the page )
i use now trigger – here as custom class.and added a variable to that list ( just under topbar_height ) – and changed calculation:
topbar_height = header_meta.length ? header_meta.outerHeight() : 0, trigger_distance = $('.trigger').length ? $('.trigger').offset().top - $('.trigger').height() + el_height - 50 : 0 , set_height = function() { var st = win.scrollTop() - trigger_distance, st_real = st; newH = 0i do not know why i had to insert a correction distance (50px) ( alot depends on if your header_meta scrolls away or not etc. )
you know how to have a child theme avia-snippet-sticky-header.js ?
see example page – and scroll to that colored section on bottom: https://webers-testseite.de/anders/
Unfortunately, most online generators are not free, although this was explicitly stated in the Google search. (for example, if you want the logo as an svg file),
put this into your child-theme functions.php
it will remove the status from all standard post types – but leave it for important post states ( password protected, privacy etc. )
function remove_post_state( $post_states, $post ) { if("! has_blocks( $post->ID )") {unset($post_states['wp_editor']);} if("!= Avia_Builder()->get_alb_builder_status($post->ID)") {unset($post_states['avia_alb']);} return $post_states; } add_filter('display_post_states','remove_post_state',999,2);how did you embed Google Tag Manager?
there is a phrase
<!– End Google Tag Manager –> Add this to the <body> section: <!– Google Tag Manager (noscript) –>have a look if you have made some transfer errors on : https://kriesi.at/support/topic/adding-google-tag-manager-script-to-the-site/#post-1447012
if you used that – the noscript version should also be in the head section and not inside body tag.
So have a look inside your functions.php ( child-theme ?)
to create a logo you can try to start here: https://www.vecteezy.com/
you may also want to choose the svg format directly – then fillout some Keywords of your site – and add logo as last keyword. – In the list of suggestions you can indicate on the left that the suggestions are free of charge.Well – if you open your linked css:
https://use.typekit.net/rww4dia.cssyou see what it does: there is the @import url rule – and : font-family:”espiritu”
if you look deeper to that css – you see that you can download those files via those urls ( even as otf)
@font-face { font-family:"espiritu"; src: url("https://use.typekit.net/af/cb2cbd/00000000000000007736dd40/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/cb2cbd/00000000000000007736dd40/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/cb2cbd/00000000000000007736dd40/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); font-display:auto; font-style:normal; font-weight:400; font-stretch:normal; }you only have to give the downloaded files a meaningfull name and the correct file extension ;)
so maybe you host those fonts on your own server.
As I understand it, he has a font that already looks very bold in the regular style. If it is then rendered to 700 by the browser, it is probably no longer legible.
I think he wants to use the colour change of the strong tag, and probably also the SEO highlighting by setting the same, but without setting these elements to 700.f.e.: Lilita One or Alfa Slab One
PS – @solf : Is it really too complicated to insert a rule into quick css? The way via advanced styling would not have occurred to me.
just place on your quick css the font-family of your needs and set the font-weight to : normal ( usually 400) – maybe with an important .
#top b, #top strong { font-weight: 400; }if you only like to correct this for the given font ( you know better your font-name)
here with open-sans example#top.open-sans b, #top.open-sans strong { font-weight: 400; }Does it necessarily have to run via the functions.php?
You could also make the selection in editor mode on the right side in the layout on the corresponding page (https://lingualearn.ch/assessement/) to not display a footer or page. And then either manually – or insert another page at the bottom using the post content element.By the way, I no longer see this ALB element in the selection in Enfold 6.0.3.
Edit: OK – it is now on layout tab ( before it is inside content tab)
Be careful with the Illustrator standard classes (cls-x). If you also have it elsewhere on your page (e.g. through an inline SVG file), the last CSS rule counts.
it is this snippet:
add_action('wp_head', 'enfold_customization_add_scripts'); function enfold_customization_add_scripts() { ?> <link rel="stylesheet" href="https://use.typekit.net/rww4dia.css"> <?php }that my comment is for. On my htaccess file i do not allow loading from different sources than my own domain.
If i would place such a snippet – it will not be loaded – allthough the snippet might be correct.if that is not the reason for not loading – try to enqueue that css file:
function enqueue_external_css() { wp_enqueue_style( 'adobe_typekit', 'https://use.typekit.net/rww4dia.css' ); } add_action( 'wp_enqueue_scripts', 'enqueue_external_css', 20 );_______________
i do not know if your first snippet do run with newest enfold. This code snippet has been valid for half an eternity.
For my installations i use now instead:function my_output_google_webfonts_script( $activate ){ return false; } add_filter( 'avf_output_google_webfonts_script', 'my_output_google_webfonts_script', 10, 1 );can you try this in your child-theme functions.php:
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 );here both (gallery and masonry-gallery) will be influenced.
Or perhaps your security settings (htacces file, etc.) prevent you from using URLs other than those of your own domain. So loading from
https://use.typekit.net/rww4dia.cssis not allowed.To reach the responsive behavior if you have a svg as logo – Enfold added some code to svg tag depending on logo position.
if you have logo on the left side :preserveAspectRatio="xMinYMid meet"
that means it stays on x-position on the left and preserves the middle Y-position.
if logo is centered – it will be :preserveAspectRatio="xMidYMid meet"
if logo is on the right – it will be :preserveAspectRatio="xMaxYMid meet"by the way: if such a code is allready inside the svg tag – enfold will overwrite that for the logo insertion.
first: You then no longer need to change the svg code to make further settings regarding the dimensions.
#top .logo svg { padding: 5px 0; }(although I think it’s actually good if everything remains legible even when it’s shrunk)
in your case – i picked up your svg code from your site and open it in a good vectorbased Program. ( Adobe Illustrator or for Mac from Apple: Affinity
btw. that Affinity Suite : With three programs, they offer at least as much functionality as the Adobe programs and currently cost 90 euros (one-off payment | incl. tax) for all three programs.
In your case, I can see that a lot of unnecessary groups have been created. So I first ungroup all the existing groups and removed several clipping masks. I then created some meaningful groups (the branding is a group, and the subliner is a group).
Unfortunately, these programs (Adobe Illustrator etc.) always create meta data that has no need to be placed in the actual vector code. I remove such code manually. For multi-colored or even gradient-filled areas, the different classes on the paths make sense, but if groups or even the whole svg only have one color, I manually delete this information and only add it back to the groups. This sounds very time-consuming, but with a good text editor it can easily be done in one go using search and replace.
you see that i replace even one space behind the class and replaced it with nothing – Replace All will do the job then.
PS: my personal preference with svg is to leave only the viewbox in the svg-tag and remove widths and heights.
ok – now you have inserted the blue one :
put to your quick css:html.html_header_transparency #header .logo #strokmatic-logo { fill: #FFF !important; }and please remove those 3 === from rule:
=== #top .av_header_transparency .header_bg { opacity:1; filter:alpha(opacity=100) }if you look at the svg i offer to you – with a texteditor. you can see the structure i gave to it.
The xml structure of a svg file is similar to a html page – there is a heading area with info to the svg file and maybe some styling settings.
then there are groups / path etc. some vectorbased graphic elements.
your whole logo has an ID – the brand got an own ID and your subline too.
you now can change the fill information of those path by adressing those ID’s
(The dotted rectangles indicate that I have only hidden the paths within the groups.)
so if you set the blue svg logo to enfold logo options – you can change the fill to white by quick css via some css rules. Thats all.
now you got your white svg logo – but filling the path with blue if the header had no transparency – it will show the blue svg.html:not(.html_header_transparency) #header .logo svg path { fill: #173F6B !important; }and : do not combine my codes – these are alternatives.
Only use:
#top .av_header_transparency .header_bg { opacity: 1; filter: alpha(opacity=100); } html.html_header_transparency #top #header:not(.av_header_transparency) .header_bg { background-color: rgba(0,0,0,0.7) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.html_header_transparency #top .av_header_transparency .header_bg { background-color: rgba(0,0,0,0.4) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }do not use the gradient code from here: https://kriesi.at/support/topic/header-bg-in-a-transparent-header/#post-1464021
ok then do it the other way round .
for your non transparent pages use:
html:not(.html_header_transparency) #header .logo svg path { fill: #173F6B !important; }but my comment is : look with a good texteditor to your svg and inside my reconstructed. i do not see a need to use clip-path inside.
there is a rule:
.jumplinks { text-decoration:underline!important; color:#0000ee!important; "}remove that quote – to:
.jumplinks { text-decoration:underline!important; color:#0000ee!important; }this quote hampers the curly bracket to close that ruleset
you have this css :
.avia-table-1 td:nth-child(2) { width: 70%; }and that only influences the first table!
btw.: This is the by intention:
@media only screen and (max-width: 767px) { .responsive .avia_responsive_table .avia-data-table .avia-button-row, .responsive .avia_responsive_table .avia-data-table tr:first-child th { display: none; } }This rule hides the first header.
vielleicht liegt der Unterschied darin:
maybe that’s the difference:btw: der BlockContent selbst muss ohne Tag “<style>” eingegeben werden
Ihr arbeitet mit dem Block Editior? was ich nicht mache
You work with the block editor ? which I don’t doaber es ist doch genau das, das der Content dem Inhalt hinzugefügt werden soll. Daher eben auch mit dem Wrapper
<style> … </style>damit es als inline css wirken kann – und damit hatte ich nie Probleme auf die Schnelle css nur für die entsprechende Seite einzubinden:
________
but it is exactly that, to add the content to the content. Hence the wrapper<style> ... </style>so that it can act as inline css – and I’ve never had any problems quickly integrating css just for the corresponding page:see the inline css from my example page above:
irgendwie muss doch unterschieden werden, ob ich styles oder scripte einfüge. Das geht ja auch mittels des code block elements.
_______
Somehow it has to be differentiated whether I insert styles or scripts. This is also possible using the code block element.by the way – in this css about browser preset colors the scrollbar could influenced too:
for example for bodyselector { scrollbar-color: #7bb0e7 #ddd; }but it has no good browser support ( f.e. Safari) https://caniuse.com/?search=scrollbar-color
what i’m trying to do:
all my transparency pages do have dark backgrounds behind the header area. So my “normal” Logo does not realy have a good contrast to the sticky header after header scrolled.
i like to set on all pages with transparency a different “normal” Logo.
