• Registered: 2015-05-25
  • Posts: 8

Topic: Create gradient background [SOLVED]

I'd like to establish a gradient background to use as an occasional override.

I tried creating a 5 pixel gradient in photoshop, uploaded to library and using it as the background url, but didn't get satisfactory results using any of the settings. I assumed horizontal tiling would work but no luck and not sure what width it should be to  get full width coverage.

Thanks for any help, just tarted using Jukebox and Showcase, gotta say they are perfect for what I do.

Cy

  • Registered: 2012-12-16
  • Posts: 940

Re: Create gradient background [SOLVED]

It might be easier to use CSS to achieve a gradient background rather than an image.
For example, if you wanted to use a gradient background on all pages throughout the Kosel theme, you could add the following code to the 'showkase/_themes/kosel/css/custom.css' file:

body {
    background: -webkit-linear-gradient(#ff0000, #0000ff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ff0000, #0000ff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ff0000, #0000ff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ff0000, #0000ff); /* Standard syntax */
    background-attachment: fixed;
    background-repeat: no-repeat;
}

If you wanted the gradient background to be applied only to 'Basic' pages (for example), then you could replace:

body {

... with:

body.type-basic  {

You could also apply it to only a certain page by checking the page number in the class attribute of the <body> tag of the page in question and then using something like:

body.page-12 {

You can change the gradient parameters as necessary.Please see here for details.
More information about using the 'custom.css' files within Showkase can be found here.

  • Registered: 2015-05-25
  • Posts: 8

Re: Create gradient background [SOLVED]

Thanks for the speedy reply Stephen.

Actually what I'd really like is to have the body on all pages black and the container where the viewer goes a gradient.

I'd like the 'basic' , gallery image and jukebox viewer pages to have the gradient in the container.

Is there a way to do that?

  • Registered: 2012-12-16
  • Posts: 940

Re: Create gradient background [SOLVED]

If you want only the content section of Basic, Gallery Index and Juicebox Gallery pages to have a gradient background, then try the following code in your theme's 'custom.css' file:

body.type-basic section.content, body.type-galleryindex section.content, body.type-juicebox section.content {
    background: -webkit-linear-gradient(#ff0000, #0000ff);
    background: -o-linear-gradient(#ff0000, #0000ff);
    background: -moz-linear-gradient(#ff0000, #0000ff);
    background: linear-gradient(#ff0000, #0000ff);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

Also, you will need to ensure that your Juicebox galleries have transparent backgrounds by setting the Gallery Background Opacity to '0' (zero) in the gallery settings in the Showkase interface.

  • Registered: 2015-05-25
  • Posts: 8

Re: Create gradient background [SOLVED]

Hi again Steven. I truly appreciate your quick replies and your excellent advise.

My web site format is pretty well 100%, just have to upload many more pics - sayles (dot) ca if you're interested

Thanks,

Cy

  • Registered: 2012-12-16
  • Posts: 940

Re: Create gradient background [SOLVED]

You're welcome!
I'm glad you've got your gradient background in the locations you wanted.