Steve Dekorte
Chymist
Would it be possible for me to contribute a style for your consideration?
TLO Style Concept - Crampton
- Thread starter Steve Dekorte
- Start date
Of course! You may do so publicly as a post reply or via PM. I do enjoy creating new styles.
Steve Dekorte
Chymist
Is there a standard css template to edit to do this?
The styles for vBulletin are comprised of many templates. I am attaching the main graphics settings for Death Poems as an example, however it would be much easier to design a template if you have a vBulletin license. For example, you are not going to know what many of the css names correspond to on the screen. If you send me the desired color and background settings for the main elements, I could translate them to the correct code and credit you accordingly. Many thanks for the interest!
Steve Dekorte
Chymist
I'd like to do a style based on TL's Crampton book. Black courier (or ideally a old typewriter font) text on a white background. No other colors. Major headings would be in uppercase.
This is a great idea, but much more challenging to implement with clarity than one would initially think. I hope you do not mind if I began work on this in an investigatory mode. You can view the new style Crampton (BETA) by selecting it from the selection box at the bottom left of each page. I followed your description as best I could. From this point, you can direct changes for me to implement. Again, I will credit you with the concept accordingly if this turns out to be a permanent style.
Current issues/challenges:
- I used Resurrection - White as a starting template for this new style, since it was closest to the basic concept of black on white. Most of the graphics have not yet been updated, however. There are still graphic and coloration remnants which would require revisions.
- I have set the base font to Courier New. This is the most common courier font variant across various computer platforms. The dilemma with universal web fonts is frustrating, of course. There is a method to embed fonts so that they are loaded locally for specific sites. I have looked into this before but had reservations about full accessibility. I will have a look again, as featuring a classic typewriter font as a text element would necessitate this approach.
- The concept of a total black and white theme is proving to be a challenge to implement while maintaining region and link distinction. The various panels become indistinguishable and my initial effort to delineate links as underlined elements is not exactly aesthetically pleasing.
Steve Dekorte
Chymist
It's a great start. I particularly like the new typewriter header. Some suggestions:
- a smaller font (12px or 13px) and make all fonts the same size
- ether eliminate area fills and outlines and use caps for all non-content or use a very light gray for outlines and fills, such as #ddd
- if underlined links are still unattractive after these changes, maybe use a dark gray for links instead
- replace all buttons and icons with text links or text representations
When the theme is complete, it might be nice to have an black/white inverted version of it for use when ambient light is low.
These are all great suggestions, and I followed most. Have a looksee and let me know if I am managing to capture your vision. I started initial work on the buttons with the smeared typewriter font. I also plan to convert the smilies to text their textual counterparts. Many thanks for proposing this style concept!
Steve Dekorte
Chymist
I like how it's developing. Would it be possible to change the panel outlines to just have a top 1px border instead of 1px on all sides?
Other suggestions:
- Could the various arrow and other icons be changed to their unicode equivalent text character? Geometric Shapes in Unicode
- eliminate the outlines for:
-- page numbers ("Page 1 of 4 ...")
-- the panel directly under the main "Thomas Ligotti Online" header
-- quoted text as the quoted text is already distinguished by italics. Maybe quoted text could be medium grey if the italics aren't clear enough.
-- content areas (only use outlines for editing and info panels)
- uppercase header menus
- make all fonts the same size
- date format as YYYY-MM-DD
- maybe change the skull icons to asterisks next to the title (ex: Acolyte **)
- double the left/right page margins to more closely resemble a printed page
- would it be possible to remove the join date, posts, bars and AIM icon on the left of posts? (all that info is accessible by clicking on the user)
Last edited:
Steve Dekorte
Chymist
Instead of rendering the buttons etc as images in a typewritter font, how about making one of the free typewriter fonts below the default (before Courier in the font list):
Carbon Type Font - 1001 Free Fonts
1942 Report Font - 1001 Free Fonts
This would make all the fonts in that style for those that install the font and Courier for those that don't have the font.
It would also allow all the text to change size as users increased their browser font size, which can be helpful for low vision users.
Carbon Type Font - 1001 Free Fonts
1942 Report Font - 1001 Free Fonts
This would make all the fonts in that style for those that install the font and Courier for those that don't have the font.
It would also allow all the text to change size as users increased their browser font size, which can be helpful for low vision users.
I assume that you are proposing this font integration for the buttons only, as it would likely prove a bit illegible for reading text. There may be an issue with this, however, as vBulletin relies on graphic images for the buttons and there are no standard text measures in place for missing button elements. I will look into this further, however.
Steve Dekorte
Chymist
That's a good point. Maybe we could use a more legible grungy typewriter font. For example:
Stalker2 font
Powderfinger font
Halda font
Letter font
Example CSS declaration:
{font-family: Powderfinger, JMLetter, Courier}
I placed Powderfinger Type as the primary font for the two main panels. It proves very hard to read for my eyes. Perhaps special fonts should only be used for buttons and/or prominent headers.
Steve Dekorte
Chymist
You're right. In that case I guess I'd prefer the buttons to be normal courier text if possible and for all fonts (except the main header) to be the same size.
Steve Dekorte
Chymist
CSS example of table borders that are only on the bottom:
table {
border-bottom-color:#eeeeee;
border-bottom-width:1px;
}
table {
border-bottom-color:#eeeeee;
border-bottom-width:1px;
}
Is this preferred over a full border? Perhaps top and bottom borders only? Revised within major elements for review and comment.
Steve Dekorte
Chymist
There seems to be a problem - I don't see the bottom border and the fonts are no longer courier.
It appears correctly for me. Please have another look. Clear your browser cache if necessary.
Steve Dekorte
Chymist
Ok, I see the correct fonts now but no bottom borders in the sections.
Strange. It appears in FireFox but not IE or Opera. Will tweak.