Question

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

Answer 1

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).