Article Template for Free Republic - With Instructions for Usage (BLOCKQUOTE gone; thank you, John)

Self

[Benoit Baldwin]

Article Template for Free Republic Use to obtain the border and column effect you see here Valid HTML 4.01 Transitional Displays virtually the same in all browsers version 3.x and higher (if not, let me know) Instructions for Usage Copy and paste the following HTML into the Text of Article: form, when posting a new article. Insert the article's HTML into the space noted in the template. That is all. See Notes on Usage for more information. <!-- BEGIN TEMPLATE --> <table bgcolor="#999999" border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td width="5%"> <br> </td> <td width="55%"> <table bgcolor="#000000" border=0 cellpadding=0 cellspacing=1> <tr> <td> <table bgcolor="#FFFFFF" border=0 cellpadding="30%" cellspacing=1> <tr> <td> <!-- Put the article's HTML here --> </td> </tr> </table> </td> </tr> </table> </td> <td width="40%"> <br> </td> </tr> </table> <!-- END TEMPLATE --> Notes on Usage The value in green should be 100%, unless BLOCKQUOTE is imposed on us again, in which case it should be less; 90% or thereabouts. The values in blue, reading the template from top to bottom, affect the width of the left, center, and right columns repectively--adjust to your liking, but their sum should be that of the value in green. The values in purple, reading the template from top to bottom, affect the color of the left and right columns, the center column border, and the center column respectively. I use hexadecimal color values; the English names of the colors may be substituted. The value in brown affects the space (or "padding") around whatever you place in the center column (text, usually). In other words, the margins or whitespace within the center column can be adjusted by changing this value. If the article's HTML contains tables itself, ensure they are properly nested and terminated. Be careful when using PRE--long lines of PRE formatted text will adversely affect the output of this template. The whole purpose of using this template is to enhance an article's readability, mainly by reducing the size of paragraph widths. It is easily customizable to meet the needs of just about any article or taste, but you may find other methods more to your liking.

[John Robinson]

Speaking of which, what are the restrictions on class selectors? Not what is in the spec, but what is actually out there. Will fr_article_body and fr_comment_body be too long? Will the underscores confuse some dumb ol' browser?

BTW, I think the "fr_" prefix will solve almost all possible name conflicts with source material.

[George W. Bush]

xml77e2: How difficult would it be to modify the "Latest Posts" page to include peoples' custom style sheets?

JohnRob: Other than carving it up & assigning class names, not difficult at all. But before we go and do that, I'd like to debut the new thread format (and while doing so, breaking all existing style sheets. Ugh.)

Bring it on! I'm dying to see the new stuff. I'm looking forward to revamping my style sheets.

All your style are belong to us!

Speaking of which, what are the restrictions on class selectors? Not what is in the spec, but what is actually out there. Will fr_article_body and fr_comment_body be too long? Will the underscores confuse some dumb ol' browser?

BTW, I think the "fr_" prefix will solve almost all possible name conflicts with source material.

Only trial and error will tell us. I don't think that the class names you're planning will cause problems except in versions of NS and IE earlier than version 4. I'd suggest that you target the newer browsers: the IE 5/NS 5/Opera 5 etc. People who want to hold onto really old machines are just going to have buy Opera 5 sometime anyway. People with really old browsers are already being locked out of sites with extensive JavaScript/VBScript etc. I think there's a very definite limit on how backward-compatible you want to be.

I'd love to have a list of your class names. I'm preparing a utility for WYSISYG configuration of style sheets for FR pages. I'm doing the rough layout work in VB but will probably move to VBScript for my final version. It will be targetted for IE 5.0+, NS 6.0+.

I hope you will give a class name to the Reply link too. A name like <a class="reply|103|George W. Bush|102" href="...">. One could do some very interesting scripting. I've been working on how to do a built-in script for IE that would allow you to highlight a phrase and right-click it and select "FR Reply" and it would then bring up the Post Reply page with the highlighted text's HTML already inserted and BLOCKQUOTEd in the TEXTAREA. Not that hard to do. I'm pretty close to a solution even now without the class names. But with proper class names, it would be a snap. Highlight/right-click/select-menu-item/type-response. No more copy/paste and tag fumbling on most replies.

I noticed your new user name link modifications to eliminate user numbers and replace with user names. Very sly how you deployed that so quietly. I don't think hardly anyone even noticed. Soon, I expect Post Reply will only accept registered users and bumplist names.

