1 # <a name="PatternSkinCssCookbook Recipe: H"></a><a name=" _PatternSkinCssCookbook Recipe:"></a> [[PatternSkinCssCookbook]] Recipe: Hide the top bar
3 **This recipe shows how to hide the top bar and to put the logo in the left bar.**
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>
9 Add the dynamic variable link to the logo image to the topic text:
11 <style type="text/css" media="all">
12 #patternLeftBar { background-image:url("%PUBURLPATH%/%WEB%/%WEBPREFSTOPIC%/logo.gif"); }
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 <style type="text/css" media="all">
16 #patternLeftBar { background-image:url("http://www.dementia.org/twiki//view/%WEB%/WebPreferences/logo.gif"); }
18 </pre> You can always write a <code><style></code> in a topic - all current browsers support this - but the page won't validate as valid XHTML. </div>