[geeklog-devtalk] geeklog-devel digest, Vol 1 #440 - 1 msg

geeklog-devel-request at lists.geeklog.net geeklog-devel-request at lists.geeklog.net
Wed Dec 1 13:00:02 EST 2004


Send geeklog-devel mailing list submissions to
geeklog-devel at lists.geeklog.net

To subscribe or unsubscribe via the World Wide Web, visit
http://lists.geeklog.net/listinfo/geeklog-devel
or, via email, send a message with subject or body 'help' to
geeklog-devel-request at lists.geeklog.net

You can reach the person managing the list at
geeklog-devel-admin at lists.geeklog.net

When replying, please edit your Subject line so it is more specific
than "Re: Contents of geeklog-devel digest..."


Today's Topics:

1. Suggested CSS standards for plugins (Blaine Lang)

--__--__--

Message: 1
From: "Blaine Lang" <geeklog at langfamily.ca>
To: <geeklog-modules at lists.geeklog.net>, <geeklog-devel at lists.geeklog.net>
Date: Tue, 30 Nov 2004 21:04:06 -0500
Subject: [geeklog-devel] Suggested CSS standards for plugins
Reply-To: geeklog-devel at lists.geeklog.net

This is a multi-part message in MIME format.

------=_NextPart_000_005E_01C4D720.21070510
Content-Type: text/plain;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable

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 {=20
color: blue;=20
text-align: center;=20
padding-top: 2px;=20
background: center url(navbar/images/button_over.gif);=20
background-repeat: repeat-x;=20
display: block;=20
height: 19px;=20
text-decoration: none;=20
background-color:=20
transparent;
}


