New Style

[KillerB]

I have loaded Julian's new style and would like comments please.

Please feel free to give constructive criticism and suggestions as well as any compliments (he does like them even though he wouldn't admit it).

This is not fixed yet,

Alex

[jdaw1]

1. Admin, thank you kindly for loading it.

2. Comments are welcome. phpBB has many dozens of different pages defined (many within the User Control Panel), and whilst developing I have been unable to preview any.

3. The header is a mess. Not sure what’s gone wrong: icon missing; stupidly big font. Will investigate and fix.

4. Icons are meant to follow a pattern. Grey => read, black => unread. The little * indicates a thread to which you have posted. The little wine glass a ‘hot’ topic, that is one that has received â”°Â¥15 replies. (I’d prefer that nothing is marked ‘hot’: other opinions?)

[DRT]

1. I don't think the icons that distinguish between read and unread items are sufficiently distinuishable from one another. May I suggest that the colours for icons for unread items should be inverted so that they are predominently red. Red and grey are distinctly different. Black and grey are not.

2. The thread title I am looking at now on the Post a Reply page is the same very large size as the current header. Can it be reduced please?

3. The Options and Upload attachments panel beneath the box I am typing into now retain the default light blue colour. Cab this be changed to match with our chosen colour scheme?

4. The Quote buttons have vanished.

5. Thanks to jdaw1 for the work done so far and to ARK for doing the servery bits.

[jdaw1]

OK, new version of header code sent to admin for upload. Next: where have the “Quote† buttons gone?

[jdaw1]

It’s not obvious to me that switching around the colours in would help distinguish it from . Or have I misunderstood?

Comparisons:

[DRT]

They are more recognisable when displayed on a coloured background like those above but not so easy to distinguish on a white background like this:

Comparisons:




The examples here are also larger than they appear on the Board Index and individual Forums.

What I am suggesting is that the unread versions have a black border, red (or pink) background and white lines to represent text.

[jdaw1]

Same size: 18 by 18, here and there.

Currently the background is used to distinguish stickies from non-stickies (the tawny slightly resembling the yellow of a PostIt note). If red background is unread, how do I show read and unread stickies?

[jdaw1]

Relevant icons:


So we have {Forum | Sub-forum | thread | sticky | announcement} · {hot | locked | neither} · {mine | I haven’t posted}.

And now I look at them en masse, the announcement icons should have the same tawny background as the stickies. To be fixed.

Edit: Quote button problem found and fixed. Blue tabs changed, though another iteration may well be needed. Tawny added to announcements, pending a better arrangements of colours and iconettes. All resent.

[DRT]

If red background is unread, how do I show read and unread stickies?

Read Stickie = Tawny with grey lines
Unread Stickie = Tawny with red lines and red border

[SushiNorth]

1. I don't think the icons that distinguish between read and unread items are sufficiently distinuishable from one another. May I suggest that the colours for icons for unread items should be inverted so that they are predominently red. Red and grey are distinctly different. Black and grey are not.

Agreed - and perhaps those icons could be made a bit larger? Also, it might pay to set a maximum width for the screen (as much as I hate limiting widths), as the content is always one long column. It is easier to read in tighter columns. 1024 or 1200 is probably sufficient, but i'm trying to skim at 1440 and that just isn't working.

[DRT]

I have decided I am not keen on the tawny and blue colour scheme on the front page.

Can this please be the same colour scheme as the Forum indexes/pages so that we have a consistent style?

Also, is the grey bar with blue text immediately below the header and the grey formatting buttons above the box I am typing into and the Save, Preview and Sumbit buttons below it confirgurable? If so, can these please join the colour scheme?

[DRT]

it might pay to set a maximum width for the screen (as much as I hate limiting widths), as the content is always one long column.

I would prefer not to have a limit and allow users to simply decide for themselves which size of window to view the forum in. On my PC the column widths automatically re-size when the window size or shape changes. This may be different if you are not using IE.

[jdaw1]

New icons have been made, based on Derek’s idea of red background for unread and white background for read.

The only blue I see on the front page is that of a link — and links are usually blue. Am I missing something?

I want the user to control the page width — not me. No alterations planned in that department.

[DRT]

The only blue I see on the front page is that of a link — and links are usually blue. Am I missing something?

Have sent a screenshot by email to ensure we are looking at the same thing.

[jdaw1]

Oh, that blue. Where did that come from? I didn’t put it there. Hunting: it will die.

[SushiNorth]

Regarding page width:
Most webpages do not make the entire page, left-to-right, one giant reading column. They use the left side for navigation, the right for portlets, and the reading columns are set up at about 600 pixels max. As most folks are now using tabs, too, this means the browser width is the same width for this site as it is for every other site -- aka I'm not going to change my browser width special for this site. Instead, I would recommend that a maximum width be placed on the column to spare those of us with wide screens the horrors of Carriage-Return Whiplash. Again, i am absolutely in favor of liquid width pages (where the page fills the whole screen, whatever size it might be), but not that the main text columns get out of control.

Here are a few references...
Jakob Nielsen, design guru, espousing liquid widths even as his own webpage restricts the max width of the reading column.
Web Design Layout Principles (see item 3)
Here are some other pages explaining why overly-wide columns should be avoided.

[RonnieRoots]

- I agree with Derek that the difference between read and unread posts is hardly distinguishable in the current design. It is too subtle. I would rather see a difference in the entire title of the thread, either being bold/regular, coloured text/black text, or coloured background / regular background.

- The quote buttons are not visible to me. The are there (I can see the function as I scroll over it), but invisible.

- The reply button is very small.

- I second SN's comments on liquid widths

That's it for now.

[jdaw1]

OK. Comments noted. When the repairs already done are uploaded, I will attend to some of the additional complaints — beginning with the obvious but dull question, how do I set a maximum width? (And Jakob Nielsen is a real expert: his words carry great weight with me.)

[SushiNorth]

the obvious but dull question, how do I set a maximum width?

I believe they actually created a style property for it (details) but the sites I've built are so typically a combo of layers and antique tables and nesting insanity that I've never tried to use it. Supposedly it's just "max-width: ###px;"
Now if you wanted to be really slick... you could slap it in a site cookie, as a preference (hopefully like the font size bigger/smaller option does) and just have arrows for people to adjust the page to larger or smaller. Then write out the max-width div's with javascript.

[jdaw1]

SushiNorth: thank you for volunteering to write the code. It is eagerly awaited.

Also, there has been general disapproval of the tawny box on the front page; it will become red.

[DRT]

Also, there has been general disapproval of the tawny box on the front page; it will become red.

Don't forget to remove the horrible sky blue from inside the horrible tawny at the same time.

[DRT]

Posts in threads alternate between white and pink (or is it light tawny?) but do not have borders. This means that when the bottom post in a thread is white it becomes undefined and shares the same white space as things below the post.

Would it be possible to give all posts a border which is the same colour as the pink (or is it light brown) together with rounded corners?

Also, on the Board Index the items with a pink (or is it light brown?) background have white vertical separators between columns. The items with white backgrounds presumably also have these but they are invisible. Can the white ones be pink (or is it light brown?). If not possible to have different colours in alternating backgrounds can all separators be another colour: grey or red? These separators also exist between the body of the post and the user info columns in threads.

[jdaw1]

The colour alternation had already been changed — neither is white. Can we see how that looks before committing to new colours.

I’m also unhappy with the horizontal line after the signature — it tricks the eye into believing that the signature belongs to the next post. One possibility would be to make the line after the signature dashed, and faint, as well as terminating each post with its own red non-dashed line. Or would that be too many lines?

[jdaw1]

FYI, main colours are:

• #990000 = ThePortForum red;[/color]
• #ebcdcd = Faint ThePortForum red;[/color]
• #cc9933 = ThePortForum tawny;[/color]
• #eeddbb = Faint ThePortForum tawny;[/color]
• #cccccc = Grey.[/color]

• #990000 = ThePortForum red;[/color]
• #ebcdcd = Faint ThePortForum red;[/color]
• #cc9933 = ThePortForum tawny;[/color]
• #eeddbb = Faint ThePortForum tawny;[/color]
• #cccccc = Grey.[/color]

• #990000 = ThePortForum red;[/color]
• #ebcdcd = Faint ThePortForum red;[/color]
• #cc9933 = ThePortForum tawny;[/color]
• #eeddbb = Faint ThePortForum tawny;[/color]
• #cccccc = Grey.[/color]

• #990000 = ThePortForum red;[/color]
• #ebcdcd = Faint ThePortForum red;[/color]
• #cc9933 = ThePortForum tawny;[/color]
• #eeddbb = Faint ThePortForum tawny;[/color]
• #cccccc = Grey.[/color]

[SushiNorth]

SushiNorth: thank you for volunteering to write the code. It is eagerly awaited.

Lol - ok. Let me know when you want to get to that phase of your changes. Also, some kind of discussion ought to be had about what to do with unused space/layout beyond max.

One other thought... it seems counter intuitive to have save/preview/submit when the most common thing people do is Submit, then preview, and lastly "save"
---
Notes for self for later:
http://www.svendtofte.com/code/max_width_in_ie/
p {
max-width:30em;
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}

[jdaw1]

Note to self: phpbb3 bug report entitled Pagination: two requests, one trivial, one non-trivial.

[jdaw1]

A matter of note, though slightly off-topic: on screen the official TPF red is 60%:0:0 = #990000; when printed it is Pantone 704.

[DRT]

We now have red unread buttons but none of the other changes seem to have worked.

[jdaw1]

Code: Select all

/* Site description and logo */
#site-description {
	float: left;
	width: 70%;
	font-family: Palatino Times Serif;
	font-weight: bold;
	color: #990000;
	background-image: url("./styles/ThePortForumRed/imageset/site_logo.gif");
	background-position: left center;
	background-repeat: no-repeat;
}

