New Style

[jdaw1]

JacobH: please, in the following, taken from www.theportforum.com/styles/ThePortForu ... common.css, how do I add 12px of padding to the right of the image?

Code: Select all

#site-description {
	float: left;
	width: 70%;
	font-family: Palatino Times Serif;
	font-weight: bold;
	background-image: url("http://www.ThePortForum.com/styles/ThePortForumRed/imageset/site_logo.gif");
	padding-right: 120px;
	background-position: left center;
	background-repeat: no-repeat;
}

[DRT]

Screenshot very helpful. Thank you. Looks far better on my Mac Firefox.

Please could you ensure that the stylesheets are refreshed. Please click refresh, shift-refresh, or whatever it is on IE that forces it to completely reload.

Who was this directed at and what is it that looked far better?

[JacobH]

jdaw1: it depends a little on what you’re exactly trying to achieve (as there are a few ways to go about it), but you probably want to use:
padding-left: Xpx;
where X is the width of the image + 12px.

This is because the CSS box model dictates that a left-aligned background image will align to the line at the left of the padding area. If we increase the size of this padding to the width of the image+12px the content should then not overlap and have a nice “margin† around it.

Code: Select all

CSS box model:
_______
| _____
| | __
|m|p|c
|a|a|o
|r|d|n
|g|d|t
|i|i|e
|n|n|n
| |g|t
| | |_
| |___
|_____

[jdaw1]

Thank you.

Mac Firefox, latest version, X needs to be only 12px, not 48+12 = 60px. Please could an IE user test: is the large “ThePortForum.com† now slightly separated from the logo?

[DRT]

Thank you.

Mac Firefox, latest version, X needs to be only 12px, not 48+12 = 60px. Please could an IE user test: is the large “ThePortForum.com† now slightly separated from the logo?

Screenprint sent by email.

[JacobH]

Julian, if you’d like to test the page in a number of browsers, a good site is http://browsershots.org/. They used to be quite slow, but I think they’ve improved a bit now.

[jdaw1]

Julian, if you’d like to test the page in a number of browsers, a good site is http://browsershots.org/. They used to be quite slow, but I think they’ve improved a bit now.

Thank you. But as I realised only after viewing browsershots.org/websites/903532/, I will first need to set ThePortForumRed to be the default style.

[jdaw1]

Right. Having heard what’s been said, and considered the arguments, and following our increasingly-traditional one-man-one-vote democratic habit† , the new tawny is ┓ˆâ”“ˆâ”“ˆ #CC6600 ┓ˆâ”“ˆâ”“ˆ, and the new pale tawny is ┓ˆâ”“ˆâ”“ˆ #f4ddc6 ┓ˆâ”“ˆâ”“ˆ. And I am unanimous about that. To show it against the opposite background, they are quoted here.

the new tawny is ┓ˆâ”“ˆâ”“ˆ #CC6600 ┓ˆâ”“ˆâ”“ˆ, and the new pale tawny is ┓ˆâ”“ˆâ”“ˆ #f4ddc6 ┓ˆâ”“ˆâ”“ˆ

†  Me being the man.

[jdaw1]

I’ve also replaced the grey post background with ┓ˆâ”“ˆâ”“ˆ #e9e9c7 ┓ˆâ”“ˆâ”“ˆ, as grey is used for various neutral borders. Objections to the change? Same saturation and intensity as the new faint tawny, similar but clearly non-identical hue.

[DRT]

For those who like the Style proFormell, please go to your User Control Panel >> Styles and select ThePortForumSilver, which is a variant of proFormell with a different header.

prosilver users have gained a TPF logo.

Feel free to grumble.

[Overtired and emotional]

I have found the new scheme rather difficult to cope with, not in the sense of being unable to read the content, but in finding that the colours make me tire of reading quickly. I am red green colour blind; this may be a factor. Having said that, I would not criticise those who undertake the labour of redesigning the site.

[jdaw1]

The background colours go through a version a day: I can’t get no satisfaction. Please suggest, perhaps using www.jdawiseman.com/papers/trivia/web-colours-hsl.html for inspiration.

[JacobH]

I’m afraid that I’m less sure about the mintish green than the previous colours! Considering the large use of white in the new style, I wonder whether the problem you are having with the colours is less to do with the colours themselves but rather the architectural elements that pull the page together? As an experiment, perhaps a bolder user of borders might help the site gel together?

[jdaw1]

Agreed. Mintish green bad, and deceased. And green henceforth to be avoided outside

Code: Select all

 boxes. 

