How to Expand the header and footer on single posts page... Icon stack

Support
#21

You’re one smart cookie! Thanks so much. The drop caps look pretty cool.

#22

Glad we could help.

Cheers!

1 Like
#23

I just want the solid look like every other item on the page. Perhaps it has something to do with the p-meta opacity. Thanks in advance for your help.

#24

Hi again,

To fix this, just add the following code in your Customizer as well:

.p-meta {
    opacity: 1 !important;
}

Cheers!

1 Like
#25

Hi, Nabeel!

Thanks so much! I used 0.90 instead and the fade effect is gone. Also, I tried adding By: | in front of the author name but got an error in functions.php. What would be the proper way to add it so it reads…

07.25.2017 | 3:01 am By: | Fantasy

#26

Hey there,

Try replacing the previous code with this:

// Entry Meta
// =============================================================================

if ( ! function_exists( 'x_icon_entry_meta' ) ) :
  function x_icon_entry_meta() {

    $author = sprintf( '<span><i class="x-icon-pencil"></i> %s</span><span> By </span>',
      get_the_author()

    );

    $date = sprintf( '<span><time class="entry-date" datetime="%1$s">%2$s-%3$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date( 'm.d.Y' ) ),
      esc_html( get_the_time() )
    );

    $avatar = '<span>' . get_avatar( get_the_author_meta('ID'), 60) . '</span>';

    $twitter = '<span><a href="#holder" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="&#xf081;" aria-hidden="true"></i></a></span>';
    $instagram = '<a href="#holder" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="&#xf16d;" aria-hidden="true"></i></a>';
    $google_plus = '<a href="#holder" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="&#xf0d4;" aria-hidden="true"></i></a>';

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s%2$s%3$s%4$s%5$s%6$s</p>',
        $date,
        $author,
        $avatar,
        $twitter,
        $instagram,
        $google_plus
      );
    }

  }
endif;

Hope this helps!

#27

Hi. Nabeel!

Almost… except by is behind the author’s name rather than in front of it. I’m trying to get the author name and the word by similar to how the date and time are set up… so that the additional white space isn’t before the avatar.I don’t want it to cause a line break whereas the social icons appear on the second line. Here’s a screenshot. Thanks in advance for your help.

#28

Hello There,

Please make use of this code instead:

// Entry Meta
// =============================================================================

if ( ! function_exists( 'x_icon_entry_meta' ) ) :
  function x_icon_entry_meta() {

    $author = sprintf( '<span>By <i class="x-icon-pencil"></i> %s</span>',
      get_the_author()

    );

    $date = sprintf( '<span><time class="entry-date" datetime="%1$s">%2$s-%3$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date( 'm.d.Y' ) ),
      esc_html( get_the_time() )
    );

    $avatar = '<span>' . get_avatar( get_the_author_meta('ID'), 60) . '</span>';

    $twitter = '<span><a href="#holder" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="&#xf081;" aria-hidden="true"></i></a></span>';
    $instagram = '<a href="#holder" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="&#xf16d;" aria-hidden="true"></i></a>';
    $google_plus = '<a href="#holder" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="&#xf0d4;" aria-hidden="true"></i></a>';

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s%2$s%3$s%4$s%5$s%6$s</p>',
        $date,
        $author,
        $avatar,
        $twitter,
        $instagram,
        $google_plus
      );
    }

  }
endif;

Please let us know how it goes.

1 Like
#29

Hi, Ruenel!

With a few minor code adjustments and a decrease in author avatar size… thanks so much.:hugs:

#30

Glad it’s okay now :slight_smile: and you’re most welcome!

1 Like