1

Topic: Minima look for PunBB

Though I haven't posted much lately, I've been actively following the forum and seen so many nice designs coming of late.

My blog: http://hcgtv.com/ - is using a skin I converted to Nucleus from the Blogger template called Minima, made by Douglas Bowman. It's a very popular and simple design and has been converted to many other blogs also.

My forum: http://hcgtv.net/ - has just been setup and I'd like it to look as similar to my blog as possible within means.

What I'm wondering is this:
a) What's the simplest way to make it the same size as my blog, width wise?
b) Are there any schemes, on punres, that I could use as a starting point?
c) Would it be better to hold off on spending a lot of time on a new design with 1.3 around the corner?

I'm not totally CSS illiterate nor am I a guru either, I guess I'm in between. Just looking to get the forum styled quickly this weekend.

Thanks.

2 (edited by Connorhd 2005-06-10 19:50)

Re: Minima look for PunBB

a) http://punres.org/doku.php?id=how-tos:c … orum_width
b) for a style like that Oxygen is probably as good a place as any to start
c) is it really round the corner wink

tbh i don't think it would take you that long, i'm "in between" as well and i think i could do it in less than an hour

edit: i'm having a look at it now, i'll see what i can come up with wink

3

Re: Minima look for PunBB

May I say you've all done a magnificent job at punres. What a way to take Pun and make it dance!

I did the same thing when I came across Nucleus, built a lot of sites from it for the community.

Thanks.

4 (edited by Connorhd 2005-06-10 20:56)

Re: Minima look for PunBB

ok well i've started at least wink
Minia.css

/****************************************************************/
/* 1. IMPORTED STYLESHEETS */
/****************************************************************/

/* Import the basic setup styles */
@import url(imports/base.css);
/* Import the colour scheme */
@import url(imports/Minima_cs.css);


body {
    background:#fff;
    margin:0;
    padding:20px 20px;
    font:x-small Georgia,Serif;
    text-align:center;
    color:#333;
    font-size/* */:/**/small;
    font-size: /**/small;
}

#brdtitle {
    margin:5px 5px 0;
    padding:20px 20px .25em;
    font-size:100%;
    line-height:1.2em;
    font-weight:normal;
    color:#666;
    text-transform:uppercase;
    letter-spacing:.4em;
    text-align: center;
}
#brdmenu {
    margin:0 5px 5px;
    padding:10px 20px 10px;
    max-width:700px;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#999;
    text-align: center;
}

h2 {
    margin:1.5em 0 .75em;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#999;
}
  
/****************************************************************/
/* 3. LINKS */
/****************************************************************/

/* 3.1 Remove underlining for main menu, post header links, post links and vertical menus */

#brdmenu A:link, #brdmenu A:visited, .blockpost DT A:link, .blockpost DT A:visited, .blockpost H2 A:link,
.blockpost H2 A:visited, .postlink A:link, .postlink A:visited, .postfootright A:link, .postfootright A:visited,
.blockmenu A:link, .blockmenu A:visited {
    TEXT-DECORATION: none
}

/* 3.2 Underline on hover for links in headers and main menu */

#brdmenu A:hover, .blockpost H2 A:hover {TEXT-DECORATION: underline}

/****************************************************************/
/* 4. BORDER WIDTH AND STYLE */
/****************************************************************/

/* 4.1 By default borders are 1px solid */

DIV.box, .pun TD, .pun TH, .pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {
    BORDER-STYLE: none;
    BORDER-WIDTH: 1px
}

.pun TD, .pun BLOCKQUOTE, DIV.codebox, #brdstats, #brdfooter {
    BORDER-TOP-STYLE: solid;
    BORDER-BOTTOM-STYLE: solid;
    BORDER-COLOR: #eee;
    BORDER-WIDTH: 1px;
}

.pun TABLE {
    BORDER-BOTTOM-STYLE: solid;
    BORDER-COLOR: #eee;
    BORDER-WIDTH: 1px;
}

/* 4.3 Borders for table cells */

.pun TD, .pun TH {
    BORDER-BOTTOM: none;
    BORDER-RIGHT: none
}

.pun .tcl {BORDER-LEFT: none}

/* 4.4 Special setting for fieldsets to preserve IE defaults */

FIELDSET {
    BORDER-STYLE: none;
}

/****************************************************************/
/* 5. VERTICAL AND PAGE SPACING */
/****************************************************************/

/* 5.1 Page margins */

HTML, BODY {MARGIN: 0; PADDING: 0}
BODY {text-align: center}
#punwrap {width: 660px; margin: 12px auto; text-align: left}

/* 5.2 Creates vertical space between main board elements (Margins) */

DIV.blocktable, DIV.block, DIV.blockform, DIV.block2col, #postreview {MARGIN-BOTTOM: 12px}
#punindex DIV.blocktable, DIV.blockpost {MARGIN-BOTTOM: 6px}
DIV.block2col DIV.blockform, DIV.block2col DIV.block {MARGIN-BOTTOM: 0px}

/* 5.3 Remove space above breadcrumbs, postlinks and pagelinks with a negative top margin */

DIV.linkst, DIV.linksb {MARGIN-TOP: -12px}
DIV.postlinksb {MARGIN-TOP: -6px}

/* 5.4 Put a 12px gap above the board information box in index because the category tables only
have a 6px space beneath them */

#brdstats {MARGIN-TOP: 12px}

/****************************************************************/
/* 6. SPACING AROUND CONTENT */
/****************************************************************/

/* 6.1 Default padding for main items */

DIV.block DIV.inbox, DIV.blockmenu DIV.inbox {PADDING: 3px 6px}
.pun P, .pun UL, .pun DL, DIV.blockmenu LI, .pun LABEL, #announce DIV.inbox DIV {PADDING: 3px 0}
.pun H2 {PADDING: 4px 6px}

/* 6.2 Special spacing for various elements */

.pun H1 {PADDING: 3px 0px 0px 0}
#brdtitle P {PADDING-TOP: 0px}
DIV.linkst {PADDING: 8px 6px 3px 6px}
DIV.linksb, DIV.postlinksb {PADDING: 3px 6px 8px 6px}
#brdwelcome, #brdfooter DL A, DIV.blockmenu LI, DIV.rbox INPUT  {LINE-HEIGHT: 1.4em}
#viewprofile DT, #viewprofile DD {PADDING: 0 3px; LINE-HEIGHT: 2em}

/* 6.4 Create some horizontal spacing for various elements */

DIV.rbox INPUT, DIV.blockform P INPUT  {MARGIN-RIGHT: 12px}

#brdmenu LI, DIV.rbox INPUT, DIV.blockform P INPUT  {MARGIN-RIGHT: 2px}

