Opal Stylesheet Explained (Part 1)
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 tags
location: everywhere (unless overridden elsewhere in stylesheet)
example css:
b {
color: #595959;
}
NO IMAGE blockquote *
description: the look of text inside 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 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 tags
location: everywhere (unless overridden elsewhere in stylesheet)
example css:
i {
color: #595959;
}
NO IMAGE input, select, textarea *
description: the look of information inside , , and 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 http://community.livejournal.com/graphicsbyjulz/2616.html#sysits" style="text-decoration: none; color: #5574B9; font-weight: bold;">.systemmessage input, .systemmessage textarea, .systemmessage select or http://community.livejournal.com/graphicsbyjulz/2616.html#multiform2" style="text-decoration: none; color: #5574B9; font-weight: bold;">.multiform input, .multiform select in your stylesheet
NO IMAGE
u *
description: the look of underlined text inside tags
location: everywhere (unless overridden elsewhere in stylesheet)
example css:
u {
color: #595959;
}
NO IMAGE
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 tags
location: everywhere (unless overridden elsewhere in stylesheet)
example css:
b {
color: #595959;
}
NO IMAGE blockquote *
description: the look of text inside 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 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 tags
location: everywhere (unless overridden elsewhere in stylesheet)
example css:
i {
color: #595959;
}
NO IMAGE input, select, textarea *
description: the look of information inside , , and 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 http://community.livejournal.com/graphicsbyjulz/2616.html#sysits" style="text-decoration: none; color: #5574B9; font-weight: bold;">.systemmessage input, .systemmessage textarea, .systemmessage select or http://community.livejournal.com/graphicsbyjulz/2616.html#multiform2" style="text-decoration: none; color: #5574B9; font-weight: bold;">.multiform input, .multiform select in your stylesheet
description: the look of underlined text inside tags
location: everywhere (unless overridden elsewhere in stylesheet)
example css:
u {
color: #595959;
}
|
#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 http://pics.livejournal.com/julzroguenine/pic/000hprkw"> #nav a:hover |
|
#userpic description: default userpic location: header default css: #userpic { float: right; } notes: • add display: none; to remove |
|
|
.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 http://community.livejournal.com/graphicsbyjulz/2616.html#calactitem2" style="text-decoration: none; color: #5574B9; font-weight: bold;">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 http://www.livejournal.com/customize/advanced/layersource.bml?id=646411&fmt=html" style="text-decoration: none; color: #5574B9; font-weight: bold;">Opal source code or the http://www.livejournal.com/customize/advanced/layersource.bml?id=1&fmt=html" style="text-decoration: none; color: #5574B9; font-weight: bold;">LJ core layer, but it is in the Opal stylesheet for some reason so i included it in the tutorial |
|
|
.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; } |
|
|
#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) |
|
|
.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) |
|
|
.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; } |
|
|
.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 http://community.livejournal.com/graphicsbyjulz/2616.html#entrydivider2" style="text-decoration: none; color: #5574B9; font-weight: bold;">comments and on the http://community.livejournal.com/graphicsbyjulz/2616.html#entrydivider3" style="text-decoration: none; color: #5574B9; font-weight: bold;">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 http://community.livejournal.com/graphicsbyjulz/2616.html#entryinfo2" style="text-decoration: none; color: #5574B9; font-weight: bold;">comments and on the http://community.livejournal.com/graphicsbyjulz/2616.html#entryinfo3" style="text-decoration: none; color: #5574B9; font-weight: bold;">archive page |
recent page http://pics.livejournal.com/julzroguenine/pic/000kdxgt"> 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 http://community.livejournal.com/graphicsbyjulz/2616.html#entrylinks2" style="text-decoration: none; color: #5574B9; font-weight: bold;">comments and on the http://community.livejournal.com/graphicsbyjulz/2616.html#entrylinks3" style="text-decoration: none; color: #5574B9; font-weight: bold;">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; } |
|
|
.entrytext description: the text area of entries location: entry default css: .entrytext { margin: 10px; } notes: • the .entrytext class is also used in http://community.livejournal.com/graphicsbyjulz/2616.html#entrytext2" style="text-decoration: none; color: #5574B9; font-weight: bold;">comments and on the http://community.livejournal.com/graphicsbyjulz/2616.html#entrytext3" style="text-decoration: none; color: #5574B9; font-weight: bold;">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 http://www.livejournal.com/customize/advanced/layersource.bml?id=646411&fmt=html" style="text-decoration: none; color: #5574B9; font-weight: bold;">Opal source code or the http://www.livejournal.com/customize/advanced/layersource.bml?id=1&fmt=html" style="text-decoration: none; color: #5574B9; font-weight: bold;">LJ core layer, but it is in the Opal stylesheet for some reason so i included it in the tutorial |
|
|
.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 http://community.livejournal.com/graphicsbyjulz/2616.html#messageholder2" style="text-decoration: none; color: #5574B9; font-weight: bold;">comments and on the http://community.livejournal.com/graphicsbyjulz/2616.html#messageholder3" style="text-decoration: none; color: #5574B9; font-weight: bold;">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 |
|
|
.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 http://community.livejournal.com/graphicsbyjulz/2616.html#systemmessage2" style="text-decoration: none; color: #5574B9; font-weight: bold;">comments and on the http://community.livejournal.com/graphicsbyjulz/2616.html#systemmessage3" style="text-decoration: none; color: #5574B9; font-weight: bold;">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; } |
|
|
.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 http://community.livejournal.com/graphicsbyjulz/2616.html#userpic2comm" style="text-decoration: none; color: #5574B9; font-weight: bold;">comment userpic |
|