CSS code – removing comments box from image carousel

• 

  karenthorburn · Member · Nov 23, 2015 at 9:10 pm

  • Copy link
  • Add topic to favorites

  I am using the Dicot Theme with a business plan. Please see here: http://karenthorburn.com/portfolio/ If you open any of my photographs on this page, you will see that in the image carousel there is a box for people to leave comments. I would like to remove the comments box from the image carousel, so that you can only see the photographs and their titles. I would be very grateful if someone could work on the CSS code needed. Many thanks.

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

• 

  thesacredpath · Member · Nov 24, 2015 at 5:36 am

  • Copy link

  Hi, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS to hide the comment form on the carousel.

  #jp-carousel-comment-form-container {
      display: none !important;
  }

• 

  karenthorburn · Member · Nov 24, 2015 at 9:24 am

  • Copy link

  Thanks very much. That’s removed the comments box, which is great. ‘Comment’ still shows as an option on the bottom right of the screen (although clicking it now has no effect). Is it possible to remove this too? Thanks again.

• 

  ogurel · Member · Nov 24, 2015 at 9:29 am

  • Copy link

  If you use the exact same css code for the jp-carousel-commentlink class, it will hide the link as well like so:

  .jp-carousel-commentlink {
  display: none !important;
  }

  I hope this help.

  Thanks,

  Onur

• 

  ogurel · Member · Nov 24, 2015 at 9:30 am

  • Copy link

  If you use the exact same css code for the jp-carousel-commentlink class, it will hide the link as well like so:

  .jp-carousel-commentlink {
  display: none !important;
  }

  I hope this helps,

  Onur

• 

  ogurel · Member · Nov 24, 2015 at 9:31 am

  • Copy link

  Apologies for the double post.

• 

  karenthorburn · Member · Nov 24, 2015 at 9:39 am

  • Copy link

  Brilliant! All sorted. Thanks for the quick response.

• 

  ogurel · Member · Nov 24, 2015 at 9:42 am

  • Copy link

  My pleasure, happy blogging!

• 

  karenthorburn · Member · Nov 24, 2015 at 8:41 pm

  • Copy link

  Hi again. Sorry to be a pain but I’m now thinking it would be good to also remove the ‘re-blog’ and ‘view full size’ options from the image carousel. Could you also provide CSS codes for this? Thanks very much! :)

• 

  ogurel · Member · Nov 25, 2015 at 3:01 am

  • Copy link

  Sorry for the late reply, this is not a pain at all.

  To completely hide the box from displaying since we won’t be using any of the options in it, you can use the following CSS code:

  .jp-carousel-image-meta
   {
  	display: none !important;
  }

  Please feel free to write back if you need anything else.

  Take care,

  Onur

• 

  karenthorburn · Member · Nov 25, 2015 at 8:56 am

  • Copy link

  Thanks Onur! I have one last query. Have a look at my website, karenthorburn.com, and you’ll see that the social media icons are a bit lost at the bottom left hand corner of the pages. I’d like to make the icons bigger and display them in a more prominent position, but probably still as a footer. Do you have any suggestions?

• 

  ogurel · Member · Nov 25, 2015 at 10:58 am

  • Copy link

  Hello again Karen,

  First of all, I’d recommend moving the social icons to Widgets > Footer Area Two in your Dicot theme’s customization options to align them to the center.

  In order to increase their size, you can use the following custom CSS code as example:

  .genericon {
  font-size: 32px;
  }

  You can change the size to your heart’s content.

  Feel free to contact me again if you want to change anything else.

• 

  karenthorburn · Member · Nov 25, 2015 at 11:45 am

  • Copy link

  Thanks Onur. I’ve followed your instructions. The icons have moved towards the middle but aren’t centred. Is there a way to correct this? Also, I suspect people might not scroll to the bottom of the page and see the icons. Is there a way to reduce the gap between the page text and the social media icons? Thanks :)

• 

  thesacredpath · Member · Nov 26, 2015 at 7:07 am

  • Copy link

  Hi @karenthorburn, give the following a try to reduce the white space at the bottom of the content and to center the icons in the widget.

  .site-content {
      padding-bottom: 0;
  }
  .hentry:last-of-type {
      margin-bottom: 0;
  }
  .site-footer-widgets-wrapper {
      padding-top: 30px;
  }
  #wpcom_social_media_icons_widget-8 {
      text-align: center;
  }

• 

  ogurel · Member · Nov 26, 2015 at 8:15 am

  • Copy link

  Sorry I haven’t been able to reply back in time but I see that you’re in very good hands :)

  Please write back if you need anything else.

• 

  karenthorburn · Member · Nov 26, 2015 at 3:46 pm

  • Copy link

  All sorted and it looks great! Thank you both so much.

• 

  ogurel · Member · Nov 26, 2015 at 4:01 pm

  • Copy link

  That’s great! You’re most welcome.

  Happy blogging!