Caption and slideshow

• 

  orientaltextiles · Member · Aug 20, 2015 at 3:26 am

  • Copy link
  • Add topic to favorites

  How to increase bottom-border of slideshow, then move caption to BELOW the image. Currently the caption is sitting right on top of the image (kind of distracting to me).

  The page I am working on is:
  http://paulshaperproductions.com/people-cattle-2/

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

• 

  thesacredpath · Member · Aug 20, 2015 at 11:08 pm

  • Copy link

  Hi there, I’ve tried a number of things, and with slideshows, a good number of things can’t be changed because the software calculates the position of elements and inserts it directly into the HTML. I can increase the bottom black border around the image, and I can move the caption, but if I move it down, it disappears behind the dark bottom rather than floating on top of it. Typically you can fix this with a z-index declaration, but in this case, I can’t get it to override the existing.

• 

  michaelvandenberg · Member · Aug 21, 2015 at 11:22 am

  • Copy link

  You can try to disable overflow hidden on the slider element. While at first glance this doesn’t cause issues, it might have some unknown unintended consequences, like images or other elements flowing out of the slider element. BUT at first glance this seems to be working.

  /* Disable overflow hidden. */
  .slideshow-window {
  	overflow: visible;
  }
  
  /* Move caption beneath slider. */
  .slideshow-slide-caption {
  	bottom: 68px;
  }

  And if you want the caption text to have a normal appearance:

  .slideshow-slide-caption {
  	color: inherit;
  	text-shadow: none;
  }

  @thesacredpath: I hope you don’t mind my intrusion here. :)

• 

  thesacredpath · Member · Aug 21, 2015 at 8:00 pm

  • Copy link

  @michaelvandenberg, absolutely not. The forums are a team effort and glad to have you here, and to have you chime in on this one. I noticed one typo on the overflow (visable vs visible) and corrected it in your code.

• 

  orientaltextiles · Member · Aug 22, 2015 at 5:40 pm

  • Copy link

  @michaelvandenberg: Thanks so much for your help. The codes, however, are not working for me (nothing changed). I did try different numbers with “bottom: 68px;”. Sill, nothing changed.

  @thesacredpath: If it is possible, may I have the codes to increase the bottom black border around the image and move the caption down?

  I hope, combining with the above codes, I may achieve what I’m looking for.

• 

  thesacredpath · Member · Aug 24, 2015 at 9:32 pm

  • Copy link

  Hi, I’ve added the !important keyword to the declarations to force them to override, and changed a few bits. Give this a try and see what you think.

  .slideshow-window {
      overflow: visible !important;
  }
  .slideshow-slide-caption {
      bottom: -30px !important;
      text-shadow: none !important;
  }
  .slideshow-window {
      border-bottom: 40px solid #222 !important;
  }

• 

  orientaltextiles · Member · Aug 29, 2015 at 10:26 pm

  • Copy link

  @thesacredpath: It still does not work (nothing changed).

  If you have any further suggestions, I’m more than happy to try them out.

  Really appreciate your help.

• 

  thesacredpath · Member · Aug 31, 2015 at 5:54 pm

  • Copy link

  Hi, I just went into Appearance > Customize > CSS and added the above code to your site as a test and see the caption on the slideshow move down into the dark border at the bottom. Can you try the code again, save and then view your site? Make sure and add the code below all other code you have in your custom CSS.

• 

  orientaltextiles · Member · Sep 2, 2015 at 10:11 pm

  • Copy link

  You’re right! It works beautifully!!

  While we’re at this, please also help me with codes for transparent background and caption moved down.

• 

  thesacredpath · Member · Sep 3, 2015 at 12:02 am

  • Copy link

  Hi, are you talking about removing the black from around the slideshow? The caption is moved down below the actual slide.

• 

  thesacredpath · Member · Sep 3, 2015 at 12:09 am

  • Copy link

  If so, for the People & Cattle page, modify the following rules to look what I have.

  .page-id-1386 .slideshow-window {
      background: #fff !important;
      border-color: #fff !important;
      overflow: visible !important;
  }
  .page-id-1386 .slideshow-slide-caption {
      bottom: -30px !important;
      text-shadow: none !important;
      color: #000;
  }
  .page-id-1386 .slideshow-window {
      border-bottom: 40px solid #fff !important;
  }

• 

  orientaltextiles · Member · Sep 3, 2015 at 4:01 am

  • Copy link

  Yes, it works :)

  To apply the same effect (like the latest set of codes) for more than one page, say:

  .page-id-1386
  .page-id-1454

  Do I need to repeat the entire coding for each page?
  Thanks for your help!

• 

  thesacredpath · Member · Sep 3, 2015 at 6:45 am

  • Copy link

  Do you want to apply this to all slideshows? If so, you take the page specific part out of the code. If you wish to do it to only certain slideshows, then yes, you need to include those. You can add additional selectors to the code you already have, comma separated, so you don’t have to rewrite the entire rules. As an example of one of the rules:

  .page-id-1386 .slideshow-window, .page-id-1454 .slideshow-window {
      background: #fff !important;
      border-color: #fff !important;
      overflow: visible !important;
  }

• 

  orientaltextiles · Member · Sep 3, 2015 at 5:51 pm

  • Copy link

  It answers my questions!
  Many thanks :)

• 

  thesacredpath · Member · Sep 3, 2015 at 6:30 pm

  • Copy link

  You are welcome.