• Registered: 2009-02-20
  • Posts: 37

Topic: How can I add gradients into the default oxygen style

Well, everything is on the title... I had a look at he italian forum here: Punbb-italia.it and I see they are using gradients into the bars.

I wanted to know how I could modify the default oxygen style to have blue gradients into the bars. I made a search, and found this topic: PLEASE help me customise my punBB like this but it's about 1.2 and I would like to make this little change on the 1.3.2 default style. If anyone can give me some help and/or advices it would be very much appreciated, thank you smile

2 Reply by Programming-Designs (edited by Programming-Designs 2009-02-20 20:25)

  • Registered: 2005-11-11
  • Posts: 122

Re: How can I add gradients into the default oxygen style

Modify the CSS file oxygen_cs.css or whatever (pulled from his site):

.brd .main-head, .brd .main-foot {
background:#99A63C url(img/cat_bg.gif) repeat scroll 0 0;
color:#FFFFFF;
height:30px;
}

Replace cat_bg.gif with your gradient pic.

Google "Firebug" -- it's a great extension for Firefox that makes it really easy to find these things.

  • Registered: 2009-02-20
  • Posts: 37

Re: How can I add gradients into the default oxygen style

Thanks you for your fast answer, I'll give it a try and report feedback smile

  • Registered: 2009-02-20
  • Posts: 37

Re: How can I add gradients into the default oxygen style

Wow, it's working fine big_smile

I found this little tool that helped me a lot: Gradient online generator, you can easily customize your gradients size and color with it.

Thank you for the tip Programming-Designs smile

It is nice on the forum categories but when I put the same code in the announcement section:

.brd #brd-announcement h1 {
background:#1f537b url(http://www.mysite.fr/forum/img/grad/gradi1blue.png) repeat scroll 0 0;
color:#FFFFFF;
height:30px;
}

it gives me this:

http://ups.imagup.com/02/1235185093_bug-annonce.png

So as you can see the banner is not wide enough to feet the forum size (there is a blank space on the left and the right of the banner), and it's not displayed as it should be. Is seems to output the gradient smaller, and the color I choosed as "background" in the bottom.

Here is the nice result for the categories:

http://ups.imagup.com/02/1235185331_test-category-ok.png

Is there a way to make the announcement banner look the same as the categories banner?

5 Reply by Programming-Designs (edited by Programming-Designs 2009-02-20 22:33)

  • Registered: 2005-11-11
  • Posts: 122

Re: How can I add gradients into the default oxygen style

Use:

.brd #brd-announcement h1 {
background:#1f537b url(http://www.mysite.fr/forum/img/grad/gradi1blue.png) repeat-x;
color:#FFFFFF;
height:30px;
}

This way the background only repeats horizontally and not vertically (thats what repeat-x means, before it was repeating both vertically and horizontally). The other option would to increase the height of the gradient image to be 30px or vice versa (changing 30px to whatever the height of the gradient image is).

6 Reply by Etoile (edited by Etoile 2009-02-20 22:55)

  • Registered: 2009-02-20
  • Posts: 37

Re: How can I add gradients into the default oxygen style

The result is just the same as I posted on the picture above. In fact, the gradient is not really repeating itself, it has 30 px height, and beside, dunno why, there are a few pixels of the background color. The announcement banner seems to be a little different than the other banners, by default there are little ----- just under the "announcement" text:

http://ups.imagup.com/02/1235191115_announce-default.png

And it seems that the modified banner starts when the --- starts on the default banner, so it's not wide enough. That seems kinda tricky to modify... hmm

Anyway, thanks for the useful help big_smile