[steveegg]

Other than carving it up & assigning class names, not difficult at all (referring to allowing style sheets to be applied to the "latest posts" page). But before we go and do that, I'd like to debut the new thread format (and while doing so, breaking all existing style sheets. Uhg.)

Fire when ready.

Speaking of which, what are the restrictions on class selectors? Not what is in the spec, but what is actually out there. Will fr_article_body and fr_comment_body be too long? Will the underscores confuse some dumb ol' browser? BTW, I think the "fr_" prefix will solve almost all possible name conflicts with source material.

I don't think that understcores alone breaks NS 4.77 (definitely won't break IE 5.5/6 or NS 6). All you can do is try it (don't recall any site that's "broken" in NS 4.77 being broken because of either class length or underscores in class).

[George W. Bush]

Have you ever collected statistics to determine browser/OS versions? On a per-user and per-post basis, I mean. So you could see the percentage of users on a particular browser and browser version and also percentage of total posts made per browser/version. It would indicate both how many users and the "intensity" of particular browsers at FR.

That information could be very useful in deciding future upgrade options. Not only would it tell you what the scale of the problem is right now with browsers currently in use but you could, for instance, look at your Netscape users to see who is using NS 4.xx and if they are running a Windows 98 or later, you can be sure that they could upgrade it to a newer Netscape or IE. Same thing for users of old versions of IE.

Just an idea. Might be handy for programming decisions and it would be a snap to code for you. You'd have pretty significant results within a week.

[John Robinson]

One problem with the fr_ prefix: it's so dang ugly.

Anyway, I think I'm on to something here. I'm using multiple div tags to classify chunks of the thread.

The first div names a class "article" or "comment". This envelops the entity from head (header) to toe (menu choices).

Each of those can have a state, which is the second div which envelops from head to toe. The class names of the states are "normal" for regular posts, "removed" for deleted material (normal users just see the text "deleted comment", but moderators and up will see the entire 'removed' comment) and "private" (which is a special feature of the new forum, more on that in due time.)

Contained within this pair of div tags come the "header", "body", and "menu". "header" is assigned to a table, "body" and "menu" are divs.

<div class="article|comment">
<div class="normal|removed|private">
<table class="header"></table>
<div class="body"></div>
<div class="menu"></div>
</div>
</div>


There's also a "page" class used on divs, and "page_here" and "page_goto" which are used on a hrefs within the page div. The new forum will paginate threads, 20 replies per page, and will have a nifty navigation bar to zoom through the replies. (Threads will now be able to accommodate over 65,000 replies without breaking a sweat. Revenge of the PLEASE IGNORE THIS THREAD.)

While using the page bar, the article text will be collapsed, and that is currently served by a "collapsed" class on a div. There's also a "title" class if you should want to give special treatment to titles.

I'll get this stuff up ASAP, I'd like to see what you guys can do with it. I spent the night goofing around with CSS, testing out the layout. My appeciation of dark art really shines through on these things. What can I say, I like rainy days.

Here's one question, I think I know the answer but haven't put it to the test yet. Would it be better to access the style sheet via a common URL, like /perl/css and have that URL return the content of the custom style sheet. Or would it be more preferrable to specify the URL of the style sheet? The later option would allow you to store your style sheet on your hard drive for easy customization.

[John Robinson]

Prepend fr_ to all those class names, btw.

[steveegg]

One problem with the fr_ prefix: it's so dang ugly.

Anyway, I think I'm on to something here. I'm using multiple div tags to classify chunks of the thread.

[Technical stuff snipped for bandwidth and general lack of comment]

I'll get this stuff up ASAP, I'd like to see what you guys can do with it. I spent the night goofing around with CSS, testing out the layout. My appeciation of dark art really shines through on these things. What can I say, I like rainy days.

Here's one question, I think I know the answer but haven't put it to the test yet. Would it be better to access the style sheet via a common URL, like /perl/css and have that URL return the content of the custom style sheet. Or would it be more preferrable to specify the URL of the style sheet? The later option would allow you to store your style sheet on your hard drive for easy customization

I can't think of a "prettier" tag than appending "fr_" to the Free Republic-specific classes. Multiple div tags should work. As for how to put the style sheet, I'd let us specify the URL, but note that for Netscape/Mozilla users, the "file///c|/dir/file" format must be used (IE does tolerate this convention, as well as the normal convention).

