Latest Projects
Site Contents
Global Links
CustomizationStarterKit
Version 5, changed by admin. 10/20/2006. Show version history
Customization Starter Kit
Editing your Wiki Appearance page is simple enough to figure out on your own. Start there, create a pleasing color scheme, but don't worry too much about a perfect match for every element.
Here's a basic plugin to create. Filling in the details is up to you. To create a plugin you have to be the admin (so you can enter code.) Go to the Manage Plugins page and create a new plugin. You can name it whatever you like, fill in the first two small fields however you want, then in the big field, put this code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:jot="http://www.foopee.com/ns/s3/srvtmpl/">
<jot:extension target="bodyStart">
<style type="text/css">
body {
/* override the body basics */
}
a,
a.wikiLink,
#jot-breadcrumbs a,
#jot-page a {
/* set some link styles */
}
a.jot-primary:visited {
/* the silly buttons are hard to keep from turning colors, !important is for that purpose */
color:some color !important;
}
.jot-add {
/* the silly buttons are hard to keep from turning colors, !important is for that purpose */
color:some color !important;
}
a:visited,
a.wikiLink:visited,
#jot-page a:visited {
/* set some visited colors for links if you desire */
}
a:hover,
a.wikiLink:hover,
#jot-breadcrumbs a:hover,
#jot-page a:hover {
/* set some hover colors for links if you desire */
}
a:active,
a.wikiLink:active,
#jot-breadcrumbs
a:active,
#jot-page a:active {
/* set some active colors for links if you desire */
}
h1 {
/* set some styles for your headings. Normally the Jot editor only lets you insert h1, h2, and h3 */
}
h2 {
/* set some styles for your headings. Normally the Jot editor only lets you insert h1, h2, and h3 */
}
h3 {
/* set some styles for your headings. Normally the Jot editor only lets you insert h1, h2, and h3 */
}
p {
/* set some styles for your p tags. Careful with this one because p tags can occur anywhere. */
}
thead, th {
/* set some styles for your table headers. Use !important to override some legacy code. */
background:some color !important;
}
#jot-header {
/* Put a background color or image to create your own special banner style */
}
#jot-loginInfo, #jot-loginInfo a {
/* Need special styles for the login links at the top? */
}
#jot-loginInfo a:hover,
.jot-search a.wikiLink:hover {
/* Need special styles for the login links at the top? */
}
.jot-search a.wikiLink {
/* Need special styles for the search link at the top? */
}
#jot-content {
/* This is the box that holds the sidebar AND the main content area, but not the footer. */
}
#jot-sidebar {
/* This is the box that holds the sidebar */
}
#jot-sidebar-promo {
/* This is the box in the sidebar that says "get more apps" */
}
.jot-miniWindow a, .jot-miniWindow a:visited {
/* Special styles for links in the sidebar boxes. */
}
.jot-miniWindow a:hover {
/* Special styles for links in the sidebar boxes. */
}
.jot-relatedContent h2 {
/* Special styles for headings for comments and attachments. */
}
#jot-footer {
/* Customize the footer if you like */
}
#jot-copyright {
/* Customize the copyright if you like */
}
#jot-footerNav {
/* Box that holds those 4 columns of links */
}
#jot-footerNav .jot-wrapper {
/* Box that holds those 4 columns of links again! */
}
#jot-footer a, .jot-footerLinks a {
/* Footer links */
}
#jot-footer a:hover, .jot-footerLinks a:hover {
/* Footer links */
}
#jot-footerNav .jot-footerLinks h3 {
/* Footer links headings */
}
/* I think you get the idea. Add as much or as little of this as you like. */
</style>
</jot:extension>
</html>
Obviously you'll have to put some real CSS in there. And this example may be more or less than you need to achieve the look you want.
You will have to have some good understanding of CSS from the Web Standards perspective (not from the designing-with-font-tags perspective.) If you need help, check the information available from fine purveyors of CSS around the world such as Eric Meyer, Jeffrey Zeldman, Alistapart, and any of the links they have available from their web sites.
Also, don't forget to enable your plugin.
NOTE: From a Web Standards perspective, this plugin is not standards-compliant because you are inserting embedded CSS into the body element. The trouble with putting this code into the head element (target="head") is that Jot may not insert this above its own style sheets, meaning you will not override anything. You have to guarantee your styles appear after Jot's, and inserting them into the body is the only way to do that.
