Journal

February 2013

S M T W T F S
     12
3456789
10111213141516
17181920212223
2425262728  

Other Communities

Browsers


[info]lilbreck in [info]nameless_layout

Opal Overrides

Just a couple of overrides I find helpful for Opal:

Removing background color from friend's username: {remove text in red}


function FriendsPage::lay_make_username (Entry e) {

var Friend f = $.friends{$e.journal.username};

var string url = $e.poster->base_url();

"""

<div class="entryinfo">

<a href="$url/" class="friendname" style="color: $f.fgcolor; background-color: $f.bgcolor;">$e.poster.username</a>

""";

if($e.poster.username != $e.journal.username) {

""" $e.journal""";

}

"""

</div>

<div class="entrydivider"></div>

""";

}


Adding CSS:

Directly to the theme layer: {replace red text with your css code}

function print_stylesheet () {


var Color color_bg_lt = getAltColor($*color_bg, "light", 30);

var Color color_fg_dk = getAltColor($*color_fg, "dark", 20);

var Color color_fg_dk_font = getAltColor($*color_fg_font, "dark", 20);

var Color color_divider = getAltColor($color_fg_dk, "dark", 30);

var Color color_fg_dk_dk_font = getAltColor($color_fg_dk, "dark", 50);

var Color color_border = getAltColor($*color_bg, "light", 90);

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


"""

body {

font-family: $base $*font_fallback;

background-color: $*color_bg;

margin: 10px;

}



.border4 { border: 1px solid $*color_bg; }

.border3 { border: 1px solid $*color_fg; }

.border2 { border: 2px solid $color_border; }


""";

if($*color_link.as_string != "") {

"""

A { color: $*color_link; }

""";

}


if($*color_visited.as_string != "") {

"""

A:Visited { color: $*color_visited; }

""";

}

"""

#bodycontent { background-color: $*color_med; border: 1px solid $*color_bg; padding: 3px; }



#headerinfo {

background-color: $*color_bg;

color: $*color_bg_font;

text-align: right;

font-size: 10px;

padding: 2px;

margin-top: 1px;

}

#header { color: $*color_med_font; }

#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: $*static_font_size$*static_font_measurement;

}



#nav A {

border: 1px solid $*color_bg;

padding-left: 10px;

padding-right: 10px;

padding-top: 2px;

padding-bottom: 2px;

height: 20px;

text-decoration: none;

color: $*color_bg_font;

background-color: $color_bg_lt;

}



#nav A:Hover { background-color: $*color_bg; }



#content {

background-color: $*color_fg;

border: 1px solid $color_fg_dk;

padding: 4px;

}



.columncontent {

background-color: $color_bg_lt;

border: 1px solid $*color_bg;

padding: 3px;

width: 200px;

font-size: $*static_font_size$*static_font_measurement;

color: $*color_bg_font;

}



.columnitem {

background-color: $color_fg_dk;

padding: 3px;

margin-top: 5px;

color: $*color_fg_font;

border-top: 1px solid $color_divider;

border-bottom: 1px solid $color_divider;

overflow: hidden;

}


.entries { color: $*color_fg_font; }



.entrydivider {

border-top: 1px solid $color_divider;

border-bottom: 1px solid $*color_fg;

}


.minicomment {

background-color: $color_fg_dk;

padding: 4px;

color: $*color_fg_font;

border: 1px solid $*color_fg;

font-size: $*static_font_size$*static_font_measurement;

}



.minicommentholder { border: 1px solid $color_divider; }


.entryinfo {

background-color: $color_fg_dk;

font-size: $*static_font_size$*static_font_measurement;

padding: 4px;

color: $*color_fg_font;

}


.postedby {

background-color: $color_fg_dk;

padding: 6px;

font-size: $*static_font_size$*static_font_measurement;

}


.entrylinks {

border-bottom: 1px solid $*color_fg;

background-color: $color_fg_dk;

padding-top: 4px;

padding-bottom: 4px;

font-size: $*static_font_size$*static_font_measurement;

}



.entrylinks A {

text-decoration: none;

padding-top: 4px;

padding-bottom: 4px;

white-space: nowrap;

color: $*color_fg_font;

border-right: 1px solid $*color_fg;

}



.entrylinks A:Hover {

background-color: $*color_fg;

}


.messageholder {

border: 1px solid $*color_bg;;

margin-bottom: 5px;

margin-top: 5px;

}


.systemmessage {

background-color: $color_bg_lt;

color: $*color_bg_font;

border: 1px solid $color_border;

font-size: $*static_font_size$*static_font_measurement;

}



.systemtext {

font-weight: normal;

padding-left: 10px;

padding-right: 10px;

}


.systemmessage A {

text-decoration: none;

padding-left: 10px;

padding-right: 10px;

color: $*color_bg_font;

padding-top: 4px;

padding-bottom: 4px;

}



.systemmessage A:Hover {

background-color: $*color_bg;

}


.systemmessage input, .systemmessage textarea, .systemmessage select {

background-color: $*color_fg;

color: $*color_fg_font;

}


.systemmessage TD {

padding: 4px;

font-size: $*static_font_size$*static_font_measurement;

color: $*color_bg_font;

}


.entry { margin-bottom: 30px; }

.entrytext { margin: 10px; }

.subject { font-weight: bold; }



.meta {

font-size: $*static_font_size$*static_font_measurement;

padding: 4px;

}


.meta A {

text-decoration: none;

color: $*color_link;

}



.systemmessage A:Hover {

background-color: $*color_bg;

}


#sidecolumn TD { color: $*color_bg_font; }


#sidecolumn A {

text-decoration: none;

color: $*color_fg_font;

}


.sidetd {

width: 200px;

}


.backtop {

text-align: right;

}


.backtop A {

color: $*color_fg_font;

font-size: $*static_font_size$*static_font_measurement;

text-decoration: none;

padding-bottom: 1px;

}


#cal A {

text-decoration: none;

color: $*color_fg_font;

}


.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: $color_fg_dk;

border-right: 1px solid $color_bg_lt;

border-bottom: 1px solid $color_bg_lt;

}


.calinitem {

float: left;

margin: 1px;

width: 23px;

font-size: 11px;

text-align: center;

border-right: 1px solid $color_fg_dk;

border-bottom: 1px solid $color_fg_dk;

}



.friendcolor {

width: 10px;

height: 10px;

border: 2px solid $*color_fg;

}


.multiform {

font-weight: bold;

}


.ip {

color: $color_fg_dk_dk_font;

}


.friendname {

padding: 4px;

text-decoration: none;

border-left: 1px solid $*color_fg;

border-right: 1px solid $*color_fg;

}


.bigday {

font-size: 2em;

color: $color_fg_dk;

float: left;

font-weight: bolder;

}


.notablemessage {

padding: 4px;

}


""";

}


