I'm using Meta Slider as a presentation tool on my Photography site.

When I set it up on my test site I removed the background from the slider by inserting the following into HTML/CSS Inserts:

.theme-bar .nivoSlider {
background: transparent;
}

However when I do the same thing on the active site, the background remains white and the rounded corners of the slider show that. I see this when I "Inspect Element" but it is stroked out. (Shows up but has a line through it. I added another bit to see if I could remove the border, but it seems that, for some reason, the items I'm adding to HTML/CSS Inserts that are to work on Meta Slider are being stopped.

Active site is http://normhamilton.ca/photography/r...e-photography/

I've been at this for a few hours now so am hoping someone here can find what I'm missing.

Norm

You have a syntax error in your CSS inserts...there is a double closing bracket '}}' causing everything after it to be ignored.

div#wrapper, td#middle{ width:auto; }}.hentry img{max-width:100%; height:auto !important;display:block !important;}.theme-bar .nivoSlider{ background:transparent}.theme-bar.slider-wrapper{ border:0px solid #000; }</style>
<script type="text/javascript">

Thanks, Juggledad. I corrected that, and found another as well.

However, the background of the slider is still not transparent. Interestingly, the same extra } was in the HTML/CSS Inserts of the test site, but it worked. I've removed it there and it still works.

I added the following to the bottom of the HTML/CSS Inserts of the active site and the body color changed as it should have. That means the syntax is OK, right?

body {
background-color: #00ffff;
background-image: none;
}

Looks right now, except for the 1px border

UPDATE!
I just added !important to each of these and it seems to have done the trick.

.theme-bar .nivoSlider {
background: transparent !important;
}

.theme-bar.slider-wrapper {
border: 0px solid #000 !important;
}