Previous Entry Share Next Entry
Theme Layer #1: Opal Unleashed
kara/laura - w00t
julzroguenine wrote in graphicsbyjulz
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.

[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.

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.

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

  1. 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.
  2. Make sure you're working with the S2 style system. If not, you can change to it here.

  3. 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.
  4. 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.
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!

~ Julz

  • 1

I am so going to have to mess with this I think...

I love how it says "My Awesome Header Image" in the example.XD

I was able to make it slightly easier to customize than the version I'm currently using. So hopefully it won't be too confusing. =D

I was real original with the header image. =P


dude I just changed my layout *pouts*

There's always next time. =)

Oooooo!!!! I'm going to have to take this!


Yay! Enjoy!

FYI, there's a little bug in the metadata code, so I'll have to update that this weekend and post a fix.

Thank you; I'm still working on this - I'm horrible with html, but I was able to insert the metadata code I used for my current Smooth Sailing and it worked. :)

I didn't know a lick about HTML or S2 before I started coding. I wanted to learn, so I just threw myself into the middle of it. And I still find that I pick more up every time I change my layout.

You'll find that a lot of codes will compile between different layouts, so you should be fine with the Smooth Sailing metadata code. You might not be able to use .currentmood, .currentlocation, .currenttags, .currentgroups in your CSS but that's not a huge deal. That was where my bug was, anyway. =)

I'm the same; I've learned a lot, mostly about Flexible Squares. But html makes me go EEEEK hahah :)

Anyway to get the current groups not to show up at all?

In Opal in general or in my template? In the metadata or (for my template) after the entry security?

Metadata: In my template it's easy: .currentgroups {display: none;}. It's slightly more difficult for Opal in general.

After Entry Security: Remove
var string val;
  $val = $e.metadata{"groups"};
in Page::print_entry above your security stuff and then remove $val after 'custom' security icon image HTML (inside the triple quotes).

Edited at 2009-01-16 03:24 am (UTC)

Late comment but... may I ask to get the Opal Unleashed Template re-uploaded :3?

Thank you very much =)!

Hi there~!

I'm another lost soul requesting for a re-upload of the Template file, if possible~ ^^;

Hello! I love the look of this and would very much adore it if you considered re-hosting the code?

  • 1

Log in

No account? Create an account