As a link to an external css: {replace text in red with your CSS link}

function Page::print () {


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


"""

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>$title</title>

<link rel="stylesheet" href="$.stylesheet_url" type="text/css" />

""";



$this->print_head();



"""

</head>

<body>

<a name="top"></a>

<table cellspacing="0" cellpadding="0" border="0" width="100%">

<tr>

<td>

<div class="border3">

<div class="border2">

<div id="bodycontent">

""";



$this->lay_print_userpic();

$this->lay_print_username();

$this->lay_print_header();


"""

<div id="content">

<table cellspacing="10" cellpadding="0" border="0">

<tr>

<td valign="top" class="sidetd">

<div id="sidecolumn">

""";



$this->lay_print_sidebar();


"""

</div>

</td>



<td valign="top" width="100%">

""";


$this->lay_print_subnav();

$this->print_body();

$this->lay_print_subnav();


"""

</td>

</tr>

</table>

</div>

</div>

</div>

</div>

</td>

</tr>

</table>

</body>

</html>

""";

}



I'll be working out how to add extra boxes and taglists soon.
Tags: , , , , ,

Posted on Aug. 15th, 2007 at 11:49 pm | | Leave a comment | Add to Memories | Tell a Friend

Comments


[info]sgmarie

Okay, I inserted some body information into my css. And that works perfectly... but now all of the background information is gone. Am I just retarded or do I now have to go through all of the CSS information and note colors for everything?
Posted on Aug. 16th, 2007 09:33 pm (UTC) | | Thread | Reply

