CSS Styling on PHP Code Altered for Plug-in

  • Hello – In order to get the PHPEnkoder plug-in to work, the plug-in developer helped me get the PHP code in place on the theme template that creates these ‘Team Members’ pages.

    The code being used is as follows:

    <?php if(get_field('email_id'))?><li><?php echo enkode_mailto(get_field('email_id'),get_field('email_id'));?><i class="fa fa-envelope"></i></li>

    So that part is working now, but unfortunately something about this change made it so the CSS doesn’t work on that element anymore. As you can see (under the phone number), there is now an e-mail address showing and a small envelope icon to the right…

    Instead, this is supposed to appear as a blue square with an envelope inside – exactly like the blue square directly to the right with the “in” inside it. And clicking this blue square will launch the ‘mailto’ function.

    My problem is that I’m not sure if the way to fix this is to change (or add to) the existing CSS, or to change the PHP code itself to make that element fall back into the existing CSS rules.

    Either way, any advice will be greatly appreciated on this!

    – Jim

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • You should change the PHP to similar to how it was before, but with the new functionality. The fa and fa-envelope is for FontAwesome. If you have the wrong icon, change it to what it was (and its position like before or after the text).

    Thread Starter jimmb

    (@jimmb)

    Hi Joy – thanks for the reply! I should have included the original code for reference, because I have not changed that part of the previous code. Here is how that line was originally coded, when the ‘mailto’ icon displayed correctly:

    <?php if(get_field('email_id'))?><li><a href="mailto:<?php the_field('email_id');?>"><i class="fa fa-envelope"></i></a></li>

    As you can see, the <i class="fa fa-envelope"> part is exactly the same, so I don’t think that’s the problem…

    Another thought I had was to place that functionality inside the <i class="fa fa-envelope">, but that didn’t solve the problem. For reference, here is what that attempt looked like:

    <?php if(get_field('email_id'))?><li><i class="fa fa-envelope"><?php echo enkode_mailto(get_field('email_id'),get_field('email_id'));?></i></li>

    I agree it seems like the easiest option is to fix this in the theme’s PHP template (presumably wrapping the PHPEnkoder plug-in inside the FontAwesome icon + image), but I just don’t know how that would be done exactly.

    Notice in the old way, the icon is the link text.
    I can’t tell what the plugin function is outputting, but it seems to be the entire link, including link text, so the icon is following that.
    The CSS would be styling the previous setup, and the new way changed the HTML.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS Styling on PHP Code Altered for Plug-in’ is closed to new replies.