Site Changes

Changes what changes, didn't notice a thing

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

Hi DCElliot,
Thanks for the pointers I will have a look at them today along with another long list of minor 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.

looking good already. Well done.

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

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

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

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

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.

I was wondering when the CSSifying would come to this forum

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

:? 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.

DE

DCElliot, you may be right.
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.

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.

^ 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

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:

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

Hugo.

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.

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

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

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.

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

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

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!

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.

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

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.

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

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

/Christian

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.