Site logo

[Support request] Logo and CSS based on logged in user

Home Forums Support [Support request] Logo and CSS based on logged in user

Home Forums Support Logo and CSS based on logged in user

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #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
    Ken

    #741733
    Tom
    Lead Developer
    Lead Developer

    Hi 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

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.