Archived

This topic is now archived and is closed to further replies.

  • 0

Carousel


Question

Posted · Report post

Hi I am having an issue with the Carousel colour which Catrina has tried to help me with but with no joy.

the carousel for some reason has decided to display a pink colour and i want it to be grey or just white, we have tried to change some of the css but still with no joy.

here is whet we have tried.

 


#page .section-carousel .content ul li a img, #page .section-carousel .content ul li a:hover img {box-shadow: 0 1px 4px #CCCCCC !important;}

 

#page .section-carousel .content ul li a img, #page .section-carousel .content ul li a:hover img {box-shadow: 0px !important;}

 

#page .section-carousel ul li a img {box-shadow: 0px !important;}

 

#page .section-carousel ul li a img {box-shadow: none !important;}

 

i dont really understand css, can anyone help me?

 

here is the website

 

http://www.planningserviceswarwickshire.co.uk/

 

many thanks.

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

Hi martinjrob

You can try with

 

 

.section-carousel .thecarousel {
    background-color: #cccccc;
    background-image: -moz-linear-gradient(center top , #cccccc, #cccccc;
    background-repeat: repeat-x;
    border: 1px solid #cccccc;
    box-shadow: 1px 1px 0px #cccccc inset;}
 

 

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you Batman :-) Let us know if that solution works for you Martin

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you for letting me answer James B...

:) 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Batman

 

Thank you for the code but it's still showing as a pink colour.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

 

I recommend using Firebug or your browsers built-in web dev tools and inspect the Carousel section to find the correct code.

 

For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/

 

You will most likely need to use a PageLines override, I have provide below the correct elements and override to get you started. Apply your background, border etc.. to the code below and it should resolve your pink issue.

 

#site .section-carousel .thecarousel { }

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny

 

Thanks for your reply but the problem i have is i am not sure what code i need to change and i am also not sure of what i am looking for using firebug.

Share this post


Link to post
Share on other sites

Posted · Report post

You will need to inspect the Carousel, when you do go through each of the divs until you find where the pink is coming from (see image below).

http://cl.ly/image/3J252v1N460F

In the image above, I am using Google Chromes we dev tool, you can see the CSS which is used to give the carousel its pink color. You can use this code in the example I gave you in my previous post and replace the pink color with your preferred color.

 

There is a step by step guide on how to use the web dev tool on our custom CSS documentation.

 

http://support.pagelines.me/docs/customization/custom-css/

Share this post


Link to post
Share on other sites

Posted · Report post

Hi 

I have tried the options you have given to me.

i have used the code

 

 

.section-carousel .thecarousel {
    background-color: #cccccc;
    background-image: -moz-linear-gradient(center top , #cccccc, #cccccc;
    background-repeat: repeat-x;
    border: 1px solid #cccccc;
    box-shadow: 1px 1px 0px #cccccc inset;}
 
I am now getting an error message
 
parse error: failed at `background-image: -moz-linear-gradient(center top , #cccccc, #cccccc; ` line: 984
 
please can someone help me and give me some advice on how i can fiw it.
thanks in advance Martin

Share this post


Link to post
Share on other sites

Posted · Report post

A parse error means you have an error in your custom CSS. Therefore, you will need to inspect your custom CSS for any errors. From what I can see you're missing a closed ) in the background image code.

 

Also, a quick tip, that gradient CSS is for mozilla browsers, therefore, if you view your site in Chrome, Safari etc... there will be no gradient style. I recommend you view this site for getting the correct gradient code that will work in all browsers.

 

http://www.colorzilla.com/gradient-editor/

Share this post


Link to post
Share on other sites