-
AuthorPosts
-
April 30, 2024 at 12:51 pm #1441442
i added my custom vars on quick css – and that works nice –
but how to use the new filters?April 30, 2024 at 2:30 pm #1441456Hey Guenter,
The filters are in ..\enfold\css\dynamic-css.php line 129ff.
‘avf_dynamic_css_additional_vars’:
Is located inside :root{ …. }
Simply return additional vars (pseudo code only):function my-xxx( $output ) { $output .= "--your-font-size-theme-h3: 20px;\n"; $output .= "--your-font-size-theme-h4: 20px;\n"; return $output; }
‘avf_dynamic_css_additional_vars’ is the same but outside any selectors. You are free to return anything you like – it must be valid CSS rules
e.g. a media query with vars.Best regards,
GünterApril 30, 2024 at 3:10 pm #1441458thanks – with
function my_vars_outputs( $output ){ $output .= "--my-variable-font-size-theme-h3: min(max(18px, calc(1.125rem + ((1vw - 3.2px) * 1.1864))), 32px); min-height: 0vw;\n"; $output .= "--your-font-size-theme-h4: 20px;\n"; return $output; } add_filter('avf_dynamic_css_additional_vars', 'my_vars_outputs');
it works – but with avf_dynamic_css_after_vars i can not see a change.
Edit:
This illustration may help you to better understand how to use it.function my_vars_outputs( $output ){ $output .= " #myID { font-size: 28px; } .myClass { font-size: 20px; } "; return $output; } add_filter('avf_dynamic_css_after_vars', 'my_vars_outputs');
Edit: – ok now i see – but what benefit has that after_vars ?
April 30, 2024 at 4:49 pm #1441468Hi,
what benefit has that after_vars
You can add e.g. a media query to override var values you added with the filter avf_dynamic_css_additional_vars and have the code in php file right after for better readability ( and also in the dynamic css file ).
Best regards,
GünterJuly 3, 2024 at 8:45 am #1461172ich habe die Nutzung von avf_dynamic_css_after_vars immer noch nicht ganz verstanden!
Wie würde ich z.B. für die Seite mit der ID: 123 die Definition von –enfold-main-color-bg ändern?
__________I still haven’t fully understood the use of avf_dynamic_css_after_var !
For example, how would I change the definition of –enfold-main-color-bg for the page with ID: 123?July 3, 2024 at 1:22 pm #1461203Hi Günter,
Beispiele:
Best regards,
GünterJuly 4, 2024 at 5:34 pm #1461357Danke !
Dann kann ich das jetzt auch in dem entsprechen Topic so mal weitergeben. ;)da ja die html_entry_id_123 immer auch der page / post /portfolio etc. entspricht könnte man dann durch kommata getrennt es für mehrere Seite umdefinieren. Cool !
hat den Vorteil, das selbst für den html hintergrund es über die socket bg definiert wird – und so bei Seiten mit wenig Content das auch gesetzt wird.function my_avf_dynamic_css_after_vars( $output = '' ) { $output .= "\n"; /*** Override a defined var for a specific page id*/ $output .= ".html_entry_id_46364 , .html_entry_id_2407 {\n"; $output .= "--enfold-header-color-bg: #aaa;\n"; $output .= "--enfold-header-color-bg2: #aaa;\n"; $output .= "--enfold-main-color-bg: #aaa;\n"; $output .= "--enfold-footer-color-bg: #aaa;\n"; $output .= "--enfold-alternate-color-bg: #aaa;\n"; $output .= "--enfold-alternate-color-bg2: #aaa;\n"; $output .= "--enfold-socket-color-bg: #aaa;\n"; $output .= "--enfold-socket-color-border: #aaa;\n"; $output .= "}\n"; return $output; } add_filter( 'avf_dynamic_css_after_vars', 'my_avf_dynamic_css_after_vars', 10, 1 );
July 4, 2024 at 8:55 pm #1461382Hi,
Achtung, dass der Selektor nicht zu schwach ist. :root ist ein sehr starker selector, stärker als html !!!
Würde sicherheitshalber wie in meinem Beispiel nehmen:
html.html_entry_id_46364 , html.html_entry_id_2407
Best regards,
GünterJuly 4, 2024 at 10:28 pm #1461389Ok !
July 6, 2024 at 1:54 pm #1461479Hi,
It looks like Günter has answered your question, thank you Günter, shall we close this thread then?Best regards,
MikeJuly 8, 2024 at 9:34 am #1461592Yes.
July 8, 2024 at 10:20 am #1461597 -
AuthorPosts
- The topic ‘how to use avf_dynamic_css_additional_vars and avf_dynamic_css_after_vars’ is closed to new replies.