Code: Select all

			<div id="site-description">
				<h1><a href="./index.php" title="Board index" id="logo">The Port Forum.com</a></h1>
				<p><a href="./index.php" title="Board index" id="logo">The Port Forum</a></p>
				<p style="display: none;"><a href="#start_here">Skip to content</a></p>
			</div>

Please, can anyone see why the logo isn’t appearing? The logo itself exists:

[DRT]

Do you have a safe copy of common.css from http://www.theportforum.com ?

If so, please post the same blocks from that file here for comparison.

Thought: in the url path could it be that ./ only works from the root directory of the site, which would be http://www.theportforum.com and should perhaps be ./phpbb3/styles/ThePortForumRed/imageset/site_logo.gif

[DRT]

New grumble:

The Advanced Search hyprelink below the Search box in the top right of every page only appears when you hover over it.

Suggestion: should we have a separate "Report Faults on New Style" thread to isolate faults from general grumbles, discussions and suggestions?

[jdaw1]

Thought: in the url path could it be that ./ only works from the root directory of the site, which would be http://www.theportforum.com and should perhaps be ./phpbb3/styles/ThePortForumRed/imageset/site_logo.gif

The “phpbb3† suggestion is very plausible. Choices: either attempt to make it work here, and then do it again. Or wait until we have finished the upgrade to 3.0.2.

