[richpearsonwd]

Hi Guys,

Where are the styles located for the slider title, sub text and buttons please?

I want to move them down in the image, add a rounded corner background all in css

Cheers
Rich

[Juanfra Aldasoro]

Hi Rich,

Thanks for writing. Are you familiar with Firebug or the Chrome dev tools?

The classes are these:
– .slide-info{} /* with the padding-top property you manage the position of the slider information within the slide*/
– .flex-caption h2{} /* the styles of the title */
– .flex-caption p{} /* the styles of the slide description */

Best,
Juan.

[richpearsonwd]

Ok thanks I have added the following which works, however, the opacity setting which I need is effecting the text as well, how can I make the backgrounds have opacity but the text not? I’m assuming I need 2 new divs for this but again it’s a case of where do I put these in the code to make that work?

http://demo.cornwallitservices.nhs.uk/consultant/

.flex-caption{
position: absolute;
left: 0;
padding: 15px 15px 15px 15px;
max-width: 50%;
text-shadow: 0 0px 0 rgba(0, 0, 0, 0);
}

.flex-caption h2{
font-size: 30px;
line-height: 40px;
padding: 15px 15px 15px 15px;
margin-bottom: 20px;
color: #fff;
background-color: #3b7ec0;
filter: alpha(opacity=50);
opacity: 0.5;
-moz-border-radius: 25px;
border-radius: 25px;

}

.flex-caption p{
color: #000000;
font-weight: 500;
font-size: 15px;
line-height: 22px;
margin: 0 0 10px;
padding: 15px 15px 15px 15px;
background-color: #ffffff;
filter: alpha(opacity=50);
opacity: 0.5;
-moz-border-radius: 25px;
border-radius: 25px;

}

.slide-info{
left: 0;
padding-top: 360px;
position: absolute;
top: 0;
width: 100%;
}

[Juanfra Aldasoro]

Hi Rich,

I would play around with the rgba color instead of using opacity.

Example: background: rgba(0,0,0,0.5); /* black, with 0.5 opacity */

There are tools to convert hexadecimal values to RGB, example: http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php

Best,
Juan.