The background colours in the threads are there to help separate consecutive posts, and nested quotations (see very silly thread [url=http://theportforum.com/viewtopic.php?f=8&t=1642&start=25]Time Tunnels[/url]).

[JacobH]

Although, oddly, the background colours seem to disappear in the middle of the Tunnel…

[JacobH]

Not for the first time, it would have helped if I had read through the whole of the post before posting a reply…

[DRT]

I think the contrasting colours in posts are distracting. Can I suggest very light grey and very very light grey?

[jdaw1]

The same colours are used in consecutive PM messages, and some of the PM controls use grey. So I’d rather not use grey backgrounds. Unless the consensus is that I should.

[DRT]

What colour is the background in this post? Two lighter shades of this colour would do for me.

[DRT]

I have just noticed that the Board Index link has disappeared from the top of threads. Is this intentional? If so, what is the reasoning? Either way, I would prefer to have it back if others agree.

[jdaw1]

I have just noticed that the Board Index link has disappeared from the top of threads. Is this intentional? If so, what is the reasoning? Either way, I would prefer to have it back if others agree.

Is there a reason that you’re reluctant to click on the big site name?

[DRT]

I have just noticed that the Board Index link has disappeared from the top of threads. Is this intentional? If so, what is the reasoning? Either way, I would prefer to have it back if others agree.

Is there a reason that you’re reluctant to click on the big site name?

No. But I, and others less familiar with the site than I, would have to know that it done (or is it did?) the same thing.

[jdaw1]

For almost all sites, and especially phpbb sites, clicking on the site name goes back to the main page. Standard operating procedure. (Except ’orrible proFormell.)

[DRT]

I would like to say that I am starting to like ThePortForumRed. I hope JDAW's enthusiasm and commitment to make it work can be maintained in the face of such grumblings.

Nearly there I think.

[DRT]

For almost all sites, and especially phpbb sites, clicking on the site name goes back to the main page. Standard operating procedure. (Except ’orrible proFormell.)

It's obviously so intuitive that I just can't understand how I missed it.

[jdaw1]

Nearly there I think.

1. Please make a list of what lies betwixt here and there.

2. A possible idea: if the number of PMs is >0, should that message count at the top of the page blink or otherwise be very prominent. Yes, blink is very distracting to the eye, but the blink is easily switched off—read the message—and it would help with the problem that newbies sometimes don’t seem to notice PMs at all. Thoughts? I want it for me.

[DRT]

Nearly there I think.

1. Please make a list of what lies betwixt here and there.

I can only list what is relevant to me. And even then only what is relevant to me now. My current list is as follows:

1. Backgrounds should be 2 slightly different shades of the same colour. Preferrably a boring and non-garish colour.
2. Buttons outside posts should be the default grey style. See "Reply" and the search box and button next to it above each thread. The Reply button is a different style, is out of line and occassionally has text leaking from underneath it. Removing the search box and button would not be a good solution as some people may use it. Consistency in style, colour and alignment would be very good.
3. Re-instatement of the forum links at the top of threads.
4. Can't think of any more right now.

2. A possible idea: if the number of PMs is >0, should that message count at the top of the page blink or otherwise be very prominent. Yes, blink is very distracting to the eye, but the blink is easily switched off—read the message—and it would help with the problem that newbies sometimes don’t seem to notice PMs at all. Thoughts? I want it for me.

Works for me. But seems to go against the no animation rule.

[jdaw1]

There are two search boxes on this page. Users, speak up: do you use and need both?

I’d like to kill the search boxes floating around in the middle of the page, after which the Reply button (from which peeking text should have disappeared) then can stay in the same style as the ‘Quote’ button.

DRT: what do you think of the pale yellow and even paler mauve currently used as backgrounds?

[DRT]

DRT: what do you think of the pale yellow and even paler mauve currently used as backgrounds?

All variants of the two-light-colour-colour-scheme remind me of Neopolitan ice cream. Can we please try same colour, slightly different shades?

[jdaw1]

Can we please try same colour, slightly different shades?

Same colour, different shades, to be visibly different, requires that one of the shades be moderately dark. That reduces the text-on-background contrast too much for my taste. No.

Greys are used for administrative things in messages, so are out.

That leaves different faint pastel colours. Choose two of: faint red aka pink; faint blue; faint green; faint green-blue = cyan; faint red-green = yellow; red-blue = purple or pink. Choose!

[DRT]

Same colour, different shades, to be visibly different, requires that one of the shades be moderately dark. That reduces the text-on-background contrast too much for my taste. No.

Greys are used for administrative things in messages, so are out.

Contrasting pastel shades look naff. Seriously, they do. Completely and uttelry naff, gawdy and Neopolitan-ice-cream-ish. If we can't have very light grey and very very light grey (or very light anything and very very light anything that is the same as the first anything) then I vote for white with borders around posts.

[jdaw1]

On several bulletin boards I have found the alternation of backgrounds helps keep track of post boundaries.

New plan. You suggest two #RRGGBB colours, and I’ll try them now. Currently we have, and I quite like, #ffffcc and #e6e6ff. Suggest replacements.

[DRT]

#FFFFCC & #FFFF99

[jdaw1]

Howzat? (IMHO, awful. The new yellow is too yellow.)

[DRT]

Howzat? (IMHO, awful. The new yellow is too yellow.)

But the colours I chose were both yellow and what I am looking at is yellow and mauve.

To see an example of what I am proposing look here... http://www.phpbb.com/community/viewtopi ... 55&start=0

I would suggest that the guys at http://www.phpBB.com perhaps know a thing or two about designing a forum. Apart from the header and pink banner, which are rubbish.

[DRT]

OK - the bannana yellow has now kicked in. I agree, it's awful.

Next choice: Keep the light yellow and make the bright yellow lighter than the light yellow.

[jdaw1]

You suggest two #RRGGBB colours, and I’ll try them now.

Suggest two #RRGGBB colours please, not vague specifications. In other words, did you mean #ffffe5?

[jdaw1]

http://www.phpbb.com/community/viewtopi ... 55&start=0

Using #e1ebf2 (pale blue) and #ecf3f7.

[DRT]

You suggest two #RRGGBB colours, and I’ll try them now.

Suggest two #RRGGBB colours please, not vague specifications. In other words, did you mean #ffffe5?

Perhaps I did.

[jdaw1]

In other words, did you mean #ffffe5?

Perhaps I did.

If you did, it would have been jolly foolish, because it is functionally indistinguishable from white.

[DRT]

In other words, did you mean #ffffe5?

Perhaps I did.

If you did, it would have been jolly foolish, because it is functionally indistinguishable from white.

But would have been better than this bannana yellow I am looking at now. Go on, bite the bullet. Go for very light grey and very very light grey and ask others what they think.

[DRT]

The light yellow and very light yellow is better but now I don't think yellow is the answer. Go back to that mauve you had earlier and pick an other shade of mauve. That might do it.

[jdaw1]

Same requirement: choose #RRGGBBs and I’ll play.

[DRT]

Same requirement: choose #RRGGBBs and I’ll play.

It's bed time. Will ick some more colours tomorrow.

[jdaw1]

I’ve set them to #ffffcc and #eeffff which suffice pro tem.

I have also considerably shortened the vertical space occupied by the user information in the right column. Comment please.

[jdaw1]

I can only list what is relevant to me. And even then only what is relevant to me now. My current list is as follows:

1. Backgrounds should be 2 slightly different shades of the same colour. Preferrably a boring and non-garish colour.
2. Buttons outside posts should be the default grey style. See "Reply" and the search box and button next to it above each thread. The Reply button is a different style, is out of line and occassionally has text leaking from underneath it. Removing the search box and button would not be a good solution as some people may use it. Consistency in style, colour and alignment would be very good.
3. Re-instatement of the forum links at the top of threads.
4. Can't think of any more right now.

1. Backgrounds being negotiated. Awaiting next version from DRT, or a concession that it ain’t so bad.
2. Buttons awaiting comment on search box.
3. Forum links reinstated, but in navigation area that contains page numbers. Can be moved again if really wanted.
4. Unfixable.

[SushiNorth]

Regarding moving the breadcrumb trail, the board index link, etc...

I'd make a few suggestions, now that i've been using this design for a while...
1) Move the breadcrumb trail back so that it is proximity to the title (as the two are contextual to each other)
2) Consider buttons, or larger controls, instead of text for the other functions, but avoid stacking them one above the other