#brdmenu LI a  {MARGIN-RIGHT: 5px}

/****************************************************************/
/* 7. SPACING FOR TABLES */
/****************************************************************/

.pun TH, .pun TD {PADDING: 4px 6px}
.pun TD P {PADDING: 5px 0 0 0}

/****************************************************************/
/* 8. SPACING FOR POSTS */
/****************************************************************/

/* 8.1 Padding around left and right columns in viewtopic */

DIV.postleft DL, DIV.postright {PADDING: 6px}

/* 8.2 Extra spacing for poster contact details and avatar */

DD.usercontacts, DD.postavatar {MARGIN-TOP: 5px}
DD.postavatar {MARGIN-BOTTOM: 5px}

/* 8.3 Extra top spacing for signatures and edited by */

DIV.postsignature, DIV.postmsg P.postedit {PADDING-TOP: 15px}

/* 8.4 Spacing for code and quote boxes */

DIV.postmsg H4 {MARGIN-BOTTOM: 10px}
.pun BLOCKQUOTE, DIV.codebox {MARGIN: 5px 15px 15px 15px; PADDING: 8px}

/* 8.5 Padding for the action links and online indicator in viewtopic */

DIV.postfootleft P, DIV.postfootright UL, DIV.postfootright DIV {PADDING: 10px 6px 5px 6px}

/* 8.6 This is the input on moderators multi-delete view */

DIV.blockpost INPUT, DIV.blockpost LABEL {
    PADDING: 3px;
    DISPLAY: inline
}

P.multidelete {
    PADDING-TOP: 15px;
    PADDING-BOTTOM: 5px
}

/* 8.7 Make sure paragraphs in posts don't get any padding */

DIV.postmsg P {PADDING: 0}

/****************************************************************/
/* 9. SPECIAL SPACING FOR FORMS */
/****************************************************************/

/* 9.1 Padding around fieldsets */

DIV.blockform FORM, DIV.fakeform {PADDING: 20px 20px 15px 20px}
DIV.inform {PADDING-BOTTOM: 12px}

/* 9.2 Padding inside fieldsets */

.pun FIELDSET {PADDING: 0px 12px 0px 12px}
DIV.infldset {PADDING: 9px 0px 12px 0}
.pun LEGEND {PADDING: 0px 6px}

/* 9.3 The information box at the top of the registration form and elsewhere */

DIV.forminfo {
    MARGIN-BOTTOM: 12px;
    PADDING: 9px 10px
}

/* 9.4 BBCode help links in post forms */

UL.bblinks LI {PADDING-RIGHT: 20px}

UL.bblinks {PADDING-BOTTOM: 10px; PADDING-LEFT: 4px}

/* 9.5 Horizontal positioning for the submit button on forms */

DIV.blockform P INPUT {MARGIN-LEFT: 12px}

/****************************************************************/
/* 10. POST STATUS INDICATORS */
/****************************************************************/

/* 10.1 These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/

DIV.icon {
    FLOAT: left;
    MARGIN-TOP: 0.1em;
    MARGIN-LEFT: 0.2em;
    DISPLAY: block;
    BORDER-WIDTH: 0.6em 0.6em 0.6em 0.6em;
    BORDER-STYLE: solid
}

DIV.searchposts DIV.icon {MARGIN-LEFT: 0}

/* 10.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */

TD DIV.tclcon {MARGIN-LEFT: 2.3em}

Minima_cs.css

/****************************************************************/
/* 1. BACKGROUND AND TEXT COLOURS */
/****************************************************************/

/* 1.1 Default background colour and text colour */

