Can't find the location to change colour of slider plugin

[Noz03]

So I am trying to find which CSS code to change for the background of the slideshow plugin I have on my page, but no matter how hard I try I can't seem to find it using the inspector tool, have been trying for over an hour now

 

Could anyone help point me in the right direction!

 

The page with the slider is http://dannorrisphotography.net/portraits/ Obviously I don't want the background of the slider to be black on a white page.

 

PS sorry for being such a noob!

Edited April 27, 2016 by Noz03

[dsonesuk]

#bwg_container1_0 #bwg_container2_0 .bwg_slideshow_image_wrap_0 {
background-color: #000000;
border-collapse: collapse;
display: table;
position: relative;
text-align: center;
}

 

Its on the page itself at line 154

[Noz03]

#bwg_container1_0 #bwg_container2_0 .bwg_slideshow_image_wrap_0 {

background-color: #000000;

border-collapse: collapse;

display: table;

position: relative;

text-align: center;

}

 

Its on the page itself at line 154

Unfortunately didn't work :'(

 

added this to the custom.css file which should override anything before it:

#bwg_container1_0 #bwg_container2_0 .bwg_slideshow_image_wrap_0 {
background-color: #FFFFFF;
}

Should work right? :/

[dsonesuk]

No! because the inline css styling on the page itself will have a higher precedence over the styling in external stylesheet.

 

try

body #bwg_container1_0 #bwg_container2_0 .bwg_slideshow_image_wrap_0 {
background-color: #FFFFFF;
}

or

#bwg_container1_0 #bwg_container2_0 .bwg_slideshow_image_wrap_0 {
background-color: #FFFFFF !important;
}

[Noz03]

 

No! because the inline css styling on the page itself will have a higher precedence over the styling in external stylesheet.

 

try

body #bwg_container1_0 #bwg_container2_0 .bwg_slideshow_image_wrap_0 {
background-color: #FFFFFF;
}

or

#bwg_container1_0 #bwg_container2_0 .bwg_slideshow_image_wrap_0 {
background-color: #FFFFFF !important;
}

Wohoo it worked! Thanks so much!

 

Just wondering, how did you find it out? I am also trying to change the button colour but it's also not working. When I change it on the firefox inspector tool it changes on the page so should be the right code but won't change from custom.css, even when I put body before or !important after :/

body #bwg_container1_0 #bwg_container2_0 .bwg_slideshow_dots_0 {
    background-color: #7A7A7A !important;
    background: #7A7A7A !important;
  }

[dsonesuk]

You have not closed one of your styling declarations with '}' correctly, so anything below it won't take affect.

[Noz03]

You mean this one:

body #bwg_container1_0 #bwg_container2_0 .bwg_slideshow_dots_0 {
    background-color: #7A7A7A !important;
    background: #7A7A7A !important;
  }

I did close it didn't I?

[dsonesuk]

/*

CUSTOM STYLESHEET

---------------------

 

Instructions:

 

Add your custom styles at the end of this file instead

of style.css so it is easier to update the theme.

Simply copy an existing style from style.css to this file,

and modify it to your liking.

*/

 

.supersized-pattern {

background: url(images/pattern/patternXXX.png);

}

 

 

element {

}

a:focus {

outline: thin dotted #333;

outline: 5px auto -webkit-focus-ring-color;

outline-offset: -2px;

}

a {

color: #404040;

text-decoration: none;

 

}

.copyrights {

color: #404040;

 

font-size: 14px;

font-family: "BebasNeueRegular", sans-serif;

font-weight: normal;

}

 

 

.progress-bar {

position: relative;

height: 0px;

background: #fff;

}

 

 

.slide-title a {

opacity: 0.0;

}

 

 

/*slider*/

 

 

 

body #bwg_container1_0 #bwg_container2_0 .bwg_slideshow_image_wrap_0 {

background-color: #FFFFFF;

 

 

/* EEEEERRRRRRR hello! shouldn't i be closed with a '}' if not! wouldn't below styling just sit there not doing anything */

 

element {

}

#bwg_container1_0 #bwg_container2_0 .bwg_slideshow_dots_deactive_0 {

}

#bwg_container1_0 #bwg_container2_0 .bwg_slideshow_dots_0 {

display: inline-block;

position: relative;

width: 12px;

height: 12px;

border-radius: 5px;

background: #FFFFFF;

margin: 3px;

cursor: pointer;

overflow: hidden;

z-index: 17;

}

 

#bwg_container1_0 #bwg_container2_0 .bwg_slideshow_dots_0 {

background-color: #7A7A7A !important;

background: #7A7A7A !important;

}