Creating Styles in Linkinus
A style in Linkinus is composed of HTML, CSS, and Javascript. This should allow anyone with experience in designing web pages to create a style in linkinus. However, there are some differences from webpages that should be noted when creating styles in Linkinus. This page is meant as a guide to creating styles and contains tips and an overview of how a style is created in Linkinus. Knowlege of HTML and CSS is assumed. Javascript knowlege is not necessary for basic styles, but any special features will requireknowlege of Javascript. To find examples of how to actually write a style, look at a style you want to base your's off of. This is mearly a guide to how a style works.
Basic Style Creation
HTML
A linkinus style is composed of several HTML files located in the Resources directory of the style package. A basic style contains the following HTML files
- main.html - header and footer of the style.
- Incoming/Action.html - incoming actions such as /me actions.
- Incoming/HighlightedAction.html - incoming actions with a highlighted word specified in the preferences.
- Incoming/HighlightedMessage.html - normal incoming messages with a highlighted word specified in the preferences.
- Incoming/Join.html - joins to the channel.
- Incoming/Kick.html - kicks from the channel.
- Incoming/Message.html - normal incoming messages.
- Incoming/ModeChange.html - mode changes such as "Chanserv sets mode +o User"
- Incoming/Nick.html - nick changes.
- Incoming/Notice.html - notices such as those given by the server and ircops.
- Incoming/NoticeAuth.html - raw notices from the server.
- Incoming/Part.html - parts from the channel.
- Incoming/Quit.html - quits from the server.
- Incoming/Raw.html - raw text.
- Incoming/TopicChange.html - topic change. (User changed topic to New Topic)
- Incoming/TopicDetailsReply.html - topic details. (Topic set by User on Date)
- Incoming/TopicReply.html - displays topic. (Topic is This Topic)
- Outgoing/Action.html - outgoing /me action.
- Outgoing/Message.html - outgoing normal message.
- Outgoing/Notice.html - notices sent by the user.
- Outgoing/QuitReason.html - quit sent by user with a reason.
- Outgoing/QuitReasonless.html - quit sent by user without a reason.
These HTML files contain normal HTML like you'd find on any webpage. However, there are some points to note when making a style.
- The main.html file contains the <head> and <body> tags as well as anything encompassing the lines seen such as <div id="pastcontent"> and <div id="content"> for the history and new content respectively.
- Each file in the Incoming and Outgoing directories contains a single line. When making a style, it is good to keep this in mind. Linebreaks and block content should be handled carefully.
- The Incoming and Outgoing directories are contained within "Language.lproj" and multiple directories such as "Engligh.lproj" allow styles to be localized to different languages.
- The attribute "id" should only be used in main.html. Use "class" when assigning an id to an element within the files in Incoming and Outgoing.
CSS
Linkinus uses CSS to style the text. The main.css file located in the Style package is probably more important than any of the HTML files when creating a basic style in Linkinus. Some points to know about CSS and Linkinus are highlighted below.
- Linkinus uses webkit to render the main chat window. This allows for some special tricks such as CSS animation and webkit specific styles without worrying about cross browser support.
- Using the Linkinus Style SDK is a good way to edit CSS files since it will display the associated HTML files, allowing reference to classes used in the style.
Javascript
Javascript is not necissary to use when creating a basic style. However, there are some basic functions that are used in every style.
- appendMessage() - This is used to place new messages to the end of the window. Theoretically, you could have this append to the top as well.
- deleteFirstMessage() - (unknown what this actually does... but seems to have something to do with history)
- nearBottom() - Simply checks if the window is scrolled near the bottom so new messages don't make everything jump when scrolled back. Also allows the window to keep up with the chat when a new message is appended.
- scrollToBottom() - Checks if the window is near the bottom, and scrolls down if it is.
- setStylesheet() - I'm not sure if this is even used anymore (someone confirm?)
- windowDidResize() - If the window resizes, we scroll to the bottom.
Variables
Each HTML file allows for variables to be used. The Style SDK shows which variables are allowed below each html file. An explaination of supported variables is below:
- $nickname - The nick of the person sending the line.
- $username - The username of the person sending the line. (nickname!username@hostname)
- $hostname - The hostname of the person sending the line. (nickname!username@hostname)
- $unit - The channel or Private Message where the message was sent.
- $description - The content of the message sent. (kick description, message text, quit description, mode changed, etc)
- $time - The time the message was sent.
- $recipient - The recipient of an action (a kick for example).
- $raw - Raw IRC text, used as a catchall for kills, glines, and other things not covered by the HTML.
- $date - The date, used to show the date a topic was set.
Special Features
Unique Nickname Coloring
In order to have your style support unique nickname coloring, you must make some minor changes to your CSS and HTML. The changes are as follows below:
HTML: The nickname span class must have a second class added to it. Accomplish it by adding the class userhost$userhostcolorindex to your nickname class like in the following example:
<span class="nick userhost$userhostcolorindex">$nickname</span>
Please note that Linkinus won't include userhostX into highlighted messages, but if you wish your style to support coloring nicks uniquely with highlighted messages if Linkinus supports it in the future, you may include the HTML in the highlighted message HTML as well.
CSS: The stylesheet for your style also must have the following classes added to the end of your stylesheet. You may change the color codes to whatever you want, but keep the !important. It is also a good idea to keep the .userhost1 color the same as your .nick class color in order to keep things consistant.
.userhost1 { color: #0080ff !important; }
.userhost2 { color: #00DF00 !important; }
.userhost3 { color: #ff0080 !important; }
.userhost4 { color: #dd00ff !important; }
.userhost5 { color: #76E0BD !important; }
.userhost6 { color: #7F4FFF !important; }
.userhost7 { color: #8BC100 !important; }
.userhost8 { color: #cc66ff !important; }
.userhost9 { color: #BB0008 !important; }
.userhost10 { color: #6F42BC !important; }
.userhost11 { color: #008080 !important; }
.userhost12 { color: #904000 !important; }
.userhost13 { color: #808000 !important; }
.userhost14 { color: #4ABFD1 !important; }
.userhost15 { color: #3333dd !important; }
.userhost16 { color: #C19C46 !important; }
.userhost17 { color: #0057DA !important; }
.userhost18 { color: #008000 !important; }
.userhost19 { color: #608040 !important; }
.userhost20 { color: #ff6fcf !important; }
Advanced Style Creation
This advanced section primarily deals with Javascript. However, some CSS will be included to outline webkit specific styles, animation, and other CSS not common to normal web design.
Javascript
While Linkinus is powered by webkit, and can use any javascript supported by webkit, there are some things to keep in mind when scripting for linkinus due to the interface and various limitations of the irc format over a full web browser.
- All links, by default, open in a new web browser. To override this behavior, you may have to use preventDefault().
- If a script is loaded more than once (for example, zooming in on embedded images), the script must be called on the element being modified by the Javascript. This can be done through onmouseover() instead of the normal onload() without too many problems in most cases.
- Remember that the style is located on your local machine. This means that the root is at the root of your drive. It's probably best to use the messy, single directory method to make relative links easier to keep track of.
- Several classes outlined in the previous Javascript section are required by Linkinus for the style to work. However, these can be modified to a great extent, even changing the behavior of new lines. For instance, scrolltobottom() could be modified to animate the scrolling instead of having it jump.
- To modify specific text (to embed images for example), you can change the line in appendMessage() that contains "range.createContextualFragment(html)" to "range.createContextualFragment(replace(html))" where replace is a new class taking the line imput and searching with regex to modify specific strings. Whisper is a good style to reference for this behavior.
CSS
Since Linkinus uses Webkit, there is a large amount of CSS that can be used to give new effects to styles. Below is a brief overview of a few CSS tricks that are normally not used in typical webpage design.
Opacity
Webkit supports opacity through CSS. This makes styles that include background images and dimming history a lot easier. There are several ways opacity are achieved.
- opacity - sets the opacity of an element. 0.00 is transparent and 1.00 is opaque.
- rgba() - this sets colors based on red, green, blue, and alpha. Useful for layering backgrounds, or having a semi-transparent background color over a background image. RGB values are acceptable between 0 and 255, alpha values acceptable between 0 and 1.
Just about anything can be made transparent! Images, text, block level elements, etc.
Shadows
Shadows are available through CSS, something that is not widely supported in browsers, but can be used in webkit. The main property used with this is text-shadow. This property has the following syntax.
- text-shadow: color x-coordinate y-coordinate blur-radius;
The acceptable values for the text-shadow are as follows:
- color - rgb(), rgba(), hex, color names
- x-coordinate - negative and positive: px, em
- y-coordinate - negative and positive: px, em
- blur-radius - 0 or more pixels. This shouldn't be set too high as the shadow quickly blurs to nearly nothing. 0 pixels will give you a shadow with hard edges.
Box Shadows are used to give shadows to block elements. To use these, the following property and syntax is used:
- -webkit-box-shadow: color x-coordinate y-coordinate blur-radius;
Animation
Webkit also allows CSS animation such as fades, spinning, and other superfluous effects. This usually requires an element to be clicked, hovered, or can be accomplished on load (such as having each line fade in as it shows up).
There are several properties to use with animations and they are as follows:
- -webkit-transition-property: (list a CSS property here such as opacity, right, left, text-shadow, padding, margin, etc. This is the property that will define the transition. Multiple properties can be used in a comma seperated list.)
- -webkit-transition-duration: (time here, formatted in seconds. For example 1s, 2s, 3s, 0.25s)
- -webkit-transition-timing-function: (this is a function of the transition. The values are linear, default, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2).
- -webkit-transition: property duration timing-function; (shorthand)
To use a transition, you must define the transition in the selector. For example, you can do the following:
.newline {
opacity: 0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
}
.newline:hover {
opacity: 1;
}
The CSS above will fade the element in over a period of 2 seconds as you mouse over it.
All content and code, unless otherwise specified, is copyright 2004 - 2009 Callen Magnuson.
mmmh... spam...