View User CSS Hacks

What are user CSS hacks?

Spaz as of v0.3.9.4 allows users to override their theme CSS formatting with their own CSS code. This gives the user the ability to customize the interface as they wish without creating a whole new theme.

How do I know what selectors I should use?

A couple ways:

1. Turn on debugging and use the “Inspect” feature of the AIR Introspector. It works a lot like Firebug.
2. Check the theme.css file for the default (“spaz”) theme. It is nicely formatted to match the hierarchy of the HTML, so it should be fairly clear.
3. Ask questions on the [spaz-users Google group](http://groups.google.com/group/spaz-users).

I don’t know CSS. How do I use this?

You probably will want to stick to using the CSS hacks listed on this page. Just paste them into the CSS Edit window.

I broke Spaz’s interface by messing with User CSS. What do I do?

Your best bet is to delete the user.css file.

If you’re running Spaz 0.4.3.4 or higher:

1. start up Spaz
2. press
   • Windows/Linux: CTRL+SHIFT+,
   • OS X: CMD+SHIFT+,
3. The user preferences folder should now be open. If not, use the “manual” method below.
4. Close Spaz
5. Delete the user.css file
6. Start Spaz

If you’re running Spaz 0.4.3.3 or lower:

1. Close Spaz.
2. Open the user prefs folder. Finding this varies a bit between OSes:
   • Windows XP
   • Windows Vista
   • OS X:
3. Delete the user.css file.
4. Start Spaz

Editing User CSS

First, click the “Edit User CSS” button in the Preferences > Interface section.

Then, enter CSS code into the CSS Edit popup, and click “Save” to apply.

CSS Hacks

Large text

This was developed and tested against the default theme in 0.6.1. YMMV.

* {
  font-size:98% !important;
}
.status-text {
  font-size:120% !important;
}
#statusbar {
  font-size:85% !important;
}
.panelmenu {
  height:25px;
}
.timeline-wrapper{
  top:29px;
}
#tooltip {
  font-size:90%;
}
span.status-protected {
  background-repeat:no-repeat;
}
#loading {
  vertical-align:text-bottom !important;
  margin-top:4px;
}
#entrystats {
  font-size:90% !important;
}

“Checkerboard” message layout

Requires Version 0.4.3.3 or higher!

div.timeline-entry {
    display:inline;
    float:left;
    clear:right;
    width:200px;
    height:140px;
    border:none;
    margin:0 auto 0 auto;
    text-align:left;
    -khtml-border-radius:10px;
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    margin:5px;
}
.TabbedPanelsContent {
    text-align:center;
    position:absolute;
    top:67px;
    left: 10px;
    right: 10px;
    bottom:90px;
    overflow:auto;
    background:#999988;
    border-top:3px solid #333300;
    border-bottom:3px solid #333300;
}
div.timeline {
    position:static;
    text-align:center;
    border:none;
    background:transparent;
    top:auto;
    bottom:auto;
    left:auto;
    right:auto;
    padding:none;
    margin:auto;
    width:90%;
    overflow-y:hidden;
}
#timeline-prefs {
    text-align:left;
    background-color:#FFF;
}

Message box on top

Requires Version 0.4.3.3 or higher!

#timeline-tabs {
  top:115px;
}
#header {
   height:200px
}
div.timeline {
   top:132px;
   bottom:28px;
}
#entryform {
   top:100px;
   bottom:auto;
}
#entrybox {
   margin-left:10px;
   margin-right:10px;
   -khtml-border-radius:5px;
}
#entrystats {
   left:15px;
}
#updateButton {
   display:none;
}
#statusbar {
   padding-top:3px
}

Shrink read messages

/* messages marked as read are shrunk vertically; restored when selected */
.read { max-height:7px; overflow:hidden; padding:2px }
.ui-selected {max-height:175px }

Adjust message text size

/* Adjust message text size. Use any valid unit (px/pt/em/%) */
.status-text {font-size:12pt;}

Rounded Rects/bubbles

#container {
    background-color:transparent;
}
#header {
    height:40px;
    -khtml-border-radius:8px;
}
#timeline-tabs, .TabbedPanelsTabGroup {
    top:45px;
}
.TabbedPanelsTab {
    padding:2px;
    margin-right:2px;
    -khtml-border-radius:1px;
}
.TabbedPanelsContentVisible {
    background-color:#555555;
    position:absolute;
    top:69px;
    left: 10px;
    right: 10px;
    bottom:95px;
    -khtml-border-radius:8px;
}
div.timeline { border-width:0;
    background:transparent;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom:5px;
    -khtml-border-radius:0px;
}
div.timeline-entry {
    -khtml-border-radius:8px;
    border:0;
    margin:3px;
}
.TabbedPanelsTabSelected {border-bottom-width:0;}
#entrybox {
    -khtml-border-radius:8px;
}
#statusbar {
    padding: 4px 6px;
    bottom:5px;
    -khtml-border-radius:8px;
}