NEW Guru Forum Layout test

The Guru's Den

Public Forum: Test development page.

User Name

Question: To be or NOT to be?

This is an HTML test version of the forum layout that would need conversion to CSS. The corners are 12x12 pixels and take a moment to load the first time but once cached are not a problem. The text at this point is not styled. As the cells progress downward there have been minor changes and adjustments.

Sandra Wilson

Question: Where are you from?

We are an International forum and often it helps to know where folks are from. A flag icon could be used by those that chose to do so. I have a folder full of public domain flags of the world. Here they are shown square, should be rectanglular.

Thomas Powers

Question: Where is this image from? (Vietnam)

Image thumbnails in the forum need to be limited to 120-128px HEIGHT in this layout. At this size they do not increase the minimum posting height and are plenty big enough for a preview. Images linked into any forum must have some sort of permanence, IE copy to "IMAGE_BANK".

Can there be a switch when the image is inserted for
A "Show enlarged image in popup only" B "Show my gallery folder with this image"

The "Guru" should be able to insert HTML with any size image he choses.

User Name

Comments: Icons and pixel twiddling Patrick, Your icon art is great but it disapears at 32x32.

The gold CSI logo shows up much better than blue and black on blue. I removed all but a 1 pixel black border and the rounded corners then increased the contrast a bit. Reducing the edge framing enlarges the image to a more recognizable graphic.

The problem with the gold is that for years we have used blue "ink" for CSI member names and it has come to be known as "True Blue". If we used the gold anvil and a light blue Earth then it might work on a strong blue background and save "True Blue".

My little swami/guru with the golden anvil started as a terrible sketch that has been digitally processed over and over. At 32x32 it is terribly pixely but it comes close to working OK and is recognizable. We may want to get away from the jell-button look in some cases.

In this block the flag has been reduced to 30px in height so that it matches the icons with borders at 32px. It is rendered at 30x42. There is an HSPACE of 1 on the three bottom icons and 8 on the little one next to the user photo.

This block has the user ID table pushed to the top instead of floating to the middle.

John Q. Public User

Comments: Box with Drop shadow - same size table images Revised Thursday 11am

This is close to the most minimal public user box with simple question. A vast number of anvilfire's forum users are Newbies, students and children.

Edges here have beeen blackened to match #000000 black. Background is #b0b0b0.

The Guru's Den

anvilfire.com #1 blacksmithing site on the Internet

anvilfire guru

Test Button

Comment: GOOGLE ADS

I've found that the google ads do poorly in the live forums but well on static pages. I would like to have the google ad column OFF while a topic is live and ON when the topic is closed or archived.

The google ad code should live in a location as an include where it can be easily replaced by local ads or another system in the event google ends the ads or they become a problem. The google ads are content driven and will be more context sensitive in our new categorized forum.

Google limits the number of ads per page. This ad unit is a 120x600 unit. Up to three of these can be used. The problem on dynamic pages is figuring out how many to put onto a page. Subjects rapidly grow and will often need the mazimum number of ad units. Currently I use three rows ALIGN="top" ALIGN "middle" (float) and ALIGN="bottom". This puts ads at the hot top and bottom positions and one floating.

I have some control over the look of the add units. They can be made to blend in using the same colors as the page. I also select the text color. This can be changed dynamically on the google site and updates all ad units. Those with rounded corners have a border, others do not.

anvilfire guru

Comment: TABLE with CSS

This is not a pure liquidCorners type CSS box. It is a table with CSS backgrounds and dimensions. While it is not much different it requires about 20% less code characters per box and can be modified by a CSS file. For maintainability the CSS for the box edges and fill should be seperate from other CSS page definitions.

Nested tables by ID is problematic in FireFox. Text CSS is not yet defined here.

anvilfire guru

Comment: TABLE with CSS spans and divs

The comment body text CSS is a seperate file.

anvilfire guru

Sample Icons:

Icons shown sized and resized to 64, 48 and 32 pixels square. The 32 size would need very careful recrafting to be identifiable. The 48 size need to be bolder. All need clearer colors.

anvilfire guru

Comment: Simplified Table

Fancy stuff minimalaized. Left column did not reduce as much as I thought. The problem is it will either be tall or wide. Tall adds a lot of unused lines (blank space). All these boxes will have a row of small links at the bottom for "respond", "contact". . .

Moden design issues include folks with huge 3000 pixel wide monitors and mobile users with 320.

VIcopper

Comment: SO. . . how about your touchmark?

Here is VIcopper's touchmark (from the registry) used as an image/avatar along with the CSI icon.

We could do away with the extra icon and go back to our color system Here I have used "blue ink"

anvilfire guru

Comment: Graph instead of icons

Age and experiance graph bars do not save much space and may be too litteral for some folks. Here each is represented directly in pixels of height.


			Optional Table: Using same CSS as above, dropping a col and table width call.


	Optional Table: Using 3 optional edge components and CSS calls


	Optional Table: Using 3 more optional edge components and CSS calls