Item9504: update css documentation; add recipe for sidebar background…

…; border around foswikiHelp; margin for twisty button links git-svn-id: http://svn.foswiki.org/trunk@8764 0b4bb1d4-4e5a-0410-9cc4-b2b747904278
foswiki · Aug 25, 2010 · 7898c19 · 7898c19
1 parent 786be7e
commit 7898c19
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 53 deletions.
diff --git a/PatternSkin/data/System/PatternSkinCssCookbook.txt b/PatternSkin/data/System/PatternSkinCssCookbook.txt
@@ -68,11 +68,9 @@ See example at: PatternSkinCssCookbookFonts
 #HeightTopBar
 ---+++ I want to change the height of the top bar
 
-The height of the top bar is defined in =theme= CSS files. The default height in =theme_foswiki.css= is 90px, in =theme_twiki.css= it is 64px.
-
 <blockquote>
 This is the complete style definition to set the height of the top bar:
-<verbatim class="html">
+<verbatim class="css">
 #patternTopBar,
 #patternClearHeaderCenter,
 #patternClearHeaderLeft,
@@ -91,20 +89,25 @@ Change the number from 64px to your value.
 
 ---+++ No top bar
 
-See example at: PatternSkinCssCookbookNoTopBar
+[[PatternSkinCssCookbookNoTopBar][See example]]
 
 ---+++ Centered page
 
-See example at: PatternSkinCssCookbookCenterPage
+[[PatternSkinCssCookbookCenterPage][See example]]
 
 ---+++ Centered page (with a border around the page)
 
-See example at: PatternSkinCssCookbookCenterPageBorder
+[[PatternSkinCssCookbookCenterPageBorder][See example]]
+
+---+++ Sidebar background color
+
+[[PatternSkinCssCookbookSidebarBackground][See example]]
 
 ---+++ Setting !EditTablePlugin styles
 
-See example at: PatternSkinCssCookbookEditTableStyle
+[[PatternSkinCssCookbookEditTableStyle][See example]]
 
 ---++ Style sheet documentation
-See %SYSTEMWEB%.PatternSkinCss for documentation of !PatternSkin CSS classes
+   * See %SYSTEMWEB%.PatternSkinCss for documentation of !PatternSkin CSS classes
+   * See %SYSTEMWEB%.AppendixCascadingStyleSheets for documentation of Foswiki CSS classes
 <!-- %JQREQUIRE{"chili"}% -->
diff --git a/PatternSkin/data/System/PatternSkinCssCookbookEditTableStyle.txt b/PatternSkin/data/System/PatternSkinCssCookbookEditTableStyle.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="ProjectContributor" date="1134249079" format="1.1" version="$Rev$"}%
+%META:TOPICINFO{author="ProjectContributor" date="1282772512" format="1.1" version="$Rev$"}%
 %META:TOPICPARENT{name="PatternSkin"}%
 
 ---+!! PatternSkinCssCookbook Recipe: [[Foswiki:Extensions.EditTablePlugin][EditTable]] style
@@ -25,4 +25,4 @@ You can write this line in %SYSTEMWEB%.DefaultPreferences, in %USERSWEB%.SitePre
 <!-- %JQREQUIRE{"chili"}% -->
 
 
-%META:FILEATTACHMENT{name="edittable.css" attachment="edittable.css" attr="" comment="" date="1134249078" path="edittable.css" size="388" stream="edittable.css" user="ProjectContributor" version="1"}%
+%META:FILEATTACHMENT{name="edittable.css" attachment="edittable.css" attr="" comment="" date="1282772512" path="edittable.css" size="388" stream="edittable.css" user="ProjectContributor" version="1"}%
diff --git a/PatternSkin/data/System/PatternSkinCssCookbookNoLeftBar.txt b/PatternSkin/data/System/PatternSkinCssCookbookNoLeftBar.txt
@@ -1,6 +1,5 @@
 %META:TOPICINFO{author="ProjectContributor" date="1129333294" format="1.1" version="$Rev$"}%
 %META:TOPICPARENT{name="PatternSkin"}%
-
 ---+!! PatternSkinCssCookbook Recipe: Hide the left bar
 
 <div class="foswikiHelp">

