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

Support
#6

Hello There,

You can make use of this code:

// 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>',
      get_the_author()

    );

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

    $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>';

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

  }
endif;

Please let us know how it goes.

#7

Hi, Ruenel!

Thanks so much, almost there! The only thing that is missing now is the actual time the post was written. For some strange reason it doesn’t appear. I would actually like post written by to appear before the author’s name. If it needs to be stacked for everything to fit… like in the photo example I pulled from my other website that’s fine and each item with this symbol | to separate it. Also, I notice the avatar appears faded by default is there a way to change that? Thanks for your help. I appreciate it.

#8

Hello There,

Thanks for updating in! The code above is only for displaying the date and not time. Which is why at the moment only the date is displaying.

To display the time,please update the code and make use of this block:

$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() )
);

Hope this helps. Please let us know how it goes.

1 Like
#9

That did the trick. Thank you!

#10

Glad we could help.

Cheers!

#11

Additionally, If I want to add other social networks like Instagram, google plus, or Snapchat what would be the code for that?:slightly_smiling_face:

#12

Hi There,

Please update the entire function to 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>',
      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;
#13

Hi, Thai!

Thanks so much that did the trick. I have two other things that I wanted to inquire about in reference to this. Is there a way to put the word By: before the author’s name? Additionally, the entire line where the date, author info., etc. has a faded look by default i believe. Is there a way to remove the fade effect?

#14

Hi There,

I would like to check your website(https://www.keianienterprises.com/) but it’s under construction mode.

Could you please provide us with your admin account so we can take a closer look?

Thanks.

#15

Hi, Thai!

Maintenance mode has been disabled for now. Warning the website might look a bit weird I just activated my CDN so it’s still in process.

Lastly, I have successfully removed my featured thumbnail from the single posts page using this code.

.single-post .entry-featured .entry-thumb {
display: none;
}

The last thing I would like to do is add drop caps for the first letter of the first paragraph that will appear by default for each individual post on the single posts page only. Here is the code. If there’s a way I can do a shortcode in each blog post separately to add the dropcaps without using the code please advise. Thanks again for all of your help. :grin:

div.entry-content p:first-child:first-letter { float:left; font-size:4em; color: #FF3399; margin-right:0.10em; line-height:90%; text-shadow: 0.05em 0.05em #C0C0C0; }

#16

Hi there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

#17

Hi, Joao!

The code works so I wasn’t asking anyone to do custom development. I just wanted a little help with working with it to see if It can work exclusively with single posts only. How is asking whether or not I can do drop caps by default via shortcode, single posts, instead of altering or using the code at all… in Icon custom development request? Thanks… I guess. :hushed:

#18

Hi again,

You can follow this thread https://theme.co/apex/forum/t/automatic-dropcap/5535/10 if the last one doesn’t work on your posts then try the previous given codes they should work.

Hope this helps!

#19

Unfortunately, that code did not do the trick. I even tried this below and no such luck.

Blockquote.single-post .entry-content .x-text > p:first-child:first-letter { float:left; font-size:4em; color: #FF3399; margin-right:0.10em; line-height:90%; text-shadow: 0.05em 0.05em #C0C0C0; }

With the original CSS it works on the site however it happens sitewide and messes up the style of some page elements, which is why I prefer to have it work for the first letter of the first paragraph on single posts pages only for individual posts and nowhere else. I have attached a screenshot.

#20

Hi again,

I checked your posts and the format you’re using in your posts is not consistent, CSS might not be able to the job for you in this situation, you’ll have to use the Shortcode http://demo.theme.co/icon-1/shortcodes/dropcap/

Thank you for understanding, take care!

#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