[jdaw1]

Regarding moving the breadcrumb trail, the board index link, etc...

I'd make a few suggestions, now that i've been using this design for a while...
1) Move the breadcrumb trail back so that it is proximity to the title (as the two are contextual to each other)
2) Consider buttons, or larger controls, instead of text for the other functions, but avoid stacking them one above the other

I think I agree about the breadcrumbs. But please explain 2 a bit more: which functions?

[SushiNorth]

I think I agree about the breadcrumbs. But please explain 2 a bit more: which functions?

Advanced Search, User Control Panel, pending new messages, view your posts, FAQ, Members, Logout
Somehow I recall them being on the left in an earlier version (thus also piled up next to the thumbnails), but in particular having all those links near to each other, and in text, means that commands are often no more than 15 pixels high, and in very close proximity to more commands. It can be tough to quickly click the right one, and if I were a glass or two of port in, I'd never get it right. If we spread them out along a single line, or made them buttons (with small text, but bigger visual borders) it would probably improve that corner's clutter.

[DRT]

Can we try these, please?

┓ˆâ”“ˆâ”“ˆ #e9e9c7 ┓ˆâ”“ˆâ”“ˆ
┓ˆâ”“ˆâ”“ˆ #e9e9b5 ┓ˆâ”“ˆâ”“ˆ