• Registered: 2009-02-06
  • Posts: 9

Topic: Changing the Oxygen Style or Creating a New One

Just installed PunBB over SMF, phpBB and BBPress through Bluehost using Simple Scrpits.

As I am totally new to this and given that I am not very savvy with changing the style sheets.

I like to have our forum adapt to the design of our baby stroller site.

http://www.strollerlife.com

Right now, I have installed the forum at http://www.strollerlife.com/Forum.

Can someone be kind and run me through how I might be able to change the background and header of the oxygen style to the pink background and our logo on the header?

Please help.

Thanks.

Francis

2 Reply by Programming-Designs (edited by Programming-Designs 2009-02-06 18:12)

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

Re: Changing the Oxygen Style or Creating a New One

If your serious about customization of the forums I suggest using Firebug (Firefox plugin): www.getfirebug.com

It will allow you to easily find the css attributes of elements that you hover over which can be very useful.

Example: Hovering over the top area I find it is called #brd-head. So editing the HTML directly with firebug I put:

<style type="text/css">
#brd-head{
    background-color: #ff0000;
}
</style>

That would turn the top blue area red. If I actually liked it that way I'd copy that code and paste it into /style/Oxygen/Oxygen_cs.css

Once you play around with the tool, you'll find making changes is really easy. I did my own forums this way.

As for the logo in your header area open up include/template/main.tpl and edit your logo to be below this (line 14):

<div id="brd-head" class="gen-content">
    <!-- forum_skip -->
    <!-- put logo here -->
</div>
  • Registered: 2009-02-06
  • Posts: 9

Re: Changing the Oxygen Style or Creating a New One

Hey Programming Designs,

Thanks for the suggestion of FireBug. I am having so much fun with it right now.

So assuming once I find the colours that I want, and I want to edit the CSS. Will something like EditCSS (Firefox Plugin) be the way to go or would I have to manually open the css file and copy and paste the code.

Also, how do you open a tpl file?

Sorry if the questions are really basic and stupid.

  • Registered: 2009-02-06
  • Posts: 9

Re: Changing the Oxygen Style or Creating a New One

Oh, one more thing.

In the tpl file, when you mean Put Logo Here. Do I actually put in the actual link of where the logo file is? Or should I be copying what you wrote up there and paste it in the tpl file?

  • Registered: 2009-02-06
  • Posts: 9

Re: Changing the Oxygen Style or Creating a New One

Hey Programming Designs.

I figured it out but I have one slight problem and another question.

If you look at the header now, http://www.strollerlife.com/Forum/index.php, My title and description is right beside my logo. How do I shift both of them to the right of the page and also lowering them to align with my logo?

Thank you so much for your patience.

  • Registered: 2009-02-06
  • Posts: 9

Re: Changing the Oxygen Style or Creating a New One

Oh the other question was. I want to change the main background of the forum to this http://www.strollerlife.com/images/StripePink.jpg.

But I can't seem to find where the background is using FireBug.

What can I do to successfully change the white background to the one I want?

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

Re: Changing the Oxygen Style or Creating a New One

FrancisHeng wrote:

Oh the other question was. I want to change the main background of the forum to this http://www.strollerlife.com/images/StripePink.jpg.

But I can't seem to find where the background is using FireBug.

What can I do to successfully change the white background to the one I want?

You can add into the body{ } the background element, in the css file, like this:

body{
     background: url('/images/StripePink.jpg');
}

As for the text description and logo stuff I forgot what I did to hide it.

  • Registered: 2009-02-06
  • Posts: 9

Re: Changing the Oxygen Style or Creating a New One

That's alright, I will try to figure it out.

Thank you so much for your guidance. Just one install of FireBug allowed me to do so much changes.

Really appreciate it.

  • Registered: 2009-02-06
  • Posts: 9

Re: Changing the Oxygen Style or Creating a New One

I decided to change the logo to float on the right and that solved everything!