[hadoriiParticipant]

Hello, I would like to set up a blog page like this: https://jessicarea.me/blog
I don’t want my blog posts to appear anywhere else on the site.

How do I do this? Thanks.

[JadeModerator]

Hi there,

Thanks for the details.

This is easily achievable using the features offered by X and some bits of custom CSS but I am not sure what you mean by not wanting your blog posts to appear anywhere else on the site. Would you mind clarifying?

[hadoriiParticipant]

Sorry, I actually figured that part out — so now I have the posts appearing on the “blog” page, but I’d like it to look a bit nicer like the one I referenced above. Any help would be appreciated!

[JadeModerator]

Hi there,

You can add this under Custom > CSS in the Customizer.

.blog .x-iso-container-posts > .hentry .entry-wrap, .archive .x-iso-container-posts > .hentry .entry-wrap, .category .x-iso-container-posts > .hentry .entry-wrap {
	border: none;
	padding: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.blog .entry-featured, .archive .entry-featured, .category .entry-featured {
	margin: 0;
	border: none;
	padding: 0;
}

.blog .post .entry-header, .archive .post .entry-header, .category .post .entry-header {
	margin: 15px 0 20px;
	padding: 0;
}

.blog .post .entry-header .entry-title a, .archive .post .entry-header .entry-title a, .category .post .entry-header .entry-title a {
	font-size: 22pt;
	color: #000;
	font-weight: 100;
}

.blog .post .entry-header .entry-title a:hover, .archive .post .entry-header .entry-title a:hover, .category .post .entry-header .entry-title a:hover {
	color: #FF00B5;
}

.blog .post .entry-content, .archive .post .entry-content, .category .post .entry-content  {
	padding: 0;
	margin: 0;
	line-height: 1.2;
	font-size: 16pt;
}

.blog .more-link, .archive .more-link, .category .more-link {
	font-size: 12px;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 4;
	display: block;
	color: #04B7B2;
}

.blog .more-link:hover, .archive .more-link:hover, .category .more-link:hover {
	color: #FF00B5;
}

.blog .x-iso-container-posts > .hentry.format-quote .entry-wrap, .archive .x-iso-container-posts > .hentry.format-quote .entry-wrap, .category .x-iso-container-posts > .hentry.format-quote .entry-wrap {	
	padding: 0 0 20px 0;
}

.blog .x-iso-container-posts > .hentry.format-quote .entry-title, .archive .x-iso-container-posts > .hentry.format-quote .entry-title, .category .x-iso-container-posts > .hentry.format-quote .entry-title {	
	text-align: center;
}

.blog .x-iso-container-posts > .hentry.format-quote .entry-title-sub, .archive .x-iso-container-posts > .hentry.format-quote .entry-title-sub, .category .x-iso-container-posts > .hentry.format-quote .entry-title-sub {	
	text-align: center;
	color: #676767;
	font-size: 14px;
	margin-top: 30px;
	font-weight: 700;
}

Hope this helps.

[hadoriiParticipant]

Thanks, I added that code and it did change the formatting, however the featured image from the blog posts don’t appear — do I need to change a setting on the posts themselves? Thanks.

[hadoriiParticipant]

Ok, I figured out the image problem — they are now appearing. However, above the image there is a icon and the title of the post. Is there any way to remove that part of the layout, similar to the original link? That site just shows the images and then the description. Thanks!

[FriechModerator]

Hi There,

Would you mind providing us the site URL so we can take a closer look? Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[hadoriiParticipant]

http://www.bonnenuitbaby.com/blog/

[Rue NelModerator]

Hello @hadorii,

Thanks for providing the url of your site. You are using icon stack and then your example url is using renew. If you want to have the same layout, what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you have your child theme active and ready, please follow the following steps below:
1] To move the titles underneath the featured image, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $(document).ready(function(){
    $('.x-iso-container-posts .hentry').each(function(index, element){
      $(element).addClass("class-" + index);
      $(element).find('.entry-header').insertAfter($(this).find('.entry-featured'));
    });
  });
})(jQuery);

2] And to align those titles to the left, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-iso-container-posts .entry-title {
  text-align: left;
  width: 100%;
  padding: 0;
}

.site .x-iso-container-posts .entry-title:before {
    display: none;
}

3] And to add a read more link to each of the excerpts, please insert this following code in your child theme’s functions.php file.

// Custom Excerpt More String
// =============================================================================
function x_excerpt_string( $more ) {

	$stack = x_get_stack();

	if ( $stack == 'integrity' ) {
	  return ' ... <div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
	} else if ( $stack == 'renew' ) {
	  return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
	} else if ( $stack == 'icon' ) {
	  return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
	} else if ( $stack == 'ethos' ) {
	  return ' ...';
	}

}
add_filter( 'excerpt_more', 'x_excerpt_string' );
// =============================================================================

We would loved to know if this has work for you. Thank you.

[Author]

Posts