Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1014588

    Hi there,

    i want to change the arrangement of blog post elements – to be more specifically:

    – Date should be positioned above the title
    – “read more” – link should be positioned right after the excerpt with an added arrow and the font should be italic

    In a recent thread (https://kriesi.at/support/topic/styling-a-specific-category/#post-994326) you already helped me styling the sidebar to my needs.
    Styling the displayed posts via category-tag was a problem then, but should be possible now – Am I right?

    I want the last post on the page to look the same as the “orange one” highlighted in the sidebar.

    Mainly I want to specify stylings for different categories, e.g. “category-highlight-gross” should have an orange background.

    See privat content for the link to my page and login

    Thanks for the outstanding support so far

    Best regards
    Henning

    #1014711

    Well, I managed to get the background but the positioning of certain elements (e.g. Date, borders, delimiters) works not as I expected.

    Any help is appreciated..

    #1015105

    Hi,
    Thanks for the login, I would like a ask a couple of questions. Please see the screenshot in Private Content area:
    Is that the only blog page with listed posts?
    Would you like the date right over the title with no gap?
    Would you like the “read-more” right after the excerpt as part of the sentence wherever the text ends, or down one line like the start of a new line and always the lower right corner?
    Will this symbol: > be ok for the arrow?

    Best regards,
    Mike

    #1015528

    Hi Mike,

    thanks for the screenshot.
    This will be the only page with post-listings (hopefully) and I will answer all your questions one by one:
    1. Would you like the date right over the title with no gap? – A little gap (10px) would be fine
    2. Would you like the “read-more” right after the excerpt as part of the sentence wherever the text ends, or down one line like the start of a new line and always the lower right corner? – The “read more” should be right after the excerpt.
    3. Will this symbol: > be ok for the arrow? – YES

    Maybe you can also take a look at the “orange highlighted post”. I want the headline to be white as the copy and the date and read more just like described above. The separators can also be deleted or not displayed.

    Thanks for the help
    Henning

    #1015580

    Hi,
    Thank you for answering the questions. I added this code to the end of your functions.php file in Appearance > Editor:

    function custom_blog_layout_script(){
    ?>
    <script>
    (function($){
    $(document).ready(function(){
    $( '.post-entry.single-big' ).each(function() {
    $( this ).find( 'span.post-meta-infos' ).insertBefore( jQuery(this).find('header.entry-content-header') );
    $( this ).find( 'a.more-link' ).appendTo( jQuery(this).find('.entry-content p') );
    });
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_blog_layout_script');

    and this css to your Quick CSS:

    .post-entry.single-big .post-meta-infos {
    padding: 0px !important;
    margin: 0 0 -15px 0 !important;
    }
    .entry-content p a.more-link {
    padding: 0px !important;
    margin: 0px !important;
    display: inline-block !important;
    width: inherit !important; 
    }
    .entry-content p a.more-link:before {
      content: " → "; 
      white-space: pre;
    }

    Please feel free to adjust the arrow it you wish :)
    Your highlighted post doesn’t have a “read more” link so I couldn’t test that, but it should work just like the regular post.

    To adjust the highlighted post, I added this css:

    .post-entry.category-highlight-gross span.text-sep.text-sep-date {
    display: none !important;
    }
    .post-entry.category-highlight-gross span.post-meta-infos {
    border-bottom-color: transparent !important;
    }
    .post-entry.category-highlight-gross time,.post-entry.category-highlight-gross .post-title a {
    color: #fff !important;
    }

    By adding these changes your posts may seem a little closer together now, if you want some padding between them just let us know.
    Please clear your browser cache and check.

    Best regards,
    Mike

    #1015639

    Just Wow!
    Thanks for the help, that is exactly what I wanted.
    I adjusted some values for the “Date” and there was delimiter which produced a small white square in the “highlighted-post” which I also managed to be smaller.

    I added “Read More” to the highlighted post, adjusted the color and hover via Quick-Css and everything looks fine.

    While being totally happy with the post listing I wonder how to change one more thing in the sidebar. I want the same “read more” in the sidebar as in the post listing. I found some infos on wordpress.org on how to add the “read-more” to the manual excerpt, but nothing seems to change.
    Please have a look and tell me what to do!

    Thank you very much Mike!!

    Best regards
    Henning

    #1015698

    Hi,

    I added this code to your child theme functions.php to show the read more button:

    
    
    function ava_custom_script_mod(){
    ?>
    <script>
    (function($){
    $( "a.news-link" ).each(function( index ) {
      var url = $( this ).attr("href");
      if(url){
    	$( this ).next('.news-excerpt').append('<a href="'+url+'" class="more-link" style="display:block;text-align:left;margin-top:0;">Weiterlesen<span class="more-link-arrow" style="display:inline;"></span></a>');
      }
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'ava_custom_script_mod');
    

    Best regards,
    Peter

    #1017023

    Oh thanks Dude,

    i will try my best to get it in the desired position.
    If any further issues occur I will come back at you

    Best regards,
    Henning

    #1017049

    Hi,
    Glad Dude was able to help, shall we close this then?

    Best regards,
    Mike

    #1017058

    Hi,

    let me first check the arrangement of the item. I will be coming back here asap.

    Best regards
    Henning

    #1020334

    Hi all,

    the positioning was no problem. only the styling causes trouble.
    I have a special news-box in the sidebar, which has a different background-color (there will be more of them, with different colors) and the read-more ist not readable when hovered. I want it to be white as the in the big Highlight-Box on the right side!

    Any idea?

    Thanks for the help
    Henning

    #1020587

    Hi,
    To make the sidebar highlight box “more-link” white on hover, Please try this code in the General Styling > Quick CSS field:

    .news-content a.more-link:hover {
    color: #fff !important;
    }

    Best regards,
    Mike

    #1020652

    Hi,
    thank you very much. I had to change it to the class of the newsbox and now it works.

    Greetings
    Henning

    Topic can be closed!

    #1020911

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Styling blog post elements – styling by category tag’ is closed to new replies.