Yay, tutorial!

incogneato83@gmail.com — Mon, 13 Aug 2007 00:51:04 GMT

How to do this using this and this...

WHY CSS RAWKS!
A Firefox Guide to Un-uglifying your IJ Site Scheme by explodeycakes.
IT IS SUGGESTED THAT YOU UNDERSTAND A BIT OF CSS BEFORE ATTEMPTING THIS TUTORIAL.

So you're exploring the wide world of teh intarwebs beyond LiveJournal, and you happen across InsaneJournal at the recommendation of a friend or because your Google Fu is awesome. You heard that its founder, squeaky, is lenient toward fandom and won't pull out the Banstick until court-ordered to do so. Or you've never heard of LiveJournal, and just wanted a blog. Whatever; the point is that you're here.

And then you look at the interface and you say, "OH MY DEAR GOD," because orange and gray aren't your thing, or because Tweak, InsaneJournal's mascot, freaks you out a little. [To be honest, Frank the Goat over at LJ scares me a bit, too.]

Fig. A: the default InsaneJournal site scheme.
Whatever the reason you've decided to edit your InsaneJournal sitescheme, the first thing you need to do is follow the instructions in snakeling's journal, here [huge kudos on the guide!]. Once you're done installing Greasemonkey and the CSS script, come back here for Round 2: Replacing Your Images. This tutorial is only 100% compatible with the default site scheme: 'New Tweak'; however, it can be modified for any of the others.

*Jeopardy theme plays*

Round 2: REPLACING YOUR IMAGES

Now that you've got your CSS all set up the way you want, it's time to get rid of Tweak. This can be done one of two ways: you can Adblock him, or you can go the slightly more tedious, but prettier route and replace him, using the My Image Here Firefox extension. If you choose to Adblock Tweak, then -- well, you're done. Congrats; the rest of this tutorial is of no use to you. If you choose to replace him, however, you could end up with something super-cool looking.

Fig. B: The final product. Some CSS [like that peachy color in the navigation] is only replaceable with serious poking.
So. The first thing you need to do is to install My Image Here and restart Firefox. Got it? Good.

After that, you need to figure out the dimensions of the images you're replacing. They can be bigger or smaller than those already there, but using the same, or nearly the same size is usually a good idea in terms of keeping your site looking neat. A handy reference guide:
     » Tweak is 100x100px.
     » The Title is 265x59px.
     » The Userinfo Image is 21x20px.
     » The Community Image is smaller, but for continuity's sake we'll call that 21x20px also.

Then, you need to decide what you're going to replace your images with. I Photoshopped a Rorschach inkblot test [to continue with the 'insane' theme] to fit my color scheme and Tweak's size, and then took a font I liked better and created a simple title graphic. Afterwards, I took the same inkblot and downsized it, changing the colors and turning it into a transparent *.gif for my userinfo and community images. [Mine are available at the bottom.]

When you've got your replacement images ready, put them in a folder somewhere on your hard drive, and go to IJ's main page. Right-click on the first image and select My Image Here > Load My Image Here, browse to the folder where your images are located, and select the right one. Do that for all the images you'll be replacing. The Firefox add-on does not upload the images, so remember not to move your folder or else you'll have to re-select all the images.

The unfortunate thing is that you'll have to do this for every user/community page as well as for the IJ main page, because the add-on is not advanced enough to recognize wildcards [asterisks]. But once for each user is enough -- you don't have to go through every post of every user. And if you have only a small reading pool, it shouldn't take too long to replace the images for each one.

Note: Using CSS, I hid Tweak's sayings -- it seemed silly to have those up there but not Tweak himself. You can do that too, by adding the following to your Stylish IJ CSS:

.tweak {
     display: none !important;
}

The use of !important in your IJ style is, well... important, especially if you want your custom CSS to not disappear behind IJ's own CSS -- this tends to happen quite frequently.

MY IMAGES:

-- replacing Tweak
-- replacing the title
-- replacing the userinfo image
-- replacing the community image

MY CSS:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("insanejournal.com") {

.PortalBoxTitleBar, .PortalMenuItem {
     background-color: #00374C !important;
     border: 0px !important;
}

.tweak {
     display: none !important;
}

 body {
        background-color: #FFFFFF !important;
        color: #000000 !important;
        font-family: Arial !important;
        font-size: 12px !important;
  }
  table {
        font-family: Arial !important;
        font-size: 12px !important;
  }
  table.head {
        background-color: #00374C !important;
        font-family: Arial !important;
        font-size: 10px !important;
        border-color: black !important;
        border-width: 0px !important;
        border-style: solid !important;
        color: white !important;
  }

  table.head td {
     color: #FFFFFF !important;
}
  table.menu {
        background-color: #FFAC0C !important;
        font-family: Arial !important;
        font-size: 12px !important;
        border-color: black !important;
        border-width: 0px !important; 
        border-style: solid !important;
  }
  .menubar a, #menubar a {
        background-color: #FFAC0C !important;
}
  table.body {
        border-style: dotted !important;
        border-width: 1px !important;
        border-color: #0080AF !important;
        text-align: left !important
  }
  a, .ljuser a, .PortalBoxContent FAQ a {
        color: #0080af !important;
    }

  a:visited, .ljuser a:visited, .PortalBoxContent FAQ a:visited {
        color: #0080af !important;
  }

  a:active, a:hover, .ljuser a:active, .ljuser a:hover, .PortalBoxContent FAQ a:hover, .PortalBoxContent FAQ a:active {
        color: #FFAC0C !important;
        border-bottom: 1px dotted #0080AF !important;
  }
  a.ljuser {
        font-size: 12px !important;
        color: #FE7300 !important
  }
  a.ljuser:visited {
        font-size: 12px !important;
        color: #FE7300 !important
  }

  a.tweak {
        color: #000000 !important;
        white-space: nowrap !important;
        font-family: Arial !important;
        font-size: 14px !important;
        text-decoration: none !important;
        font-weight: bold !important
  }

  a.tweak:visited {
        color: #000000 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        font-family: Arial !important;
        font-size: 12px !important;
        font-weight: bold !important
  }

  a.tweak:active {
        color: #000000 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        font-family: Arial !important;
        font-size: 12px !important;
        font-weight: bold !important;
  }
select, textarea, input {
     background-color: #FFAC0C !important;
     color: #000000 !important;
     border: 0px !important;
     margin-bottom: 3px !important;
     font-family: arial !important;
     font-size: 8pt !important;
}
}

I used !important liberally throughout the CSS -- this changes a few things throughout the site, however: link color is among them. You can un-!important whatever you want; do your own thing. :D Individuality is awesome. Having a pretty IJ site scheme? Equally so.

You're only as crazy as I think you are.

Yay, tutorial!