diff --git a/PatternSkin/data/System/PatternSkinCssCookbookNoTopBar.txt b/PatternSkin/data/System/PatternSkinCssCookbookNoTopBar.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="ProjectContributor" date="1130024123" format="1.1" version="$Rev$"}%
+%META:TOPICINFO{author="ProjectContributor" date="1282772512" format="1.1" version="$Rev$"}%
 %META:TOPICPARENT{name="PatternSkin"}%
 
 ---+!! PatternSkinCssCookbook Recipe: Hide the top bar
@@ -13,38 +13,4 @@ This line loads the extra style definition:
 You can write this line in %SYSTEMWEB%.DefaultPreferences, in %USERSWEB%.SitePreferences, in WebPreferences, in your user topic or on a single page.
 </div>
 
-Add the dynamic link to the logo image to the topic text:
-<verbatim class="tml">
-<style type="text/css" media="all">
-    #patternSideBar { background-image:url("%PUBURLPATH%/%WEB%/%WEBPREFSTOPIC%/logo.gif"); }
-</style>
-</verbatim>
-<div class="foswikiHelp">
-%ICON{info}% If you don't write this overloading style in a template and use an external =.css= file, you need to set the image to the absolute url:
-<verbatim class="tml">
-%ADDTOZONE{
-    "head"
-    id="%SYSTEMWEB%/PatternSkinCssCookbookNoTopBar::CSS"
-    text="
-        <style type='text/css' media='all'>
-            #patternSideBar {
-                background-image:url('%PUBURLPATH%/%WEB%/%WEBPREFSTOPIC%/logo.gif');
-            }
-        </style>"
-}%
-</verbatim>
-Always write in-line =&lt;style&gt;= tags using the above [[VarADDTOZONE][ADDTOZONE]] example to ensure the style tags are added inside the =&lt;head&gt;= and not the =&lt;body&gt;= - otherwise the page won't validate as valid XHTML.
-</div>
-
-%ADDTOZONE{
-    "head"
-    id="%SYSTEMWEB%/PatternSkinCssCookbookNoTopBar::CSS"
-    text="
-        <style type='text/css' media='all'>
-            #patternSideBar {
-                background-image:url('%PUBURLPATH%/%WEB%/%WEBPREFSTOPIC%/logo.gif');
-            }
-        </style>"
-}%
-
-%META:FILEATTACHMENT{name="notopbar.css" attachment="notopbar.css" attr="" comment="" date="1130024123" path="notopbar.css" size="395" stream="notopbar.css" user="ProjectContributor" version="1"}%
+%META:FILEATTACHMENT{name="notopbar.css" attachment="notopbar.css" attr="" comment="" date="1282772512" path="notopbar.css" size="395" stream="notopbar.css" user="ProjectContributor" version="1"}%
diff --git a/PatternSkin/data/System/PatternSkinCssCookbookSidebarBackground.txt b/PatternSkin/data/System/PatternSkinCssCookbookSidebarBackground.txt
@@ -0,0 +1,125 @@
+%META:TOPICINFO{author="ProjectContributor" date="1282772512" format="1.1" version="2"}%
+%META:TOPICPARENT{name="PatternSkin"}%
+---+!! PatternSkinCssCookbook Recipe: Sidebar background color
+To see if the background color really extends beyond the body, we make the body contents higher than the sidebar.
+
+Note that to set the background color, we set both =patternWrapper= and =patternSideBar=:
+<verbatim class="css">
+#patternWrapper,
+#patternSideBar {
+	background-color:#eee;
+}
+</verbatim>
+
+<div class="foswikiHelp">
+This line loads the extra style definition:
+<verbatim class="tml">
+   * Set USERSTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/PatternSkinCssCookbookSidebarBackground/sidebar.css
+</verbatim>
+You can write this line in %SYSTEMWEB%.DefaultPreferences, in %USERSWEB%.SitePreferences, in WebPreferences, in your user topic, or on a single page.
+</div>
+<!-- %JQREQUIRE{"chili"}% -->
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+dummy content to make this page higher
+
+<!-- %JQREQUIRE{"chili"}% -->
+%META:FILEATTACHMENT{name="sidebar.css" attr="" comment="css to give the sidebar a background color" date="1282772512"}%
+
diff --git a/PatternSkin/lib/Foswiki/Contrib/PatternSkin/MANIFEST b/PatternSkin/lib/Foswiki/Contrib/PatternSkin/MANIFEST
@@ -12,6 +12,7 @@ data/System/PatternSkinCssCookbookEditTableStyle.txt 0644
 data/System/PatternSkinCssCookbookFonts.txt 0644
 data/System/PatternSkinCssCookbookNoLeftBar.txt 0644
 data/System/PatternSkinCssCookbookNoTopBar.txt 0644
