28 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

As you may have noticed the site changes have occurred.
There was quite a lot changed and not everyone will like everything but I think overall it should get a good response.

Here is a list of some of the changes.
The style of the Forum and whole site has changed quite significantly.
Most of the changes were to improve page load time by replacing images with borders and backgrounds.
Many of the table within the forum have been removed and replaced with div or DL in the case of the forum index.

A blog has been added to the domain home page, or this one if you are looking at the domain home page. The blog extract specific posts from the forum database and can either display them in both the blog page and the forum or just the blog page.
I have also added an RSS2 feed for the blog.

Along with all of that the forum has been upgraded from 2.0.6 to 2.0.11

Feel free to post your likes and dislikes here.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Site Changes

Changes Shock what changes, didn't notice a thing Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 19 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site Changes

Any chance of putting in a

.bodyline {
max-width:80em;/*70-80em seems most comfortable*/
margin:0 auto;
}
for those of us with real browsers? That makes the width of posts comfortable and scales with the font-size.

and maybe
.postcont {margin-left:163px!important;}/*haven't checked the cascade or specificity but right now the !important is, well, important!*/

Also, you'll need .posthead {min-height:24px;} applied to posthead to prevent the floated .fr from intruding into the top of posts.

It takes courage to detablize a forum but a CSS forum should be a paragon of CSS, shouldn't it?

I recently installed a phpBB forum and am analyzing its CSS and structure with a view to partial detablization - I started with a theme that was not heavily graphical to begin with. I still believe that posts are "data" and that table cells are appropriate semantically for display. With the limited things I have done already, page weight has dropped by approximately 1/2.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Site Changes

Hi DCElliot,
Thanks for the pointers I will have a look at them today along with another long list of minor changes.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 35 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Site Changes

Well done Tony.
I did a similar thing with phpBB back in early 2003 for the Portland Forum
http://portal.portland.co.uk/forum/

Not an easy task but worth it in the end.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

wisbin
Offline
Enthusiast
Netherlands
Last seen: 14 years 47 weeks ago
Netherlands
Joined: 2004-10-28
Posts: 71
Points: 0

Site Changes

looking good already. Well done.

I like the postdata in blocks better than the floating post text.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 19 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site Changes

Tony

You are doing an incredible job. I have been visiting many times a day just to see what you come up with next. (And to fool myself into thinking I could do things better :roll: )

Having said that, there are a couple of suggestions (as always)

/*float the form to the right to make positioning more pleasing to the eye*/
.posttopic form {
position:relative;
float:right;
}
/*Would advise horizontal measurements stay in px, otherwise the box grows with font-size changes, throwing off spacing*/
.poster {
width:150px;
float:left;
clear:left;
overflow:hidden;/*clip too-long names*/
margin:0 3px .5em ;
padding:3px;
background-color:#FFF;
}

.posttopic,
.postcont,
.bstat,
.whatsnew,
.poster {
border:solid #369 1px;
}
table.forumline {
border-collapse:collapse;
}
table.forumline td {
border:1px solid #999;
border-style:solid dotted;
}
.row2 {
background-color:#EFEFEF;
}

I am curious why you haven't wrapped each post in its own autoclearing box. It would give you more latitude in terms of vertical post spacing and perhaps styling post backgrounds. The method you are using works just fine, I guess I am just used to boxing things more tightly.

Anyhow, I will keep looking for little tweaks. You are definitely on a roll. Did you by any chance check on what the pre-modification page-weight was? It would be interesting to have had a comparo in terms of weight and rendering time.

Stu - the Portland site looks really nice. You might consider adding Tony's clearfix solution to your .forum_box to make the floated elements play nice with font-size changes. I note you have wrapped the posts in their own boxes. There is an awful lot of inlined styling - isn't that hard to maintain even with templates?

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 35 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Site Changes

