Hi, I’ve been looking around for an option to do this and can’t find it. So I made two screenshots of what I want to do. Can you help?
Hi There,
To add the grey line to the top header, please add this custom CSS under Theme Options > CSS:
.x-navbar.x-navbar-fixed-top {
border-bottom: 2px solid #888585;
}
To change the size of featured images, you have to setup a child theme first:
- On blog page, please also add this custom CSS under
Theme Options > CSS:
.blog a.entry-thumb {
background-size: contain;
}
- On single page, add this custom code under
functions.php
file locates in your child theme:
function x_featured_image( $cropped = '' ) {
$stack = x_get_stack();
$fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;
if ( has_post_thumbnail() ) {
if ( $cropped == 'cropped' ) {
if ( $fullwidth ) {
$thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', NULL );
} else {
$thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
}
} else {
if ( $fullwidth ) {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
} else {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
}
}
switch ( is_singular() ) {
case true:
printf( '<div class="entry-thumb">%s</div>', $thumb );
break;
case false:
printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
esc_url( get_permalink() ),
esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
$thumb
);
break;
}
}
}
Hope it helps
Hi there,
HOME PAGE
for the grey line: great :).
For the size of the picture: almost there but the picture became smaller. Can we make it take a wider space?
For post page, adding to function in my child theme didn’t to anything
Thanks
Hi Yannick,
In that case, would you mind providing the login credentials of your site in the secure note? I can’t check it and it’s behind a coming soon page.
Thanks!
Yes, I will. Didn’t know how to do the secure note thing. Thanks
Hi There,
For single post page, please find this custom CSS:
.single-post .entry-featured {
width: 50%;
margin: 0 auto;
}
And change to this:
.single-post .entry-featured {
margin: 0 20px 0 0 !important;
float: left;
width: 40%;
}
.single-post .entry-featured img {
width: 100%;
}
For the blog page, please add this custom CSS:
.blog article.post {
display: flex !important;
flex-flow: wrap;
}
.blog a.entry-thumb {
padding-bottom: 100%;
}
@media (max-width: 767px){
.blog .entry-featured {
width: 100% !important;
}
}
Hope that helps and thank you for understanding.
Hi!
All good, it worked and it’s good enough!
Thank you very much
You’re most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.