Jump to content
Noz03

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

Recommended Posts

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! :fool:

Edited by Noz03

Share this post


Link to post
Share on other sites

#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

Share this post


Link to post
Share on other sites

#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? :/

Share this post


Link to post
Share on other sites

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;
}
  • Like 1

Share this post


Link to post
Share on other sites

 

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;
  }

Screenshot012.jpg

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites


/*

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;

}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...