[geeklog-devel] Suggested CSS standards for plugins

[Blaine Lang]

I would like to suggest a common set of CSS declarations that plugins and GL components would use and it would make it a lot easier for GL site admin's to theme their sites and components. I have been re-working the CSS that I use over and over the past year and have been re-using a more common set of declarations.

I'd like to propose that we consider these declarations and possibly add them to the core theme CSS (after any required discussion).

This CSS is what I am using in the new forum plugin look (shown on mysite). I think the CSS buttons work well and can easily be themed.
The CSS has a lot of options for use and for theming your projects and should provide the needed design flexiblity.

I'm still refining this CSS and have to pass it thru the standards verification but wanted to get any input as interest in this idea.

Blaine

/* New Plugin CSS Declarations */
.pluginBG              { background-color: #1C1E2D; }
.pluginTitle           { color: #1C1E2D; background-color:#EFEFEF; font-weight: bold; font-size: 11px; font-family: Verdana, sans-serif; }
.pluginHeader          { color: #FFFFFF; font-weight: bold; font-size: 100%; background-color: #767D8D; }
.pluginFooter          { background-color:#EFEFEF; }
.pluginAlert           { padding:5px 15px 5px 15px; color:#D8010E; background-color: #FEF1B4; font-weight:bold;}

.pluginSolidOutline    { background-color: #396998; }
.pluginSolidFill       { background-color: #1A3955; }
.pluginCellTitle       { color: #1C1E2D; font-weight: bold; font-size: 10px; font-family: Verdana, sans-serif; background-color: #E5E5EA; }
.pluginCellFill        { background-color: #E5E5EA; }
.pluginCellText        { color: #000; font-weight: plain; font-size: 75%; font-family: Verdana, sans-serif; background-color: #F7F7F7; }
.pluginTinyText        { font-size:70%; }
.pluginSmallText       { font-size:80%; }
.pluginMediumText      { font-size:85%; }
.pluginLargeText       { font-size:90%; }

.pluginRow1            { background-color: #F7F7F7; }
.pluginRow2            { background-color: #E5E5EA; }

.pluginRollOver         { color: #1C1E2D; background-color: #E5E5EA; text-align: left; font-weight: plain; font-size: 100%; font-family: Verdana, sans-serif; }
.pluginRollOut          { color: #1C1E2D; background-color: #F7F7F7; text-align: left; font-weight: plain; font-size: 100%; font-family: Verdana, sans-serif; }

.pluginLinks A:link     { color: #0000FF; font-style: normal; font-weight: plain; text-decoration: none }
.pluginLinks A:visited  { color: #1E1E8E; font-style: normal; font-weight: plain; text-decoration: none }
.pluginLinks A:hover    { color: #0000FF; font-style: normal; font-weight: plain; text-decoration: underline }
.pluginBreadCrumbs, .pluginBreadCrumbs A:link     { color: #EFEFEF; font-style: normal; font-weight: plain; text-decoration: none }
.pluginBreadCrumbs A:visited  { color: #EFEFEF; font-style: normal; font-weight: plain; text-decoration: none }
.pluginBreadCrumbs A:hover    { color: gold; font-style: normal; font-weight: plain; text-decoration: none }

A.pluginButton:link, A.pluginButton:visited {
    color: #000;
    text-align: center;
    padding-top: 2px;
    display: block;
    height: 19px;
    text-decoration: none;
    background-color: transparent;
}
A.pluginButton:hover { 
    color: blue; 
    text-align: center; 
    padding-top: 2px; 
    background: center url(navbar/images/button_over.gif); 
    background-repeat: repeat-x; 
    display: block; 
    height: 19px; 
    text-decoration: none; 
    background-color: 
    transparent;
}

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://pairlist8.pair.net/pipermail/geeklog-devel/attachments/20041130/4073dae9/attachment.html>