The Advanced Search hyprelink below the Search box in the top right of every page only appears when you hover over it.

Good spot. Found and fixed, at least on my at-home version.

[JacobH]

After a lot of head-scratching, I had a look at what was actually being loaded by my browser and it appears that there is a discrepancy between the line which Julian gives here:

background-image: url("./styles/ThePortForumRed/imageset/site_logo.gif");

(which should work) and what’s actually in the CSS that is being loaded by site:

background-image : url("./styles/ThePortForumRed/theme/imageset/site_logo.gif");

(note the extraneous /theme).

Incidentally, in that HTML snippet, the two id="logo" attributes should read class="logo" as the same id attribute cannot be given to more than one element in a document.

-Jacob

[DRT]

After a lot of head-scratching, I had a look at what was actually being loaded by my browser and it appears that there is a discrepancy between the line which Julian gives here:

background-image: url("./styles/ThePortForumRed/imageset/site_logo.gif");

(which should work) and what’s actually in the CSS that is being loaded by site:

background-image : url("./styles/ThePortForumRed/theme/imageset/site_logo.gif");

(note the extraneous /theme).

That suggests that JDAWs home based development environment has a different folder structure or configuration to the live site. Unfortunately not an uncommon problem.

[JacobH]

One small thing, now I’ve had a look at the full CSS: perhaps I could encourage a slightly more restrained use of px as a unit of measurement, particularly for font sizes? Ideally, replace 10px with small, 12px with medium and so on. This firstly avoids a nasty bug in IE6 whereby the user is unable to resize the fonts but, more importantly, makes the site easier to use for people who blow up their fonts to very large sizes. For what it’s worth, it is also considered a Good Thing for measurements to be given in ems rather than pixels, again to allow the site to display properly with a wide variety of font, window and other browser settings (the exception to this is when one padding around something like an image) but getting things to work in ems can be quite fiddly.

