Jump to content


Photo

Css Gradient Background


Best Answer Rob , 04 December 2012 - 11:44 PM

I think the issue is that PlatformPro doesn't use CSS3 or HTML5.  As a result, style code in CSS3 will likely not work properly. Legacy products using gradients such as iBlogPro4 used graphic backgrounds, not CSS.

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 frygurl

frygurl

    Member

  • Members
  • 25 posts
  • Country: Country Flag

Posted 28 November 2012 - 10:16 PM

I would like a site I'm working on to have a simple linear gradient that scales. I found CSS gradient generators online, but when I paste the custom CSS - nothing changes. Here is an example of the code I am using:

 

 

background: linear-gradient(to bottom,  #ffffff 0%,#91e9e2 100%);
 
 
I would appreciate help with this! Thanks so much.
 
 


#2 batman

batman

    Bat Learning

  • Members

  • 1733 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 28 November 2012 - 10:51 PM

Hi

First you try with

background: linear-gradient {YOUR CODE;}

This is the format 



#3 frygurl

frygurl

    Member

  • Members
  • 25 posts
  • Country: Country Flag

Posted 28 November 2012 - 11:35 PM

Thanks for pointing that out. I changed the code, but it still doesn't work. Has anyone done this successfully? 



#4 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 29 November 2012 - 12:59 AM

Which area are you apply the code to? What is the gradient being used to color? You'd need to use firebug to find the selector of the item you're intending to adjust and apply your code. Such as below, #nav is the item being adjusted.

 

 
#nav {background:#ffffff;} 

If you need more info on css check out http://www.w3schools...css/default.asp

 

You can download firebug from www.getfirebug.com



#5 frygurl

frygurl

    Member

  • Members
  • 25 posts
  • Country: Country Flag

Posted 03 December 2012 - 11:20 PM

I want to apply the gradient to the main page background. I've used firebug and tried this, but no luck:

 

#page-canvas {background: linear-gradient{to bottom,  #ffffff 0%,#91e9e2 100%;}



#6 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 December 2012 - 11:58 PM

Hi there, depending on the setup of your site it will either be .canvas or .page-canvas (not #page-canvas as its a class so needs a .before).

 

Also gradients have different codes for different browsers, so you'll need to make sure you accommodate them all

 

 
.gradient-bg {
   /* fallback/image non-cover color */
   background-color: #1a82f7; 

   /* fallback image */
   background-image: url(images/fallback-gradient.png); 

   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));

   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}

More info can be found here - http://css-tricks.com/css3-gradients/


  • batman likes this

#7 frygurl

frygurl

    Member

  • Members
  • 25 posts
  • Country: Country Flag

Posted 04 December 2012 - 07:45 PM

Thank you. I'm still having trouble with this, but I think I'm on the right track. I'll keep working on it. 



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 December 2012 - 11:44 PM   Best Answer

I think the issue is that PlatformPro doesn't use CSS3 or HTML5.  As a result, style code in CSS3 will likely not work properly. Legacy products using gradients such as iBlogPro4 used graphic backgrounds, not CSS.