[info]lilbreck

I'd have to see your theme layer to be able to see if I can tell what's up.
Posted on Aug. 16th, 2007 09:43 pm (UTC) | | Parent | Thread | Reply

[info]sgmarie

here's my theme layer

layerinfo "type" = "theme";
layerinfo "name" = "take 3";




function print_stylesheet () {

var Color color_bg_lt = getAltColor($*color_bg, "light", 30);

var Color color_fg_dk = getAltColor($*color_fg, "dark", 20);

var Color color_fg_dk_font = getAltColor($*color_fg_font, "dark", 20);

var Color color_divider = getAltColor($color_fg_dk, "dark", 30);

var Color color_fg_dk_dk_font = getAltColor($color_fg_dk, "dark", 50);

var Color color_border = getAltColor($*color_bg, "light", 90);

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



"""

body {
align:center;
background-image: url("http://www.marymo.net/fandom/art/drivinglessonsheader.jpg");
width: 900px;
background-repeat: no-repeat;
background-position: 50px 0px;
background-attachment: scroll;
margin-top: 400px; margin-left:50px; margin-right:0;
font-family: arial;
font-size: 11px;
color: #ffffcc;}
#bodycontent{background:#0c2f0c;}


""";

}


I've fixed the background... sorta. but all of the style from opal is basically gone. I don't know where I lost that.

thanks so much!
Posted on Aug. 16th, 2007 09:50 pm (UTC) | | Parent | Thread | Reply

[info]sgmarie

I just feel like I'm being an idiot. I feel like I should know how to do this...
Posted on Aug. 16th, 2007 09:52 pm (UTC) | | Parent | Reply

[info]sgmarie

And I fixed it. I realized I didn't have ANY of the color information in it at all. I'm going to have to work out how to change the colors so that they match more of what I want... but for now, this is good.
Posted on Aug. 16th, 2007 09:56 pm (UTC) | | Parent | Thread | Reply

[info]lilbreck

So... we're good for now?
Posted on Aug. 16th, 2007 09:59 pm (UTC) | | Parent | Thread | Reply

[info]sgmarie

I swear... that was like my most idiotic five minutes ever. Question though, to change the colors of things...

.border4 { border: 1px solid $*color_bg; }

I would just change $*color_bg to a color value?
Posted on Aug. 16th, 2007 10:00 pm (UTC) | | Parent | Thread | Reply

[info]lilbreck

you would have something like this:

.border4{border: 1px solid #ffffff;}

Or, as I like to write it:

.border4 {
    border: 1px solid #ffffff;
    }
Posted on Aug. 16th, 2007 10:07 pm (UTC) | | Parent | Thread | Reply

[info]sgmarie

And that's why you're my favorite Tonya. *thinks*

I really think you are my favorite Tonya. Yup. You are.
Posted on Aug. 17th, 2007 02:58 am (UTC) | | Parent | Thread | Reply

[info]lilbreck

::blushes:: Aww, shucks!
Posted on Aug. 17th, 2007 03:01 am (UTC) | | Parent | Reply

[info]dee_groovy

it works perfectly! thanks so much!
Posted on Dec. 9th, 2008 09:34 am (UTC) | | Thread | Reply

[info]lilbreck

So glad it was helpful!
Posted on Dec. 9th, 2008 09:48 am (UTC) | | Parent | Reply

Tags

Powered by InsaneJournal