Table of contents
- 1. Introduction
- 2. How do I install it?
- 3. A quick note about the examples on this page
- 4. How do I use it?
- 4.1.1. Arguments
- 4.1.2. Examples
- 4.1.2.1. Show a button
- 4.1.2.2. Template code
Introduction
This template provides basic, customizable css styled buttons (here matched to the deucebeta:lighty-blue skin - but adjust to suit your implementation!)
History
| Version | Date | Author | Description |
| 1.1 | 03/09/2009 | neels | Shiny new css styling for more buttonlike behaviour |
| 1.0 | 20/08/2009 | neels | First published template version |
How do I install it?
- Create a template, call it "Template:PageButton" (or rename as you desire). You must have "unsafecontent" permission for this to work.
- Create a "Dekiscript" block on the template page (use the "Style" menu in the editor")
- Copy the code from the end of this page and paste it into the Dekiscript block. To copy, click "expand source", then mouse over the top right corner of the source code, and click the "view source" button. This will pop up a window with the source code. Select all, then copy to clipboard.
- Make sure there isn't an extra blank paragraph after the Dekiscript block! Do this every time you edit!!! Save.
A quick note about the examples on this page
For all the examples on this page, the code is shown before the working example. The code is shown with the syntax extension, and looks like this:
PageButton()
This means that the actual code on the page should be enclosed in a Dekiscript block. If you want to copy the code from this page, then use the same procedure as described in steps 2-4 above.
How do I use it?
Arguments
| Name | Type | Default | Description |
| url | url | required | enter the url you wish the button to go to here |
| title | str? | url | The text to show in the button for the link |
Examples
Show a button
For instance:
PageButton('http://news.bbc.co.uk','BBC News')
will produce the following:
and when hovered
Template code
<html>
<head>
<style type="text/css">"
span#center
{
text-align:center;
}
ul#navlist
{
width: 308px;
\width: 310px;
w\idth: 308px;
padding: 0px;
border: 1px solid #808080;
border-top: 0px;
margin: 0px;
font: bold 2em helvetica,verdana,arial,sans-serif;
background: #808080;
text-align:center;
margin-left:auto;
margin-right:auto;
}
ul#navlist li
{
list-style: none;
margin: 0px;
border: 0px;
border-top: 1px solid #808080;
}
ul#navlist li a
{
display: block;
width: 272px;
\width: 308px;
w\idth: 272px;
padding: 4px 8px 4px 8px;
border: 0px;
border-left: 20px solid #ccc;
background: #dbe2f2;
text-decoration: none;
text-align: left;
}
ul#navlist li a:link { color: #666677; }
div#navcontainer li a:visited { color: #666677; }
ul#navlist li a:hover
{
border-color: #ccc;
color: #ffffff;
background: #737373;
}
"</style>
</head>
<body>
<span id="center">
<div id="navcontainer">
<ul id="navlist">
var url = $0 ?? $uri ?? '';
if(#url != 0) {
var title = $1 ?? $title ?? url;
<li id="active"> web.link(url, title);
</li>
}
</ul>
</div>
</span>
</body>
</html>
Here is an example of a set of buttons on the main page of our intranet site to aid navigation. I used a table for layout (old-school I know!). I have also used a customized version of neilw 'Hide Page Elements' template to tidy up the appearance of the deucebeta:lighty-blue skin.
- Was this page helpful?
- Tag page
- What links here
Files 3
| File | Version | Size | Modified | |
|---|---|---|---|---|
| ||||
| ||||
| ||||
Copyright © 2011 MindTouch, Inc. Powered by