The Portal forum was designed way back when I was just starting out with CSS. The inline styles were a temporary solution and should have been taken out and added to the external style sheet(Drunk but they (The Portal Team) were keen to get hold of the template and took it before it was finished.

I have not updated it since and there is a lot that should have been done.

However, Tony is doing a splendid job here and I am sure with all the members wishing to give advice it will be pixel perfect before too long.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Site Changes

Hi Guys,
Firstly thanks for all the tips, and keep them coming.
Most of the suggestions will be implemented.
I am not a pixel prefect sort of guy Smile and really don't notice or care if something is out by a few pixels in a particular browser.
Where possible I like to let things flow, so i will leave the padding and margins in ems to change with text size.

Quote:
I am curious why you haven't wrapped each post in its own autoclearing box. It would give you more latitude in terms of vertical post spacing and perhaps styling post backgrounds.
I prefer to let it flow without being too perfectly boxed.

Specs page size etc.
Forum Index page:
Total Size 57012
HTML 23145
Images 18676
CSS 13268

Now
Total Size 50876
HTML 19913
Images 15624
CSS 13416

Nothing ground breaking but still a good solid saving.

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 11 years 25 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

Site Changes

I was wondering when the CSSifying would come to this forum Wink

Seems fine but i wasn't seeing borders around these posts in FF :?

I am Dan, Dan I am.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 19 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site Changes

Tony wrote:
I am not a pixel prefect sort of guy Smile and really don't notice or care if something is out by a few pixels

:? Ha! That is the first time I've ever been accused of being a pixel-Nazi. I, too, am a go-with-the-flow type. I just think some of the borders and spacings are nice linear elements that lose something when they get out of proportion with similar elements.

Besides, I know you will come around in time. Laughing out loud

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Site Changes

DCElliot, you may be right. Smile
I believe a website is never finished and should continue to evolve.

There is still pages within the site that need to be updated and improved.
Eventually I will get to them.

Overall I'm happy with the transition and result.
Hopefully the blog will be useful to help promote the How To's and other points of interest.
Add the blog to whatever RSS Feed reader software you use ( Sage ) and help promote it on your sites.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 35 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Site Changes

Putting an extra div around the post will stop the stagger that you currently get (see the second and third post etc.) between the post and the poster's details.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 12 years 14 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

Site Changes

^ I was just about to say something about that... man it's annoying... especially in this thread - http://www.csscreator.com/css-forum/ftopic6544.html

otherwise... i like the new sections... much clearer that way. not too fond of the theme but i guess i'll get used to it Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Site Changes

Hi All,
I have added another div around the posts.

As far as the theme goes I am thinking of reorganizing the style sheets and making it simple for members to submit there own theme.
You would really only have to choose a few colours.

Would anyone be interested in submitting a theme or am I going to be waisting more time :roll:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Site Changes

In what sense submit ones own theme?
To be used as personal preference or as Style Switching thing
Are you sure your not just creating more work for yourself Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Site Changes

I was going to have a crack at amending the CSS in Firefox (with the web developer extension), to see what could be done. I reckon just inform people of this route for now.

The next sentence is true. The previous sentence is false. Discuss...

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 16 years 11 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Site Changes

Hello there, just chiming in to say that there's WAAAAY too much blue on the thread listing pages. There's the blue thread icon, the blue border between threads and blue color for the text. Laughing out loud I can't scan/read the thread titles fast enough because of all the blue. Plus the thread titles look bolded? That slows down people when reading. Sure it's great to bold one or two words in a paragraph, but a sentence or more inhibits the flow.

How about we differentiate the thread title text from everything and unbold it so it's easier to read? And the colors for the poster's name should be changed too, just a few more 'a' classes right? Or use the same class as the poster's name right next to it in the last posted by.

Instead of the blue borders, how about just making the borders white or gray and alternate the div's from white to gray. That pretty much gets rid of the need for the border and helps the reader differentiate thread from thread.

Thanks for everything.

"What I had, I gave today. What I saved, I lost forever."

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Site Changes

It's great to get some feedback.
I was quite happy with the overall look of the site.
But now it seems I have much more to do.

I'd like to stick with having links blue.
Some of the bold can be removed (goto and by) but keep in mind the thread title is supposed to look like a minor heading.
The default phpbb style for the thread titles has always been bold.

I will look at reducing the borders between threads and alternating between gray and white backgrounds.

There is still much more to do, please keep up the feedback or forever hold your peace Wink

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 12 years 13 weeks ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

I'm in

I'd chime in on that. I've been a ghost lately but it'd be a cool feature that I'd come back to check out.

PS, I know you're not interested in the nitpicks (can't blame you) but there's an overload on the topic page in NS7- see attachment. I only know because my work offers only two browsers: IE6 and NS7, so naturally I use NS7. Closest thing to Firefox. Smile

