TWiki/PatternSkinCssCookbookNoTopBar.mdwn

   1 # <a name="PatternSkinCssCookbook Recipe: H"></a><a name=" _PatternSkinCssCookbook Recipe:"></a> [[PatternSkinCssCookbook]] Recipe: Hide the top bar
   2
   3 **This recipe shows how to hide the top bar and to put the logo in the left bar.**
   4
   5 <div> This line loads the extra style definition: <pre>
   6    * Set USERSTYLEURL=%ATTACHURL%/notopbar.css
   7 </pre> You can write this line in %SYSTEMWEB%.TWikiPreferences, in [[Main/WebPreferences]], in your user topic or on a single page. </div>
   8
   9 Add the dynamic variable link to the logo image to the topic text:
  10
  11     <style type="text/css" media="all">
  12     #patternLeftBar { background-image:url("%PUBURLPATH%/%WEB%/%WEBPREFSTOPIC%/logo.gif"); }
  13     </style>
  14 <div><img align="top" alt="info" border="0" height="16" src="http://www.dementia.org/twiki//view/Main/WebHome/info.gif" width="16" /> If you don't write this overloading style in a template and use an external <code>.css</code> file, you need to set the image to the absolute url: <pre>
  15 &lt;style type="text/css" media="all"&gt;
  16 #patternLeftBar { background-image:url("http://www.dementia.org/twiki//view/%WEB%/WebPreferences/logo.gif"); }
  17 &lt;/style&gt;
  18 </pre> You can always write a <code>&lt;style&gt;</code> in a topic - all current browsers support this - but the page won't validate as valid XHTML. </div>