social icons meta description author box

  • Resolved kilikoi

    (@kilikoi)


    5 years, 4 months ago

    Hi lovely WP-People,

    I have a tiny problem and can’t fix it. I am using a theme that gives the ability to have an author description after every post and includes the possibility to add an author link and twitter profile. Unfortunately no other social icons. I managed to add the Icons but can’t get the css for the formatting right. As soon as I add some code to adjust the genericons, i included they disappear. may be you have an idea?

    Here is the full ?history“ of code I added:
    1.
    I did not had to add
    user_contact_methods because i use the Yoast SEO Plugin, that adds them already.

    2. adding code to author box

    <?php if(get_the_author_meta('user_url') ): ?>
		<?php
		$author_url = get_the_author_meta('user_url');
			$to_remove = array( 'https://', 'https://' );
			foreach ( $to_remove as $item ) {
			$author_url = str_replace($item, '', $author_url);
		}
		echo '<a class="author-website" href=' . get_the_author_meta('user_url') .'> '  . $author_url . ' </a>';
		?>
		<?php endif; ?>

		<?php
		if(get_the_author_meta('twitter') ): ?>
			<a class="author-twitter" target="_blank" rel="noopener noreferrer" href="https://www.twitter.com/<?php echo get_the_author_meta('twitter'); ?>"><?php echo get_the_author_meta('twitter'); ?></a>
		<?php endif; ?>

	<?php
	if(get_the_author_meta('facebook') ): ?>
			<a class="author-facebook" target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/<?php echo get_the_author_meta('facebook'); ?>"><?php echo get_the_author_meta('facebook'); ?></a>
		<?php endif; ?>

	<?php
	if(get_the_author_meta('instagram') ): ?>
		  <a class="author-instagram" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/<?php echo get_the_author_meta('instagram'); ?>"><?php echo get_the_author_meta('instagram'); ?></a>
		<?php endif; ?>

    3. I have included the following css for the genericons (they are uploaded already in theme as font)

    .author-links a.author-facebook:before {
 font: normal 18px/1 'Genericons';
 content: 'f203';
}
.author-links a.author-instagram:before {
 font: normal 18px/1 'Genericons';
 content: 'f215';
}

    4.
    and to adjust the distance between the social accounts i used the following css code

    .author-links a.author-facebook, 
.author-links a.author-twitter {
    margin: 4px 30px 0 0;
}

    5.
    and to adjust the hieght of the genericons

    .author-links a.author-website:before,
.author-links a.author-twitter:before,
.author-links a.author-facebook:before,
.author-links a.author-instagram:before {
 display: block;
 position: absolute;
 top: 2px;
 left: -4px;
 text-align: left;
}

    as soon as I put in the css code to adjust the genericons they dissapear – and I can’t find why?

    Anyone an idea?

    Thank you for any help in advance,
    Jo

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    They didn’t disappear, they moved to the upper left corner of the author box because they are not constrained to the related link, so the absolute positioning is applied relative to the author box. The display/position attributes applied to your added links are not the same as the original links. Make them so with:

    .author-links a.author-facebook,
.author-links a.author-instagram {
    margin: 4px 30px 0 0;
    display: inline-block;
    position: relative;
    padding: 0 0 0 18px;
}
    Thread Starter kilikoi

    (@kilikoi)

    Hi @bcworkz,

    thank you so much for taking the time, if I put your code in than they appear, but it doesn’t change anything on the wrong style of the genericons comapred with the two genericons form twitter and author link. They are much higher than the other two. any ideas?

    Thank you,

    Jo

    Moderator bcworkz

    (@bcworkz)

    It looks like the rules you posted earlier:

    .author-links a.author-website:before,
.author-links a.author-twitter:before,
.author-links a.author-facebook:before,
.author-links a.author-instagram:before {
 display: block;
 position: absolute;
 top: 2px;
 left: -4px;
 text-align: left;
}

    are now missing the added FB and IG selectors. Add them back and placement should look fine. The missing parts:

    , .author-links a.author-facebook:before,
.author-links a.author-instagram:before
    Thread Starter kilikoi

    (@kilikoi)

    whooop … thank you so much, I must have accidentally overwritten the code. Now everything is perfect. you made my day @bcworkz. Thank you so much for your help.

    Thread Starter kilikoi

    (@kilikoi)

    I am closing this thread now as it is resolved.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘social icons meta description author box’ is closed to new replies.