Opal Stylesheet Explained (Part 2)
point
julzroguenine
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)
Click for the Massive Tables of CSS GoodnessCollapse )

Opal Stylesheet Explained (Part 1)
not superman
julzroguenine
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).

Opal Default CSSCollapse )
Click for the Massive Tables of CSS GoodnessCollapse )

Linkbar Tutorial [Opal]
dr. horrible - crazy random
julzroguenine
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.

Kunzite1's Version of Halffling's CodeCollapse )

Halffling's CodeCollapse )

Ignited's CodeCollapse )

Pamelajoy's CodeCollapse )

Grrliz's CodeCollapse )

Carriep63's CodeCollapse )

Steps 2 & 3Collapse )

* 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
jon stewart/stephen colbert - tip over
julzroguenine
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)

LighthousesCollapse )

Rules. Comment. Credit. Enjoy.

Cheers!
~ Julz

Security and Userinfo Icons
*wins*
julzroguenine
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.

Tutorial on ImplementationCollapse )

Rules. Comment. Credit. Enjoy.

Cheers!
~ Julz

Old Icons
no power in the verse
julzroguenine
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

IconageCollapse )

Comment. Credit. Enjoy.

Cheers!
~ Julz

Suggestions
dr. horrible - the status is not quo
julzroguenine
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 InterestsCollapse )

Cheers!
~ Julz

Rules/Regulations
point
julzroguenine
RULES

  1. 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.
  2. 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.
  3. 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

?

Log in