CODEWITHSUNDEEP
htmlcsswordpress
John
John

Reputation: 53

How to move the "Read more" button to the end of the post at this WordPress theme?

I downloaded this theme and when you add the "more" tag in WordPress, it adds the "read more" button at the bottom along Tweet , Like and Comments buttons.

a) I'd like the ability to show the "read more" in its classic form after the post excerpt in form of a link.

b) Then the "comments" icon to be moved near the Tweet and Like buttons.

I've zero knowledge on CSS/HTML and would be immensely thankful to the person who could help.

The files:

Visual Instructions ------> http://bit.ly/WKdMCl

Theme in zip format ------> http://bit.ly/UovMlW

Real demonstration of theme in action ----> http://bit.ly/HtSIxn

Upvotes: 1

Views: 1162

Answers (2)

Aky Joe
Aky Joe

Reputation: 271

You will have to edit theme core files in order to achieve a and b. I tried something on firebug for your ease. Check the image: http://tinypic.com/r/2jdqds8/6

If you want something like then you just have to edit one single file, that is style.css

Follow the simple instructions below:

  1. Open style.css located in template directory with Netbeans IDE, Notepad++ or WordPad.

  2. Search the code ".post-meta .readmore" (without quotes) and replace it with below code snippet:

    .post-meta .readmore {border: 0;padding: 2px 0 10px 12px;margin:0;}

  3. Search the code ".post-meta .readmore a" (without quotes) and replace it with below code snippet: .post-meta .readmore a {color: #317CC8;display: block;line-height: 15px;padding-left:20px;position: relative;text-decoration: underline;top: -30px;}

  4. Search the code ".post-meta .comments" (without quotes) and replace it with below code snippet: .post-meta .comments { margin: 3px 0 0 16px; padding: 0 16px 3px 20px; color: #c9c9c9; font-size: 10px; float:left; font-weight: bold; text-transform: uppercase; background: url("images/comments.png") no-repeat left 3px; border:none; }

I'm sure this will achieve what is demonstrated in image(attached as link).

Upvotes: 1

daniel
daniel

Reputation: 1433

b) Remove float:right; from the css .post-meta .comments { } in the style.css file.

Upvotes: 1

Related Questions