As well as being able to completely change the look of Opera chat using CSS, it is possible to change or disable a few of the chat features using CSS as well, by editing the 'operaInstallDir/Styles/im.css' file. (I also have instructions on how to find and edit this file on Mac.)
mIRC, XChat and a few other IRC clients allow you to change the style of text that you are writing. Opera can display these, but cannot produce these styles itself (unless you use my menu add-on). Most often, these are used to display advertising in IRC channels, or by people who believe that what they have to say is so much more important that what everyone else has to say. Many channel operators are so fed up of this that they will kick users who use it. However, in the channels where it is permitted, it can often be so overpowering that it distracts you too much from the actual conversation. But, as Opera converts IRC chat into HTML, it is possible to style it to hide all of the text formatting. Simply add this to the bottom of your im.css file:
span[style] {
text-decoration: none !important;
color: inherit !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: normal !important;
background-color: transparent !important;
}
Everything will revert to the normal font format for your chosen chat style. This does not affect the highlighting of your name, or any chat style you have chosen.
This tip relates to older Opera releases, and does not work in current Opera releases.
Opera converts certain character combinations into little pictures of faces - emoticons or smileys. The following are available:
Unfortunately, this collects several variations into the same picture, and some people would prefer to be able to disable them so that they can just see the ascii characters. Well, here's the CSS you need. Simply add this to the bottom of your im.css file:
img {
height: auto !important;
width: auto !important;
background-image: none !important;
content: attr(title);
position: relative;
top: -3px;
left: 0px;
}
The images that are used are actually controlled by the Opera skin. To change the smileys that are used, you would either
need to replace the smileys in the skin you are using, or download a different skin that uses different smileys, or edit the
im.css file to change the lines that define which smileys to use. Simply change any line like this:
background-image: -o-skin("Smiley Grin");
to something like this
background-image: url(file://localhost/c:/smileys/grin.png);
Make sure the images are the same size as the smileys in the skin - defaults to 16px x 16px (or change the lines that define
the size of each smiley).
Thx to exclipy for the tip on how to disable smileys.
Opera automatically highlights text for you when other people say your name, to tell you to pay attention. I am still working on a way to make it produce sound alerts, but in the meantime, you can make it summarise how many times people have said your name so that you can quickly see if you missed something.
Here's the CSS you need. Simply add this to the bottom of your im.css file:
.highlight {
counter-increment: personals;
}
.highlight:after {
position: fixed;
top: 0px; right: 0px;
content: "Your name has been mentioned "counter(personals)" times";
border: 1px dotted #552;
padding: 1px;
background-color: #ffffe1;
width: 25em;
}
This will display a counter at the top of the chat window showing how many times people have said your name.
Thx to Toman for the idea and initial implementation.
Having nicks in a column that all line up with each other is one of the very useful display features of Opera's chat client, as it makes identification and reading of the messages much faster and easier. However, it does have a minor drawback. If a user has an excessively long nick, Opera stretches the nick column to fit it, but this can be unsightly and annoying, particularly if they only do it momentarily in order to disrupt the display for other users.
Add this to the end of your im.css file and any long nicks will be truncated, preventing the nick column becoming too wide (change the width in the last line, depending on how wide you want the nick column to be):
table { table-layout: fixed; width: 100%; }
td:first-child { width: 3.5em; }
td:first-child + td { width: 6em; -o-text-overflow: ellipsis; overflow: hidden; }
You may also want to add this so you can see their name on hover. Note that it will jump each time you hover one, as it resizes the row to allow their name to fit (Opera applies a special reformatting in IRC that will force the nick to break so that it wraps to multiple lines):
td:first-child + td:hover { white-space: normal; }
Thx to Moose for the tip on how to truncate nicks.
When people talk in Opera chat, if their nick is unusually long (eg: MMMMMMMMM), in Opera 7.5, it may be broken onto more than one line. This means that everything they type will be two lines high, even if they say very little. This bug is fixed since Opera 8, so I advise you to upgrade to the latest Opera release. In previous versions, add this to the end of your im.css file:
td:first-child + td { white-space: nowrap; }
If you just use operanet (irc.opera.com), it may help to use this:
td:first-child { white-space: nowrap; min-width: 4em; }
td:first-child + td { white-space: nowrap; min-width: 9em; }
When people leave or join, or change nick (or various other status-related things are done) in Opera chat, the number of informative messages can get a little overpowering. To stop this, simply add this to the bottom of your im.css file:
.join, .leave, .nick, .operator, .voiced, .disconnect, .moderated, .limit, .topic-protection, .password, .secret, .unknown-mode, .join-message, .leave-message, .nick-message, .operator-message, .voiced-message, .disconnect-message, .moderated-message, .limit-message, .topic-protection-message, .password-message, .secret-message, .unknown-mode-message {
font-size: 0.7em;
}
You can adjust the font size, or even replace font-size: 0.7em; with content: "";. This will leave a small gap where the content was (bigger if it includes a timestamp), but at least there will be no words.
To make it easier to style specific channels or private message windows, Opera adds the channel or user name as the ID of the HTML element, with the prefix 'oc-'.
<html id="oc-lounge">
You can use the ID selector to target that channel or user. For example, to make the background of your own comments red while you are in the #lounge channel, use this:
#oc-lounge td.self, #oc-lounge td.self-message { background: red; }