remove slideshow border

• 

  annaviolidekker · Member · Feb 10, 2015 at 11:33 am

  • Copy link
  • Add topic to favorites

  Hi there,
  I know I’m not the first one to ask this, but none of the answers I have found online seem to work in my page! I am using a free wordpress theme, so have some custom CSS customization options within the ‘customize a page’ window, but not as much as with a premium theme. I have added a media gallery (slideshow) and it comes up html text as such:
  [gallery type="slideshow"
  ids="305,319,287,289,313,314,291,294,293,292,296,299,298,301,317,315,282,310,311,285,283,309,302,308,307,303,286,318"]
  Now, as you will be able to see, the slideshow has a big grey border around that I would like to remove.
  I have tried everything from changing border colour to white, or to 0px, or to ‘none’, with !important, but nothing has worked! Help with this would be really really appreciated.
  Thank you,
  Anna

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

• 

  jsmutek · Member · Feb 10, 2015 at 2:14 pm

  • Copy link

  Hi there!

  Try adding this to your custom CSS:

  /**
   Slideshow Background Override
   Sets slideshows to inherit bg color &
   border from parent element.
   */
  
  #content .slideshow-window, .jetpack-slideshow {
      background-color: inherit;
      border: inherit;
  }

  Let us know if this helps.

• 

  annaviolidekker · Member · Feb 10, 2015 at 2:39 pm

  • Copy link

  Hi jsmutek!
  Thanks a lot for your reply.
  I added what you suggested but the page doesn’t change :(
  Maybe you are referring to some Custom CSS panel that I don’t have, given that I’m working in the page editor, with options between visual (WYSIWYG) editor and HTML (text) editor. I’m pretty new to this, but I think I need an HTML solution, if that’s any different from a CSS one?

  The way it looks now in HTML editor is:
  [gallery type="slideshow" /** Slideshow Background Override Sets slideshows to inherit bg color & border from parent element. */ #content .slideshow-window, .jetpack-slideshow { background-color: inherit; border: inherit;}
  ids="305,319,287,289,313,314,291,294,293,292,296,299,298,301,317,315,282,310,311,285,283,309,302,308,307,303,286,318"]

• 

  jsmutek · Member · Feb 10, 2015 at 6:59 pm

  • Copy link

  Hey there – – it looks like what you are trying to do there is insert CSS code into your shortcode – that’s not going to work.

  The shortcode is the small block of code that’s enclosed in the squared braces [ ] – shortcodes do all kinds of cool stuff, but they do no not generally accept CSS arguments. You should read a bit more about shortcodes here.

  The bit of code that I posted will work for you but you have to have the custom design feature in order to use it. Do you have a premium or business plan?

  If so, just navigate to Appearance → Customize → CSS, and paste the code into the custom CSS panel and you’ll be all set.

  Hope that helps!

• 

  annaviolidekker · Member · Feb 11, 2015 at 12:27 am

  • Copy link

  Hey,
  I’m sorry I see that I indeed mixed up CSS and HTML in my first post. I have a free wordpress theme and no premium package, so I’m pretty much stuck to shortcodes. But I’ve worked my way around it so far! Thanks for referring me to the shortcodes explanation, I read there that I would need an upgarde to remove the border of the slideshow.
  Also found this post, for whoever was thinking the same thing: https://en.forums.wordpress.com/topic/slideshow-gallery-issue-background-colour?replies=8
  Thanks again for your help!