+data/System/PatternSkinCssCookbookSidebarBackground.txt 0644
 data/System/PatternSkinCustomization.txt 0644
 data/System/PatternSkinElements.txt 0644
 data/System/PatternSkinGraphics.txt 0644
@@ -56,6 +57,7 @@ pub/System/PatternSkinCssCookbookEditTableStyle/edittable.css 0644
 pub/System/PatternSkinCssCookbookFonts/fonts.css 0644
 pub/System/PatternSkinCssCookbookNoLeftBar/hideleftbar.css 0644
 pub/System/PatternSkinCssCookbookNoTopBar/notopbar.css 0644
+pub/System/PatternSkinCssCookbookSidebarBackground/sidebar.css 0644
 pub/System/PatternSkinTheme/bg_button_gradient.gif 0644
 pub/System/PatternSkinTheme/bg_buttoncancel_gradient.gif 0644
 pub/System/PatternSkinTheme/bg_submit_gradient.gif 0644

diff --git a/PatternSkin/pub/System/PatternSkinCssCookbookEditTableStyle/edittable.css b/PatternSkin/pub/System/PatternSkinCssCookbookEditTableStyle/edittable.css
@@ -2,7 +2,8 @@
 /* 1 */
 .foswikiTopic .editTableInput,
 .foswikiTopic .editTableTextarea {
-	font-family:arial, "Lucida Grande", verdana, sans-serif;
+	font-family:georgia,times;
+	background:#ffc;
 }
 /* 2 */
 .foswikiTopic .editTable .foswikiTable td {

diff --git a/PatternSkin/pub/System/PatternSkinCssCookbookNoTopBar/notopbar.css b/PatternSkin/pub/System/PatternSkinCssCookbookNoTopBar/notopbar.css
@@ -10,10 +10,6 @@
 #patternTopBarContents {
 	display:hidden;
 }
-/* move the left bar contents down to show the logo */
-#patternSideBarContents {
-	margin-top:64px; /* top bar height */
-}
 #patternSideBar {
 	/* dynamic background image set in topic */
 	/* or write a hard coded image location here */

diff --git a/PatternSkin/pub/System/PatternSkinCssCookbookSidebarBackground/sidebar.css b/PatternSkin/pub/System/PatternSkinCssCookbookSidebarBackground/sidebar.css
@@ -0,0 +1,7 @@
+#patternWrapper,
+#patternSideBar {
+	background-color:#eee;
+}
+#patternMain {
+	background-color:#fff;
+}
diff --git a/PatternSkin/pub/System/PatternSkinTheme/style_src.css b/PatternSkin/pub/System/PatternSkinTheme/style_src.css
@@ -275,7 +275,7 @@ a.foswikiSubmit:visited:active {
 	margin:0 0 0 .25em;
 }
 
-/* TwistyContrib */
+/* TwistyPlugin */
 .twistyTrigger a:link,
 .twistyTrigger a:visited {
 	text-decoration:none;
@@ -284,6 +284,9 @@ a.foswikiSubmit:visited:active {
 .twistyTrigger a:visited .foswikiLinkLabel {
 	text-decoration:none;
 }
+.twistyTrigger .foswikiLinkLabel {
+	margin:0 .25em;
+}
 
 /*tipsOfTheDay*/
 .tipsOfTheDay {
@@ -535,6 +538,8 @@ table.foswikiFormTable th.foswikiFormTableHRow a:visited {
 .foswikiHelp {
 	padding:1em;
 	margin:.25em 0 0 0;
+	border-width:1px;
+	border-style:solid;
 }
 .foswikiHelp ul {
 	margin-top:0;