Help modify the look of the WooSlider
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I've just installed wooslider on my site , on the front page at http://www.shuttermuse.com

It has a coming soon plugin running so you'll have to access the site by first going to shuttermuse.com/test

You'll see the wooslider at the top of the page above the static header image.

I want to modify the css for the Wooslider to remove all padding from around it and to remove the shadow border around it as well. Essentially I want it to look exactly like the static image header on there, except that it is a slide. So it should be full width and not with all that padding around it.

Solved it myself ...... and I can't see a way to end this so I guess just don't post any more solutions... for the curious out there I added body .wooslider .slide-content {margin: 0 !important;} #slider { display: block; margin: 0 auto; max-width: 1050px; padding: 0 0px; position: relative; Then in the header.php file <div id="slider" class="clearfix hfeed"> just before inserting the code to call the slider. Seems to work!
Whistlerdan over 6 years ago

Crowdsource coding tasks.

2 Solutions


First step is to remove the border, shadow, etc.

flexslider.css

[line 42 before] .wooslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}

[line 42 after] .wooslider {background: #fff; zoom: 1;}
I'll let someone else tackle the rest.. ;)
skram over 6 years ago
Thanks, if I remove all of that then the navigation arrows seem to jump right down to the middle of the page. There must be another bit within all of that which puts them in the right place and needs leaving in place ?
Whistlerdan over 6 years ago
Yeah - add position: relative; back in
skram over 6 years ago
Thanks skram, tipped! Now who wants to tacle the rest of it ? :)
Whistlerdan over 6 years ago

It's like a hacking method but here is my solution,

after all stylesheet documents,

  <style type="text/css">          
      .wooslider-id-1 {
          width: 1050px;
          margin-left: -25px;
      }
      body .wooslider .slide-content {
          margin: 0;
      }
  </style>

Here is a Demo Page.

With this method though you loose the responsive nature of the slide which is the reason for using it :( I take it from this that the padding I see around the slider on my page then is not something specifically from the CSS or else one of you guys would have had this done in a few minutes. I assume then that the wooslider must take on the dimension of some container.... in which case is it possible to create a new container for it which has a width of 1050 max ?
Whistlerdan over 6 years ago
View Timeline