[geeklog-modules] Suggested CSS standards for plugins

[Heather Engineering]

Hi Blaine,

Sounds like a great idea. One thing - I tend to use relative font 
sizes, not absolute, which in my opinion is better practice.

Cheers,

Euan.

On 2004/12/01, at 11:04, Blaine Lang wrote:

> 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;
> }
>