Horizon: Mellow Mint (Userscript)

Oct 06, 2010 18:56

Was using the LJ banner script by daluci for some time now and ended up writing more css to restyle Horizon completely so 1) its more streamlined and 2) I don't get a visual surprise every month with a new LJ banner (which can sometimes be terrible TBH)

Name: Mellow Mint
Style: Revamped Horizon site scheme for livejournal (all accounts)
Browsers: Tested so far in Chrome, Opera and Firefox but should work in IE and Safari too

Version #1:



Bigger preview
| Userscript download...

Version #2 with userpic:



Bigger preview
| Userscript download...

Notes: The font used for the username is Fertigo Pro and you can download it here

I've tested the script in Chrome, Opera and Firefox so far but I don't use Macs or IE.

To use your own icon for the second version, make sure your picture is 75px wide and 75px high and upload it online. Copy the image source link and replace this text in the file:

http://pics.livejournal.com/gossymer/pic/009kb2pc

Setting up userscripts in your browsers
  • Chrome installs the userscripts natively as extensions
  • Firefox requires the Greasemonkey extension installed first
  • Opera requires you to set up a folder first
  • Safari users can follow this guide
  • Internet Explorer requires Trixie (or an alternative)


Editing userscripts in your browser: To find the userscript (after its installed) for editing:
  • For Chrome its usually under: C:\Users\YOURUSERNAME\AppData\Local\Google\Chrome\User Data\Default\Extensions\
  • For firefox you can do it through greasemonkey: instructions.
    Note: if you haven't selected your text editor yet in greasemonkey, Notepad can be found under C:\Windows\system32\notepad.exe
  • For Opera and IE, simply go to the userscript folder (that you set up) to find the file.


Making more customizations?

If you would like to change colors, background images etc. my css can be found here and a breakdown of classes and IDs in Horizon is on the wiki here (which I only discovered after finishing this *facepalms* )

After you edit the code remember to:
  • Remove the notes/labels above each section
  • Remove line breaks (return key/enters)
  • Add a backslash (\) before each quote (")
  • Paste it into the original userscript (inside the quotes - e.g. var css ="your css goes here")

# layouts, * guides

Previous post Next post
Up
[]