Read More on Design Wall

[email protected] [email protected]
asked 9 years ago

I seem to have lost the ability to add "more" to a post and have "Read More …" link appear at the bottom of a post.

I’ve tried using More in a post & setting "For each article in a feed, show" to both summary and full text, however none of these make the "Read More …" appear.

I’ve added some changes to the standard CSS, which I’ve included at the bottom of this post.

Can you help make Read More … appear please? If you can may I have the text white and the background red, similar to the HOT label ?

Regards Dave

/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/ .page-template-layout-blog #content { max-width: 850px; }

.single-post #content {
max-width: 95%;
}

.item .item-meta {
display: none;
}

.item .item-inner {
box-shadow: none;
}

.searchform {
display: none;
}

#sidebar-secondary {
display: none;
}

content {
max-width: 100%;
}

#main {
padding: 50px 8px 10px 200px;
}
#sidebar {
width: 200px;
}

@media only screen and (max-width: 985px) {
#main {
padding: 50px 10px 10px !important;
}
}

.single .item .item-thumbnail img {
display: inline-block;
}

2 Answers

DominicStaff
answered 9 years ago

Hi,
To change the style for the read more button, you can add the following code to the style.css file:

.item-permalink {
  background-color: #ef2a33;
  padding: 4px;
  text-transform: uppercase;
  font-size: 10px;
}
.item-permalink a {
  color: #fff;
}

About the code line that you mentioned here, you can add the codes line to the style.css file:

/** Reduce width for post in blog page****/
.page-template-layout-blog #content {
   max-width: 850px;
}

/** Change width in the single post */
.single-post #content {
   max-width: 95%;
}
/** Remove Meta section in post**/
.item .item-meta {
   display: none;
}

/**Remove Post shadow on home page**/
.item .item-inner {
   box-shadow: none;
}

/**Remove Search form and right sidebar*/
#searchform {
   display: none;
}

#sidebar-secondary {
  display: none;
}

/**Make full width single post */
#content {
   max-width: 100%;
}

/*** Reduce left sidebar */
#main {
   padding: 50px 8px 10px 200px;
}
#sidebar {
   width: 200px;
}

@media only screen and (max-width: 985px) {
#main {
   padding: 50px 10px 10px !important;
  }
}

.single .item .item-thumbnail img {
  display: inline-block;
}

Please send me your site, if you still face there issue.
Hope this helps !

[email protected] [email protected]
answered 9 years ago

Morning Dominic,

Thanks for the CSS code, it changed the Read More prefectly.

Just for clarity, the problem I was having is that READ MORE was not appearing on the posts. The mistake I’d made was to include

/ Remove Meta section in post/
.item .item-meta {
display: none;
}

which also stops read more appearing. I removed this line from the custom CSS and the read more now appears.

Thanks for the help. Excellent service as always.

dominic Staff
replied 9 years ago

If you want to remove the author and categories section, you can use the following code:
.item .meta-top { display: none; }
Regards,