Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #996191

    I am trying to find anything recent on how to do this, but not able to get it to work
    I cant even get it back to the default look, which is to small, but a step in the right direction.
    On the Main Blog Posts page, i’d like a standard style blog listing
    – Posts listed in Rows
    Title & image on left, excerpt on Right

    also, if there is no featured image on the post, to have it display a set image or a nothing at all.
    right now it shows a grey area with a pencil :(

    Here’s a mock up of what im going for,
    http://prntscr.com/kh8kre

    • This topic was modified 1 week, 1 day ago by  OhYa1337. Reason: added login
    • This topic was modified 1 week, 1 day ago by  OhYa1337.
    • This topic was modified 1 week, 1 day ago by  OhYa1337.
    #996323

    Hey OhYa1337,
    I took a look at your page and changed the sidebar settings to show a sidebar, for the small single author layout the sidebar must be enabled to show the image to the left of the post.
    I also see that you added some custom css to make the images 280px square, but there was an error in the code that I corrected, so it is now working.
    To remove the pencil icon and gray background color from the posts with no featured image, you could add this css to your Quick CSS:

    #top.page-id-344 .small-preview .iconfont {
        display: none !important;
    }
    #top.page-id-344 .main_color a.small-preview {
        background: transparent !important;
    }

    If you would like to have a background image for the posts that have no featured image, try this css:

    #top.page-id-344 .blog-meta a.small-preview {
     background: url(https://your-site.com/wp-content/uploads/2018/05/hero-blurred.jpg)center center no-repeat; 
    background-size: cover;
    }
    #top.page-id-344 .small-preview .iconfont {
        display: none !important;
    }

    just replace the image url with one you would like to use, or replace “your-site.com” with your domain to test with.

    Best regards,
    Mike

    #996353

    Thank you so much Mike, that’s exactly what I needed!

    #996364

    Hi,
    Glad to hear, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    #996369

    How can I get the Categories to use that same Blog Layout?
    They look totally different and have a tall grey bar if there is no image.
    At Best,
    I would like to make them look exactly the same as the main blog page
    if not, at worst,
    I need to at least put it on grid with no image preview

    #996377

    Hi,
    To change the archive pages to the single small layout, Try adding this code to the end of your functions.php file in Appearance > Editor:

    //change category page layout to blog single small style
    add_filter('avf_blog_style','avia_change_category_blog_layout', 10, 2); 
    function avia_change_category_blog_layout($layout, $context){
    if($context == 'archive') $layout = 'single-small';
    return $layout;
    }

    then we will need to add the css style to the archive pages, Try adding this code to the end of your functions.php file in Appearance > Editor:

    function archive_single_small_layout_css() {
    	 if ( is_archive()) {
      echo '<style>
        #top .blog-meta a.small-preview {
     background: url(https://your-site.com/wp-content/uploads/2018/05/hero-blurred.jpg)center center no-repeat; 
    background-size: cover;
    }
    #top .small-preview .iconfont {
        display: none !important;
    }
      </style>';
    }
    }
    add_action('wp_footer', 'archive_single_small_layout_css');
    

    please change the url to suit.

    Best regards,
    Mike

    #996384

    The first part doesn’t appear to have any effect.
    the second one doesnt look like it replaced the grey bar with an image, but rather removed the image and left a empty spot there thats around 180px tall by maybe 50px wide – I would prefer it used the image at a set size (stretched wide format) or make it very small or removed

    #996389

    Hi,
    Strange, I don’t see link to your site anymore to see what you are referring to?

    Best regards,
    Mike

    #996411

    updated

    #996463

    Hi,
    Thank you for the login, I should explain that the “single small” layout with the image on the left of the article is only available when a sidebar is present, otherwise the image center aligns above the article. So for your blog page and archive (category) page a sidebar is active but hidden.
    I saw that the image you choose to use for when a post has no featured image is a transparent white icon that doesn’t show without a background color, so I added light gray to your css, which you can change or remove if you wish.
    This is the updated css in your Quick CSS:

    #top.archive .sidebar,#top.page-id-344 #main .sidebar {
    display: none !important;
    width: 0px !important;
    }
    #top.archive .sidebar_right .container .av-content-small.units,#top.page-id-344 .sidebar_right .container .av-content-small.units {
    width: 100% !important;
    }
    
    #top.archive .blog-meta a.small-preview,#top.page-id-344 .blog-meta a.small-preview {
     background: url(https://your-site.com/wp-content/uploads/2018/05/marker.png)center center no-repeat; 
    background-size: cover;
        background-color: lightgrey;
    }
    #top.archive .small-preview .iconfont,#top.page-id-344 .small-preview .iconfont {
        display: none !important;
    }

    Please clear your browser cache and check, and let us know if there are any other adjustments you would like.

    Best regards,
    Mike

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

You must be logged in to reply to this topic.