CSS Style Destined to look like Workbench 1.x Live Demo
Import the css file by first downloading it and then import it however you desire. Below are two ways.
- In the html file, on the part, add this
<link rel="stylesheet" type="text/css" href="workbench1.css"> - In your main CSS file, on the first line, add this
@import url('workbench1.css'); By the way: The Topaz New font is recommended, use it by adding
@font-face {
font-family: "Topaz";
src: url(/assets/fonts/TopazNew.ttf);
font-display: swap;
}
(...)
html, body {
(...)
font-family: Topaz, Arial, Helvetica, sans-serif;
(...)
}In order to use the stylesheet by its fullest, Your body should look like this
<body>
<div class="topbar">
<span>Example GitHub File</span><span class="margin">Text with margin</span>
(Optional)
<div class="buttons">
<img alt="Disabled" width="25" height="20" src="wb1.gif"><img alt="Disabled" width="28" height="20" src="wb2.gif">
</div>
(You'll have to upload the images to your webserver)
</div>
</body>That will give you a bar like this
In order to add windows you should follow this Template
<div class="window">
<div class="titlebar">
<span>Title</span>
(Optional)
<div class="buttons">
<img alt="Disabled" width="25" height="20" src="wb1.gif"><img alt="Disabled" width="28" height="20" src="wb2.gif">
</div>
(You'll have to upload the images to your webserver)
</div>
<div class="content">
Content
</div>
</div>Our Document should look like this now
In order to make the window to take up all the free space, we're going to add the fullwidth class to the <div class="window"> element
<div class="fullwidth window">
<div class="titlebar">
<span>Title</span>
(Optional)
<div class="buttons">
<img alt="Disabled" width="25" height="20" src="wb1.gif"><img alt="Disabled" width="28" height="20" src="wb2.gif">
</div>
(You'll have to upload the images to your webserver)
</div>
<div class="content">
Content
</div>
</div>
Nice! Now one more last thing, to hide the scrollbars you should add the noscroll class to the <div class="content"> element
<div class="fullwidth window">
<div class="titlebar">
<span>Title</span>
(Optional)
<div class="buttons">
<img alt="Disabled" width="25" height="20" src="wb1.gif"><img alt="Disabled" width="28" height="20" src="wb2.gif">
</div>
(You'll have to upload the images to your webserver)
</div>
<div class="noscroll content">
Content
</div>
</div>