New Style

[JacobH]

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.

At the moment, you’ve got h1 as 4ems which on my machine, with default settings, translates to about 62px:

Code: Select all

/* Site description and logo */
#site-description {
	float: left;
	width: 70%;
	font-size: 4em;
[…]
}

The h2 is, however, being explicitly defined as 48px

Code: Select all

h2 {
	/* Forum header titles */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #3f3f3f;
	font-size: 48px;
	margin: 0.8em 0 0.2em 0;
}

Perhaps we could have the h2.logo being 48px and have the normal h2 (which is used as the topic titles) slightly smaller?

Incidentally, if ProSilver is the default style for phpbb3, I’m a bit appalled at the quality of the CSS that they’ve put into the release. Due to the Cascading nature of CSS, having a well structured file is absolutely vital. Also, if grouping is done properly and by feature rather than html element, it is much easier to modify the CSS without running hundreds of search/replace queries. You very much have my sympathy for having to wrestle with it!

[JacobH]

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

At a conservative estimate of 6 months, I suppose that would be something like 5%?

[jdaw1]

I’m a bit appalled at the quality of the CSS that they’ve put into the release. Due to the Cascading nature of CSS, having a well structured file is absolutely vital

Thank you — it’s not just me. It does seem like a mess.

Anyway, you have email with the latest version. Feel free to rewrite (or to tell me to rewrite) anything.

[benread]

Am I being blind or is the "quote" button now awol?