[JacobH]

That suggests that JDAWs home based development environment has a different folder structure or configuration to the live site. Unfortunately not an uncommon problem.

Indeed. It also doesn’t help that CSS is a nightmare to debug, as it gives no error messages and silently tries to work around your mistakes. I hate to think how much of my life I have wasted trying to work out why something like this doesn’t work:

Code: Select all

color: red:
background-color: blue;

[DRT]

I hate to think how much of my life I have wasted

I am prepared to sympathyse providing the waste is expressed as a percentage of current age

[Glenn E.]

I'm not real keen on the alternating colors in the threads... to me, the white background posts don't look like posts and so I keep trying to skip them. I think the forum would look better if tawny alternated with some other color instead of white.

[SushiNorth]

If you happen to use firefox, Firebug will make you very very happy... esp when you discover you can start changing and adding css properties on the fly.

[jdaw1]

Long-standing user of Firefox (and previously Mozilla), recently acquainted with Firebug which is better than DOM inspector.

[jdaw1]

I'm not real keen on the alternating colors in the threads... to me, the white background posts don't look like posts and so I keep trying to skip them. I think the forum would look better if tawny alternated with some other color instead of white.

Two non-white colours: agreed. I think my recent CSS, not uploaded, does that.

[DRT]

Suggestion: should we have a separate "Report Faults on New Style" thread to isolate faults from general grumbles, discussions and suggestions?

Did jdaw1 miss or ignore/reject my suggestion?

[jdaw1]

Indifferent. This thread does the job.

[DRT]

Indifferent. This thread does the job.

Suggestion: In a thread intended to generate feedback it is probably better to express indifference to avoid the possibility of people suspecting their comments have been ignored.

[jdaw1]

OK, several matters.

JacobH: the error in “url("./styles/ThePortForumRed/theme/imageset/site_logo.gif");† was found and fixed yesterday. There appears to be an uploading problem, or a cache problem.

JacobH: “slightly more restrained use of px as a unit of measurement†. Yes and no. The logo is a fixed 48px by 48px, so H1 text shown next to that should be expressed in px. For sensible comparison, so is H2. My intention was that other text be in ems, though PEBKAC is more than likely.

State of play of main icons (the PM icons have been recoloured, even if not uploaded):

[RonnieRoots]

I still think the buttons (especially 'reply' and 'new topic') are too small.

'advanced search' still only shows when scrolling over it. The initial colour is apparently not set in the right way.

And on a more general note: can you share why there has to be a new style? I quite liked the 'standard' styling of the board, it is clear, modern looking and well designed. I'd say, only change if the change is for the better. But, I'm sorry to say that I find this new style not as clear as the standard one, and it has a more static, old fashioned feel. Somehow, it reminds me of my old Atari ZX81 and Commodore 64.

[jdaw1]

If that’s the general consensus, buttons can be made bigger. Is it?

Admins realise that there is a meta problem with slow incomplete uploads hampering development ability. This meta problem might be addressed, somehow. And the phpbb3 thing also looks amateur, and will also be fixed.

[DRT]

If that’s the general consensus, buttons can be made bigger. Is it?

Admins realise that there is a meta problem with slow incomplete uploads hampering development ability. This meta problem might be addressed, somehow. And the phpbb3 thing also looks amateur, and will also be fixed.

I vote for larger buttons.

[SushiNorth]

I vote for larger buttons.

Seconded. Bigger buttons, all around.
One of the best things (to me) about TPF is its simplicity and straightforward nature. There aren't lengthy "about" pages or databases or all kinds of other functionality. Just a few straightforward functions. As such, controls associated with the core functionality ought to be prominent. This would be my list:
Post, Reply, Quote.
Read/unread/i-replied
submit/preview/save (which are larger than the others, now, and probably big enough)

I don't click on the masthead much, so it could probably take up less than 1/4 of the page. I think that was already mentioned, though.

[jdaw1]

Bigger buttons sent; awaiting upload.