Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 26, 2018 at 9:03 am #1014588
    Kesselhut

    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

    September 26, 2018 at 1:22 pm #1014711
    Kesselhut

    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..

    September 27, 2018 at 5:18 am #1015105
    Mike

    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

    September 27, 2018 at 9:50 pm #1015528
    Kesselhut

    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

    September 28, 2018 at 4:48 am #1015580
    Mike

    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

    September 28, 2018 at 9:03 am #1015639
    Kesselhut

    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

    September 28, 2018 at 11:12 am #1015698
    Dude

    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

    October 2, 2018 at 1:01 pm #1017023
    Kesselhut

    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

    October 2, 2018 at 1:35 pm #1017049
    Mike

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

    Best regards,
    Mike

    October 2, 2018 at 1:46 pm #1017058
    Kesselhut

    Hi,

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

    Best regards
    Henning

    October 11, 2018 at 3:50 pm #1020334
    Kesselhut

    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

    October 12, 2018 at 5:40 am #1020587
    Mike

    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

    October 12, 2018 at 9:30 am #1020652
    Kesselhut

    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!

    October 13, 2018 at 2:28 am #1020911
    Mike

    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

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Styling blog post elements – styling by category tag’ is closed to new replies.