NiceThemesMoving slider styles position and adding background css with rounded corners – NiceThemes http://nicethemeswp.com/forums/topic/moving-slider-styles-position-and-adding-background-css-with-rounded-corners/feed/ Wed, 23 Apr 2025 15:05:03 +0000 http://bbpress.org/?v=2.5.12-6148 en-US http://nicethemeswp.com/forums/topic/moving-slider-styles-position-and-adding-background-css-with-rounded-corners/#post-2408 <![CDATA[Moving slider styles position and adding background css with rounded corners]]> http://nicethemeswp.com/forums/topic/moving-slider-styles-position-and-adding-background-css-with-rounded-corners/#post-2408 Fri, 08 Nov 2013 10:46:38 +0000 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

]]> http://nicethemeswp.com/forums/topic/moving-slider-styles-position-and-adding-background-css-with-rounded-corners/#post-2415 <![CDATA[Reply To: Moving slider styles position and adding background css with rounded corners]]> http://nicethemeswp.com/forums/topic/moving-slider-styles-position-and-adding-background-css-with-rounded-corners/#post-2415 Fri, 08 Nov 2013 11:16:27 +0000 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.

]]> http://nicethemeswp.com/forums/topic/moving-slider-styles-position-and-adding-background-css-with-rounded-corners/#post-2416 <![CDATA[Reply To: Moving slider styles position and adding background css with rounded corners]]> http://nicethemeswp.com/forums/topic/moving-slider-styles-position-and-adding-background-css-with-rounded-corners/#post-2416 Fri, 08 Nov 2013 11:24:50 +0000 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%;
}

]]> http://nicethemeswp.com/forums/topic/moving-slider-styles-position-and-adding-background-css-with-rounded-corners/#post-2419 <![CDATA[Reply To: Moving slider styles position and adding background css with rounded corners]]> http://nicethemeswp.com/forums/topic/moving-slider-styles-position-and-adding-background-css-with-rounded-corners/#post-2419 Fri, 08 Nov 2013 11:45:14 +0000 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.

]]>