BODY {BACKGROUND-COLOR: #FFF}

.pun {COLOR: #333}

/* 1.5 Fieldset legend text colour */

.pun LEGEND {COLOR: #005CB1}

/* 1.6 Highlighted text for various items */

.pun DIV.blockmenu LI.isactive A, #posterror LI STRONG {COLOR: #333}

/****************************************************************/
/* 2. POST BACKGROUNDS AND TEXT */
/****************************************************************/

/* 2.1 This is the setup for posts. */

DIV.blockpost DIV.box, DIV.postright, DIV.postfootright {BACKGROUND-COLOR: #fff}
DIV.postright, DIV.postfootright {BORDER-LEFT-COLOR: #fff}
DIV.postleft, DIV.postfootleft, DIV.blockpost LABEL {BACKGROUND-COLOR: #fff; }

/* 2.3 This is the line above the signature in posts. Colour and background should be the same */

.pun HR {BACKGROUND-COLOR: #eee; COLOR: #eee}

/****************************************************************/
/* 3. BORDER COLOURS */
/****************************************************************/

/* Title Borders */
#brdheader DIV.box {
    border:1px solid #eee;
    margin: 5px;
}
div.block#brdheader {
    border:1px solid #ccc;
}

/* 3.4 Creates the inset border for quote boxes, code boxes and form info boxes */

.pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {
    BORDER-COLOR: #eee;
}

/* 3.5 Gecko's default fieldset borders are really nasty so this gives them a colour
without interferring with IE's rather nice default */

.pun DIV>FIELDSET {BORDER-COLOR: #ACA899}

/****************************************************************/
/* 4. LINK COLOURS */
/****************************************************************/

/* 4.1 This is the default for all links */
a:link {
  color:#58a;
  text-decoration:none;
  }
a:visited {
  color:#969;
  text-decoration:none;
  }
a:hover {
  color:#c60;
  text-decoration:underline;
  }

/* 4.3 This is for closed topics and "hot" links */

LI.postreport A:link, LI.postreport A:visited, TR.iclosed TD.tcl A:link, TR.iclosed TD.tcl A:visited {COLOR: #888}
LI.postreport A:hover, TR.iclosed TD.tcl A:hover {COLOR: #AAA}
LI.maintenancelink A:link, LI.maintenancelink A:visited {COLOR: #B42000}
LI.maintenancelink A:hover {COLOR: #B42000}

/****************************************************************/
/* 5. POST STATUS INDICATORS */
/****************************************************************/

/* These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/

DIV.icon {BORDER-COLOR: #E6E6E6 #DEDEDE #DADADA #E2E2E2}
TR.iredirect DIV.icon {BORDER-COLOR: #F1F1F1 #F1F1F1 #F1F1F1 #F1F1F1}
DIV.inew {BORDER-COLOR: #0080D7 #0065C0 #0058B3 #0072CA}

The post indicators still need done, imo the h3 style from nucleus could be worked in, and viewtopic.php decluttered a bit, also i dunno if your bothered but admin looks a bit messy, i also added the css for adding ~ to "'Link separator'        =>    '~',    // The text that separates links in the navigator" in common.php in the lang files but that will mess with other styles if you leave them on

anyway i hope thats a good start smile

oh and btw sorry its all messy and not split properly into colour scheme and not colour scheme i'm just not as neat as paul wink

Re: Minima look for PunBB

Damn!
Beat me to it...


Ok, Connor. I'm going to take a look at your CSS and try to mesh both of ours together.
This is what I got after around 20min work.

http://punres.org/viewtopic.php?id=482

Re: Minima look for PunBB

nice, you should steal some of my header since mine is more like the original site, and maybe add the horizontal lines from mine? no idea what the post view looks like on yours it looks very crowded on mine

7

Re: Minima look for PunBB

Damn and wow!

You guys are something, I really appreciate this.

I installed Connor's CSS and it's very close to the minima look, same fonts, etc. Very quick work, you've got it down.

The preview for erissiva's version looks very nice also, having the logged in info out of the header makes it fit better with the minima look. I'll check back later and see if you mesh the two and come out with a finished version.

Thanks guys.

8 (edited by erissiva 2005-06-10 22:04)

Re: Minima look for PunBB

Well - I've been working on it a little more and have gotten it a little more refined.
The post view isn't so crowded on mine - but I cannot seem to get the double border on the top without including the welcome which makes it seem too crowded.

I still cannot figure out what class the background of the admin options are...You know- if you go to the admin section in your template, Connor, you can see the grey seperating the different parts.

Also, I'm currently working on the post indicators, but color matching with 4 more colors is hard...I'm getting there though.

Edit: fixed the post-indicators issue. I think it's almost done, other than some issues such as text-areas and the like.
Edit2: Cleaned up the footer and #brdstats. Tweaked some colors here and there. Next up - submits and text-areas. wink   Still can't find that tag for the admin section. sad


http://www.punres.org/files/styles/st_37/index.php

Re: Minima look for PunBB

for the double border on the header do top, left, right on #brdtitle thenonly padding between it and #brdmain (e.g. no margin) and bottom, left, right on it and then put a margin around the outside of the 3 borders?

10 (edited by erissiva 2005-06-10 22:36)

Re: Minima look for PunBB

I'm not sure that would work. I keep trying it, but double borders disappear in FF. *hmmmm*

I fixed submits and buttons to be flat. Same with text-areas. I found a non-intrusive way that allows for checkboxes to remain system-default! Yay!

Still stuck on the admin section tag, but it's pretty much done.


Wierd issue: That hack is working for IE, but somehow not  for FF. The input backgrounds are staying the default color in FF, but the correct (set) color in IE.
*hmmmm* Odd.

11

Re: Minima look for PunBB

Grabbed the latest tar from punres and installed it: http://hcgtv.net/

It's looking good, the admin area is working fine. I'll wait to see if we can get the double borders working like Connor had them.

One suggestion, since the width of the overall forum is smaller, maybe make the topic body a bit wider and take away from the left side user info block.

I like the style, very minimalistic, I have another project that can use this style.

Thanks again for all your help.

Re: Minima look for PunBB

Alrighty - it's pretty much done now. I'm at version 0.9 and will only go to 1.0 once I figure out why there is a 5px gap in the border between #brdmenu and #brdwelcome.
I got the double-borders pretty much down other than that. I made a ton of cosmetic font changes and the such.

Again - with the topic part, I can't do much about that. I'm not sure where the variables for this width is defined, unless it's in base.css, which I refuse to screw with. I have been trying for a while to figure out how to get the postleft and postright to give each other space, but to no avail.

Anyone else be able to help with this?

13

Re: Minima look for PunBB

The width settings for viewtopic are in base.css

/* 7.1 This is the basic structure. */

DIV.postleft, DIV.postfootleft {
    FLOAT:left;
    WIDTH: 18em;
    OVERFLOW: hidden
}
   
DIV.postright, DIV.postfootright {
    BORDER-LEFT-WIDTH: 18em;
    BORDER-LEFT-STYLE: solid
}

Just change the width of postleft and the border-left-width of postright to something smaller. You are going to love 1.3. Base.css is down to geek stuff and hacks, everything is now in the main stylesheet.

14

Re: Minima look for PunBB

erissiva, just grabbed the tar, the header in Minima.css says 0.8 but it looks like it has the changes you mention above. I guess in order to get the double borders in the header, the logged in and other lines needs to be in the header? The admin area is working fine. I like the look, very clean, very light.

Paul, I changed it to 15em in base.css, now the post body is about the same width as the body in the blog. This way when a post feeds over, it looks similar, lines breaks, etc. Thanks.

15 (edited by Paul 2005-06-11 16:11)

Re: Minima look for PunBB

To get the welcome box out of the header just make some extra space under the header and use absolute positioning to shift it down.

While your at it, I would put the breadcrumbs on their own line, they wrap very badly at that width.

16 (edited by erissiva 2005-06-11 16:58)

Re: Minima look for PunBB

Paul - No!!!!! You've found my kryptonite - absolute positioning! When it comes to this one aspect, I am soooo lost.

Also - I'm not sure how to go about setting the breadcrumbs in their own line. I understand the breadcrumb issue, I just don't really know how to go about that.

Changing a minimum of things to base.css is going to help a lot. I think I'll wait on a few of my templates I have waiting in the wings until then.

17

Re: Minima look for PunBB

As for changes to base.css, the way I understand how CSS works, would it be feasible to copy the lines that need changing to the top level CSS and override them from base.css?

Like I changed base.css for Minima.css, 18em to 15em, now if I copied those lines to Minima.css and made the changes there, then base.css can stay the same not affecting other styles.

18 (edited by Paul 2005-06-11 19:31)

Re: Minima look for PunBB

Bert: Just change the import. Create a copy of base.css called base_minima.css and import that into minima.css instead of the normal base.css. Each style can have its own base file or didn't anybody realise that.

Re: Minima look for PunBB

Paul wrote:

Just change the import. Create a copy of base.css called base_minima.css and import that into minima.css instead of the normal base.css. Each style can have its own base file or didn't anybody realise that.

Hmmmm...That's a great idea!
So - I could have 3 files. Minima.css, Minima_cs.css, and Minima_base.css.
Awesome!
I'll have to check into that, but I'm still stuck on the absolute positioning thing.

Re: Minima look for PunBB

ok heres my way of doing it
the new minima_css with the welcome part out of the header

/**************************************************

    Style    Minima
    Version    0.9
    Author    Eris Siva <erissiva@gmail.com>
    Created    2005-06-10
    Edited    2005-06-11

            This work is licensed under the Creative Commons
            Attribution-NonCommercial-ShareAlike License. 
            To view a copy of this license, visit 
            http://creativecommons.org/licenses/by-nc-sa/2.0/ 
            or send a letter to 
            Creative Commons, 559 Nathan Abbott Way
            Stanford, California 94305, USA.

**************************************************/

/****************************************************************/
/* 1. BACKGROUND AND TEXT COLOURS */
/****************************************************************/

/* 1.1 Default background colour and text colour */

BODY {BACKGROUND-COLOR: #FFF}

.pun {COLOR: #333}

DIV.box, .pun BLOCKQUOTE, DIV.codebox, #adminconsole FIELDSET TH, .rowodd, .roweven {BACKGROUND-COLOR: #fff}
#adminconsole TD, #adminconsole TH {BORDER-COLOR: #fff}

/* 1. 2 Darker background colours */

TD.tc2, TD.tc3, TD.tcmod, #postpreview, #viewprofile DD, DIV.forminfo,
#adminconsole FIELDSET TD, DIV.blockmenu DIV.box, #adstats DD {BACKGROUND-COLOR: #fff}

/* 1.3 Main headers and navigation bar background and text colour */

.pun H2, #brdmenu {BACKGROUND-COLOR: #fff; color: #c60; text-transform: uppercase; font-weight: bold;}

#brdmenu {  margin:0 11px 11px;
  padding:0 20px 20px;
  border:1px solid #eee;
  border-width:0 1px 1px;
  max-width:700px;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#999;
  text-align: center;}

/* 1.4 Table header rows */

.pun TH {BACKGROUND-COLOR: #fff}

/* 1.5 Fieldset legend text colour */

.pun LEGEND {COLOR: #005CB1}

/* 1.6 Highlighted text for various items */

.pun DIV.blockmenu LI.isactive A, #posterror LI STRONG {COLOR: #333}

/****************************************************************/
/* 2. POST BACKGROUNDS AND TEXT */
/****************************************************************/

/* 2.1 This is the setup for posts. */

DIV.blockpost DIV.box, DIV.postright, DIV.postfootright {BACKGROUND-COLOR: #fff}
DIV.postright, DIV.postfootright {BORDER-LEFT-COLOR: #fff}
DIV.postleft, DIV.postfootleft, DIV.blockpost LABEL {BACKGROUND-COLOR: #fff}

/* 2.2 Background for post headers and text colour for post numbers in viewtopic */

DIV.blockpost H2 {BACKGROUND-COLOR: #fff}
DIV.blockpost H2 SPAN.conr {COLOR: #AABDCD}

/* 2.3 This is the line above the signature in posts. Colour and background should be the same */

.pun HR {BACKGROUND-COLOR: #333; COLOR: #333}

/****************************************************************/
/* 3. BORDER COLOURS */
/****************************************************************/

/* 3.1 All external borders */

DIV.box {BORDER-COLOR: #0066B9}

/* 3.2 Makes the top border of posts match the colour used for post headers */

DIV.blockpost DIV.box {BORDER-COLOR: #006fC9 #0066B9 #0066B9}

/* 3.3 Table internal borders. By default TH is same as background so border is invisible */

.pun TD {BORDER-COLOR: #BBCEDE}
.pun TH {BORDER-COLOR: #fff}

/* 3.4 Creates the inset border for quote boxes, code boxes and form info boxes */

.pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {BORDER-COLOR: #ACA899 #FFF #FFF #ACA899}

.pun DIV.blockpost { border-bottom: #eee solid 1px}

/* 3.5 Gecko's default fieldset borders are really nasty so this gives them a colour
without interferring with IE's rather nice default */

.pun DIV>FIELDSET {BORDER-COLOR: #ACA899}

/****************************************************************/
/* 4. LINK COLOURS */
/****************************************************************/

/* 4.1 This is the default for all links */

.pun A:link, .pun A:visited {COLOR: #58a; text-decoration: none}
.pun A:hover {COLOR: #c60}

/* 4.2 This is the colour for links in header rows and the navigation bar */

.pun H2 A:link, .pun H2 A:visited, #brdmenu A:link, #brdmenu A:visited {COLOR: #58a}
.pun H2 A:hover, #brdmenu A:hover {COLOR: #c60}

/* 4.3 This is for closed topics and "hot" links */

LI.postreport A:link, LI.postreport A:visited, TR.iclosed TD.tcl A:link, TR.iclosed TD.tcl A:visited {COLOR: #888}
LI.postreport A:hover, TR.iclosed TD.tcl A:hover {COLOR: #AAA}
LI.maintenancelink A:link, LI.maintenancelink A:visited {COLOR: #B42000}
LI.maintenancelink A:hover {COLOR: #B42000}

/****************************************************************/
/* 5. POST STATUS INDICATORS */
/****************************************************************/

/* These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/

DIV.icon {BORDER-COLOR: #D1E2EF}
TR.iredirect DIV.icon {BORDER-COLOR: #F1F1F1 #F1F1F1 #F1F1F1 #F1F1F1}
DIV.inew {BORDER-COLOR: #8FCDFF #61A6DF #4D95CF #77B9EF}

DIV.blockpost H2 a:link, DIV.blockpost H2 a:hover
{ color: #ccc; text-decoration: none;}
#brdtitle
{ padding: 0px;}
#brdheader
{ border: 1px solid #ccc; border-bottom-style:none; padding-bottom: 0px;}
#brdwelcome
{ color: #999; text-transform: uppercase; font-size: .8em; padding: 5px 6px 0px 6px; margin: 0px -1px 0px -1px; border: 1px solid #fff; border-top: 1px solid #ccc; border-width: 1px 1px 1px 1px;}
#brdstats
{ color: #666; text-transform: none; font-size: .8em}
#brdfooter p, #modcontrols, .postfootright, .postfootleft, .postleft
{ color: #666; font-size: .8em;}
#brdstats
{ padding-top: 15px;}
.pun #main
{width: 500px;}
.pun textarea
{ background-color: #fafafa; border: 1px solid #999 }

bits i edited are
#brdmenu {  margin:0 11px 11px;
  padding:0 20px 20px;
  border:1px solid #eee;
  border-width:0 1px 1px;
  max-width:700px;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#999;
  text-align: center;}
... and ....
#brdheader
{ border: 1px solid #ccc; border-bottom-style:none; padding-bottom: 0px;}
#brdwelcome
{ color: #999; text-transform: uppercase; font-size: .8em; padding: 5px 6px 0px 6px; margin: 0px -1px 0px -1px; border: 1px solid #fff; border-top: 1px solid #ccc; border-width: 1px 1px 1px 1px;}

21 (edited by erissiva 2005-06-11 20:56)

Re: Minima look for PunBB

Awesome!

*lol* Had I realized that you could do negative values for pixels, I would have fixed it long ago. Guess I missed that part of my class. *lol*


Alrighty - I've now released v1.0. Uses a Minima_base.css file now.  It should work perfectly. I even made the breadcrumbs smaller so that they won't look too ugly when they wrap. I couldn't figure out how to move them to a different line.
Enjoy!

hcgtv - About the donations thing - I'll be setting up a button and downloads section on my site sometime this weekend. Thanks for the tip!

Edit: Seems like punres is currently down. I'll have to wait for it to go back up. hmm
Edit again: It's back up, but it won't let me upload the Minima_base to the correct place. I'm going to post the correct files here, but over on punres I will still post this as a 1.0 release, just without the Minima_base.css.

Re: Minima look for PunBB

btw theres a little bug in IE (not my fault i don't think) that the text for the title is slighly cut off

Re: Minima look for PunBB

Connorhd wrote:

btw theres a little bug in IE (not my fault i don't think) that the text for the title is slighly cut off

No, it's not your fault. I've noticed it too, but I think it's because of the size of the font or else the positioning of the letters. *shrugs*

Minima.css

/**************************************************

    Style    Minima
    Version    1.0
    Author    Eris Siva <erissiva@gmail.com>
    Created    2005-06-10
    Edited    2005-06-11

            This work is licensed under the Creative Commons
            Attribution-NonCommercial-ShareAlike License. 
            To view a copy of this license, visit 
            http://creativecommons.org/licenses/by-nc-sa/2.0/ 
            or send a letter to 
            Creative Commons, 559 Nathan Abbott Way
            Stanford, California 94305, USA.

**************************************************/

/****************************************************************/
/* 1. IMPORTED STYLESHEETS */
/****************************************************************/

/* Import the basic setup styles */
@import url(imports/Minima_base.css);
/* Import the colour scheme */
@import url(imports/Minima_cs.css);


body {
    background:#fff;
    margin:0;
    padding:20px 20px;
    font:x-small Georgia,Serif;
    text-align:center;
    color:#333;
    font-size/* */:/**/small;
    font-size: /**/small;
}

#brdtitle {
  border:1px solid #eee;
  border-width:1px 1px 0;
    margin:5px 5px 0;
    padding:20px 20px .25em;
    font-size:100%;
    line-height:1.2em;
    font-weight:normal;
    color:#666;
    text-transform:uppercase;
    letter-spacing:.4em;
    text-align: center;
}

#brdtitle p { display: none; margin: 0px;}

#brdmenu {
    margin: 0 5px 5px;
    padding: 4px 20px 10px;
    max-width:700px;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#999;
    text-align: center;
}

h2 {
    margin:1.5em 0 .75em;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#999;
}
  
/****************************************************************/
/* 3. LINKS */
/****************************************************************/

/* 3.1 Remove underlining for main menu, post header links, post links and vertical menus */

#brdmenu A:link, #brdmenu A:visited, .blockpost DT A:link, .blockpost DT A:visited, .blockpost H2 A:link,
.blockpost H2 A:visited, .postlink A:link, .postlink A:visited, .postfootright A:link, .postfootright A:visited,
.blockmenu A:link, .blockmenu A:visited {
    TEXT-DECORATION: none
}

/* 3.2 Underline on hover for links in headers and main menu */

#brdmenu A:hover, .blockpost H2 A:hover {TEXT-DECORATION: underline;}

/****************************************************************/
/* 4. BORDER WIDTH AND STYLE */
/****************************************************************/

/* 4.1 By default borders are 1px solid */

DIV.box, .pun TD, .pun TH, .pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {
    BORDER-STYLE: none;
    BORDER-WIDTH: 1px;
}

 .pun BLOCKQUOTE, DIV.codebox
 { border: 1px solid #999; background-color: #fafafa}

.pun TD, .pun BLOCKQUOTE, DIV.codebox{
    BORDER-TOP-STYLE: solid;
    BORDER-BOTTOM-STYLE: solid;
    BORDER-COLOR: #eee;
    BORDER-WIDTH: 1px;
}

.pun TABLE {
    BORDER-BOTTOM-STYLE: solid;
    BORDER-COLOR: #eee;
    BORDER-WIDTH: 1px;
}

/* 4.3 Borders for table cells */

.pun TD, .pun TH {
    BORDER-BOTTOM: none;
    BORDER-RIGHT: none
}

.pun .tcl {BORDER-LEFT: none}

/* 4.4 Special setting for fieldsets to preserve IE defaults */

FIELDSET {
    BORDER-STYLE: none;
}

/****************************************************************/
/* 5. VERTICAL AND PAGE SPACING */
/****************************************************************/

/* 5.1 Page margins */

HTML, BODY {MARGIN: 0; PADDING: 0}
BODY {text-align: center}
#punwrap {width: 660px; margin: 12px auto; text-align: left}

/* 5.2 Creates vertical space between main board elements (Margins) */

DIV.blocktable, DIV.block, DIV.blockform, DIV.block2col, #postreview {MARGIN-BOTTOM: 12px}
#punindex DIV.blocktable, DIV.blockpost {MARGIN-BOTTOM: 6px}
DIV.block2col DIV.blockform, DIV.block2col DIV.block {MARGIN-BOTTOM: 0px}

/* 5.3 Remove space above breadcrumbs, postlinks and pagelinks with a negative top margin */

DIV.linkst, DIV.linksb {MARGIN-TOP: -12px}
DIV.postlinksb {MARGIN-TOP: -6px}

/* 5.4 Put a 12px gap above the board information box in index because the category tables only
have a 6px space beneath them */

#brdstats {MARGIN-TOP: 12px}

/****************************************************************/
/* 6. SPACING AROUND CONTENT */
/****************************************************************/

/* 6.1 Default padding for main items */

DIV.block DIV.inbox, DIV.blockmenu DIV.inbox {PADDING: 3px 6px}
.pun P, .pun UL, .pun DL, DIV.blockmenu LI, .pun LABEL, #announce DIV.inbox DIV {PADDING: 3px 0}
.pun H2 {PADDING: 4px 6px}

/* 6.2 Special spacing for various elements */

.pun H1 {PADDING: 3px 0px 0px 0}
#brdtitle P {PADDING-TOP: 0px}
DIV.linkst {PADDING: 8px 6px 3px 6px}
DIV.linksb, DIV.postlinksb {PADDING: 3px 6px 8px 6px}
#brdwelcome, #brdfooter DL A, DIV.blockmenu LI, DIV.rbox INPUT  {LINE-HEIGHT: 1.4em}
#viewprofile DT, #viewprofile DD {PADDING: 0 3px; LINE-HEIGHT: 2em}

/* 6.4 Create some horizontal spacing for various elements */

DIV.rbox INPUT, DIV.blockform P INPUT  {MARGIN-RIGHT: 12px}

#brdmenu LI, DIV.rbox INPUT, DIV.blockform P INPUT  {MARGIN-RIGHT: 2px}

#brdmenu LI a  {MARGIN-RIGHT: 5px}

/****************************************************************/
/* 7. SPACING FOR TABLES */
/****************************************************************/

.pun TH, .pun TD {PADDING: 4px 6px}
.pun TD P {PADDING: 5px 0 0 0}

/****************************************************************/
/* 8. SPACING FOR POSTS */
/****************************************************************/

/* 8.1 Padding around left and right columns in viewtopic */

DIV.postleft DL, DIV.postright {PADDING: 6px}

/* 8.2 Extra spacing for poster contact details and avatar */

DD.usercontacts, DD.postavatar {MARGIN-TOP: 5px}
DD.postavatar {MARGIN-BOTTOM: 5px}

/* 8.3 Extra top spacing for signatures and edited by */

DIV.postsignature, DIV.postmsg P.postedit {PADDING-TOP: 15px}

/* 8.4 Spacing for code and quote boxes */

DIV.postmsg H4 {MARGIN-BOTTOM: 10px}
.pun BLOCKQUOTE, DIV.codebox {MARGIN: 5px 15px 15px 15px; PADDING: 8px}

/* 8.5 Padding for the action links and online indicator in viewtopic */

DIV.postfootleft P, DIV.postfootright UL, DIV.postfootright DIV {PADDING: 10px 6px 5px 6px}

/* 8.6 This is the input on moderators multi-delete view */

DIV.blockpost INPUT, DIV.blockpost LABEL {
    PADDING: 3px;
    DISPLAY: inline
}

P.multidelete {
    PADDING-TOP: 15px;
    PADDING-BOTTOM: 5px
}

/* 8.7 Make sure paragraphs in posts don't get any padding */

DIV.postmsg P {PADDING: 0}

/****************************************************************/
/* 9. SPECIAL SPACING FOR FORMS */
/****************************************************************/

/* 9.1 Padding around fieldsets */

DIV.blockform FORM, DIV.fakeform {PADDING: 20px 20px 15px 20px}
DIV.inform {PADDING-BOTTOM: 12px}

/* 9.2 Padding inside fieldsets */

.pun FIELDSET {PADDING: 0px 12px 0px 12px}
DIV.infldset {PADDING: 9px 0px 12px 0}
.pun LEGEND {PADDING: 0px 6px}

/* 9.3 The information box at the top of the registration form and elsewhere */

DIV.forminfo {
    MARGIN-BOTTOM: 12px;
    PADDING: 9px 10px
}

/* 9.4 BBCode help links in post forms */

UL.bblinks LI {PADDING-RIGHT: 20px}

UL.bblinks {PADDING-BOTTOM: 10px; PADDING-LEFT: 4px}

/* 9.5 Horizontal positioning for the submit button on forms */

DIV.blockform P INPUT {MARGIN-LEFT: 12px}

/****************************************************************/
/* 10. POST STATUS INDICATORS */
/****************************************************************/

/* 10.1 These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/

DIV.icon {
    FLOAT: left;
    MARGIN-TOP: 0.1em;
    MARGIN-LEFT: 0.2em;
    DISPLAY: block;
    BORDER-WIDTH: 0.6em 0.6em 0.6em 0.6em;
    BORDER-STYLE: solid
}

DIV.searchposts DIV.icon {MARGIN-LEFT: 0}

/* 10.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */

TD DIV.tclcon {MARGIN-LEFT: 2.3em}

imports/Minima_cs.css

/**************************************************

    Style    Minima
    Version    1.0
    Author    Eris Siva <erissiva@gmail.com>
    Created    2005-06-10
    Edited    2005-06-11

            This work is licensed under the Creative Commons
            Attribution-NonCommercial-ShareAlike License. 
            To view a copy of this license, visit 
            http://creativecommons.org/licenses/by-nc-sa/2.0/ 
            or send a letter to 
            Creative Commons, 559 Nathan Abbott Way
            Stanford, California 94305, USA.

**************************************************/

/****************************************************************/
/* 1. BACKGROUND AND TEXT COLOURS */
/****************************************************************/

/* 1.1 Default background colour and text colour */

BODY {BACKGROUND-COLOR: #FFF}

.pun {COLOR: #333}

DIV.box, .pun BLOCKQUOTE, DIV.codebox, #adminconsole FIELDSET TH, .rowodd, .roweven {BACKGROUND-COLOR: #fff}
#adminconsole TD, #adminconsole TH {BORDER-COLOR: #fff}

/* 1. 2 Darker background colours */

TD.tc2, TD.tc3, TD.tcmod, #postpreview, #viewprofile DD, DIV.forminfo,
#adminconsole FIELDSET TD, DIV.blockmenu DIV.box, #adstats DD {BACKGROUND-COLOR: #fff}

/* 1.3 Main headers and navigation bar background and text colour */

.pun H2, #brdmenu {BACKGROUND-COLOR: #fff; color: #c60; text-transform: uppercase; font-weight: bold;}

#brdmenu {  margin:0 11px 11px;
  padding:0 20px 20px;
  border:1px solid #eee;
  border-width:0 1px 1px;
  max-width:700px;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#999;
  text-align: center;}

/* 1.4 Table header rows */

.pun TH {BACKGROUND-COLOR: #fff}

/* 1.5 Fieldset legend text colour */

.pun LEGEND {COLOR: #005CB1}

/* 1.6 Highlighted text for various items */

.pun DIV.blockmenu LI.isactive A, #posterror LI STRONG {COLOR: #333}

/****************************************************************/
/* 2. POST BACKGROUNDS AND TEXT */
/****************************************************************/

/* 2.1 This is the setup for posts. */

DIV.blockpost DIV.box, DIV.postright, DIV.postfootright {BACKGROUND-COLOR: #fff}
DIV.postright, DIV.postfootright {BORDER-LEFT-COLOR: #fff}
DIV.postleft, DIV.postfootleft, DIV.blockpost LABEL {BACKGROUND-COLOR: #fff}

/* 2.2 Background for post headers and text colour for post numbers in viewtopic */

DIV.blockpost H2 {BACKGROUND-COLOR: #fff}
DIV.blockpost H2 SPAN.conr {COLOR: #AABDCD}

/* 2.3 This is the line above the signature in posts. Colour and background should be the same */

.pun HR {BACKGROUND-COLOR: #333; COLOR: #333}

/****************************************************************/
/* 3. BORDER COLOURS */
/****************************************************************/

/* 3.1 All external borders */

DIV.box {BORDER-COLOR: #0066B9}

/* 3.2 Makes the top border of posts match the colour used for post headers */

DIV.blockpost DIV.box {BORDER-COLOR: #006fC9 #0066B9 #0066B9}

/* 3.3 Table internal borders. By default TH is same as background so border is invisible */

.pun TD {BORDER-COLOR: #BBCEDE}
.pun TH {BORDER-COLOR: #fff}

/* 3.4 Creates the inset border for quote boxes, code boxes and form info boxes */

.pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {BORDER-COLOR: #ACA899 #FFF #FFF #ACA899}

.pun DIV.blockpost { border-bottom: #eee solid 1px}

/* 3.5 Gecko's default fieldset borders are really nasty so this gives them a colour
without interferring with IE's rather nice default */

.pun DIV>FIELDSET {BORDER-COLOR: #ACA899}

/****************************************************************/
/* 4. LINK COLOURS */
/****************************************************************/

/* 4.1 This is the default for all links */

.pun A:link, .pun A:visited {COLOR: #58a; text-decoration: none}
.pun A:hover {COLOR: #c60}

/* 4.2 This is the colour for links in header rows and the navigation bar */

.pun H2 A:link, .pun H2 A:visited, #brdmenu A:link, #brdmenu A:visited {COLOR: #58a}
.pun H2 A:hover, #brdmenu A:hover {COLOR: #c60}

/* 4.3 This is for closed topics and "hot" links */

LI.postreport A:link, LI.postreport A:visited, TR.iclosed TD.tcl A:link, TR.iclosed TD.tcl A:visited {COLOR: #888}
LI.postreport A:hover, TR.iclosed TD.tcl A:hover {COLOR: #AAA}
LI.maintenancelink A:link, LI.maintenancelink A:visited {COLOR: #B42000}
LI.maintenancelink A:hover {COLOR: #B42000}

/****************************************************************/
/* 5. POST STATUS INDICATORS */
/****************************************************************/

/* These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/

DIV.icon {BORDER-COLOR: #D1E2EF}
TR.iredirect DIV.icon {BORDER-COLOR: #F1F1F1 #F1F1F1 #F1F1F1 #F1F1F1}
DIV.inew {BORDER-COLOR: #8FCDFF #61A6DF #4D95CF #77B9EF}

DIV.blockpost H2 a:link, DIV.blockpost H2 a:hover
{ color: #ccc; text-decoration: none;}
#brdtitle
{ padding: 0px;}
#brdheader
{ border: 1px solid #ccc; border-bottom-style:none; padding-bottom: 0px;}
#brdwelcome
{ color: #999; text-transform: uppercase; font-size: .8em; padding: 5px 6px 0px 6px; margin: 0px -1px 0px -1px; border: 1px solid #fff; border-top: 1px solid #ccc; border-width: 1px 1px 1px 1px;}
#brdstats
{ color: #666; text-transform: none; font-size: .8em}
#brdfooter p, #modcontrols, .postfootright, .postfootleft, .postleft
{ color: #666; font-size: .8em;}
#brdstats
{ padding-top: 15px;}
.pun #main
{width: 500px;}
.pun textarea
{ background-color: #fafafa; border: 1px solid #999 }
.linkst li, .linksb li
 { color: #666; font-size: .8em;}

imports/Minima_base.css

/**************************************************

    Style    Minima
    Version    1.0
    Author    Eris Siva <erissiva@gmail.com>
    Created    2005-06-10
    Edited    2005-06-11

            This work is licensed under the Creative Commons
            Attribution-NonCommercial-ShareAlike License. 
            To view a copy of this license, visit 
            http://creativecommons.org/licenses/by-nc-sa/2.0/ 
            or send a letter to 
            Creative Commons, 559 Nathan Abbott Way
            Stanford, California 94305, USA.

**************************************************/

/****************************************************************/
/* 1. INITIAL SETTINGS */
/****************************************************************/

.pun TABLE, .pun DIV, .pun FORM, .pun P, .pun H1, .pun H2, .pun H3,
.pun H4, .pun PRE, .pun BLOCKQUOTE, .pun UL, .pun OL, .pun LI, .pun DL,
.pun DT, .pun DD, .pun TH, .pun TD, .pun FIELDSET, .pun IMG {
    MARGIN: 0px;
    PADDING: 0px;
    FONT-WEIGHT: normal;
    LIST-STYLE: none;
}

.pun IMG {BORDER: none}

.pun INPUT, .pun SELECT, .pun TEXTAREA, .pun OPTGROUP {MARGIN: 0}

/****************************************************************/
/* 2. STRUCTURAL SETTINGS - VERY IMPORTANT - DO NOT CHANGE */
/****************************************************************/

/* 2.1 Clearing floats and invisible items */
.pun .clearer, .pun .nosize {
    HEIGHT: 0;
    WIDTH: 0;
    LINE-HEIGHT: 0;
    FONT-SIZE: 0;
    OVERFLOW: hidden
}

.pun .clearer, .pun .clearb {CLEAR: both}
.pun .nosize {POSITION: absolute; LEFT: -10000px}

/* 2.2 Overflow settings for posts */

DIV.blockpost DIV.box, DIV.postleft, DIV.postsignature, DIV.postmsg {OVERFLOW: hidden}

/****************************************************************/
/* 3. BUG FIXES - VERY IMPORTANT - DO NOT CHANGE */
/****************************************************************/

/* 3.1 This attempts to eliminate rounding errors in Gecko browsers. */

DIV>DIV>DIV.postfootleft, DIV>DIV>DIV.postfootright {PADDING-TOP: 1px; MARGIN-TOP: -1px}

/* 3.2 This is only visible to IE Windows and cures various bugs. Do not alter comments */

/* Begin IEWin Fix \*/
* HTML .inbox, * HTML .inform, * HTML .pun, * HTML .intd, * HTML .tclcon {HEIGHT: 1px}
* HTML .inbox DIV.postmsg {WIDTH: 98%}
/* End of IEWin Fix */

/****************************************************************/
/* 4. HIDDEN ELEMENTS */
/****************************************************************/

/* These are hidden in normal display. Add comments to make them visible */

#brdfooter H2, #brdstats H2, #brdstats .conl DT, #brdstats .conr DT,
#modcontrols DT, #searchlinks DT, DIV.postright H3 {
    POSITION: absolute;
    DISPLAY: block;
    OVERFLOW: hidden;
    WIDTH: 1em;
    LEFT: -999em
}

/****************************************************************/
/* 5. BOX CONTAINERS AND FLOATS */
/****************************************************************/

/* 5.1. Setup all left and right content using floats. */  

.conr {
    FLOAT: right;
    TEXT-ALIGN: right;
    CLEAR: right;
    WIDTH: 40%
}

.conl {
    FLOAT: left;
    WIDTH: 55%;
    OVERFLOW: hidden;
    WHITE-SPACE: nowrap
}

LABEL.conl {
    WIDTH: auto;
    OVERFLOW: visible;
    MARGIN-RIGHT: 10px
}

/* 5.2 Set up page numbering and posts links */

DIV.linkst .conl, DIV.linksb .conl, DIV.postlinksb .conl {WIDTH:18em}

DIV.linkst .conr, DIV.linksb .conr, DIV.postlinksb .conr {WIDTH:16em}

FORM DIV.linksb .conr {WIDTH: 32em}

/* 5.3 Keep breadcrumbs from shifting to the right when wrapping */

.linkst UL, linksb UL, .postlinksb UL {MARGIN-LEFT: 18em}

/* 5.4 Settings for Profile and Admin interface.*/

DIV.block2col {PADDING-BOTTOM: 1px}

DIV.block2col DIV.blockform, DIV.block2col DIV.block, #viewprofile DD {MARGIN-LEFT: 14em}

DIV.blockmenu, #viewprofile DT {
    FLOAT:left;
    WIDTH: 13em
}

#profileavatar IMG {
    FLOAT: right;
    MARGIN-LEFT: 1em
}

#viewprofile DL {FLOAT: left; WIDTH: 100%; OVERFLOW: hidden}

/****************************************************************/
/* 6. TABLE SETUP */
/****************************************************************/

/* 6.1 Table Basic Setup */

.pun TABLE {WIDTH: 100%}

/* 6.2 Fixed Table Setup */

#punindex TABLE, #vf TABLE {TABLE-LAYOUT: fixed}

.tcl {TEXT-ALIGN: left; WIDTH: 50%}

.tc2, .tc3, .tcmod {WIDTH: 9%; TEXT-ALIGN: center}

.tcr {WIDTH: 32%; TEXT-ALIGN: left}

#punsearch #vf .tcl, #punmoderate #vf .tcl {WIDTH: 41%}

#punsearch #vf .tc2 {WIDTH: 18%; TEXT-ALIGN: left}

.tcl, .tcr {OVERFLOW: HIDDEN}

/* 6.3 Other Table Setup */

#users1 .tcl {WIDTH: 40%}

#users1 .tcr {WIDTH: 25%}

#users1 .tc2 {WIDTH: 25%; TEXT-ALIGN: left}

#users1 .tc3 {WIDTH: 10%; TEXT-ALIGN: center}

#debug .tcr {WIDTH: 85%; WHITE-SPACE: normal}

#punindex TD.tcr SPAN.byuser {DISPLAY: block}

/****************************************************************/
/* 7. VIEWTOPIC SETUP */
/****************************************************************/

/* 7.1 This is the basic structure. */

DIV.postleft, DIV.postfootleft {
    FLOAT:left;
    WIDTH: 14em;
    OVERFLOW: hidden
}
    
DIV.postright, DIV.postfootright {
    BORDER-LEFT-WIDTH: 14em;
    BORDER-LEFT-STYLE: solid
}

DIV.postfootright, P.multidelete {TEXT-ALIGN: right}

DIV.blockpost>DIV>DIV.inbox {PADDING-BOTTOM: 1px}

/* 7.3 This is the div which actually contains the post and is inside .postright */

DIV.postmsg {WIDTH:100%}

/* 7.4 These items control overflow and scrolling within posts. */

DIV.incqbox {WIDTH: 100%; OVERFLOW: hidden}
DIV.scrollbox {WIDTH: 100%; OVERFLOW: auto}
IMG.postimg {max-width: 100%}
A .postimg {max-width: 100%}

/* 7.5 Turn off the poster information column for preview */

#postpreview DIV.postright {BORDER-LEFT: none}

/* 7.6 Create the horizontal line above signatures */

DIV.postsignature HR {
    MARGIN-LEFT: 0px;
    WIDTH: 200px;
    TEXT-ALIGN: left;
    HEIGHT: 1px;
    BORDER:none
}

/* 7.7 Maximum height for search results as posts. Position go to post link */

DIV.searchposts DIV.postmsg {HEIGHT: 8em}
DIV.searchposts DD P {PADDING-TOP: 3em}

/* 7.8 Class for bbcode [u] */

SPAN.bbu {TEXT-DECORATION: underline}

/****************************************************************/
/* 8. LISTS SPECIAL SETTINGS */
/****************************************************************/

/* 8.1 Horizontal display of online list, main navigation menu and breadcrumbs */

#onlinelist DD, #onlinelist DT, #brdmenu LI, DIV.linkst LI, DIV.linksb LI, DIV.postlinksb LI,
DIV.postfootright LI, UL.bblinks LI {
    DISPLAY: inline;
    HEIGHT: 0
}

/* 8.2 Turn on square icon for posterror list */

#posterror UL LI {LIST-STYLE: square inside}

/* 8.3 Right alignment of descriptions in ordinary member view of other members profiles */

#viewprofile DT {TEXT-ALIGN: right}

/****************************************************************/
/* 9. FORM SETTINGS */
/****************************************************************/

/* 9.1 Makes textareas and long text inputs shrink with page */

DIV.txtarea {WIDTH: 75%}

DIV.txtarea TEXTAREA, INPUT.longinput {WIDTH: 100%}

.pun LABEL {DISPLAY: block}

#qjump SELECT {WIDTH: 50%}

/****************************************************************/
/* 10. HELP FILES AND MISC. */
/****************************************************************/

/* 10.1 Put some space between sections of the help file */

#helpfile H2 {MARGIN-TOP: 12px}

/* 10.2 Internal padding */

#helpfile DIV.box {PADDING: 10px}

/* 10.3 Other templates */

#punredirect DIV.block, #punmaint DIV.block {MARGIN: 50px 20% 12px 20%}

24

Re: Minima look for PunBB

I responsed at punres and just noticed this thread, I used the CSS's above.

Ladies and Gents, my and your new minimalistic forum: http://hcgtv.net

Thank you guys, it looks great.

25

Re: Minima look for PunBB

hcgtv wrote:

I responsed at punres and just noticed this thread, I used the CSS's above.

Ladies and Gents, my and your new minimalistic forum: http://hcgtv.net

Thank you guys, it looks great.

I love it, really !!!

Very good job.