Graphics by Julz

Again with the FYI

julzroguenine — Fri, 27 Mar 2009 02:39:04 GMT

Just to make sure your CSS is perpetually out-dated, LJ switched the location of it's site images again.

Look through your CSS and wherever you see this: p-stat.livejournal.com change it to this: l-stat.livejournal.com.

Wish they could make up their minds already... =/

Tiny Icon Dump!

julzroguenine — Sun, 18 May 2008 14:42:17 GMT

Here are a bunch of tiny icons that I've made but haven't posted. And since I've gotten some requests for transparent icons that will work in older versions (6 or less) of IE, I included .gif files along with the .png ones.

As always, if any of the links are inactive, send me an email and I'll re-upload them. Please comment if you take them.

Note: If you normally use a browser that supports transparent .png files (like Firefox or IE7), I highly recommend using them over the .gif images.

Entry Linkbar Icons Take 2
They're similar to my other set, but are completely gray-scale. Plus, I added a 'Flag' icon now that that feature has been implemented.

Download Entry Linkbar Icons

Security
Not much different from my first set. The color is a tad lighter. Plus, I added a 'Custom Friends Group' icon and multiple colored 'Private' icons.

Download Security Icons

Other Tiny Icons
I've used some of these as images for sidebar box headers, but there are a couple random ones I just threw in for kicks.

Download Other Tiny Icons

Martini Glass Icons
Other colors are available in the download, but here are a couple examples:

Download Tiny Martini Glass Icons

Tiny Pin Icons
There are 2 sets of pins: one horizontal and one on an angle. As with the Martini Glass Icons, multiple colors are available with the download.

Download Tiny Pin Icons

( Fake Cut to the 'Tutorial on Implementation' )

Rules. Comment. Credit. Enjoy.

Cheers!
~ Julz

Tiny Icon FYI

julzroguenine — Sat, 03 May 2008 03:27:37 GMT

LiveJournal recently changed the location of site images from stat.livejournal.com to p-stat.livejournal.com. If you are using CSS to replace tiny icons (userinfo and/or security), you will need to modify your URLs so the images will display.

Note: This is outdated. See here for more information.

Theme Layer #1: Opal Unleashed

julzroguenine — Sun, 13 Apr 2008 22:11:29 GMT

Note: This is for Paid/Perm users only! Sorry Basic/Plus users. =(

I've been flirting with the idea of offering up a theme layer for Paid/Perm users to download and use for a while now. People seem to genuinely like what I've been doing with the S2 style Opal (Libra OSWD) over the past few years and I've finally decided to give them something completely different, yet still Opal.

So here it is, Opal Unleashed. A distinct version of a style most people overlook.

Bug-Fixes
[7/8/2008] changed Page::lay_print_header to make it easy to customize the 'tags page' view (code slightly modified from an entry in s2flexisquares), edited Entry::print_metadata so things don't get funky if you don't have a mood icon displayed.

Gone is the huge table that restricts the sidebar location, heck, gone is the concept of a single 'sidebar'. Instead, I give you 2. But they aren't where you'd normally find them. The 2 'sidebars' are above and below the main journal content.

I've tweaked the Opal Source Code and added lots of extra CSS classes, throughout. That makes Opal Unleashed much more customizable than its predecessor. I've included comments in the Stylesheet to explain what controls what. 'Sidebar' boxes are customized via Page::lay_print_sidebar (for the top 'bar') and MyClass::print_sidebar_bottom (for the bottom 'bar').

With a little CSS knowledge and a little patience with S2, the possibilities are endless.

READ ME:
I've done the majority of the hard stuff already: the coding. While I do realize that people may want things placed differently than I offer, I can't possibly re-code for everyone's desires.

If you'd like things to display differently and CSS doesn't help, I suggest getting your hands dirty and attempting to modify the code a bit. Always keep an original copy, change one thing at a time, and I know you'll succeed with a little patience. That's how I learned, trial and error. You probably won't get it right on your first, second, or even third try. But if you stick with it, you'll find that coding is a very powerful thing to know. You can practically do anything you want with any style you want.

If you try coding and get really stuck, feel free to ask for my help either here or in opal_help (I generally answer most of the questions over there these days anyway). However, I can't promise to be prompt (I do have a life outside of LJ, however boring it may be). I'll help when I am able, though. I secretly like it.

DISCLAIMER:
There are a lot of different web browsers out there. I only have access to a few. All browsers are not created equally, they all display/render things differently. It is impossible to make your journal look good in all browsers, so you have to pick a target audience. For instance, since I code primarily for my own journal, I make sure it looks good in my browser of choice: Firefox. After all, I am the one who will view it the most. I do realize that a good chunk of people out there use Internet Explorer, so I also try to make my journal look decent in IE as well, using hacks. But it is optimized for Firefox and the resolution of my computers.

I have to reiterate that I can't possibly code for all browsers, therefore the only browsers currently supported for Opal Unleashed are:

Firefox 2
IE7
Safari (for Windows, I don't own a Mac but it probably will work on one as well)
Opera

Those are the only browsers for which I will attempt to answer questions and fix problems. Although, I can't guarantee that I'll be able to fix every problem. I'm only human. *shrugs*

It is important to note that I do not have access to a computer running IE6 or less and therefore can't possibly code for it. There are a lot of quirks in older versions of IE that were addressed with the release of IE7 (and even more will be taken into account with IE8, or so I hear).

If you run a different browser or older version of the browsers listed above, I suggest finding browser-specific hacks using our good friend Google. I hear it's good at finding things. =P

INSTRUCTIONS:

Download the template here. It's a text file and should be kept around in case the code gets messed up, that way you'll have the original as a fall-back. As always, if the file isn't there, email me and I'll re-upload it.
Make sure you're working with the S2 style system. If not, you can change to it here.
i. Go here
ii. Scroll down till you see "Create Layout-Specific Layer" and fill it in as so:
Then hit 'create'

iii. You'll now see the new layer at the top of Your Layers:
Click the 'Edit' Button

iv. That opens this:
   a. Add the contents of the Opal Unleashed.txt file
   b. Hit the 'Save & Compile' button
   c. Edit the CSS and/or code to your liking, then hit the 'Save & Compile' button again. If you get an error, look at the part of the code it indicates and see where you made a mistake.
After things are customized to your liking, implement the layout. There are a couple ways to do this, but the following is the method I use:
   a. Go to Your Styles.
   b. Create a New Style by typing a name into the box at the bottom of the page and hit 'Create'
   c. That opens this dialogue:
   d. The Theme and User options won't appear till you chose Opal (Libra OSWD) for Layout. Fill the rest in as indicated (note: your Theme Layer and User Layer will have different #'s than mine) and hit the 'Save Changes' button.
   e. Go back to Your Styles, click on the 'Use' button next to the style you just created.

WARNING:
Do not try to use my current CSS to make an exact copy (or even a very close copy) of my layout! I want my layout to be unique, even if I offer the base code for others to use. I have tweaked my code beyond what I offer in Opal Unleashed and, while I'm all about helping others, I will not help you make a copy of my journal (nor anyone else's journal, for that matter). Believe it or not, I've run into problems with this in the past...

So, there you have it. A new Opal template. Go forth, customize, and, most importantly, enjoy!

