From geeklog at langfamily.ca Tue Nov 30 21:04:06 2004 From: geeklog at langfamily.ca (Blaine Lang) Date: Tue, 30 Nov 2004 21:04:06 -0500 Subject: [geeklog-modules] Suggested CSS standards for plugins Message-ID: <006101c4d74a$09eb3de0$650a10ac@XPBL2> 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: From info at heatherengineering.com Tue Nov 30 21:43:25 2004 From: info at heatherengineering.com (Heather Engineering) Date: Wed, 1 Dec 2004 11:43:25 +0900 Subject: [geeklog-modules] Suggested CSS standards for plugins In-Reply-To: <006101c4d74a$09eb3de0$650a10ac@XPBL2> References: <006101c4d74a$09eb3de0$650a10ac@XPBL2> Message-ID: 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; > } > ?