Noz03 Posted April 26, 2016 Share Posted April 26, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted April 27, 2016 Share Posted April 27, 2016 #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 Link to comment Share on other sites More sharing options...
Noz03 Posted April 27, 2016 Author Share Posted April 27, 2016 #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? :/ Link to comment Share on other sites More sharing options...
dsonesuk Posted April 27, 2016 Share Posted April 27, 2016 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; } 1 Link to comment Share on other sites More sharing options...
Noz03 Posted April 28, 2016 Author Share Posted April 28, 2016 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; } Link to comment Share on other sites More sharing options...
dsonesuk Posted April 28, 2016 Share Posted April 28, 2016 You have not closed one of your styling declarations with '}' correctly, so anything below it won't take affect. Link to comment Share on other sites More sharing options...
Noz03 Posted April 28, 2016 Author Share Posted April 28, 2016 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 28, 2016 Share Posted April 28, 2016 /* 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; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now