Shrinking Slideshow Gallery

• 

  ginab13 · Member · Jan 15, 2015 at 6:52 pm

  • Copy link
  • Add topic to favorites

  Hi – How do I shrink the size of the slideshow gallery? I’ve chosen THUMBNAIL in the gallery settings, and I have changed the image size in SETTINGS -> MEDIA, but to no avail.

  I am using the Triton Lite theme.

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

• 

  thesacredpath · Member · Jan 16, 2015 at 3:42 pm

  • Copy link

  First off, I just noticed your menu items are not clickable. Add a z-index declaration of 1 to #masthead so it looks like this:

  #masthead {
      display: block;
      height: 34px;
      position: absolute;
      top: 160px;
      z-index: 1;
  }

  Gallery images should show as thumbnails (if that is what you have chosen as the size), but on slideshows, images are shown as large as possible, which is what most people want for a slideshow.

  Where is the slideshow you are talking about? Which page?

• 

  ginab13 · Member · Jan 16, 2015 at 8:51 pm

  • Copy link

  The masthead CSS did the trick – thank you!!!!!!!!!!!

  The slideshow is on the homepage.

• 

  thesacredpath · Member · Jan 17, 2015 at 12:29 am

  • Copy link

  Give this a try. It isn’t finished, but I want to get your input first. We will have to work on the width of the background black area if this looks like it would work.

  .slideshow-window {
      max-height: 300px !important;
  }
  .slideshow-slide img {
      max-height: 250px !important;
      vertical-align: top !important;
  }
  .slideshow-slide-caption {
      bottom: 120px !important;
  }
  .slideshow-controls {
      bottom: 60px !important;
  }

• 

  ginab13 · Member · Jan 17, 2015 at 6:36 am

  • Copy link

  This is great. I’ve updated the site, so you can see it. I would like the images to fill the space with just a thin border… and I would also love to be able to play with the font size and color of the captions.

• 

  ginab13 · Member · Jan 17, 2015 at 6:38 am

  • Copy link

  I would also love to make the slideshow images clickable to pages on the site, if that’s possible…

• 

  ginab13 · Member · Jan 17, 2015 at 7:16 am

  • Copy link

  And one more thing… the dropdowns in my menu are going BEHIND the slideshow. How can I fix this. Thanks!

• 

  designsimply · Member · Jan 18, 2015 at 12:56 pm

  • Copy link

  The slideshow is a little tricky to adjust, here is an example that gets rid of the background color and border and shifts the inner window left a little to position it a little more nicely. Then it also adds a 3px red border to the images and adjust the font size and color of the slideshow image captions:

  div.slideshow-window {
  	background-color: inherit;
  	border: none;
  }
  
  div.slideshow-window .slideshow-slide {
  	left: 15px !important;
  }
  
  div.slideshow-window .slideshow-slide img {
  	border: 3px solid red !important;
  }
  
  div.slideshow-slide-caption {
  	color: red;
  	font-size: 20px;
  	line-height: 1.4;
  	width: 95%;
  	margin-left: 2.5%;
  }

  I made the borders and text red, but you can change it to a different color code if you’d like.

  The code example above will change every slideshow on the site, not just the one on the home page. If you would like to limit a CSS change to just the home page, you can add “.home” to the front of all of the CSS selectors like this:

  .home div.slideshow-window {

• 

  ginab13 · Member · Jan 19, 2015 at 10:31 pm

  • Copy link

  This worked like a charm – thank you so much!!!

  There are two other issues from this thread that need to be resolved. Should I open new threads?

  They are:
  1) Menu dropdown going behind the slideshow on the homepage
  2) (LESS IMPORTANT) I’d love to make the slideshow images clickable to other pages.

  Thanks again!!

• 

  ginab13 · Member · Jan 19, 2015 at 10:38 pm

  • Copy link

  Nevermind on the submenu issue! I just figured it out by changing the value of the x-index. So now, it’s just a question of whether i can make those slideshow images clickable to other pages (or perhaps posts down the line).

  Thanks!

• 

  designsimply · Member · Jan 20, 2015 at 1:54 pm

  • Copy link

  2) (LESS IMPORTANT) I’d love to make the slideshow images clickable to other pages.

  This one isn’t possible using CSS only. Sorry about that!

  Nice catch on the submenu issue!

  In the future, if questions are different enough from the original post and conversation, then starting a new help request is a good idea.