[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

At a conservative estimate of 6 months, I suppose that would be something like 5%?

So, you can think yourself lucky that you are not my age otherwise that would be 53 months

[DRT]

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

Jdaw1,

I'm not sure what your "at home" version consists of but if it allows you to seem the results of your labour when applying fixes then perhaps you could post screenshots here so that we can continue to comment between updates to the live system?

Derek

[jdaw1]

I have set the default style back to black.

Users may still choose ThePortForumRed for themselves, if they should so wish. When it’s nearer perfection it will become the default.

[RonnieRoots]

I have set the default style back to black.

Users may still choose ThePortForumRed for themselves, if they should so wish. When it’s nearer perfection it will become the default.

Will this style still be available when theportforumred becomes default?

[jdaw1]

Will this style still be available when theportforumred becomes default?

Chief Admin’s decision.

[DRT]

Will this style still be available when theportforumred becomes default?

Chief Admin’s decision.

I agree it is Chief Admin's decision but I vote yes, it should still be available for the users to choose individually if they want to.

[jdaw1]

Larger icons implemented. Comment welcome.

New colours can’t yet be enabled because of a strange bug that will, hopefully, be fixed soon.

[DRT]

The button size does not seem to have changed. Perhaps the change just isn't great enough to make a difference.

I have noticed that a few of the buttons (such as Reply) seem to have hyperlinks hidded beneath them that are not very well hidded.

Derek

[jdaw1]

I have noticed that a few of the buttons (such as Reply) seem to have hyperlinks hidded beneath them that are not very well hidded.

Hmm. Will work on that. (Except that none of my work will have any affect until the ‘refresh’ problem is fixed.)

[jdaw1]

Hmmmm. Refresh problem was my fault: strictly ASCII please — no “•† characters.

So we have progress — please set your style to ThePortForumRed, and either marvel or make specific suggestions.

And I know the jump-to-top graphic is a mess.

And please, in the following why doesn’t the second set of lines work?

Code: Select all

a:link:focus, a:visited:focus {border: thin dotted #cc9933;}
a:link {color: #990000;}
a:visited {color: #cc9933;}
a:link:hover, a:visited:hover {color: #000000;}
a:link:active, a:visited:active {color: #ffffff; background-color: #990000;} 

a:link[background-color ~= #990000] {color: #ffffff;}
a:link:hover[background-color ~= #990000] {color: #c46a6a;}
a:visited:hover[background-color ~= #990000] {color: #c46a6a;}
a:link:active[background-color ~= #990000] {color: #990000; background-color: #cc9933;} 
a:visited:active[background-color ~= #990000] {color: #990000; background-color: #cc9933;}

[benread]

I have moved to new TPF red style and "back to the top" buttons seem to be missing. Any ideas how I get these back?

Thanks.

[jdaw1]

Any ideas how I get these back?

You ask me. On the case.

[JacobH]

Hmmmm. Refresh problem was my fault: strictly ASCII please — no “•† characters.

Ah, that’s what those characters were! Out of interest, what encoding were you using? I would have thought UTF-8 would be safe.

The new theme is great; I like it a lot and anyone on ProSilver should switch. I do wonder whether the header might change, though. To my eyes, it might look better if either the logo (or, if not the whole logo, just the letters) were re-drawn so it appeared smooth at a larger size, or if the header appeared in a mono-spaced typeface which would then more closely match the letters of the logo.

And please, in the following why doesn’t the second set of lines work?

Code: Select all

a:link:focus, a:visited:focus {border: thin dotted #cc9933;}
a:link {color: #990000;}
a:visited {color: #cc9933;}
a:link:hover, a:visited:hover {color: #000000;}
a:link:active, a:visited:active {color: #ffffff; background-color: #990000;} 

a:link[background-color ~= #990000] {color: #ffffff;}
a:link:hover[background-color ~= #990000] {color: #c46a6a;}
a:visited:hover[background-color ~= #990000] {color: #c46a6a;}
a:link:active[background-color ~= #990000] {color: #990000; background-color: #cc9933;} 
a:visited:active[background-color ~= #990000] {color: #990000; background-color: #cc9933;}

I think you may have got this working, but if not:

CSS defines 4 main link pseudo-elements:
a:link (normal link)
a:visited (link that has already been visited)
a:hover (normal link with mouseover)
a:active (link that has been clicked on and is currently loading)

They must, bizarrely, come in that order to work and I don’t believe that you are able to nest them (so you can’t have a different colour for a visited link which has been hovered over compared to one that has not been visited and is being hovered over; but I don’t think you are trying to do that).

-Jacob

[JacobH]

And please, in the following why doesn’t the second set of lines work?

Code: Select all

a:link:focus, a:visited:focus {border: thin dotted #cc9933;}
a:link {color: #990000;}
a:visited {color: #cc9933;}
a:link:hover, a:visited:hover {color: #000000;}
a:link:active, a:visited:active {color: #ffffff; background-color: #990000;} 

a:link[background-color ~= #990000] {color: #ffffff;}
a:link:hover[background-color ~= #990000] {color: #c46a6a;}
a:visited:hover[background-color ~= #990000] {color: #c46a6a;}
a:link:active[background-color ~= #990000] {color: #990000; background-color: #cc9933;} 
a:visited:active[background-color ~= #990000] {color: #990000; background-color: #cc9933;}

Also, I haven’t used attribute selectors before, but can they be used for CSS? I thought they could only be used for selecting HTML attributes? For example:
input[type="submit"]{ xyz };
would select:
<input type="submit">

The only way to achieve CSS selection would with be with in-line CSS:
p[style="color: white"]{ xyz };
or a class:
p[class="post"]{ xyz };

[jdaw1]

The new theme is great; I like it a lot and anyone on ProSilver should switch.

Well, thank you kindly.

I do wonder whether the header might change, though. To my eyes, it might look better if either the logo (or, if not the whole logo, just the letters) were re-drawn so it appeared smooth at a larger size, or if the header appeared in a mono-spaced typeface which would then more closely match the letters of the logo.

This is a digital community: its digitality, the forum, is at its core. Hence the deliberately bitmapped logo. The official TPF typeface is Palatino Bold, and the official colour is 0.6:0:0 = 990000, or pantone 704 in print.

As for the CSS, www.webmasterworld.com/forum83/9334.htm suggested the layout I used. (And I am thoroughly unable to adjudicate its disagreement with you.) But in any event the problem was ‘fixed’ only by removing all the 990000 backgrounds.

[jdaw1]

Any ideas how I get these back?

You ask me. On the case.

BackToTop uparrow has returned. That was more trouble, and less well done, than it ought to have been.

Private message pages also tidied. Comment welcomed.

[benread]

Any ideas how I get these back?

You ask me. On the case.

BackToTop uparrow has returned. That was more trouble, and less well done, than it ought to have been.

Private message pages also tidied. Comment welcomed.

...but much appreciated. Thank you.

[DRT]

Could the header please look like this?

Note smaller font.



ThePortForum.com

[jdaw1]

No. That occupies more vertical space — one would have to scroll sooner and further.

[DRT]

Can we have the smaller font and a larger gap between the logo and ThePortForum.com?



ThePortForum.com

[jdaw1]

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.

[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.