Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Css Help Rate Topic   - - - - -

 
  • Takestock
  • Senior Member
  • Members
  • Join Date: 08-Nov 13
  • 464 posts

Posted 14 May 2018 - 06:42 PM #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



 
  • johnbol1
  • Never Re
  • Members
  • Join Date: 23-Feb 10
  • 4385 posts

Posted 14 May 2018 - 08:37 PM #2

probably

 

.tygh-footer:

{

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

}


Custom printed hi visibility clothing sale the UK's online hivis safety shop
v4.5.2


 
  • Takestock
  • Senior Member
  • Members
  • Join Date: 08-Nov 13
  • 464 posts

Posted 14 May 2018 - 09:54 PM #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



 
  • alaa
  • Advanced Member
  • Trial users
  • Join Date: 18-Mar 18
  • 69 posts

Posted 15 May 2018 - 05:17 AM #4

I think you can change the footer background from the Theme Editor. See this resource: https://docs.cs-cart...me_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.



 
  • Takestock
  • Senior Member
  • Members
  • Join Date: 08-Nov 13
  • 464 posts

Posted 15 May 2018 - 12:23 PM #5

I think you can change the footer background from the Theme Editor. See this resource: https://docs.cs-cart...me_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