Styling Simple Slider elements

[mattpitts74]

Hi There

I have just installed the simple slider module which all works very well, but I need to style the text that appears along with the slideshow, could some explain the best way of doing this?

Should I setup a separate css file or just add it to an existing one?

Also which elements can be styled using CSS, I have searched the forum but not had any luck finding the answer.  Any help would be much appreciated.

[Dr.CSS]

This would be a case of a link helping a lot, otherwise someone will have to install it to find what your looking for, or you could use firefox with the web dev. toolbar and look at the generated page source which is different than just page source...

[mattpitts74]

Hi

The page in question is http://www.khwp.org.uk/index.php?page=home and I am struggling to get the slideshow to left align with the rest of the content on this page??  

i am also having trouble changing the link text to a colour other than blue which will show up on a semi transparant background.  I think its mainly due to only having a basic grasp of css styling!!

Any suggestions would be welcome

[Dr.CSS]

I don't see any slide show on that page...

You need to activate the 4th level css for your menu, is why on one menu item it shows 3 levels before it should...

[mattpitts74]

I have been trying to figure out the styling for the slideshow module across different browers firefox and IE6 I have had to put a left margin into the img div of -35px to get this element to align in firefox, but there are still problems in IE6.  The slideshow doesn't appear the size that I have specified in both the css and the module back end and I don't understand why, am I missing something here??

#simpleslider {
   width: px;
   height: px;
position: relative;
   overflow: hidden;
}

#simplesliderContent{
    width: 620px;
    position: absolute;
top: 0;
margin-left: 0;
}
.simplesliderImage{
    float: left;
    position: relative;
display: none;
               
}
.simplesliderImage span {
    position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: px;
    background-color: #333333;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
-khtml-opacity: 0.6;
    opacity: 0.6;
    color: white;
    display: none;
}

.clear {
clear: both;
}

.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
    left: 0;
}
.left {
top: 0;
    left: 0;
width: 110px !important;
height: 280px;
}
.right {
right: 0;
bottom: 0;
width: 90px !important;
height: 290px;
}
ul, li{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ul {
list-style: none;
}
div#simpleslider a{
color: white;
font: 12px Arial, Helvetica, Geneva, sans-serif;
}

div#simpleslider img{
border: 0px;
width: 620px;
margin-left: -35px;
}

[Jos]

The page in question is http://www.khwp.org.uk/index.php?page=home

I don't see any slide show on that page...

I don't see a slideshow there either. And I also don't see the css you posted 

[mattpitts74]

Sorry I just moved the slideshow to here http://www.khwp.org.uk/index.php?page=test-2

as this is a live website and it was screwing up the home page

[Jos]

You need to put the style code in the head section of the page.

Also try to solve other html validation errors, because they may mess up things for you too. http://validator.w3.org/check?uri=http% ... ne&group=0