------=_NextPart_000_005E_01C4D720.21070510
Content-Type: text/html;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=3DContent-Type content=3D"text/html; =
charset=3Diso-8859-1">
<META content=3D"MSHTML 6.00.2900.2523" name=3DGENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=3D#ffffff>
<DIV><FONT face=3DArial size=3D2>I would like to suggest a common set of =
CSS=20
declarations that plugins and&nbsp;GL components would use and it would =
make it=20
a lot easier for GL site admin's to theme their sites and components. I =
have=20
been re-working the CSS that I use over and over the past year and have =
been=20
re-using a more common set of declarations.</FONT></DIV>
<DIV><FONT face=3DArial size=3D2></FONT>&nbsp;</DIV>
<DIV><FONT face=3DArial size=3D2>I'd like to propose that we consider =
these=20
declarations and possibly add them to the core theme CSS (after any =
required=20
discussion).</FONT></DIV>
<DIV><FONT face=3DArial size=3D2></FONT>&nbsp;</DIV>
<DIV><FONT face=3DArial size=3D2>This CSS is what I am using in the new =
forum plugin=20
look (shown on mysite).&nbsp;I think the CSS buttons work well and can =
easily be=20
themed.</FONT></DIV>
<DIV><FONT face=3DArial size=3D2>The CSS has a lot of options for use =
and for=20
theming your projects and should provide the needed design=20
flexiblity.</FONT></DIV>
<DIV><FONT face=3DArial size=3D2></FONT>&nbsp;</DIV>
<DIV><FONT face=3DArial size=3D2>I'm still refining this CSS and have to =
pass it=20
thru the standards verification but wanted to get any input as interest =
in this=20
idea.</FONT></DIV>
<DIV><FONT face=3DArial size=3D2></FONT>&nbsp;</DIV>
<DIV><FONT face=3DArial size=3D2>Blaine</FONT></DIV>
<DIV><FONT face=3DArial size=3D2></FONT>&nbsp;</DIV>
<DIV><FONT face=3DArial size=3D2>/* New Plugin CSS Declarations=20
*/<BR>.pluginBG&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs=
p;&nbsp;&nbsp;&nbsp;=20
{ background-color: #1C1E2D;=20
}<BR>.pluginTitle&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n=
bsp; {=20
color: #1C1E2D; background-color:#EFEFEF; font-weight: bold; font-size: =
11px;=20
font-family: Verdana, sans-serif;=20
}<BR>.pluginHeader&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; =
{=20
color: #FFFFFF; font-weight: bold; font-size: 100%; background-color: =
#767D8D;=20
}<BR>.pluginFooter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; =
{=20
background-color:#EFEFEF;=20
}<BR>.pluginAlert&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n=
bsp; {=20
padding:5px 15px 5px 15px; color:#D8010E; background-color: #FEF1B4;=20
font-weight:bold;}</FONT></DIV>
<DIV><FONT face=3DArial size=3D2></FONT>&nbsp;</DIV>
<DIV><FONT face=3DArial size=3D2>.pluginSolidOutline&nbsp;&nbsp;&nbsp; { =

background-color: #396998;=20
}<BR>.pluginSolidFill&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { =
background-color:=20
#1A3955; }<BR>.pluginCellTitle&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { =
color:=20
#1C1E2D; font-weight: bold; font-size: 10px; font-family: Verdana, =
sans-serif;=20
background-color: #E5E5EA;=20
}<BR>.pluginCellFill&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {=20
background-color: #E5E5EA;=20
}<BR>.pluginCellText&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { color: =
#000;=20
font-weight: plain; font-size: 75%; font-family: Verdana, sans-serif;=20
background-color: #F7F7F7;=20
}<BR>.pluginTinyText&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { =
font-size:70%;=20
}<BR>.pluginSmallText&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { =
font-size:80%;=20
}<BR>.pluginMediumText&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { font-size:85%;=20
}<BR>.pluginLargeText&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { =
font-size:90%;=20
}</FONT></DIV>
<DIV><FONT face=3DArial size=3D2></FONT>&nbsp;</DIV>
<DIV><FONT face=3DArial=20
size=3D2>.pluginRow1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp=
;&nbsp;&nbsp;=20
{ background-color: #F7F7F7;=20
}<BR>.pluginRow2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb=
sp;&nbsp;=20
{ background-color: #E5E5EA; }</FONT></DIV>
<DIV><FONT face=3DArial size=3D2></FONT>&nbsp;</DIV>
<DIV><FONT face=3DArial=20
size=3D2>.pluginRollOver&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; =
{ color:=20
#1C1E2D; background-color: #E5E5EA; text-align: left; font-weight: =
plain;=20
font-size: 100%; font-family: Verdana, sans-serif;=20
}<BR>.pluginRollOut&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=
{=20
color: #1C1E2D; background-color: #F7F7F7; text-align: left; =
font-weight: plain;=20
font-size: 100%; font-family: Verdana, sans-serif; }</FONT></DIV>
<DIV><FONT face=3DArial size=3D2></FONT>&nbsp;</DIV>
<DIV><FONT face=3DArial size=3D2>.pluginLinks =
A:link&nbsp;&nbsp;&nbsp;&nbsp; {=20
color: #0000FF; font-style: normal; font-weight: plain; text-decoration: =
none=20
}<BR>.pluginLinks A:visited&nbsp; { color: #1E1E8E; font-style: normal;=20
font-weight: plain; text-decoration: none }<BR>.pluginLinks=20
A:hover&nbsp;&nbsp;&nbsp; { color: #0000FF; font-style: normal; =
font-weight:=20
plain; text-decoration: underline }<BR>.pluginBreadCrumbs, =
.pluginBreadCrumbs=20
A:link&nbsp;&nbsp;&nbsp;&nbsp; { color: #EFEFEF; font-style: normal;=20
font-weight: plain; text-decoration: none }<BR>.pluginBreadCrumbs=20
A:visited&nbsp; { color: #EFEFEF; font-style: normal; font-weight: =
plain;=20
text-decoration: none }<BR>.pluginBreadCrumbs A:hover&nbsp;&nbsp;&nbsp; =
{ color:=20
gold; font-style: normal; font-weight: plain; text-decoration: none=20
}</FONT></DIV>
<DIV><FONT face=3DArial size=3D2></FONT>&nbsp;</DIV>
<DIV><FONT face=3DArial size=3D2>A.pluginButton:link, =
A.pluginButton:visited=20
{<BR>&nbsp;&nbsp;&nbsp; color: #000;<BR>&nbsp;&nbsp;&nbsp; text-align:=20
center;<BR>&nbsp;&nbsp;&nbsp; padding-top: 2px;<BR>&nbsp;&nbsp;&nbsp; =
display:=20
block;<BR>&nbsp;&nbsp;&nbsp; height: 19px;<BR>&nbsp;&nbsp;&nbsp;=20
text-decoration: none;<BR>&nbsp;&nbsp;&nbsp; background-color:=20
transparent;<BR>}<BR>A.pluginButton:hover { <BR>&nbsp;&nbsp;&nbsp; =
color: blue;=20
<BR>&nbsp;&nbsp;&nbsp; text-align: center; <BR>&nbsp;&nbsp;&nbsp; =
padding-top:=20
2px; <BR>&nbsp;&nbsp;&nbsp; background: center=20
url(navbar/images/button_over.gif); <BR>&nbsp;&nbsp;&nbsp; =
background-repeat:=20
repeat-x; <BR>&nbsp;&nbsp;&nbsp; display: block; <BR>&nbsp;&nbsp;&nbsp; =
height:=20
19px; <BR>&nbsp;&nbsp;&nbsp; text-decoration: none; =
<BR>&nbsp;&nbsp;&nbsp;=20
background-color: <BR>&nbsp;&nbsp;&nbsp; =
transparent;<BR>}<BR></FONT></DIV>
<DIV><FONT face=3DArial size=3D2></FONT>&nbsp;</DIV></BODY></HTML>

------=_NextPart_000_005E_01C4D720.21070510--



--__--__--

_______________________________________________
geeklog-devel mailing list
geeklog-devel at lists.geeklog.net
http://lists.geeklog.net/listinfo/geeklog-devel


End of geeklog-devel Digest



More information about the geeklog-devtalk mailing list