Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 2, 2024 at 10:20 am #1460924
    Jak73

    Hi,
    i would like to change the background color of specific pages and like to center the text (like on the screenshot).
    How can i do that?
    kind regards
    Jak

    July 2, 2024 at 9:06 pm #1461112
    Mike

    Hey Jak73,
    Thank you for the link to your site & the screenshot, when I check your page the text is centered, but I believe that you are asking to reduce the content width.
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (min-width: 767px) { 
	.responsive #top.page-id-777 .main_color.container_wrap_first > .container {
		max-width: 950px;
	}
	.responsive #top.page-id-777 .main_color.container_wrap_first {
		background-color: #eee;
	}
}

    and adjust to suit, this is the expected results
    Enfold Support 6253

    Best regards,
    Mike

    July 2, 2024 at 10:41 pm #1461124
    Jak73

    Hi Mike,
    yes, you are right, thank you for your fast reply!
    I also would like to have this and some other specific pages with complete grey background (from menu to footer included).
    How can i add more specific pages like that later on?
    kind regards Jak

    July 2, 2024 at 10:51 pm #1461126
    Mike

    Hi,
    You can copy the css and chage the page ID for each page you want it to work on:
    Enfold Support 6261

    Best regards,
    Mike

    July 2, 2024 at 11:13 pm #1461130
    Jak73

    Hi Mike,
    thanks for your fast reply!
    How can i turn this specific page complete grey (i mean from menu background to footer background)?
    kind regards
    Jak

    July 3, 2024 at 8:15 am #1461165
    Guenni007

    there are new filters: avf_dynamic_css_additional_vars and avf_dynamic_css_after_vars

    but you can redefine those var color definitions in quick css too.
    but that means all elements that use these enfold default values ( set in enfold options – general styling) are replaced.
    All manually set colors inside alb elements stay as they are.

    f.e. for your ID 777:

    .html_entry_id_777,
#top.page-id-777 {
	--enfold-header-color-bg: #eee;
	--enfold-main-color-bg: #eee; 
	--enfold-footer-color-bg: #eee;
	--enfold-alternate-color-bg2: #eee;
	--enfold-header-color-bg2: #eee;
	--enfold-socket-color-bg: #eee;
	--enfold-socket-color-border: #eee;
}

    you can now add all page id’s comma separated in that replacement.

    or like mentioned above ( Günter provided me with a working filter code ) via child-theme functions.php
    (after that it is neccessary to refresh all cachings):

    function my_avf_dynamic_css_after_vars( $output = '' )
{
	$output .= "\n";
	/*** Override a defined var for a specific page id*/
	$output .= "html.html_entry_id_777,  html.html_entry_id_12345 {\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 );

    maybe that is the better way – because it is early in the page generation done – then replacement via css redefinition.
    btw: it is possible too – to have even mediaqueries here on the filter .

    July 10, 2024 at 3:17 pm #1461785
    Jak73

    Hi,
    i added this code for the page id 777

    .html_entry_id_777,
#top.page-id-777 {
	--enfold-header-color-bg: #eee;
	--enfold-main-color-bg: #eee; 
	--enfold-footer-color-bg: #eee;
	--enfold-alternate-color-bg2: #eee;
	--enfold-header-color-bg2: #eee;
	--enfold-socket-color-bg: #eee;
	--enfold-socket-color-border: #eee;
}

    and it works well, thanks!

    Just for my understanding, to add more pages it would be like:

    .html_entry_id_777,.html_entry_id_778,.html_entry_id_779
