Opal unfolded, paid user layer

Nov 02, 2005 14:59

There seems to be a great demand for the "separated" or "open" look in Opal. I certainly don't have any problems sharing a theme layer with the community and would be happy to offer this one for anyone to use and modify as they see fit. (See this for example.)

Obviously, this layout is personalized the way I like it and you will want to make it your own. I have noted the most commonly changed items in green.

The layer was created using the Opal source code with a few of my own "extras" thrown in for good measure. It has not yet been "debugged" because I haven't used it very long, so feel free to point out anything you find (... boy I bet I am going to regret saying that!) Tested in IE, Opera, and Firefox. I have left the link to the background image intact. Feel free to use it, but be forewarned that my server is not the most reliable so you may want to host it yourself. Background image from Squidfingers.com.



layerinfo "type" = "theme";
layerinfo "name" = "unfolded";
layerinfo source_viewable = 1;
layerinfo author_name = "Carrie Petri";
layerinfo author_email = "carriep63@livejournal.com";
layerinfo des = "This is a version of Opal where the entries, header and sidebar are all separated.";

############ STYLESHEET. MOST CUSTOMIZTIONS WILL TAKE PLACE HERE.
####THIS IS WHERE YOU WILL FIND MOST OF THE COLORS, FONTS, ETC

function print_stylesheet () {

var string base = ($*font_base != "") ? "$*font_base, " : "";
"""

/***Background Image goes here!***/
body {
font-family: $base $*font_fallback;
background-color: #8fc3c8;
font-size:11px;
background-image: url(http://65.25.185.174:2711/carrie/img_138.jpg);
}

a{
color:#738F47;
}

a:hover{
color:black;
}

.subnav{
border:1px solid black;
background:#C4DD9C;
padding:2px;
width:98%;
margin-left:4px;
}

.subnav a{
text-decoration:none;
color:#00939F;
font-weight:bold;
letter-spacing:1px;
}
.subnav a:hover{
color:white;
}

/***Width of the whole thing***/
#bodycontent {
background-color: none;
padding: 0px;
width:650px;
margin-left:auto;
margin-right:auto;
}

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

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

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

#nav {
white-space: nowrap;
margin-bottom: 0px;
font-size: 12px;
text-align:center;
background:#C4DD9C;
width:100%;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
margin-top:5px;
}

#nav A {
padding:0 10px 0 10px;
text-decoration: none;
color: #1B696F;
background-color: #;
}

#nav A:Hover { background-color: #49A3AB; color:white;}

#content {
background-color: none;
padding-top: 5px;
}

/***Sidebar Outside***/
/***change the width of sidebar here***/
.columncontent {
background-color: #58A0AC;
border: 1px solid #000;
padding: 3px;
width: 150px;
font-size: 12px;
color: #ffffff;
}

/***Sidebar Inside***/
.columnitem {
font-size: 11px;
background-color: #C4DD9C;
padding: 3px;
margin-top: 5px;
color: #000;
border: 1px solid #000;
overflow: hidden;
}

.entries { color: #333333; }

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

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

/***Date and Time***/
.entryinfo {
background-color: ;
font-size: 9px;
padding: 0 0 0 2px;
color: #333333;
}

/***Friends name on friends view***/
.entryinfo2 {
background-color: ;
font-size: 12px;
padding: 0 0 0 2px;
color: #738F47;
}

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

.entrylinks {
font-weight:bold;
margin:5px;
text-align:center;
font-size: 10px;
}

/***Comments Links***/
.entrylinks A {
padding:2px;
text-decoration: none;
white-space: nowrap;
color: #00939F;
}
.entrylinks A:Hover {
background-color: #00939F;
color:#fff;
}

.messageholder {
background:#C4DD9C;
margin-bottom: 5px;
margin-top: 5px;
}

.systemmessage {
background-color: ;
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: #58A0AC;
padding-top: 4px;
padding-bottom: 4px;
}

.systemmessage a:hover {
color: #fff;
}

.systemmessage input, .systemmessage textarea, .systemmessage select {
background-color: #fff;
color: #000;
}

.systemmessage textarea{
width:98%;
border:1px solid black;
margin:2px;
}

.systemmessage TD {
padding: 2px;
font-size: 12px;
color: #000;
}

.entry {
margin-left:5px;
background:#C4DD9C;
margin-bottom: 5px;
border:1px solid #000;
}

.entrytext { margin: 10px; }

.subject {
font-weight:bold;
color:#EDFFCF;
font-family:verdana;
font-size:12px;
font-variant:small-caps;
background:#B6CF8E;
border-bottom:1px solid #9AAF78;
padding:2px;
}

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

.meta A {
text-decoration: none;
}

/***Sidebar font oustside***/
#sidecolumn TD { color: #ffffff; }

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

.backtop {
display:none;
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: 9%;
font-size: 11px;
margin: 1px;
float: left;
}

/***Calendar Active Links***/
.calactitem {
float: left;
margin: 1px;
width: 9%;
font-size: 11px;
text-align: center;
background-color: #C4DD9C;
border-right: 1px solid #425378;
border-bottom: 1px solid #425378;
}

/***Calendar Inactive***/
.calinitem {
float: left;
margin: 1px;
width: 9%;
font-size: 11px;
text-align: center;
border-right: 1px solid #83B8BF;
border-bottom: 1px solid #83B8BF;
}

.friendcolor {
width: 10px;
height: 10px;
}

.multiform {
font-weight: bold;
}

.ip {
color: #727d8c;
}

.friendname {
font-weight:bold;
color:#00939F;
text-decoration: none;
}

.bigday {
font-size: 1.5em;
color: #58A0AC;
float: left;
font-weight: bolder;
}

.notablemessage {
padding: 4px;
}

""";
}