Cheers!
~ Julz

Tiny Linkbar Icons

julzroguenine — Fri, 23 Nov 2007 22:15:08 GMT

Follow the link below to download (as a .zip file) my entry/comment linkbar icons. If the link is inactive, send me an email and I'll re-upload them. Please comment if you take them.

Samples:

All icons are 12 x 12 pixel transparent .png files.

Clicky to Download

Notes:

Some S2 styles allow you to change the entry link images if you are a Basic or Plus account holder: 3 Column and Boxer(?) are probably the easiest.
All Paid/Perm account holders will be able to customize your linkbars through modifying your theme layer. However, I am only familiar with doing this in the Opal (Libra OSWD) style. While coding for other styles may be similar, it would be time consuming on my part to attempt to explain it. So I can't help implement codes for other styles, sorry.
Only Paid/Perm account holders can customize comment pages.

Rules. Comment. Credit. Enjoy.

Cheers!
~ Julz

Tiny Userinfo/Security Icons Take 2

julzroguenine — Fri, 02 Nov 2007 18:53:27 GMT

Follow the link below to download (as a .zip file) my security/userinfo icons. This is a completely new set from my previous batch. If the link is inactive, send me an email and I'll re-upload them. Please comment if you take them.

Samples:




There are more colors and a couple versions of the lock and eye icons. Also, these are all 9x9 pixels, so they're much smaller than my previous batch.

Clicky to Download

( Fake Cut to the 'Tutorial on Implementation' )

Rules. Comment. Credit. Enjoy.

Cheers!
~ Julz

Desert High Contrast Icons

julzroguenine — Fri, 19 Oct 2007 23:39:06 GMT

Previews:

All photo credits can be found on individual Scrapbook image descriptions: here
Brushes by hitzusin in papermache

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

Rules. Comment. Credit. Enjoy.

Cheers!
~ Julz

Mount Rainier National Park Landscape Icons

julzroguenine — Fri, 27 Jul 2007 02:01:53 GMT

Previews:

All photo credits can be found on individual Scrapbook image descriptions: here

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

Rules. Comment. Credit. Enjoy.

Cheers!
~ Julz

Text Iconz

julzroguenine — Thu, 19 Jul 2007 22:05:12 GMT

Here are 28 quote icons.

Previews:

[1-11] Random
[12-13] Hitchhiker's Guide
[14-28] Stargate Atlantis

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

Background texture made using this tutorial. Fonts from dafont.com.

Rules. Comment. Credit. Enjoy.

Cheers!
~ Julz

Tiny Metadata Icons

julzroguenine — Wed, 11 Jul 2007 01:53:46 GMT

Follow the link below to download (as a .zip file) my metadata icons. If the link is inactive, send me an email and I'll re-upload them. Please comment if you take them.

Samples:
,
, ,
, ,
,

Clicky to Download

The easiest way to put these in your layout is to use kunzite1's mood icon to the left of the metadata tutorial for your specific layout. The tutorials can be found at s2layers and are for paid/perm accounts only. Then replace things as described here.

Rules. Comment. Credit. Enjoy.

Cheers!
~ Julz

Opal Stylesheet Explained (Part 2)

julzroguenine — Fri, 15 Jun 2007 17:07:33 GMT

I had to break this up into 2 posts because it was too long.
Post 1 | Post 2

This tutorial is a comprehensive guide to the CSS used in the Opal (Libra OSWD) S2 style. It can be applied to all account types (Basic, Plus, Paid, Perm), however only Paid/Perm users are able to customize their comment pages.

Each element is defined by giving a short description, location, default CSS (as given in the Opal source code), and any further notes that I thought might be useful. I have also included screencaps of my personal journal (julzroguenine) with the element in question shown in orange to better illustrate its location. Images have been reduced in size to fit in the table, clicking on an image will bring you to a larger version.

A few of the classes in the tutorial aren't specifically defined in the original Opal stylesheet but I included them here because many people like to format commonly used HTML elements (ex: b, i, u, code, blockquote). All of these are marked with a * in the table below.

