How can I change the comments box appearance on post links within category pages

• 

  rosiesstevens · Member · Sep 8, 2014 at 3:44 am

  • Copy link
  • Add topic to favorites

  On my ‘rants’ and ‘ramblings’ categories/pages that have all my posts listed within them, there is a small box next to them detailing how many comments there are. Is there a way of changing this? I would like to include a small photo that is relevant to each post, and have the comments link underneath.
  The blog I need help with is http://www.twolittlepigsdownunder.com

  Thank you!!

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Sep 8, 2014 at 5:55 am

  • Copy link

  Have you tried adding a featured image to each post? It looks like your theme will display these alongside each post in the categories pages.

  Once you’ve tested this and added some images let me know, then we can look at any specific resizing or repositioning that you think will make the categories pages look better.

• 

  rosiesstevens · Member · Sep 8, 2014 at 10:44 am

  • Copy link

  Hey, thanks so much for your reply :)
  So now I have featured images. Would love to know how to make them smaller and also to ideally have them to the right hand side of the title, so they’re not overbearing but just serve as a nice pictorial representation of what the post is about. Any more advice about that would be greatly appreciated :) thanks heaps!

• 

  hallluke · Member · Sep 8, 2014 at 12:20 pm

  • Copy link

  Hi Rosie,

  I don’t see the featured images yet, have you updated the posts so that they’re live? Once they’re published and I can see them (in their default giant glory) I can help you shrink and position them better.

• 

  rosiesstevens · Member · Sep 9, 2014 at 12:59 am

  • Copy link

  I have done now, thank you so much. Any advice would be greatly recieved – as I said I would really like them much smaller and preferably on the right hand side where the comments link is. Thanks heaps!! :)

• 

  hallluke · Member · Sep 9, 2014 at 4:01 am

  • Copy link

  Can you try this and let me know what you think:

  .post img.wp-post-image {
  	max-height:120px;
  	max-width:20%;
  	width:auto;
  	float:right;
  	margin:20px 0 0 0;
  }
  
  .post header.entry-info {
  	margin-top:0;
  }
  
  .post .one_third {
  	clear:both;
  }

  Positioning the image is pretty easy but as you have images that are different sizes some of them might look better than others, the tricky bit is making the comment box look good without taking up too much space.

• 

  rosiesstevens · Member · Sep 9, 2014 at 4:44 am

  • Copy link

  Thanks so much, you have been SO helpful.
  I think they look ok like that, I think in an ideal world I would have them a bit bigger. Yeah the comment box is a problem, I would like it much smaller so there isn’t a big gap between the title of the post and the start of it. Do you have any suggestions for this?
  Sorry to ask so many questions but you have been so helpful, I wonder if I could ask a couple more.
  Other than the space between the title and post, I also wondered if you had any advice for making my twitter bar scroll? I can’t seem to make it scroll/smaller despite trying a couple of different codes for the CSS.
  Also, on my ramblings page there doesn’t seem to be a ‘next page’ page, so you have to go to the archives to see older posts. Is this easy to rectify?

  Thanks so much again for your help, greatly appreciated!!

• 

  hallluke · Member · Sep 9, 2014 at 5:18 am

  • Copy link

  There seems to be an issue with infinite scroll which is stopping your archive page navigation from appearing. You can fix it with this code, but you shouldn’t really need to:

  .category.infinite-scroll .nav-links {
    display: block;
  }

  You might want to try turning infinite scroll off and on again to see if that does anything (yep, grasping at straws a little). I can’t tell if this is a problem with infinite scroll or specific to your theme and archive pages, it’s probably something for a member of the WordPress support staff to look in to.

  You can fix the height and add a scroll bar to your twitter bar widget with code like this, just pick a height you think looks good:

  #twitter_timeline-2 {
    height:350px;
    overflow:scroll;
  }

  To make the images a little larger try adding this:

  .post .two_third {
    width:70%;
  }

  and changing the previous code I gave you to max-height:150px; max-width:25%; instead.

  There isn’t an easy way to get your comments to match up with the author tagline but here’s the best I’ve come up with so far:

  article.post .one_third {
    width:60%;
  }
  
  article.post .one_third * {
    display:inline-block;
    padding:1px 5px;
  }

• 

  rosiesstevens · Member · Oct 1, 2014 at 9:24 pm

  • Copy link

  Hey,

  I’m having such problems getting a link up picture to appear as the picture on my post, trying to participate in a Blogtober link up but can’t get the picture to appear, it just comes up as the code when I preview it. The link I want to appear as the picture is

  <div align=”center”>
  <img src=”http://i1285.photobucket.com/albums/a595/helenesula/blogtober14button_zpsc32fc7da.jpg” alt=”The Daily Tay” style=”border:none;” /></div>

  is there something that needs to be switched on in the CSS or something like that? Thanks so much for your help I really appreciate it!!

• 

  hallluke · Member · Oct 2, 2014 at 10:15 am

  • Copy link

  Are you typing that code into the visual editor or the text (HTML) editor? You need to be using the text editor – you can switch using the tabs at the top right of the text box on your edit post page.

  Alternatively you can save the image to your computer, upload it to your media library and then insert it using the visual editor as you would normally do.

  Let me know how it goes.