- This topic has 1 reply, 2 voices, and was last updated 7 years, 4 months ago by
Tom.
-
AuthorPosts
-
November 27, 2018 at 12:24 am #741084
Annia
Basic idea is to let users decide which logo and primary color they would like to see when they log in to the site. They will update this via some custom fields (using Toolset).
Then, if the logo field is populated, the site logo should change accordingly. If the primary color field is filled out, then this will form the basis for CSS styling particular elements.I have been experimenting with the following code:
add_action('wp_head','hook_css'); function hook_css() { $default_logo = 'https://site/wp-content/uploads/ca-200.png'; $user_logo = types_render_usermeta( "logo", array( "user_current" => true, "url" => true ) ); if (empty($user_logo)) { $user_logo = $default_logo; } $default_user_color = '#d2691e'; $user_color = types_render_usermeta( "main-color", array( "user_current" => true ) ); if (empty($user_color)) { $user_color = $default_user_color; } $user_color_5pct = $user_color . "0D"; $user_color_20pct = $user_color . "33"; $best_text_color = '#000000'; ?> <!-- Closing the PHP here --> <style> /* Style logo */ .tmbd-userlogo img { content:url("<?php echo $user_logo; ?>"); } /* Style frontpage buttons */ .tmbd-btnbox .elementor-column-wrap, .tmbd-btnbox .elementor-button { background-color:<?php echo $user_color; ?> !important; } /* Style check */ .tmbd-check .elementor-heading-title { color:<?php echo $user_color; ?> !important; } /* Style introbox */ .tmbd-introbox .elementor-alert-title { font-weight: normal; } .tmbd-introbox .elementor-alert-info { color: <?php echo $best_text_color; ?> !important; } .tmbd-introbox .elementor-alert-dismiss { display: none; } .tmbd-introbox .elementor-alert { background-color:<?php echo $user_color_20pct; ?> !important; border-color:<?php echo $user_color; ?> !important; } </style> <?php //Opening the PHP tag again }Is this a good way to do it, or is there a better way? A way that better fits with GP maybe.
Also, can I have all the CSS code placed in an include file of some sort so that it is easier for me to edit?
Last question, any thoughts on how I can calculate the best text color based on the user selected background colour? I have tried with the following code, but it doesnt seem to work:
/* Find which is the best text color based on background color */ function pickTextColorBasedOnBgColorSimple($bgColor, $lightColor, $darkColor) { $color = ($bgColor.charAt(0) === '#') ? $bgColor.substring(1, 7) : $bgColor; $r = parseInt($color.substring(0, 2), 16); // hexToR $g = parseInt($color.substring(2, 4), 16); // hexToG $b = parseInt($color.substring(4, 6), 16); // hexToB return ((($r * 0.299) + ($g * 0.587) + ($b * 0.114)) > 186) ? $darkColor : $lightColor; }Thanks in advance for your input and support.
Best
KenNovember 27, 2018 at 9:23 am #741733Tom
Lead DeveloperLead DeveloperHi there,
To change the logo based on conditions, I would do this:
add_filter( 'generate_logo', function( $logo ) { if ( $your_condition ) { $logo = 'URL TO YOUR CUSTOM LOGO'; } return $logo; } );I’m not too sure how to detect the best text color. A javascript library like this might be helpful: TinyColor
-
AuthorPosts
- You must be logged in to reply to this topic.