Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1261056

    Is there a way to modify the blog post layout or template to position the post share buttons immediately below the feature image at the top of a post, as shown in the mockup linked below

    Thank you for your help

    #1261118

    Hey michaelspencer,

    Please make the mockup public, we cannot see it now.

    Best regards,
    Victoria

    #1261357

    Sorry, pls retry

    #1262218

    Hi,
    Sorry for the late reply and thanks for the mockup and link, so for your single posts we will first change the social share buttons into small buttons.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.single-post .av-share-box .avia-related-tooltip,
    #top.single-post .av-share-box h5.av-share-link-description.av-no-toc {
      display: none !important;
    }
    #top.single-post .av-share-box {
        width: 200px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: absolute;
        right: 50px;
    }
    
    #top.single-post .av-share-box .av-share-box ul li {    
        border-left-style: none;    
        display: inline-block;
    }
    
    #top.single-post .av-share-box .av-share-link {
       width: 30px!important;
       height: 30px!important;
       margin: 0 10px 0 0;    
    }
    
    #top.single-post .av-share-box .av-share-link a {   
       border:0px solid #000;
       padding: 0;
    }
    
    #top.single-post .av-share-box .av-share-link a:hover {
      background-color: #000!important;
      transition: all .35s ease;
    }
    
    #top.single-post .av-share-box .av-share-link a:before {
      color:#333;
      transition: all .5s ease;
    
    }
    
    #top.single-post .av-share-box .av-share-link:hover a:before {
      color:#fff;
      transition: all .35s ease;
    }
    
    

    2020-11-22_190229.jpg
    Then we will move it to under your featured image, try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_script() { ?>
        <script>
    (function($) {
      $(document).ready(function(){
         $('.single-post .av-share-box').detach().insertBefore('.blog-meta');
      });
     })(jQuery);
    </script>
        <?php
    }
    add_action('wp_footer', 'custom_script');

    2020-11-22_193827.jpg
    Then clear your browser cache and check.

    Best regards,
    Mike

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