[smith288]

Maybe you could make an option of storing it at FR or point it elsewhere. I prefer storing it at FR. I have been doing that and havent really found it to be hard to make changes. Maybe you could have a TEXTAREA that shows our current CSS and we could make the changes right there on the /perl/css/edit-style page?

[John Robinson]

The upload stuff was a way of killing two birds w/one stone. Testing file uploading & doing something useful. I have a version of edit-style that uses textarea, it needs a couple tweaks before going public.

[smith288]

Kick butt....does it have a preview or anything like that? Like maybe if you press a button called "preview" it will pop up a new window with some sample text with the CSS styles applied. Sound possible?

[John Robinson]

Okay, here's a sneak preview of how threads will look in my forum software. It's ugly w/o a style sheet, I'll have to fix that up. This is shoe-horned into FR's existing database structure, which is horrible, and so most of the cool stuff isn't available for show.

Bus Crashes in Tennessee

Just randomly choose new thread id's if you want something else. I'll add some type of link from Latest posts for this later.

You might want to install this style sheet to get a feel for the new classes:

.fr_title
{
    padding-top: 1%;
    padding-bottom: 1%;
}

.fr_collapsed
{
    font: bold 12pt Arial;
    text-align: center;
}

.fr_collapsed A
{
    text-decoration: none;
    color: #aaaaaa;
}

.fr_collapsed A:hover
{
    color: white;
}

.fr_page
{
    font: bold 8pt/10pt Arial;
    color: gray;
    text-align: center;
}

.fr_page A:hover
{
    color: white;
}

.fr_page_here
{
    text-decoration: none;
    color: white;
}

.fr_page_goto
{
    text-decoration: none;
    color: gray;
}

.fr_normal
{
    font: bold 8pt/10pt Arial;
    background-color: gray;
    border-style: outset;
    border-width: 1;
    margin-bottom: 1em;
}

.fr_article .fr_header
{
    font: 8pt Arial;
    border-bottom: thin groove #999999;
    padding: 1px 6px;
}

.fr_comment .fr_header
{
    font: bold 8pt/10pt Arial;
    border-bottom: thin groove #999999;
    padding: 1px 6px;
}

.fr_normal .fr_header
{
    background-color: #777777;
}

.fr_normal .fr_header A
{
    text-decoration: none;
    color: #aaaaaa;
}

.fr_normal .fr_header A:hover
{
    text-decoration: none;
    color: white;
}

.fr_normal .fr_body
{
    font: 10pt Bookman Old Style, serif;
    margin-left: 30px;
    margin-right: 30px;
}

.fr_removed
{
    font: bold 8pt/10pt Arial;
    background-color: maroon;
    border-style: outset;
    border-width: 1;
    margin-bottom: 1em;
}

.fr_removed .fr_header
{
    font: bold 8pt/10pt Arial;
    background-color: maroon;
    border-bottom: thin solid #999999;
}

.fr_removed .fr_body
{
    font: 10pt Bookman Old Style, serif;
    margin-left: 30px;
    margin-right: 30px;
}

.fr_menu
{
    font: normal 8pt/10pt Arial;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 1em;
    color: #aaaaaa;
}

.fr_menu B
{
    font-weight: normal;
}

.fr_menu A
{
    text-decoration: none;
    color: #dddddd;
}

.fr_menu A:hover
{
    text-decoration: none;
    color: white;
    /* font-weight: bold; */
}

.fr_copy
{
    font: italic 8pt/10pt Arial;
    text-decoration: none;
    color: gray;
}

.fr_default
{
    display: none;
}

.fr_quote
{
    border-top: ridge thin;
    border-bottom: ridge thin;
    padding-top: .5em;
    padding-bottom: .5em;
    font-style: italic;
}

BODY#forum
{
    background-image: url("http://www.freerepublic.com/bg/smblue_rock.gif");
}

.fr_body A:link {color:"#101090"; text-decoration: none } 
.fr_body A:visited {color:"#702090"; text-decoration: none; font-style: italic }
.fr_body A:hover {text-decoration: underline} 

.fr_hi
{
  BACKGROUND-COLOR: #eeee00;
}

Believe it or not, this started out as GWB's style sheet.

[John Robinson]

Hrm. I like the sound of that.

[smith288]

I was able to write a sample in ASP but alas you use perl (which looks greek to me)
What I did was threw the contents of the textarea into the head of the preview result page. If user is satisfied, they can Apply it and that will upload the text as the style. Just an idea.