Notes:
• If anyone finds any inconsistencies (especially broken links or spelling errors) in this tutorial, just comment here and I'll attempt to fix them in a timely fashion.
• This guide is not meant to explain the finer aspects of CSS, if you want to learn CSS I recommend either picking up a good reference book or using this site.
• If you use Firefox, the web developer plug-in is great for learning the CSS of your journal. You can also 'edit' CSS on-the-fly to test things (but it doesn't save your changes, so you might want to keep a text editor open and 'select all', 'copy' and 'paste' frequently to avoid losing changes).

Default Opal CSS (from Part 1)

I broke the CSS definitions up into different sections based on the specific area in your journal in which they are found (everything in the following table is a link to make things easier to find if you are looking for something specific):

comments .backtop, .backtop a
.entrydivider
.entryinfo
.entrylinks
.entrytext
.ip
.messageholder
.minicomment
.minicommentholder
.multiform
.multiform input *
.multiform select *
.postedby
.subject
.systemmessage
.systemmessage input
.systemmessage select
.systemmessage td
.systemmessage textarea
.userpic2

archive .backtop, .backtop a
.bigday
#cal *
#cal a
.calactitem
.entrydivider
.entryinfo
.entrylinks
.entrytext
.messageholder
.notablemessage
.systemmessage
.systemtext

tags page .backtop, .backtop a
.entrytext
.ljtaglist *
.ljtaglist a *
.subject

comments
.backtop, .backtop a description: back to top links location: at the bottom of entries, comments, and also on the tags and archive pages default css: .backtop { text-align: right; } .backtop a { color: #333333; font-size: 12px; text-decoration: none; padding-bottom: 1px; }	NO IMAGE
.entrydivider description: border divider separating .postedby and .entryinfo location: comments default css: .entrydivider { border-top: 1px solid #88919e; border-bottom: 1px solid #bfc4cb; } • the .entrydivider class is also used in entries and on the archive page
.entryinfo description: the container holding the date and the select checkbox location: comments default css: .entryinfo { background-color: #a9b0b9; font-size: 12px; padding: 4px; color: #333333; } notes: • the .entryinfo class is also used in entries and on the archive page
.entrylinks description: the container for the comment links (reply, delete, freeze, screen, track this, link, parent, thread) location: comments: under the 'select checkbox' default css: .entrylinks { border-bottom: 1px solid #bfc4cb; background-color: #a9b0b9; padding-top: 4px; padding-bottom: 4px; font-size: 12px; } • the .entrylinks class is also used in entries and on the archive page
.entrytext description: the text area of comments location: individual comments default css: .entrytext { margin: 10px; } notes: • the .entrytext class is also used in entries and on the archive page
.ip description: the text format of ip addresses logged in comments location: comments to the right of the username of the comment poster default css: .ip { color: #727d8c; }
.messageholder description: the container around .systemmessage on the comment and reply pages location: around where it says 'comments', 'mass-action on selected comments', and the reply form default css: .messageholder { border: 1px solid #2d3851;; margin-bottom: 5px; margin-top: 5px; } notes: • .messageholder goes hand and hand with .systemmessage • the .messageholder class is also used in entries and on the archive page	'comments' mass-action list reply form
.minicomment description: when an entry has a whole bunch of comments, some of them collapse into minicomments location: comments page default css: .minicomment { background-color: #a9b0b9; padding: 4px; color: #333333; border: 1px solid #bfc4cb; font-size: 12px; }
.minicommentholder description: the container holding .minicomment location: comments page default css: .minicommentholder { border: 1px solid #88919e; } notes: • .minicommentholder goes hand in hand with .minicomment
.multiform description: container holding 'mass-action on selected comments' location: very bottom of the comments page default css: .multiform { font-weight: bold; } notes: • .multiform goes hand and hand with .messageholder and .systemmessage
.multiform input, .multiform select * description: formatting of the drop down list and the button in .multiform location: very bottom of the comments page example css: .multiform input, .multiform select { background-color: #ffffff; }
.postedby description: container holding the username of the comment poster and their ip address (if you choose to log ip addresses) location: comments default css: .postedby { background-color: #a9b0b9; padding: 6px; font-size: 12px; }
.subject description: the subject of a comment location: individual comments default css: .subject { font-weight: bold; }
.systemmessage description: the bars containing 'comments', 'mass-action on selected comments', 'reply'/'read comments', and the reply form location: comment and reply pages default css: .systemmessage { background-color: #425378; color: #ffffff; border: 1px solid #7c8eb6; font-size: 12px; } notes: • .systemmessage goes hand and hand with .messageholder • the .systemmessage class is also used in entries and on the archive page	'comments' mass-action list reply form
.systemmessage input, .systemmessage textarea, .systemmessage select description: buttons, text areas, and drop down list formatting location: reply form default css: .systemmessage input, .systemmessage textarea, .systemmessage select { background-color: #bfc4cb; color: #333333; }
.systemmessage td description: fonts where it says 'From:', 'Subject:', and 'Message:' location: reply form default css: .systemmessage td { padding: 4px; font-size: 12px; color: #ffffff; }
.userpic2 description: comment userpics location: individual comments default css: .userpic2 { float: right; text-align: right; margin-top: 2px; margin-right: 3px; } notes: • the .userpic2 class also defines the entry userpic

archive
.backtop, .backtop a description: back to top links location: at the bottom of entries, comments, and also on the tags and archive pages default css: .backtop { text-align: right; } .backtop a { color: #333333; font-size: 12px; text-decoration: none; padding-bottom: 1px; }	NO IMAGE
.bigday description: the weekday abbreviations and dates in the calendar location: year page default css: .bigday { font-size: 2em; color: #a9b0b9; float: left; font-weight: bolder; }
#cal * description: the entire big calendar (not just the individual months) location: year page default css: #cal { } notes: • #cal isn't specifically defined in the Opal stylesheet, but #cal a is (the links). so i thought i'd just show you where #cal is located.
#cal a description: all the links in the big calendar location: year page default css: #cal a { text-decoration: none; color: #333333; } notes: • this will most likely be overridden elsewhere in your stylesheet (ex: .entrylinks a)
.calactitem description: dates that have entries (links) location: archive page calendar default css: .calactitem { float: left; margin: 1px; width: 23px; font-size: 11px; text-align: center; background-color: #a9b0b9; border-right: 1px solid #425378; border-bottom: 1px solid #425378; } note: • because this class is used both for the big calendar on the archive page and the minicalendar in the sidebar, formatting that looks good on one often looks bad on the other • paid/perm users can easily remedy this by defining a new class for one or the other
.entrydivider description: border around .entryinfo on the year page; border at the top of .entrylinks on the month page location: archive: year and month pages default css: .entrydivider { border-top: 1px solid #88919e; border-bottom: 1px solid #bfc4cb; } • the .entrydivider class is also used in entries and comments	year page month page
.entryinfo description: container holding the month name location: archive: year page default css: .entryinfo { background-color: #a9b0b9; font-size: 12px; padding: 4px; color: #333333; } • the .entryinfo class is also used in entries and comments
.entrylinks description: the container holding the 'view subjects' link on the year page; the container holding the link to a specific date on the month page location: archive: year and month pages default css: .entrylinks { border-bottom: 1px solid #bfc4cb; background-color: #a9b0b9; padding-top: 4px; padding-bottom: 4px; font-size: 12px; } • the .entrylinks class is also used in entries and comments	year page month page
.entrytext description: the calendar background on the year page; the container holding the time, subject, # comments on the month page location: archive: year and month pages default css: .entrytext { margin: 10px; } notes: • the .entrytext class is also used in entries and comments	year page month page
.messageholder description: container holding .systemmessage location: year and month pages default css: .messageholder { border: 1px solid #2d3851;; margin-bottom: 5px; margin-top: 5px; } notes: • the .messageholder class is also used in entries and comments	year page month page
.notablemessage description: the year links and current year (text) location: very top of the year page default css: .notablemessage { padding: 4px; } notes: • .notablemessage goes hand and hand with .messageholder and .systemmessage • i personally don't see the point to this class; but it's there, so i put it in this tutorial
.systemmessage description: container holding .notablemessage location: year and month pages default css: .systemmessage { background-color: #425378; color: #ffffff; border: 1px solid #7c8eb6; font-size: 12px; } notes: • .systemmessage goes hand and hand with .messageholder and .notablemessage • the .systemmessage class is also used in entries and comments	year page month page
.systemtext description: the year being viewed (not a link) location: year page default css: .systemtext { font-weight: normal; padding-left: 10px; padding-right: 10px; }

tags page
.backtop, .backtop a description: back to top links location: at the bottom of entries, comments, and also on the tags and archive pages default css: .backtop { text-align: right; } .backtop a { color: #333333; font-size: 12px; text-decoration: none; padding-bottom: 1px; }	NO IMAGE
.entrytext description: the container holding 'visible tags' and the tag list location: tags page default css: .entrytext { margin: 10px; } notes: • the .entrytext class is also used in entries, comments, and on the archive pages
.ljtaglist, .ljtaglist a * description: the format of the list of tags location: tags page example css: .ljtaglist { list-style-type: circle; color: #F7941C; } .ljtaglist a { text-decoration: none; color: #F7941C; font-weight: bold; }
.subject description: title of tags page location: tags page, where it says 'visible tags' default css: .subject { font-weight: bold; }

Opal Stylesheet Explained (Part 1)

julzroguenine — Fri, 15 Jun 2007 17:05:20 GMT

I had to break this up into 2 posts because it was too long.
Post 1 | Post 2

This tutorial is a comprehensive guide to the CSS used in the Opal (Libra OSWD) S2 style. It can be applied to all account types (Basic, Plus, Paid, Perm), however only Paid/Perm users are able to customize their comment pages.

Each element is defined by giving a short description, location, default CSS (as given in the Opal source code), and any further notes that I thought might be useful. I have also included screencaps of my personal journal (julzroguenine) with the element in question shown in orange to better illustrate its location. Images have been reduced in size to fit in the table, clicking on an image will bring you to a larger version.

A few of the classes in the tutorial aren't specifically defined in the original Opal stylesheet but I included them here because many people like to format commonly used HTML elements (ex: b, i, u, code, blockquote). All of these are marked with a * in the table below.

Notes:
• If anyone finds any inconsistencies (especially broken links or spelling errors) in this tutorial, just comment here and I'll attempt to fix them in a timely fashion.
• This guide is not meant to explain the finer aspects of CSS, if you want to learn CSS I recommend either picking up a good reference book or using this site.
• If you use Firefox, the web developer plug-in is great for learning the CSS of your journal. You can also 'edit' CSS on-the-fly to test things (but it doesn't save your changes, so you might want to keep a text editor open and 'select all', 'copy' and 'paste' frequently to avoid losing changes).

Default Opal CSS:

The following code is is exactly as it appears in the original CSS file for Opal. Copy, paste into your favorite text editor, and modify as you see fit.

/* Cleaned CSS: */

body {
        font-family:  sans-serif;
        background-color: #2d3851;
        margin: 10px;
    }

.border4 { border: 1px solid #2d3851; }
    .border3 { border: 1px solid #bfc4cb; }
    .border2 { border: 2px solid #7c8eb6; }
 
    #bodycontent { background-color: #7c8aa4; border: 1px solid #2d3851; padding: 3px; }

#headerinfo {
        background-color: #2d3851;
        color: #ffffff;
        text-align: right;
        font-size: 10px;
        padding: 2px;
        margin-top: 1px;
    }

#header { color: #e9f2fc; }
    #header h3 { font-weight: normal; }
    #userpic { float: right; }

.userpic2 {
        float: right;
        text-align: right;
        margin-top: 2px;
        margin-right: 3px;
    }

#nav {
        white-space: nowrap;
        margin-bottom: 10px;
        font-size: 12px;
    }

#nav A {
        border: 1px solid #2d3851;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
        height: 20px;
        text-decoration: none;
        color: #ffffff;
        background-color: #425378;
    }

#nav A:Hover { background-color: #2d3851; }

#content {
        background-color: #bfc4cb;
        border: 1px solid #a9b0b9;
        padding: 4px;
    }

.columncontent {
        background-color: #425378;
        border: 1px solid #2d3851;
        padding: 3px;
        width: 200px;
        font-size: 12px;
        color: #ffffff;
    }

.columnitem {
        background-color: #a9b0b9;
        padding: 3px;
        margin-top: 5px;
        color: #333333;
        border-top: 1px solid #88919e;
        border-bottom: 1px solid #88919e;
        overflow: hidden;
    }

.entries { color: #333333; }

.entrydivider {
        border-top: 1px solid #88919e;
        border-bottom: 1px solid #bfc4cb;
    }

.minicomment {
        background-color: #a9b0b9;
        padding: 4px;
        color: #333333;
        border: 1px solid #bfc4cb;
        font-size: 12px;
    }

.minicommentholder { border: 1px solid #88919e; }

.entryinfo {
        background-color: #a9b0b9;
        font-size: 12px;
        padding: 4px;
        color: #333333;
    }

.postedby {
        background-color: #a9b0b9;
        padding: 6px;
        font-size: 12px;
    }

.entrylinks {
        border-bottom: 1px solid #bfc4cb;
        background-color: #a9b0b9;
        padding-top: 4px;
        padding-bottom: 4px;
        font-size: 12px;
    }

.entrylinks A {
        text-decoration: none;
        padding-top: 4px;
        padding-bottom: 4px;
        white-space: nowrap;
        color: #333333;
        border-right: 1px solid #bfc4cb;

}

.entrylinks A:Hover {
        background-color: #bfc4cb;
    }

.messageholder {
        border: 1px solid #2d3851;;
        margin-bottom: 5px;
        margin-top: 5px;
    }

.systemmessage {
        background-color: #425378;
        color: #ffffff;
        border: 1px solid #7c8eb6;
        font-size: 12px;
    }

.systemtext {
        font-weight: normal;
        padding-left: 10px;
        padding-right: 10px;
    }

.systemmessage A {
        text-decoration: none;
        padding-left: 10px;
        padding-right: 10px;
        color: #ffffff;
        padding-top: 4px;
        padding-bottom: 4px;
    }

.systemmessage A:Hover {
        background-color: #2d3851;
    }

.systemmessage input, .systemmessage textarea, .systemmessage select {
        background-color: #bfc4cb;
        color: #333333;
    }

.systemmessage TD {
        padding: 4px;
        font-size: 12px;
        color: #ffffff;
    }

.entry { margin-bottom: 30px;}
    .entrytext { margin: 10px; }
    .subject { font-weight: bold; }

.meta {
        font-size: 12px;
        padding: 4px;
    }

.meta A {
        text-decoration: none;
        color: ;
    }

.systemmessage A:Hover {
        background-color: #2d3851;
    }

#sidecolumn TD { color: #ffffff; }

#sidecolumn A {
        text-decoration: none;
        color: #333333;
    }

.sidetd {
        width: 200px;
    }

.backtop {
        text-align: right;
    }

.backtop A {
        color: #333333;
        font-size: 12px;
        text-decoration: none;
        padding-bottom: 1px;
    }

#cal A {
        text-decoration: none;
        color: #333333;
    }

.calrow {
        clear: both;
        font-family: Arial, sans-serif;
    }

.calempty {
        width: 24px;
        font-size: 11px;
        margin: 1px;
        float: left;
    }

.calactitem {
        float: left;
        margin: 1px;
        width: 23px;
        font-size: 11px;
        text-align: center;
        background-color: #a9b0b9;
        border-right: 1px solid #425378;
        border-bottom: 1px solid #425378;
    }

.calinitem {
        float: left;
        margin: 1px;
        width: 23px;
        font-size: 11px;
        text-align: center;
        border-right: 1px solid #a9b0b9;
        border-bottom: 1px solid #a9b0b9;
    }

.friendcolor {
        width: 10px;
        height: 10px;
        border: 2px solid #bfc4cb;
    }

.multiform {
        font-weight: bold;
    }

.ip {
        color: #727d8c;
    }

.friendname {
        padding: 4px;
        text-decoration: none;
        border-left: 1px solid #bfc4cb;
        border-right: 1px solid #bfc4cb;
    }

.bigday {
        font-size: 2em;
        color: #a9b0b9;
        float: left;
        font-weight: bolder;
    }

.notablemessage {
        padding: 4px;
    }

.ljtaglist{
list-style-type: circle;
color: #F7941C;
}

.ljtaglist a{
text-decoration: none;
color: #F7941C;
font-weight: bold;
}

I broke the CSS definitions up into different sections based on the specific area in your journal in which they are found (everything in the following table is a link to make things easier to find if you are looking for something specific):

page a *
a:hover *
a:visited *
b *
blockquote *
body
#bodycontent
.border2
.border3
.border4
code *
#content
html *
i *
input *
select *
textarea *
u *

header #header
#header h3
#headerinfo
#nav
#nav a
#nav a:hover
#userpic

sidebar .calactitem
.calempty
.calinitem
.calrow
.columncontent
.columnitem
#sidecolumn a
#sidecolumn td
.sidetd

entries .backtop
.backtop a
.entries
.entry
.entrydivider
.entryinfo
.entrylinks
.entrylinks a
.entrylinks a:hover
.entrytext
.friendcolor
.friendname
.messageholder
.meta
.meta a
.subject
.systemmessage
.systemmessage a
.systemmessage a:hover
.userpic2

page
a, a:hover, a:visited * description: the look of links location: everywhere (unless overridden elsewhere in stylesheet) example css: a, a:hover, a:visited { text-decoration: none; }	NO IMAGE
b * description: the look of bolded text inside <b> tags location: everywhere (unless overridden elsewhere in stylesheet) example css: b { color: #595959; }	NO IMAGE
blockquote * description: the look of text inside <blockquote> tags location: primarily used in entries and comments example css: blockquote { background-color: #ecf0f6; padding: 5px; border: 1px dashed #919bad; color: #919bad; }
body description: format of the entire page in addition to defining the page background, body is also used as a fall-back code for fonts (if something is not explicitly defined elsewhere in the stylesheet, these values will be used) location: everywhere default css: body { font-family: sans-serif; background-color: #2d3851; margin: 10px; } notes: • basic/plus users can change the width of your journal here (most paid/perm templates have other means of defining the journal width) • if changing the width and you want to keep your layout centered, add an auto margin (ex: margin: 10px auto;)	default width: 800px; margin: 10px auto;
#bodycontent description: the container that holds the layout components (header, sidebar, journal body) location: main journal content, everywhere inside .border3 and .border2 classes (defined below) default css: #bodycontent { background-color: #7c8aa4; border: 1px solid #2d3851; padding: 3px; }
.border2 description: one of 3 border classes defined in opal location: 2nd border around main journal content, 3rd border around boxes in sidebar default css: .border2 { border: 2px solid #7c8eb6; } notes: • to disable change the border to 0px
.border3 description: one of 3 border classes defined in opal location: outermost border around main journal content, 2nd border around boxes in sidebar default css: .border3 { border: 1px solid #bfc4cb; } notes: • to disable change the border to 0px
.border4 description: one of 3 border classes defined in opal location: outermost border around the boxes in the sidebar default css: .border4 { border: 1px solid #2d3851; } notes: • to disable change the border to 0px
code * description: the look of text inside <code> tags location: primarily used in entries and comments example css: code { background-color: #D7F4FF; display: block; color: #0076A3; padding: 5px; border: 1px dashed #0076A3; }
#content description: the container that holds the sidebar and journal body (not the header) location: main journal content default css: #content { background-color: #bfc4cb; border: 1px solid #a9b0b9; padding: 4px; }
html * description: generally used to customize the look of scrollbars in IE location: all scrollbars on the page example css: html { scrollbar-face-color: #dadada; scrollbar-arrow-color: #dadada; scrollbar-highlight-color: #e6e6e6; scrollbar-3dlight-color: #c1c1c1; scrollbar-shadow-color: #cdcdcd; scrollbar-darkshadow-color: #c1c1c1; scrollbar-track-color: #ffffff; }
i * description: the look of italic text inside <i> tags location: everywhere (unless overridden elsewhere in stylesheet) example css: i { color: #595959; }	NO IMAGE
input, select, textarea * description: the look of information inside <input>, <select>, and <textarea> tags location: anywhere input (buttons), select (drop down menus), or textarea (blank box with text in it) are found; primarily on the reply page example css: input, select, textarea { color: #818181; font-size: 11px; background-color: #dadada; border: 1px solid #c1c1c1; } notes: • this will be overridden if you define .systemmessage input, .systemmessage textarea, .systemmessage select or .multiform input, .multiform select in your stylesheet	NO IMAGE
u * description: the look of underlined text inside <u> tags location: everywhere (unless overridden elsewhere in stylesheet) example css: u { color: #595959; }	NO IMAGE

header
#header description: the container holding both the journal title and the navigation linkbar location: header default css: #header { color: #e9f2fc; }
#header h3 description: journal title location: header default css: #header h3 { font-weight: normal; }
#headerinfo description: the container holding both the username and dots location: header default css: #headerinfo { background-color: #2d3851; color: #ffffff; text-align: right; font-size: 10px; padding: 2px; margin-top: 1px; }
#nav description: the container holding the navigation links location: navigation bar default css: #nav{ white-space: nowrap; margin-bottom: 10px; font-size: 12px; } notes: • add display: none; to remove
#nav a, #nav a:hover description: navigation links themselves location: navigation bar default css: #nav a { border: 1px solid #2d3851; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px; height: 20px; text-decoration: none; color: #ffffff; background-color: #425378; } #nav a:hover { background-color: #2d3851; }	#nav a #nav a:hover
#userpic description: default userpic location: header default css: #userpic { float: right; } notes: • add display: none; to remove

sidebar
.calactitem description: dates that have entries (links) location: minicalendar in the sidebar default css: .calactitem { float: left; margin: 1px; width: 23px; font-size: 11px; text-align: center; background-color: #a9b0b9; border-right: 1px solid #425378; border-bottom: 1px solid #425378; } note: • because this class is used both for the minicalendar in the sidebar and the big calendar on the archive page, formatting that looks good on one often looks bad on the other • paid/perm users can easily remedy this by defining a new class for one or the other
.calempty description: empty spaces in the minicalendar (where no dates are) location: minicalendar in the sidebar default css: .calempty { width: 24px; font-size: 11px; margin: 1px; float: left; }
.calinitem description: dates that have no entries (no links) location: minicalendar in the sidebar default css: .calinitem { float: left; margin: 1px; width: 23px; font-size: 11px; text-align: center; border-right: 1px solid #a9b0b9; border-bottom: 1px solid #a9b0b9; }
.calrow description: i'm not sure what this does, so i put it here location: ??? default css: .calrow { clear: both; font-family: Arial, sans-serif; } notes: • i cannot find this class in either the Opal source code or the LJ core layer, but it is in the Opal stylesheet for some reason so i included it in the tutorial	NO IMAGE
.columncontent description: the background of the boxes in the sidebar location: sidebar boxes default css: .columncontent { background-color: #425378; border: 1px solid #2d3851; padding: 3px; width: 200px; font-size: 12px; color: #ffffff; } notes: • change the width of your sidebar here
.columnitem description: the text area of the boxes in the sidebar location: sidebar boxes default css: .columnitem { background-color: #a9b0b9; padding: 3px; margin-top: 5px; color: #333333; border-top: 1px solid #88919e; border-bottom: 1px solid #88919e; overflow: hidden; }
#sidecolumn a description: the links in the sidebar location: sidebar default css: #sidecolumn a { text-decoration: none; color: #333333; }	NO IMAGE
#sidecolumn td description: the column containing the sidebar location: sidebar default css: #sidecolumn td{ color: #ffffff; } notes: • this doesn't do much (changing the font color will effect the text in the calendar if it isn't defined in .calinitem)	NO IMAGE
.sidetd description: the sidebar (but not the boxes containing the actual content) location: sidebar default css: .sidetd { width: 200px; } notes: • even though it seems like it, this doesn't control the width of your sidebar; .columncontent does (although for consistency, i always keep the width of .sidetd equal to the width i put in .columncontent)

entries
.backtop, .backtop a description: back to top links location: at the bottom of entries, comments, and also on the tags and archive pages default css: .backtop { text-align: right; } .backtop a { color: #333333; font-size: 12px; text-decoration: none; padding-bottom: 1px; }	NO IMAGE
.entries description: the container holding the entry and all the components that go with it (date, entrylinks, back to top link, etc.) location: entire entry area default css: .entries { color: #333333; }
.entry description: the container holding the subject, entry text, and metadata location: individual entries default css: .entry { margin-bottom: 30px; }
.entrydivider description: the divider (aka border) that separates the date, friend/community name, and entry linkbar location: at the top of an individual entry default css: .entrydivider { border-top: 1px solid #88919e; border-bottom: 1px solid #bfc4cb; } notes: • the .entrydivider class is also used in comments and on the archive page
.entryinfo description: the container holding the date (and friend/community name on friends page) location: at the top of an individual entry default css: .entryinfo { background-color: #a9b0b9; font-size: 12px; padding: 4px; color: #333333; } notes: • the .entryinfo class is also used in comments and on the archive page	recent page friends page
.entrylinks description: the container for the entry links (leave a comment, #comments, edit entry, edit tags, add to memories, tell a friend, track this, link) location: entries: below the date, above the subject default css: .entrylinks { border-bottom: 1px solid #bfc4cb; background-color: #a9b0b9; padding-top: 4px; padding-bottom: 4px; font-size: 12px; } • the .entrylinks class is also used in comments and on the archive page
.entrylinks a, .entrylinks a:hover description: the entry links and when the cursor is hovering over them location: entries: below the date, above the subject default css: .entrylinks a { text-decoration: none; padding-top: 4px; padding-bottom: 4px; white-space: nowrap; color: #333333; border-right: 1px solid #bfc4cb; } .entrylinks a:hover { background-color: #bfc4cb; }	NO IMAGE
.entrytext description: the text area of entries location: entry default css: .entrytext { margin: 10px; } notes: • the .entrytext class is also used in comments and on the archive page
.friendcolor description: i'm not sure what this does, so i put it here location: ??? default css: .friendcolor { width: 10px; height: 10px; border: 2px solid #bfc4cb; } notes: • i cannot find this class in either the Opal source code or the LJ core layer, but it is in the Opal stylesheet for some reason so i included it in the tutorial	NO IMAGE
.friendname description: the look of friend usernames (not including community or feed names) location: friends page default css: .friendname { padding: 4px; text-decoration: none; border-left: 1px solid #bfc4cb; border-right: 1px solid #bfc4cb; } notes: • to get rid of the white background, add a background-color with the !important tag (ex: background-color: #a9b0b9 !important;)
.messageholder description: container holding .systemmessage location: top and bottom of the column containing the entries default css: .messageholder { border: 1px solid #2d3851;; margin-bottom: 5px; margin-top: 5px; } notes: • .messageholder goes hand and hand with .systemmessage • the .messageholder class is also used in comments and on the archive page
.meta, .meta a description: the container holding the text and links for location, mood, music, and tags; .meta a deals with the links themselves location: at the bottom of each entry default css: .meta { font-size: 12px; padding: 4px; } .meta a { text-decoration: none; color: ; } notes: • if you are using kunzite1's code for moving the mood icon to the left of the metadata or truman's modification of that code you should add .currentlocation, .currentmood, .currenttags, and .currentmusic to your stylesheet to control the look of your metadata.
.subject description: the subject of a post location: entry default css: .subject { font-weight: bold; }
.systemmessage description: the bar containing the 'back' and 'forward' links along with the 'viewing x-x' location: top and bottom of the column containing the entries default css: .systemmessage { background-color: #425378; color: #ffffff; border: 1px solid #7c8eb6; font-size: 12px; } notes: • .systemmessage goes hand and hand with .messageholder • the .systemmessage class is also used in comments and on the archive page
.systemmessage a, .systemmessage a:hover description: the look of the 'back' and 'forward' links location: top and bottom of the column containing the entries default css: .systemmessage a { text-decoration: none; padding-left: 10px; padding-right: 10px; color: #ffffff; padding-top: 4px; padding-bottom: 4px; } .systemmessage a:hover { background-color: #2d3851; }	NO IMAGE
.userpic2 description: entry userpics location: individual entries default css: .userpic2 { float: right; text-align: right; margin-top: 2px; margin-right: 3px; } notes: • the .userpic2 class also defines the comment userpic

Linkbar Tutorial [Opal]

julzroguenine — Thu, 07 Jun 2007 04:39:25 GMT

Note: This only works for Paid/Perm account holders who have access to Advanced Customization.

How do I completely remove a link from the entry and/or comment linkbar?

A few people have asked how to completely remove the "track this" and "add to memories" links in the linkbar, so here's how to do it.

Step 1:

Locate the sections of code that deal with the linkbars in your theme layer*. The codes are a little different for each template so I've included instructions for the popular templates below.

• If you are using kunzite1's version of halffling's code:
(1) Under Entry::print_linkbar find this:

  # gather current linkbar
  foreach var string link_key ($.link_keyseq) {
    var Link  link            = $this->get_link($link_key);
    $link_url{$link_key}      = $link.url;
    $link_caption{$link_key}  = $link.caption;
    $link_image{$link_key}    = $link.icon.url;
    $link_keyseq[$keyseq_index++] = $link_key; # add this to new link_keyseq array
  }

(2) Under EntryPage::print_comment find this:

# some links for doing stuff to this comment
  foreach var string k ($c.link_keyseq) {
    var Link link = $c->get_link($k);
    if ($link) {
      """<a href="$link.url"> &nbsp; $link.caption &nbsp; </a>""";
    }
  }
  """
  <a href="$c.permalink_url"> &nbsp; $*text_permalink &nbsp; </a>$parent$thread
  </div>

• If you are using halffling's code:
(1) Under Page::print_entry find this:

	var string{} caption = {
		"edit_entry" => "Edit Entry",
		"edit_tags" => "Edit Tags",
		"mem_add" => "Add to Memories"
	};
	foreach var string key (["edit_entry","edit_tags","mem_add"]) {
		var Link link = $e->get_link($key);
		if ($link) {
			"""<a href="$link.url"> &nbsp; $caption{"$key"} &nbsp; </a>""";
		}
	}
	"""
</div>

(2) Under EntryPage::print_comment find this:

# some links for doing stuff to this comment
	foreach var string k ($c.link_keyseq) {
	var Link link = $c->get_link($k);
	if ($link) {
	"""<a href=\"$link.url\"> &nbsp; $link.caption &nbsp; </a>""";
	}
	}
	"""
	<a href="$c.permalink_url"> &nbsp; $*text_permalink &nbsp; </a>$parent$thread
	</div>

• If you are using ignited's code:
(1) Under Page::print_entry find this:

	foreach var string key 

(["edit_entry","mem_add","tell_friend"]) {
		var Link link = $e->get_link($key);
		if ($link) {
			"""<a href=\"$link.url\"> &nbsp; $link.caption &nbsp; </a>""";
		}
	}
	"""<a href="$e.permalink_url"> &nbsp; $*text_permalink &nbsp; </a>
</div>

(2) Copy the following (from the Opal Raw Source code) and paste it into your theme layer.

function EntryPage::print_comment(Comment c) {

var string datetime;
    $datetime = $c->time_display();

var string parent;
    var string thread;
    if($c.parent_url != "") {
        $parent = """<a href="$c.parent_url"> &nbsp; $*text_comment_parent &nbsp; </a>""";
    }
    if($c.thread_url != "") {
        $thread = """<a href="$c.thread_url"> &nbsp; $*text_comment_thread &nbsp; </a>""";
    }

var string subjecticon;
    if (defined $c.subject_icon) {
        $subjecticon = """<img src="$c.subject_icon.url" width="$c.subject_icon.width" height="$c.subject_icon.height"

alt="" />""";
    }

var string ip;
    if ($c.metadata{"poster_ip"}) {
        $ip = """ &nbsp;  """ + $c.metadata{"poster_ip"};
    }

var string poster = defined $c.poster ? $c.poster->as_string() : "<b>(Anonymous)</b>";

var string pic;
    if (defined $c.userpic and $*comment_userpic_style != "off") {
        $pic = """<div class="userpic2"><img src="$c.userpic.url" width="$c.userpic.width" height="$c.userpic.height"

alt="" /></div>""";
    }

var string indent = ($c.depth - 1) * 25 + "px";

"""
                <div id='$c.dom_id'>
        <a name='$c.anchor'></a>
        $pic
        <div class="entry" style="margin-left: $indent;">
            <div class="entrydivider"></div>
            <div class="postedby">$poster  <span class="ip">$ip</span></div>
            <div class="entrydivider"></div>
            <div class="entryinfo">$subjecticon $datetime</div>
            <div class="entrydivider"></div>

""";

if ($.multiform_on) {
        """<div class="entryinfo"><label for="ljcomsel_$c.talkid">$*text_multiform_check</label> """;
        $c->print_multiform_check();
        """</div>
            <div class="entrydivider"></div>
        """;
    }

var string replyurl;
    if ($c.frozen) {
        $replyurl = """<a href="javascript://"> &nbsp; $*text_comment_frozen &nbsp; </a>""";
    } else {
        $replyurl = """<a href="$c.reply_url"> &nbsp; $*text_comment_reply &nbsp; </a>""";
    }

print safe """
            <div class="entrylinks">
                $replyurl
    """;

# some links for doing stuff to this comment
    foreach var string k ($c.link_keyseq) {
        var Link link = $c->get_link($k);
        if (defined $link) {
            """<a href=\"$link.url\"> &nbsp; $link.caption &nbsp; </a>""";
        }
    }

print safe """
                <a href="$c.permalink_url"> &nbsp; $*text_permalink &nbsp; </a>$parent$thread
            </div>
            <div class="entrytext">
                <div class="subject">$c.subject</div>
                <p>"""; $c->print_text(); """</p>
            </div>
    """;

if ((size $c.replies) > 0 and $c.replies[0].full == false) {
            """<div style="margin-top: 5px; margin-bottom: 5px; clear: both;">\n""";
            $this->print_comments($c.replies);
            "</div>\n";
        }

"""
        </div>
        <div class="backtop"><a href="#top">back to top</a></div>
                </div>
    """;

if ((size $c.replies) > 0 and $c.replies[0].full == true) {
        $this->print_comments($c.replies);
    }

}

Then find this:

foreach var string k ($c.link_keyseq) {
        var Link link = $c->get_link($k);
        if (defined $link) {
            """<a href=\"$link.url\"> &nbsp; $link.caption &nbsp; </a>""";
        }
    }

    print safe """
                <a href="$c.permalink_url"> &nbsp; $*text_permalink &nbsp; </a>$parent$thread
            </div>

• If you are using pamelajoy's code:
(1) Under Page::print_entry find this:

	foreach var string key 

(["edit_entry","mem_add","tell_friend"]) {
		var Link link = $e->get_link($key);
		if ($link) {
			"""<a href=\"$link.url\"> &nbsp; $link.caption &nbsp; </a>""";
		}
	}
	"""<a href="$e.permalink_url"> &nbsp; Link &nbsp; </a>
</div>

(2) Under EntryPage::print_comment find this:

foreach var string k ($c.link_keyseq) {
var Link link = $c->get_link($k);
if ($link) {
"""<a href=\"$link.url\">   $link.caption   </a>""";
}

}

• If you are using grrliz's code:
(1) Under Page::print_entry find this:

	foreach var string key (["edit_entry","mem_add","tell_friend"]) {
		var Link link = $e->get_link($key);
		if ($link) {
			"""<a href=\"$link.url\">   $link.caption   </a>""";
		}
	}
	"""<a href="$e.permalink_url">   $*text_permalink   </a>
</div>

(2) Follow the steps given for ignited's code above.

• If you are using carriep63's code:
(1) Under Page::print_entry find this:

<!--COMMENT LINKS-->
<div class="entrylinks">
""";
$e.comments->print();

foreach var string key (["edit_entry","edit_tags","mem_add","tell_friend"]) {
var Link link = $e->get_link($key);
if ($link) {
"""<a href=\"$link.url\">  $link.caption </a>""";
}
}
"""<a href="$e.permalink_url">  $*text_permalink </a>

</div>

(2) Under EntryPage::print_comment find this:

foreach var string k ($c.link_keyseq) {
var Link link = $c->get_link($k);
if ($link) {
"""<a href=\"$link.url\">$link.caption </a>""";
}
}

"""
<a href="$c.permalink_url">$*text_permalink </a>$parent$thread
</div>

Step 2:

Note: If you do not include one of these in your list, it will not print (i.e., if you leave "mem_add" out, there will not be a "Add to Memories" link in the linkbar).

Entry Linkbar:

Options:
"edit_entry"
"edit_tags"
"mem_add"
"tell_friend"
"watch_comments"
"unwatch_comments"

The red part of the codes listed above should be replaced with something like this:

["edit_entry","edit_tags","mem_add","tell_friend","watch_comments","unwatch_comments"]

Comment Linkbar:

Options:
"watch_thread"
"unwatch_thread"
"watching_parent"
"screen_comment"
"unscreen_comment"
"freeze_thread"
"unfreeze_thread"
"delete_comment"

The green part of the codes listed above should be replaced with something like this:

["watch_thread","unwatch_thread","watching_parent","screen_comment","unscreen_comment","freeze_thread","unfreeze_thread","delete_comment"]

Note:
This does not change where it says "comment", "# comments", "permalink", "parent", or "thread" it is for the other links in both linkbars.

Step 3:

Save and Compile your theme layer.

* If you don't have a theme layer, you need to create one. Follow these instructions in s2howto. Make sure to select "Opal (Libra OSWD)" under "Layout". Then copy function Page::print_entry (Entry e) from the Opal Source, paste it into your new theme layer, make the changes listed above, and compile. Then follow this to apply the changes to your journal.

Lighthouse Iconage

julzroguenine — Tue, 06 Mar 2007 01:08:15 GMT

Here are 24 lighthouse icons I made from pictures I took.

Teasers:

[01-08] Chicago Lighthouse (Navy Pier)
[09-14] South Manitou Island Lighthouse (Lake Michigan)
[15-20] Grand Haven Catwalk (Grand Haven, Michigan)
[21-24] Point Reyes Lighthouse (Point Reyes National Seashore, California)

001	002	003


004	005	006


007	008	009


010	011	012


013	014	015


016	017	018


019	020	021


022	023	024

Rules. Comment. Credit. Enjoy.

Cheers!
~ Julz

Security and Userinfo Icons

julzroguenine — Sat, 24 Feb 2007 01:57:35 GMT

Follow the link below to download (as a .zip file) my security/userinfo icons. This is v2.0 because I added more community and syndicated colors. If the link is inactive, send me an email and I'll re-upload them. Please comment if you take them.

Samples:

Clicky to Download

All users (regardless of account type) can change info icons and security icons using CSS for both S1 and S2.

Steps to implement these icons:
(1) Upload the images to the image hosting site of your choice
(2) Copy the image URLs
(3) Either generate your own CSS by using one of these tutorials:
Baldyman No More! by ephi or [S1] and [S2] Profile Icons by babytest
- Or -
(4) Use loveicon's Tiny Icon Generator

NOTES:
(1) As stated in the comments for lj_releases r14, padding around the userinfo icons has been tweaked, so you'll need to add !important to your CSS in order for things to display correctly.
(2) All of my icons are 12px by 12px except for the userinfo icon, which is 11px by 12px.
(3) The Tiny Icon Generator's codes may or may not change your security icons. It depends on the class under which they are defined in your layout style. Go here to get codes specific to your layout style. To change Security Icons using S1, follow these instructions by test_sommeil.
(4) As far as I know only Paid/Perm users can add the unlocked icon to Public posts.
(5) This works for Firefox, Opera, Netscape, and IE7. IE6 or less will also add a background color to the .png files because it sucks. Sorry, to those unfortunate enough to not be running a 'good' browser like Firefox.

For S1:

GLOBAL_HEAD<=
<style type="text/css">
<!--
YOUR CSS GOES HERE
-->
</style>
<=GLOBAL_HEAD

For S2:
·Basic/Plus:
   (a) Go to Custom Options
   (b) Click on the Custom CSS link
   (c) Add your CSS to the Custom Stylesheet box
   (d) Save
·Paid/Perm:
There are a couple options:
   (a) Under add the CSS to your Layer's stylesheet
   (b) Follow this tutorial by kunzite1 but be sure to merge that code into your current print_custom_head if you have one.
   (c) Compile

Rules. Comment. Credit. Enjoy.

Cheers!
~ Julz

Old Icons

julzroguenine — Thu, 22 Feb 2007 02:07:52 GMT

This is a multifandom post of old icons that I made while I was just getting the hang of Photoshop.

Teasers:

[01-15] Star Wars (mainly Episode III)
[16-18] Indiana Jones
[19-28] Hitchhiker's Guide to the Galaxy (mainly Marvin)
[29-31] Children of Dune
[32] Myst IV: Revelation

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

All images were yanked from Yahoo's movie page. *sigh* Those were the days before I became aware of the existance of screencaps. =P

Comment. Credit. Enjoy.

Cheers!
~ Julz

Suggestions

julzroguenine — Wed, 14 Feb 2007 03:56:27 GMT

I'm open to friendly graphics or layout suggestions. So comment here if you have any. It would help if your suggestions are compatible with my graphic interests since I'm not currently taking requests.

My Graphical Interests:
- TV:
      ·24
      ·Battlestar Galactica
      ·Dune (SciFi Channel Mini Series)
      ·Firefly
      ·Grey's Anatomy
      ·Lost
      ·Stargate Atlantis
      ·Stargate SG-1
- Movies:
      ·Indiana Jones
      ·The Lord of the Rings
      ·Pirates of the Caribbean
      ·The Princess Bride
      ·Serenity
      ·Star Wars
- Games:
      ·Kingdom of Loathing
      ·Myst

I also have a rather large collection of landscape photos that I will eventually be making into icons. They include:
- Alcatraz
- Arches NP
- Bryce Canyon NP
- Canyonlands NP
- Death Valley NP
- Glacier NP
- Grand Canyon NP
- Mesa Verde NP
- Olympic NP
- Yosemite NP
- Zion NP
- Cascade Volcanoes:
      ·Crater Lake (formerly Mount Mazama)
      ·Mount Adams
      ·Mount Baker
      ·Mount Rainier
      ·Newberry Caldera
      ·Three Sisters
- Beaches/Lighthouses:
      ·Chicago, IL
      ·Grand Haven, MI
      ·Point Reyes, CA
      ·South Manitou Island, MI
- Cities:
      ·Chicago
      ·San Francisco
      ·Seattle

I have no particular order that I'm going to start making my landscape photos into graphics, so feel free to suggest anything from the above list. As I finish my landscape graphics, I'll provide links to that specific post here for easy navigation.

Cheers!
~ Julz

Rules/Regulations

julzroguenine — Wed, 14 Feb 2007 03:33:46 GMT

RULES

Credit, please! It stinks to see your stuff on someone else’s journal and not see credit. Not only does it let people know where you got it from but it also makes me feel all warm and squishy inside, which is always nice. For icons, credit julzroguenine or graphicsbyjulz in the 'Comments:' on this page. For my non-icon graphics, I don't care how you credit me (i.e., in your profile, sidebar, or layout post, etc) just as long as you do.
Please try to comment when taking something. It's not too hard to ask, is it? It helps me know what things are popular and helps stem my curiosity about where my stuff is going.
ABSOLUTELY NO HOTLINKING! Stealing bandwidth is not cool. Right-Click (or Ctrl-Click if you are an 'evil' Mac user =P), choose 'save-as' to save them to your hard drive, and upload them to your favorite image hosting site (ex: Photobucket, LJ Scrapbook (for Paid/Perm users), or ImageShack). Important Note: This applies to all images, even those included in layouts.

REQUESTS
At this point, I don't have time to make icons/headers/fo banners/etc. for individual people. This isn't to say that I'll say 'no' if you ask real nice and I have the time. But I don't want everyone to do that, or I'll go insane. Sorry. You can, however, make friendly suggestions for themed graphics in this post.

LAYOUTS
I won't code layouts for you. It takes too long, so don't ask. However, I will occasionally offer layout templates for both Basic/Plus and Paid/Perm accounts. I work exclusively with S2 because you can do so much more with it than S1 (despite the misleading statement about S2 on the Main Customization Page:For users who don't know HTML or CSS, or make only minor alterations. *rolls eyes*). Also, my templates generally will be in grayscale because, contrary to popular belief, I'm not good at colors. In fact, my family says I have a 'drab' sense of taste. =P

I'm very familiar with coding Opal and semi-familiar with Smooth Sailing and Flexible Squares. So I will focus on those.

One of the reasons I started this community was to compile tutorials for Opal because I'm sick of answering the same questions over and over in opal_help. So you can look for answers here, at my journal, or in that community. If you find any more tricks and hints, comment and I'll add them to my growing list of Opal Resources.

Cheers!
~ Julz

001	002	003


004	005	006


007	008	009


010	011	012


013	014	015


016	017	018


019	020	021


022	023	024

001	002	003


004	005	006


007	008	009


010	011	012


013	014	015


016	017	018


019	020	021


022	023	024

001	002	003


004	005	006


007	008	009


010	011	012


013	014	015


016	017	018


019	020	021


022	023	024