Diplomacy is the art of letting someone have your way

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Site Changes

Thanks KnightWolfJK,
I will find a different way to position those boxes.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Site Changes

Ok I have uploaded more changes and hopefully improved the look of posting previews etc.

KnightWolfJK,
Netscape 7.2 on Linux has no problem with the overlap.
If you have any suggestions on how to fix it I'm all ears but I ain't going to loose any sleep over it.

There is a slight rounding problem in firefox and Netscape 7.2 and most likely many other browsers that shows up on the forum index and forum pages.
Every few rows one of the borders looks wider, it's actually 1 px of background showing through.
I will have a look at it later but for now I really should do some paid work Wink

wisbin
Offline
Enthusiast
Netherlands
Last seen: 14 years 47 weeks ago
Netherlands
Joined: 2004-10-28
Posts: 71
Points: 0

Site Changes

hi tony,

I just wanted to let you know the left bottom box (previous blogs) on the main index has 2 scrollbars (vertical and horizontal) which looks like you dont need it. (they are there in FF 1.0 and IE6)

if it is of any help, this will kill them:

.scr{padding:0 3px;}
.scrlistbox{height:200px; }

cheers!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Site Changes

Hi wisbin,
Thanks but I do want the scroll bars.
Shortly there will be more blog articles and the scroll bars will be needed to access them.
In the mean time I can see your point and could change the overflow property to auto so the scroll bars only show up as needed.
Although I think I will leave it how it is for now.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 19 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site Changes

Tony - I noticed some weirdness in FF looking at the underlined text in this post arising from the hover styles placed on the span.u style as detailed in the block below

/* simple popups */
.u .i{position:relative; top:-1.5em; left:0; display:none; background-color:white; border:solid #369 1px; padding:0 .5em}
.u:hover .i{display:block; position:relative; z-index:10; text-decoration:none;}
.u:hover{ position:absolute; max-width:90%;  text-decoration:none;}
/* holly hack to show for IE's lack of hover support \*/
* html .u .i {display:inline;  position:static;  background-color:transparent; border:none; padding:0;}
/* end hack */
It produces this weird hover effect when underlining is used. I really can't figure out what was intended there and I can't imagine it is having the desired-for effect.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Site Changes

Hi DCElliot,
I was playing around with effects trying to create popups without adding extra markup.
The styles should have been removed long ago.
Thanks for pointing it out.

florent
florent's picture
Offline
Enthusiast
Paris, France
Last seen: 12 years 42 weeks ago
Paris, France
Timezone: GMT+1
Joined: 2003-04-19
Posts: 96
Points: 0

Site Changes

Wow, I'm quite impressed ! Detablized PhpBB !!! Well done Tony !

I'm a perfectionist
and perfect is a skinned knee

kassen
Offline
newbie
Stockholm
Last seen: 12 years 26 weeks ago
Stockholm
Timezone: GMT+1
Joined: 2005-01-27
Posts: 6
Points: 0

Site Changes

I totally agree. the site looks great!
One glitch though, I just browsed in with IE/mac and got the following look.

/Christian

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Site Changes

Hi kassen,
Interesting Look :?
I'm sure if I had a Mac I would be able to sort it out, but until then I will just have a guess.