####THIS CONTROLS WHAT THE WHOLE PAGE LOOKS LIKE. THIS IS WHERE YOU WOULD CHANGE
####WHERE THE HEADER, ENTRIES, NAVIGATION, AND SIDEBAR ARE LOCATED

function Page::print () {

var string title = $this->title();

"""

$title

""";
$this->print_head();
"""



""";
$this->lay_print_header();
"""

""";
$this->lay_print_sidebar();
"""

""";
$this->print_body();
$this->lay_print_subnav();
"""

""";
}

#####THIS WILL AFFECT HOW THE ENTRY LOOKS. THIS IS WHERE YOU CAN CHANGE WHERE THE
#####SUBJECT, DATE, ENTRIES, AND COMMENTS LINKS ARE

function Page::print_entry (Entry e) {

print """""";
var string time = $e.time->time_format();
var string date = $e.time->date_format();
var string security;
if ($e.security != "") {
$security = """
""";
}

var UserLite name;
var string pname;

var bool show_name = ($.view == "friends" or $e.poster.username != $.journal.username or $.view == "entry") ? true : false;
var bool show_pic = (defined $e.userpic and ($.view == "friends" or $*show_entry_userpic or $e.poster.username != $e.journal.username or $.view == "entry")) ? true : false;

"""
""";

if($show_pic) {

"""




""";

}

"""
""";

###SUBJECT LINE###
if ($e.subject != "") {
"$e.subject";
} else {
""" $*text_nosubject""";
}
"""

$security $date $time""";
if($show_name) {
$this->lay_make_username($e);
}

"""

""";
"
"; $e->print_text(); "
";
$e->print_metadata();
"""

""";
$e.comments->print();

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

""";
}

#### THIS IS YOUR FRIENDS USERNAME (AND COMMUNITY POSTED IN) ON THE FRIENDS PAGE.

function FriendsPage::lay_make_username (Entry e) {
var Friend f = $.friends{$e.journal.username};
var string url = $e.poster->base_url();

"""

$e.poster.username
""";
if($e.poster.username != $e.journal.username) {
"""(in $e.journal)""";
}

"""""";
}

####THIS IS YOUR SIDEBAR. YOU CAN CHANGE THE ORDER OF
####THE BOXES IN YOUR SIDEBAR HERE.

function Page::lay_print_sidebar () {
var string header;
var string text;

###FIRST BOX (icon)
$header = "Carrie's Journal";
$text = """




""";
print_box($header, $text);

###SECOND BOX DELETE IF NECESSARY
#$header = "Another Box";
$text = """

Your text/HTML here

""";
print_box($header, $text);

###THIRD BOX DELETE IF NECESSARY. COPY AND PASTE FOR ADDITIONAL BOXES
#$header = "Another Box";
$text = """

Your text/HTML here

""";
print_box($header, $text);

###OTHERS
$this->lay_print_freetext();
$this->print_linklist();
$this->lay_print_calendar();
$this->lay_print_summary();
}

####BOTTOM NAVIGATION LINKS TO GO FORWARD OR BACK THROUGH ENTRIES###
function Page::lay_print_subnav () {
#
}

function RecentPage::lay_print_subnav () {
var string back;
if($.nav.backward_url != "") {
$back =

""" $*text_back""";

} else {
$back = " ";
}
var string forward;
if($.nav.forward_url != "") {
$forward =

""" $*text_forward""";

} else {
$forward = " ";
}

var int start = $.nav.skip;
var int end = $.nav.skip + size $.entries;
var string text = "Viewing $start - $end";
"""

$back $text $forward

""";
}

function DayPage::lay_print_subnav () {
var string back;
if($.prev_url != "") {
$back = """ ($*text_back)""";
} else {
$back = " ";
}
var string forward;
if($.next_url != "") {
$forward = """ ($*text_forward)""";
} else {
$forward = " ";
}

var string text = $.date->date_format("long");

"""

$back $text $forward

""";

}

######## ENTRY PAGE WITH COMMENTS ###########
function EntryPage::print_body() {
"""
""";
$this->print_entry($.entry);
if ($this.multiform_on) {
$this->print_multiform_start();
}

if ($.entry.comments.count > 0) {
"""

Comments

""";
}

if ($.comment_pages.total_subitems > 0) {
$.comment_pages->print();
}

if ($.entry.comments.enabled) {
$this->print_comments($.comments);
}

if ($.entry.comments.count > 0) {
"""

""";
$.entry.comments->print();
"""

""";
}

if ($.comment_pages.total_subitems > 0) {
$.comment_pages->print();
}

if ($this.multiform_on and ($.entry.comments.count > 0)) {
"""

""";
$this->print_multiform_actionline();
"""

""";
$this->print_multiform_end();
}
"""""";
}

####INDIVIDUAL COMMENTS ON ENTRY PAGE#######
function EntryPage::print_comment(Comment c) {

var string datetime;
$datetime = $c.time->date_format()+", " + $c.time->time_format();

var string parent;
var string thread;
if($c.parent_url != "") {
$parent = """ $*text_comment_parent """;
}
if($c.thread_url != "") {
$thread = """ $*text_comment_thread """;
}

var string subjecticon;
if (defined $c.subject_icon) {
$subjecticon = """
""";
}

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

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

var string pic;
if (defined $c.userpic and $*comment_userpic_style != "off") {
$pic = """

""";
}

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

"""


$pic

$poster
$subjecticon
$datetime
$ip

""";

if ($.multiform_on) {
"""

$*text_multiform_check

""";
$c->print_multiform_check();
}
"""

""";

var string replyurl;
if ($c.frozen) {
$replyurl = """$*text_comment_frozen """;
} else {
$replyurl = """ $*text_comment_reply """;
}

"""
$replyurl
""";

foreach var string k ($c.link_keyseq) {
var Link link = $c->get_link($k);
if ($link) {
""" $link.caption """;
}
}

"""
$*text_permalink $parent$thread

""";

if ($c.subject != "") {
"$c.subject";
} else {
""" $*text_nosubject""";
}

"""

$c.text

""";

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

"""

back to top

""";

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

}

########STUFF FOR THE ARCHIVE PAGE##########3

function YearWeek::print() {

"""""";

if ($.pre_empty > 0) {
"""

""";
}

foreach var YearDay d ($.days) {
var string day = zeropad($d.day, 2);
"""

$day
""";

if ($d.num_entries > 0) {
var string num = $d.num_entries < 10 ? " " + string($d.num_entries) : string($d.num_entries);

"""
$num
""";
}

"""""";

}

"""""";
}

function YearPage::print_year_links() {
"""
""";
foreach var YearYear y ($.years) {
if ($y.displayed) {
"""$y.year""";
} else {
""" $y.year """;
}
}
"""""";
}

paid, theme layers, [s2] opal

Previous post Next post
Up