• Registered: 2008-08-13
  • Posts: 57

Topic: Creating a custom style, have questions...

This version is really amazing, so many new cool things, it's really great.

Despite the lack of an updated spink CSS editor, I'm hacking up a new custom style. I'm very much not a CSS guru, so there are a couple of things I'm having trouble with:

  • * In forum view, want to change spacing so that the forum name & details have more column priority. Right now there is a lot of column width given to the Topic & Post Counts & Date and it looks crappy on my fixed width forum.
    * Want to change the background color of odd & even entries in a thread; which css settings control this? I thought that this would do it:
    \0
    but it doesn't.
    * Want to change the font and list definitions in posts but couldn't find the .css for this.
    * The announcement spacing is different from the forum view and the post view... want it to be the same.
    * Want to change how the values for the user info (# of posts, IP, etc.) appears... cannot find this.

There are others, and I'm slowly making my way through it. In general, would appreciate it if the default theme's css was better commented to facilitate style creation. It's very tedious to go through and look at each page and try to guess & infer which css is going to affect which part of the source, especially with colors & styles split between files.

.brd .main-item .odd  {
    background: #F8D029;
    }
  • Registered: 2008-08-13
  • Posts: 57

Re: Creating a custom style, have questions...

Adding, would like to change the colors of the little square icons in the forum list, but could not find it in the .css. There was mention to the class icon, but nothing I tried worked.

  • Slavok
  • PunBB Developer
  • Offline
  • From: Russia
  • Registered: 2008-06-11
  • Posts: 1,238

Re: Creating a custom style, have questions...

Thanks to you we find some defects in CSS. We will fixed it.
If you use Mozilla Firefox, this extensions will help you to find class, id, css-property of elements to change it: Firebug,Web developer

Slavok's Website

  • Registered: 2008-08-13
  • Posts: 57

Re: Creating a custom style, have questions...

Ahh ok, great. I look forward to the next update.

Another user recently suggested Firebug, and it's awesome. Definitely useful (too bad I didn't use it for 90% of the custom style! tongue )

  • From: USA
  • Registered: 2008-11-27
  • Posts: 9

Re: Creating a custom style, have questions...

As for the alternating rows, when I added

.even .postbody, .even .post-author { background: red; }
.odd .postbody, .odd .post-author { background: blue; }

I could change the colors of some things in the post, and it can alternate. You could probably find other things to change there too.

  • Registered: 2008-08-13
  • Posts: 57

Re: Creating a custom style, have questions...

Thanks, that helps.

Following your lead, I tried to change the background of the post body and had some success, as shown in this image;
http://img266.imageshack.us/img266/8014/picture1be9.th.png

However, I would like the background of the entire post to be colored; so not only the frame of dark blue, but the light blue border surrounding it as well (but not past the Report Delete Topic... line).

I couldn't seem to decipher how to do this from the current layout. Is such a thing possible?

7 Reply by variousbagels (edited by variousbagels 2008-11-30 16:38)

  • From: USA
  • Registered: 2008-11-27
  • Posts: 9

Re: Creating a custom style, have questions...

Casemon wrote:

Thanks, that helps.

Following your lead, I tried to change the background of the post body and had some success, as shown in this image;


However, I would like the background of the entire post to be colored; so not only the frame of dark blue, but the light blue border surrounding it as well (but not past the Report Delete Topic... line).

I couldn't seem to decipher how to do this from the current layout. Is such a thing possible?

Okay I found some new things to change, but they don't come without their problems.

.even div, .even h3, .even ul, .even span, .even .postauthor { background: red!important; }
.odd div, .odd h3, .odd ul, .odd span, .odd .postauthor { background: blue!important; }

This will completely color the alternating posts, but they will also color [ code ] and [ quote ] boxes, and there is a gray area for guests who do not have any user information to fill in the column.
http://www.grabup.com/uploads/ba6de5df6fc0adb9a8050921cc2720fe.png?direct

Edit: found a workaround for one of the issues with the quote and code boxes.
Find in Oxygen_cs.css:

.brd .entry-content .quotebox, .brd .entry-content .codebox {
    background: #fff;
    border-color: #ddd;
    }

and change that to

.brd .entry-content .quotebox, .brd .entry-content .codebox {
    background: #fff!important;
    border-color: #ddd;
    }

And it works perfectly.

  • Registered: 2008-08-13
  • Posts: 57

Re: Creating a custom style, have questions...

Yes, I noticed that too wink

Am slowly making my way through it and am seeing results. Found this to be useful;

.odd .post-entry, .brd .odd .postbody, .brd .odd .posthead {
    background: blue;
    border-left-color: blue;
}

Similar for .even.

Also, to rid yourself of that block under James-Guest, comment out the background declaration in:

.brd .post {
/*    background: #EDF1F5;*/
    }

  • Registered: 2008-08-13
  • Posts: 57

Re: Creating a custom style, have questions...

Here's what I have at the moment;

http://img152.imageshack.us/img152/4826/picture1fh4.th.png

  • From: Russia
  • Registered: 2008-11-11
  • Posts: 32

Re: Creating a custom style, have questions...

Who can help me to make the column of last post wider?

http://img184.imageshack.us/img184/9315/lastpostak0.th.png

11 Reply by downliner (edited by downliner 2008-12-06 01:02)

  • Registered: 2005-03-07
  • Posts: 362

Re: Creating a custom style, have questions...

padizar wrote:

Who can help me to make the column of last post wider?

Don't know if you're still looking for this info but maybe someone else will be searching for it one day..... smile

Open: Oxygen.css

Find: Line 917

.brd .main-content .main-item ul {
    width: 34em;
    right: -35em;
    margin-left: -34em;
    }

Change to:

.brd .main-content .main-item ul {
    margin-left:-44em;
    right:-35em;
    width:44em;
}

You'll also need to update the "Replies/Views/Last Post" column.....

.brd .item-summary .info-topics,
.brd .item-summary .info-replies {
    margin-left: 100%;
    text-align: center;
    width: 7em;
    left: 965em;
    }

.brd .item-summary .info-forum {
    margin-left: 100%;
    text-align: center;
    width: 20em;
    left: 952em;
    }
.brd .item-summary .info-posts,
.brd .item-summary .info-views {
    margin-left: 100%;
    text-align: center;
    width: 7em;
    left: 972em;
    }

.brd .item-summary .info-lastpost {
    margin-left: 100%;
    left: 980em;
    }

Change to:

.brd .item-summary .info-topics,
.brd .item-summary .info-replies {
    margin-left: 100%;
    text-align: center;
    width: 7em;
    left: 955em;
    }

.brd .item-summary .info-forum {
    margin-left: 100%;
    text-align: center;
    width: 20em;
    left: 952em;
    }
.brd .item-summary .info-posts,
.brd .item-summary .info-views {
    margin-left: 100%;
    text-align: center;
    width: 7em;
    left: 962em;
    }

.brd .item-summary .info-lastpost {
    margin-left: 100%;
    left: 970em;
    }

Tested in IE6 and FF3 smile

Punbb mods & styles

downliner's Website

  • From: Russia
  • Registered: 2008-11-11
  • Posts: 32

Re: Creating a custom style, have questions...

downliner, thank you for your help. smile