Blog Overview Page Style Support

Hi,

Thank you for the update.

This is the same exact style of the read more button used in the estably site.

.read-more-link {
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 220px;
padding: 15px 20px;
background-color: #c3a069;
border: 1px solid #c3a069;
border-top-color: rgb(195, 160, 105);
border-right-color: rgb(195, 160, 105);
border-bottom-color: rgb(195, 160, 105);
border-left-color: rgb(195, 160, 105);
display: block;
min-width: 0;
text-align: center;
border-radius: 4px;
font-family: DINPRO,Arial,sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
color: #c3a069;
-webkit-transition: all .3s cubic-bezier(.4,0,.2,1);
transition: all .3s cubic-bezier(.4,0,.2,1);
-webkit-box-shadow: 0 20px 40px rgba(49,50,54,.3);
box-shadow: 0 20px 40px rgba(49,50,54,.3);
color: #6d6b76;
background-color: hsla(0,0%,100%,0);
border-color: #6d6b76;
-webkit-box-shadow: none;
box-shadow: none;
}

We just replaced the selector with the class name used by the theme for the read more link element. You can add the code in the style.css file or the Quick CSS field.

Best regards,
Ismael

Hi,

Thank you for the update.

This is the hover style of the button.

.read-more-link a:hover {
    color: #fff;
    border-color: #c3a069;
    background-color: #c3a069;
    -webkit-box-shadow: 0 20px 40px rgba(49,50,54,.3);
    box-shadow: 0 20px 40px rgba(49,50,54,.3);
    -webkit-transition: all .15s cubic-bezier(.4,0,.2,1);
    transition: all .15s cubic-bezier(.4,0,.2,1);
}

In the previous css code, please replace the selector:

.read-more-link

..with:

.read-more-link a

Best regards,
Ismael

Hi,

You’re welcome. Thank you for the kind words.

Now, to move the category above the image, add this snippet in the functions.php file.

function ava_custom_js_footer_code() {
	?>
	<script>
	(function($) {
		$('.slide-entry').each(function() {
			var entry = $(this),
				image = entry.find('.slide-image'),
				cat = entry.find('.blog-categories'),
           		meta = entry.find('.slide-meta'),
            	title = entry.find('.slide-entry-title');
				
			cat.appendTo(image)
            meta.insertAfter(title)
		});
	})(jQuery);
	</script>
	<?php
}
add_action('wp_footer', 'ava_custom_js_footer_code');

Then use this css code to adjust the position of the category container.

.html_elegant-blog #top .avia-content-slider .blog-categories.minor-meta {
	position: absolute;
	top: 10px;
}

Best regards,
Ismael

Hi,

We modified the snippet above to move the post meta info below the post title. Please replace the previous one with it.

Afterwards, add this css code to remove the margin above the post meta info.

.html_elegant-blog #top .post-entry .post-meta-infos, .html_elegant-blog .avia-content-slider .slide-meta {
	margin-top: 0;
	float: none;
}

And use this css to create borders around the post items.

.slide-content {
	border: 1px solid gray !important;
	padding: 10px;
	border-top: none !important;
	margin-top: -10px;
}

Best regards,
Ismael