#top.page-id-777 {
	--enfold-header-color-bg: #eee;
	--enfold-main-color-bg: #eee; 
	--enfold-footer-color-bg: #eee;
	--enfold-alternate-color-bg2: #eee;
	--enfold-header-color-bg2: #eee;
	--enfold-socket-color-bg: #eee;
	--enfold-socket-color-border: #eee;
}

    ?
    kind regards Jak

    July 10, 2024 at 3:52 pm #1461786
    Guenni007

    Meine Empfehlung wäre schon eher den Code für die functions.php zu nehmen.
    siehe den Endkommentar meinerseits.

    Da post ids und page ids wohl offenbar bei Enfold mit als Klasse bei html geführt werden sollte es reichen nur diese aufzuführen.
    Damit der Selector stärker wird solltest Du noch das html vor die Klasse setzen.
    Pass auf, das alle selectoren durch Kommata getrennt sind, nur der letzte in der Reihe erhält kein Komma vor der eröffnenden Klammer.

    die variablen kannst du natürlich anpassen. Je nachdem, was du ersetzen willst. Die Liste was Enfold da anlegt bezieht sich auf die Einstellungen – siehe unten – die Farben bzw. anderen Werte entsprechen den Styling-Einstellungen

    html.html_entry_id_777,
html.html_entry_id_778,
html.html_entry_id_779 {
	--enfold-header-color-bg: #eee;
	--enfold-main-color-bg: #eee; 
	--enfold-footer-color-bg: #eee;
	--enfold-alternate-color-bg2: #eee;
	--enfold-header-color-bg2: #eee;
	--enfold-socket-color-bg: #eee;
	--enfold-socket-color-border: #eee;
}

    Beispiel-Liste was alles von Enfold als variablen geführt werden.

    :root {
  --enfold-socket-color-bg:#333333;
  --enfold-socket-color-bg2:#555555;
  --enfold-socket-color-primary:#ffffff;
  --enfold-socket-color-secondary:#aaaaaa;
  --enfold-socket-color-color:#eeeeee;
  --enfold-socket-color-meta:#999999;
  --enfold-socket-color-heading:#ffffff;
  --enfold-socket-color-border:#444444;
  --enfold-socket-color-constant-font:#333333;
  --enfold-socket-color-button-border:#dddddd;
  --enfold-socket-color-button-border2:#888888;
  --enfold-socket-color-iconlist:#333333;
  --enfold-socket-color-timeline:#333333;
  --enfold-socket-color-timeline-date:#000000;
  --enfold-socket-color-masonry:#444444;
  --enfold-socket-color-stripe:#ffffff;
  --enfold-socket-color-stripe2:#ffffff;
  --enfold-socket-color-stripe2nd:#bbbbbb;
  --enfold-socket-color-button-font:#333333;
  --enfold-footer-color-bg:#222222;
  --enfold-footer-color-bg2:#333333;
  --enfold-footer-color-primary:#ffffff;
  --enfold-footer-color-secondary:#aaaaaa;
  --enfold-footer-color-color:#dddddd;
  --enfold-footer-color-meta:#919191;
  --enfold-footer-color-heading:#919191;
  --enfold-footer-color-border:#444444;
  --enfold-footer-color-constant-font:#222222;
  --enfold-footer-color-button-border:#dddddd;
  --enfold-footer-color-button-border2:#888888;
  --enfold-footer-color-iconlist:#333333;
  --enfold-footer-color-timeline:#333333;
  --enfold-footer-color-timeline-date:#000000;
  --enfold-footer-color-masonry:#222222;
  --enfold-footer-color-stripe:#ffffff;
  --enfold-footer-color-stripe2:#ffffff;
  --enfold-footer-color-stripe2nd:#bbbbbb;
  --enfold-footer-color-button-font:#222222;
  --enfold-alternate-color-bg:#fcfcfc;
  --enfold-alternate-color-bg2:#ffffff;
  --enfold-alternate-color-primary:#719430;
  --enfold-alternate-color-secondary:#83a83d;
  --enfold-alternate-color-color:#666666;
  --enfold-alternate-color-meta:#8f8f8f;
  --enfold-alternate-color-heading:#222222;
  --enfold-alternate-color-border:#e1e1e1;
  --enfold-alternate-color-constant-font:#ffffff;
  --enfold-alternate-color-button-border:#507210;
  --enfold-alternate-color-button-border2:#61861b;
  --enfold-alternate-color-iconlist:#d0d0d0;
  --enfold-alternate-color-timeline:#d0d0d0;
  --enfold-alternate-color-timeline-date:#a0a0a0;
  --enfold-alternate-color-masonry:#eeeeee;
  --enfold-alternate-color-stripe:#93b652;
  --enfold-alternate-color-stripe2:#82a541;
  --enfold-alternate-color-stripe2nd:#94b94e;
  --enfold-alternate-color-button-font:#ffffff;
  --enfold-main-color-bg:#ffffff;
  --enfold-main-color-bg2:#fcfcfc;
  --enfold-main-color-primary:#719430;
  --enfold-main-color-secondary:#83a83d;
  --enfold-main-color-color:#666666;
  --enfold-main-color-meta:#919191;
  --enfold-main-color-heading:#222222;
  --enfold-main-color-border:#e1e1e1;
  --enfold-main-color-constant-font:#ffffff;
  --enfold-main-color-button-border:#507210;
  --enfold-main-color-button-border2:#61861b;
  --enfold-main-color-iconlist:#d0d0d0;
  --enfold-main-color-timeline:#d0d0d0;
  --enfold-main-color-timeline-date:#a0a0a0;
  --enfold-main-color-masonry:#ebebeb;
  --enfold-main-color-stripe:#93b652;
  --enfold-main-color-stripe2:#82a541;
  --enfold-main-color-stripe2nd:#94b94e;
  --enfold-main-color-button-font:#ffffff;
  --enfold-header-color-bg:#ffffff;
  --enfold-header-color-bg2:#f8f8f8;
  --enfold-header-color-primary:#719430;
  --enfold-header-color-secondary:#444444;
  --enfold-header-color-color:#333333;
  --enfold-header-color-meta:#808080;
  --enfold-header-color-heading:#000000;
  --enfold-header-color-border:#e1e1e1;
  --enfold-header-color-constant-font:#ffffff;
  --enfold-header-color-button-border:#507210;
  --enfold-header-color-button-border2:#222222;
  --enfold-header-color-iconlist:#d0d0d0;
  --enfold-header-color-timeline:#d0d0d0;
  --enfold-header-color-timeline-date:#a0a0a0;
  --enfold-header-color-masonry:#e7e7e7;
  --enfold-header-color-stripe:#93b652;
  --enfold-header-color-stripe2:#82a541;
  --enfold-header-color-stripe2nd:#555555;
  --enfold-header-color-button-font:#ffffff;
  --enfold-header_burger_color:inherit;
  --enfold-header_replacement_menu_color:inherit;
  --enfold-header_replacement_menu_hover_color:inherit;
  --enfold-font-family-theme-body:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
  --enfold-font-size-theme-content:13px;
  --enfold-font-size-theme-h1:34px;
  --enfold-font-size-theme-h2:28px;
  --enfold-font-size-theme-h3:20px;
  --enfold-font-size-theme-h4:18px;
  --enfold-font-size-theme-h5:16px;
  --enfold-font-size-theme-h6:14px;
  --enfold-font-size-content-font:18px
}
    July 11, 2024 at 2:22 pm #1461853
    Jak73

    Vielen Dank Guenni, das ist sehr hilfreich!
    kind regards
    Jak

    July 11, 2024 at 5:18 pm #1461862
    Mike

    Hi,
    Glad Guenni007 could help, thank you Guenni007, shall we close this thread then?

    Best regards,
    Mike

    July 15, 2024 at 9:54 pm #1462119
    Jak73

    Hi Mike,
    yes, thank you.
    kind regards Jak

    July 16, 2024 at 7:29 am #1462126
    Ismael

    Hi,

    Great! Please feel free to open another thread if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Change background for specific pages and center the text’ is closed to new replies.