Css Help

Developers Frontend
1

Hi guys

Most of the time I can do this no problem, but I am a bit stuck.

I am trying to change the background color of the full width footer of my site.

When I change the code using the developer code on in firefox I can get what I want no problem

.tygh-footer > div

{

.background-image: linear-gradient(to bottom,#FFcccc,#FFFFFF);

}

which is a light pink to white gradient.

My issue is that when I put this in custom css, it just does not work.

I have tried it with and without the > div

help greatly appreciated

2

probably

.tygh-footer:

{

.background-image: linear-gradient(to bottom,#FFcccc,#FFFFFF);

}

3

probably

.tygh-footer:

{

.background-image: linear-gradient(to bottom,#FFcccc,#FFFFFF);

}

Nope, I tried that. this site is also using the same theme, www.takestock.ie I want the area that has stay in touch, customer service etc with the background.

I have loads of custom css rules on the other site, and they all work it is just this area that I can't seem to figure out.

Alan

4

I think you can change the footer background from the Theme Editor. See this resource: https://docs.cs-cart.com/4.4.x/user_guide/look_and_feel/themes/theme_editor.html

If your theme doesn't support that, then add the following code to your CSS file: 

.tygh-footer > div {

background-image: -moz-linear-gradient(top,#FFcccc,#fff) !important;
background-image: -webkit-gradient(linear,0 0,0 100%,from(#FFcccc),to(#fff)) !important;
background-image: -webkit-linear-gradient(top,#FFcccc,#FFFFFF) !important;
background-image: -o-linear-gradient(top,#FFcccc,#fff) !important;
background-image: linear-gradient(to bottom,#FFcccc,#FFFFFF) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFcccc', endColorstr='#ffffffff', GradientType=0) !important;



}

This should be compatible with all browsers.

After doing this, don't forget to clear cash. Go to Administration - Storage - Clear Cache.

5

I think you can change the footer background from the Theme Editor. See this resource: https://docs.cs-cart.com/4.4.x/user_guide/look_and_feel/themes/theme_editor.html

If your theme doesn't support that, then add the following code to your CSS file: 

.tygh-footer > div {

background-image: -moz-linear-gradient(top,#FFcccc,#fff) !important;
background-image: -webkit-gradient(linear,0 0,0 100%,from(#FFcccc),to(#fff)) !important;
background-image: -webkit-linear-gradient(top,#FFcccc,#FFFFFF) !important;
background-image: -o-linear-gradient(top,#FFcccc,#fff) !important;
background-image: linear-gradient(to bottom,#FFcccc,#FFFFFF) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFcccc', endColorstr='#ffffffff', GradientType=0) !important;



}

This should be compatible with all browsers.

After doing this, don't forget to clear cash. Go to Administration - Storage - Clear Cache.

Thanks for that it worked a treat.

Alan