[smith288]

I was able to write a sample in ASP but alas you use perl (which looks greek to me)
What I did was threw the contents of the textarea into the head of the preview result page. If user is satisfied, they can Apply it and that will upload the text as the style. Just an idea.

[RedWing9]

My first thought is gag! Sorry, but that is a major change to the look of FR. Most users probably are going to freak when they look at that. :)

I especially always preferred FR continuous thread look, rather than the "broken into 20's" look of the Delphi's and others. It makes it REALLY hard to have a conversation because you have to constantly click links to read what post #40 was referencing in post #2, etc.

[George W. Bush]

You've got it right already. Store the sheets at FR. Then you can make a gallery so newbies can select. There will be some design competition here when people catch on and your biggest problem will be setting up a gallery with thumbnails and such to store them all. Naturally, when that day comes, I'll turn over the style sheets and thumbs and images at my website for you to use to start your gallery with. That is, if you want them. Actually, just go grab anything you want over there at any time.

Hopefully, I'll be ready to deploy a roll-yer-own style sheet generator by the time you're ready with all these new tags.

The current stylesheet system is best. It can accommodate wallpaper from anywhere on the web or stored on the local hard drive. The only advantage might be the amount of work the server will have to do to send the stylesheet each time. Probably negligible. Especially if most people end up using a stylesheet from a gallery and the "official" FR stylesheets are cached in RAM. It would be best if you can see and keep track of all the most used style sheets yourself anyway. Those who use custom sheets will just have to figure out any changes in the browsers or FR code for themselves.

Thanks for those tag names. It helps with what I'm doing. It makes me think your new forum software is going to be very special and provide a great code base for future customization once you have it all tested and solid.

I'll get this stuff up ASAP, I'd like to see what you guys can do with it. I spent the night goofing around with CSS, testing out the layout.

Any chance of a screenshot? (drool, drool)

---

Thank, smith288, for the new navyblue/skyblue/white style sheet. It's online at the website now and ready to download (credited to you of course). I hope this catches on and we get some good sheets ready to use before John brings the whole thing online. (I need to finish my WYSIWYG stylesheet editor!) I'd really like that. People will fall over in shock at the all the new features.

I hope some folks will get interested in assembling some knockout wallpaper choices for IE6/NS6.

[smith288]

Maybe there could be an option to list the amount. Like "Show 100 replies per page" kind of option. Kinda like the Latest Post preferences. I do agree, I love FR format right now...if we could try to maintain the current format as much as possible all will be happy...

[George W. Bush]

Now I know I have died and gone to BBS Heaven!

Believe it or not, this started out as GWB's style sheet.

I think you made too many improvements to bother giving me any credit. This is a real knockout, John! I really like the dark art look. Maybe I'll try for the Mary-Poppins-too-much-Prozac look for some contrast.

I'm tending to side a little with RedWing9. 20 posts at a time is a little short. But somewhere in the range of 30-40 would be pretty good for getting a lot of comment on a single page while still cutting down on bandwidth from the huge pages. I get so tired of long Refreshes. But if you have a strong preference for 20 per page, I can easily live with 20 better than the Refresh times we currently have on threads bigger than 100K. A lot of us don't have cable/DSL. I did notice you're making provision in the software for numbers of posts per page so you can change it or possibly allow users to set their own custom posts/page setting. Very solid. This new design reeks of dependability and future options for growth. Me like!

For rolling up stylesheets to test with, it would be good if the thread had some BLOCKQUOTE'd text in one of the replies. I didn't find any. Also, an example of highlighted text would be helpful.

(BTW, your <SPAN CLASS="hi"> highlighting doesn't seem to work but <EM> does.)

[steveegg]

Two major bugs with NS 4.77 (fixed one, still working on the other one):

-The background image does not load. The fix is to change the "BODY#forum" line to "BODY".
-The text boxes do not fill the screen. I'm still trying to work this one out.

Other than that, looks like a good job. Would like to test on one of the threads that broke NS 4.77 ( this thread would be good), but I don't have the time (patience, really) to hunt through the posts to get to it.

[steveegg]

Got the other major 4.7x bug solved: the following line has to be added to the .fr_normal class:  margin-right: 0;. Neither of the changes I gave affect the way things appear in either IE 6 or Netscape 6/Mozilla.