style_system | Jul. 23rd, 2013

The layout I'm currently using originally had the user icons for entries set not to display. I removed the display: none in the CSS, now my problem is that the user icons in entries don't match how they're displayed in the comments (rounded, gray border). Also, I'd like to move them up a bit too.

This is the code I'm using:

/* Snowden (layout by manual@dw )
For the Practicality theme
Patterns from http://subtlepatterns.com/, used with permission under Creative Commons

License */

H1, H2, H3 {
    margin: .25em 0;
    padding: .25em 0;
}

img {
    
}

img { border: none; opacity: 0.8; filter: alpha(Opacity=80); }

img:hover { opacity: 1; filter: alpha(Opacity=1); }

hr {
    display: none;
}
.entry-content hr,
.comment-content hr {
    display: block;
    margin: 1em 15%;
}

body {
    font-family: Helvetica, Arial, sans-serif; font-size: 0.8em;
    padding: 10px;
    background: #ffffff url(http://i.imgur.com/0tx1XyC.png);
    color: #333333;
background-color: #ffffff;

}

html body {
    margin-left: 0em;
    margin-right: 0em;
}

a { color: #444488;
 }
a:visited { color: #9999cc;
 }
a:hover { color: #7f82b7;
 }
a:active { color: #444488;
 }

q { font-style: italic; }

.one-column #content { float: none; }
.two-columns-left #content,
.three-columns-sides #content {
    border-left: 15em solid transparent;
}
.two-columns-right #content,
.three-columns-sides #content {
    border-right: 15em solid transparent;
}
.three-columns-left #content {
    border-left: 30em solid transparent;
}
.three-columns-right #content {
    border-right: 30em solid transparent;
}
.column-right #content {
    min-width: 15em; /* prevents sidebar overlap of entry, when entry becomes narrower than

sidebar */
}

#content-footer {
    height: 0;
    font-size: 0; /*to make IE happy*/
    clear: both;
}

#header, #footer {
    margin: 0;
    clear: both;
    padding: .5em;
}

#header {
    background: #ffffff url(http://i.imgur.com/nmrstVB.png);
    color: #f9f9f9;

}

h1#title {
    font-family: 'Bell Mt', 'New York', serif; font-size: 3em;
}

h2#subtitle,
h2#pagetitle {
    font-family: 'Bell MT', 'New York', serif; font-size: 1.5em;
}

#footer {
    background: #333 url(http://i.imgur.com/nmrstVB.png);
    font-family: 'Bell MT', 'New York', serif;
    font-size: 1.4em;
    color: #fff;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

#footer a { color: #fff; }
#footer a:active { color: #fff; }
#footer a:hover { color: #fff; }
#footer a:visited { color: #fff; }

#primary {
    float: left;
    width:80%;
    margin-top: 20px;
    margin-right:-80%;
    margin-left: 10%;
}

.one-column #primary { float: none; }

#primary > .inner:first-child {
    padding: 1em;
}

.one-column #secondary { width: auto; }

.two-columns-left #secondary,
.three-columns-sides #secondary {
    float: left;
    width: 15em;
    margin-left: -15em;
}
.two-columns-right #secondary {
    float: right;
    width: 15em;
    margin-right: -15em;
}
.three-columns-left #secondary {
    float: left;
    width: 15em;
    margin-left: -30em;
}
.three-columns-right #secondary {
    float: right;
    width: 15em;
    margin-right: -15em;
}

#secondary > .inner:first-child {
    padding: 1em;
}

.one-column #tertiary { width: auto; }

.two-columns-left #tertiary,
.two-columns-right #tertiary {
    clear: both;
}
.two-columns-left #tertiary { margin-left: -15em; }
.two-columns-right #tertiary { margin-right: -15em; }
.two-columns-left #tertiary .module,
.two-columns-right #tertiary .module {
    float: left;
    width: 15em;
}
.three-columns-left #tertiary {
    float: left;
    width: 15em;
    margin-left: -15em;
}
.three-columns-right #tertiary {
    float: right;
    width: 15em;
    margin-right: -30em;
    margin-left: 15em; /* so that #tertiary won't overlay #secondary in IE7 */
}
.three-columns-sides #tertiary {
    float: right;
    width: 15em;
    margin-right: -15em;
}

#tertiary > .inner:first-child {
    padding: 1em;
}

.navigation ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.navigation li {
    display: inline;
    padding: 0 .5em;
}
.noentries {
    padding: 0 .5em;
}

/* entries */

.entry {
    background: #fff;
    color: #333333;
    background-color: #fff;
    border: solid 1px #888;
}

.entry .entry-title {
    font-family: 'Bell MT', 'New York', serif; font-size: 2em;
}

.entry .entry-title, .entry .entry-title a {
    color: #333;
}

.entry  .entry-title a:hover {
    color: #666;
}

.entry a { color: #444488;
 }
.entry a:visited { color: #9999cc;
 }
.entry a:hover { color: #7f82b7;
 }
.entry a:active { color: #444488;
 }

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

.metadata ul {
    display: none;
    list-style: none;
    margin-left: .5em;
    padding-top: 10px;
    padding-left: 0;
}
.metadata li {
    margin-bottom: .5em;
    padding-top: 10px;
}
.metadata.top-metadata ul {
    margin: 0;
    padding-top: 10px;
}
.metadata.top-metadata {
    margin-bottom: 1em;
    padding-top: 10px;
}

.tag ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.tag ul li {
    display: inline;
    padding: .25em;
} /* same for month view */

ul.entry-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}

.entry-interaction-links a { color: #444488;
 }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

/* comments */

.comment-wrapper {
    padding: .5em 0;
}

.comment .comment-title, .comment .comment-title a {
    
}

.comment .comment-title {
    font-family: Helvetica, Arial, sans-serif; font-size: 1.2em;
}

.comment-title h4 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
}

ul.comment-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}
ul.comment-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.comment-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.comment-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

textarea#commenttext {
    width: 100%; /* fix for FF form width glitch */
}

/* archive */

table.month {
    margin: 0 auto;
    border-collapse: collapse;
}
table.month td {
    height: 3.25em;
}
table.month td,
table.month th {
    border: 1px solid; /* ? */
    padding: 3px;
}
table.month td p {
    margin: 0;
    padding: 3px;
}

.month dl dt {
    font-weight: bold;
}
.month dl span.time {
    padding-right: .5em;
}
.month dl h3 {
    display: inline;
    font-size: medium;
}
.page-month .month .entry-poster {
    margin-right: .5em;
}
.month dl .tag ul {
    margin-top: 0;
}

/* icons */

.sorting-options ul {
    list-style: none;
    margin-left: 0;
}

.sorting-options ul li {
    display: inline;
}

.keywords ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}

.keywords ul li {
    display: inline;
    padding: .25em;
}

/* modules */

.module {
    background: #ffffff;
    background-color: #ffffff;
border-right: solid 1px #333;

}

.module a, .module a:hover, .module a:active { font-family: 'bell mt', 'new york', serif;

color: #555; }
.module a:visited { font-family: 'bell mt', 'new york', serif; color: #333; }

.module h2 {
    color: #333;

font-family: 'bell mt', 'new york', serif; text-decoration: italic; font-size: 1.37em;
}

.module-content {
    font-family: 'bell mt', 'new york', serif; padding: 5px;
}

.module-content ul {
    list-style: outside;
    margin-left: 1em;
    padding-left: 0;
}
.module-content li {
    margin: .5em 0;
}

ul.userlite-interaction-links.icon-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul.userlite-interaction-links.icon-links li {
    display: inline;
    padding: 0 .20em;
}

ul.userlite-interaction-links.text-links {
    text-align: left;
}

.module-calendar .module-content {
    text-align: center;
}

.one-column .module-calendar .module-content {
    text-align: left;
}

.module-calendar table {
    margin: 0 auto;
}

.one-column .module-calendar table {
    margin: 0;
}

.module-calendar td {
    padding: 1px;
}
.module-calendar td a {
    display: block;
    padding: 2px;
}

.search-box {
    margin: .2em auto;
}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
    white-space: normal !important;
}
.module-pagesummary .module-content {
    word-wrap: break-word;
}
.module-credit dt, .module-credit dd {
    display: inline;
    margin: 0;
    padding: 0;
}
.module-credit dt {
    font-weight: lighter;
    margin-right: 0.5em;
}

.tags_cloud li, .module-tags_cloud li { display: inline;
    list-style-type: none; }

.module-syndicate .module-content {
    text-align: center;
}

.one-column .module-syndicate .module-content {
    text-align: left;
}

.entry .userpic, .comment .userpic {
text-align: right;}

/*--------------------*/
/*--- Practicality ---*/
/*--------------------*/

/*--- Main ---*/

* {
    margin: 0;
    padding: 0;
    }

body {
    margin: 0;
    }

a, a:link, a:visited {
    text-decoration: none;
    }

p {
        margin: 1em 0;
    }

input, textarea {
    background: #ffffff;
    border: 1px solid #333333;
    color: #333333;
    }

blockquote {
    background: #fff url(http://i.imgur.com/0tx1XyC.png);
    border: 1px dotted #cfcfcf;
    color: #333333;
    margin: 1em 1em 1.5em 3em;
    padding: 10px;
    width: 85%;
    }

ul {
    list-style: square;
    list-style-position: inside;
    margin: .2em 0 0 2.5em;
    }

ol {
    margin: .2em 0 0 2.5em;
    list-style: decimal;
    list-style-position: inside;
    }

/*--- Main Containers ---*/

#canvas {
    width: 90%;
    margin: 0 auto;
    }

#primary > .inner:first-child {
    padding: 0;
    }

.column-left #primary > .inner:first-child {
    padding-left: 1em;
    }

.column-right #primary > .inner:first-child {
    padding-right: 1em;
    }

#secondary > .inner:first-child,
#tertiary > .inner:first-child {
    padding: 0;
    }

.three-columns-left #secondary > .inner:first-child,
.three-columns-right #secondary > .inner:first-child {
    padding-right: .5em;
    }

.three-columns-left #tertiary > .inner:first-child,
.three-columns-right #tertiary > .inner:first-child {
    padding-left: .5em;
    }

/*--- Journal Header ---*/

#header {
    padding: .1em .5em;
    }

h1#title {
    text-transform: lowercase;
    text-align: center;
    font-weight: lighter;
    }

h2#subtitle {
    border: none;
    color: #ececec;
    text-transform: lowercase;
    text-align: center;
    font-weight: lighter;
    }

h2#pagetitle {
    border: none;
    color: transparent;
    text-transform: uppercase;
    text-align: center;
    font-weight: none;
    }

h2#subtitle {
    margin: -1em 0 0;
    text-align: center;
    }

#header .module-navlinks {
    font-family: 'Bell MT', 'New York', serif;
    font-size: 0.9em;
    background: transparent;
    border: none;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: 0;
    margin: -1em 0 0;
    text-align: center;
    }

#header .module-navlinks li {
    display: inline;
    padding: 0 1em;
    }

#header .module-navlinks li a {
    color: #ffffff;
    }

/*--- Journal Navigation ---*/

.navigation {
    font-family: 'Bell MT', 'New York', serif; font-size: 0.9em;
    background: #transparent;
    color: #fff;
    border-bottom: none;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 15px 0;
    padding: 5px;
    }

.topnav a, .bottomnav a {
    color: #333;
    }

.navigation.empty {
    display: none;
    }

.page-read .navigation.empty {
    display: block;
    padding: 10px;
    }

.page-read .navigation.empty ul {
    margin: 0;
    padding: 0;
    }

.page-read .navigation.empty ul li {
    margin: 0;
    padding: 0;
    }

/*--- Sidebar ---*/

li.page-separator {
    display: none;
    }

.module {
    border: none;
    border-bottom: 1px dotted #666;
    margin-top: 20px;
    margin-bottom: 15px;
    padding: 10px;
    }

h2.module-header {
    border-bottom: 1px dotted #666;
    color: #333;
    font-size: 1em;
    text-align: center;
    text-transform: uppercase;
    font-weight: lighter;
    margin: 0 0 10px 0;
    }

h2.module-header a {
    color: #666;
    }

ul.module-list {
    list-style: none;
    }

ul.module-list li {
    padding: 0 0 0 5px;
    list-style: none;
    }

ul.module-list-item {
    list-style: none;
    }

ul.module-list-item li {
    padding: 0 0 0 5px;
    list-style: none;
    }

div.module-content div.userpic {
    text-align: center;
    }

div.module-content div.userpic img {
    background: #d4cae2;
    border: none;
    border-radius: 100px;
    padding: 10px;
    }

div.journal-name {
    text-transform: uppercase;
    margin-top: 5px;
    text-align: center;
    }

div.journal-website-name {
    text-transform: uppercase;
    text-align: center;
    }

ul.userlite-interaction-links.icon-links {
    margin: 5px 0 0;
    text-align: center;
    }

ul.userlite-interaction-links.icon-links li {
    margin: 0 auto;
    }

ul.userlite-interaction-links.text-links {
    padding: 0 0 0 5px;
    list-style: none;;
    }

div.module-navlinks {
    color: #222;
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: 0.1em;
    list-style: none;
    text-align: right;
    }

div.module-navlinks a {
    color: #666;
    }

div.manage-link {
    margin: 10px 0 0;
    text-align: right;
    display: none;
    }

div.module-calendar table {
    text-align: center;
    }

div.module-calendar th {
    background: #efefef;
    color: #666;
    border: 1px dotted #666;
    }

div.module-calendar td.empty-day {
    border: 1px solid #cfcfcf;
    }

div.module-calendar td.entry-day {
    background: #efefef;
    border: 1px solid #cfcfcf;
    }

div.module-calendar td.entry-day a { color: #333; }
div.module-calendar td.entry-day a:visited { color: #666; }
div.module-calendar td.entry-day a:hover { color: #333; }
div.module-calendar td.entry-day a:active { color: #333; }

/*--- Entries ---*/

div.entry {
    border: none;
    border-bottom: 2px dotted #666;
    padding: 20px;
    margin: 0 0 15px 0;
    }

div.entry-content {
    margin: 20px 0 0;
    min-height: 100px;
    }

div.entry div.header {
    font-family: 'Bell MT', 'New York', serif; font-size: 1.37em;
    font-size: 1em;
    padding: 0;
    }

h3.entry-title {
    font-weight: normal;
    }

h3.entry-title a,
h3.entry-title a:active,
h3.entry-title a:hover,
h3.entry-title a:visited {
    color: #444488;
    }

.datetime {
    color: #333333;
    font-size: .75em;
    text-transform: uppercase;
    }

.datetime a {
    color: #777;
    }

.has-userpic div.entry div.userpic {
    border: none;
    margin: -20px 10px 10px 10px;
    }

.entry-poster {
    border-bottom: 1px solid #666;
    color: #444488;
    display: block;
    font-size: .8em;
    text-transform: uppercase;
    margin-bottom: 10px;
    }

.entry-poster a,
.entry-poster a:active,
.entry-poster a:hover,
.entry-poster a:visited {
    color: #444488;
    }

.metadata {
    font-size: .85em;
    text-transform: uppercase;;
    margin: 1em 0 0;
    text-align: right;
    }

div.metadata ul {
    padding: 0;
    margin: 0;
    }

div.metadata ul li {
    padding: 0;
    margin: 0;
    }

span.metadata-item-location, span.metadata-item-music, span.metadata-item-mood, div.tag ul

{
    color: #444488;
    text-align: right;
    padding-top: 20px;
    }

.entry .footer {
    clear: both;
    }

div.tag {
    margin: 1em 0 .5em 0;
    font-size: 0.85em;
    text-transform: uppercase;
    padding-top: 30px;
    }

div.tag ul li {
    margin: .5em 0 0;
    text-align: right;
    padding-top: 10px;
    }

ul.entry-management-links {
    border-top: 1px solid #cfcfcf;
    margin: .5em 0 0;
    padding: .5em 0 0;
    text-align: center;
    }

ul.entry-management-links li {
    margin: 0 auto;
    text-align: center;
    }

ul.entry-interaction-links {
    margin: 0;
    padding: 0;
    font-family: serif;
    font-size: 0.9em;
    text-align: center;
    }

ul.entry-interaction-links li,
ul.entry-management-links li {
    color: #444488;
    font-size: 1.3em;
    text-transform: uppercase;
    margin: 0 .5em 0 0;
    padding: 0;
    }

ul.entry-interaction-links a,
ul.entry-interaction-links a:active,
ul.entry-interaction-links a:hover,
ul.entry-interaction-links a:visited,
ul.entry-management-links a,
ul.entry-management-links a:active,
ul.entry-management-links a:hover,
ul.entry-management-links a:visited {
    color: #444488;
    }

/*--- Archive Page ---*/

.month {
    background: #ffffff;
    color: #333333;
    border-bottom: 2px dotted #666;
    margin: 0 0 1em 0;
    padding: 2em;
    }

.month a { color: #444488; }
.month a:visited { color: #9999cc; }
.month a:hover { color: #444488; }
.month a:active { color: #444488; }

table.month {
    border-bottom: none;
    }

.month table {
    margin: auto;
    width: 100%;
    }

table.month td, table.month th {
    border: 1px solid #cfcfcf;
    }

.month caption {
    display: none;
    }

.month h3 {
    color: #444488;
    font-size: 1.2em; 
    font-weight: normal;
    }

.month th {
    background: #efefef;
    color: #333333;
    border: 1px solid #cfcfcf;
    text-align: center;
    }

.month td.day {
    border: 1px solid #cfcfcf;
    color: #333333;
    font-weight: normal;
    }

td.day {
    padding: 1em;
    }

.month td.day-has-entries {
    background: #efefef;
    color: #333333;
    font-weight: normal;
    text-align: left;
    }

.month td.day-has-entries p {
    font-size: 1.14em;
    font-weight: bold;
    text-align: right;
    }

.month td.day-has-entries p a { color: #444488; }
.month td.day-has-entries p a:visited { color: #9999cc; }
.month td.day-has-entries p a:hover { color: #7b82b7; }
.month td.day-has-entries p a:active { color: #444488; }

/*--- Tags Page ---*/

.page-tags .tags-container {
    background: #ffffff;
    color: #333333;
    border-bottom: 3px solid #666;
    padding: .5em;
    }

.page-tags .tags-container a { color: #444488; }
.page-tags .tags-container a:visited { color: #9999cc; }
.page-tags .tags-container a:hover { color: #7b82b7; }
.page-tags .tags-container a:active { color: #444488; }

.page-tags .tags-container h2 {
    font-family: Helvetica, Arial, sans-serif; font-size: 1.37em;
    border-bottom: 1px solid #666;
    color: #444488;
    text-transform: uppercase;
    font-weight: normal;
    margin: 0 0 .5em 0;
    }

.page-tags .tags-container .ljtaglist {
    list-style: none;
    }

/*--- Comments ---*/

hr.above-entry-interaction-links, hr.below-reply-container {
    display: none; 
    }

.comment {
    background: #ffffff;
    color: #333333;
    border-bottom: 2px dotted #666;
    padding: 15px;
    }

.comment a { color: #444488; }
.comment a:visited { color: #9999cc; }
.comment a:hover { color: #7b82b7; }
.comment a:active { color: #444488; }

.comment-title, .comment-title a {
    color: #333;
    text-transform: uppercase;
    padding: 10px;
    }

.comment-content {
    border-bottom: 1px dotted #666;
    border-top: 1px dotted #666;
    min-height: 100px;
    padding: 10px;
    }

.comment-poster {
    color: #333;
    margin-bottom: .5em;
    text-transform: uppercase;
    font-size: .8em;
    padding: 5px;
    }

.comment-poster a {
    color: #444488;
    }

.poster-ip {
    text-transform: uppercase;
    font-size: .7em;
    padding: 5px;
    }

textarea.textbox {
    background: #ffffff;
    color: #333333;
    width: 80% !important;
    }

.has-userpic div.comment div.userpic {
    border: none;
    display: block;
    margin: -1em .5em .5em .5em;
    }

.has-userpic div.comment div.userpic img {
    background: #d4cae2;
    border: none;
    border-radius: 100px;
    padding: 10px;
    }

.comment-management-links ul, .comment-interaction-links ul {
    display: inline;
    font-size: 0.8em;
    text-transform: uppercase;
    text-align: center;
    }

.comment-management-links li, .comment-interaction-links li {
    font-size: 1.1em;
    text-transform: uppercase;
    text-align: center;
    }

.comment-interaction-links li a,
.comment-management-links li a {
    color: #444488;
    }

#qrform table {
    border: none !important;
    }

.bottomcomment {
    background: #ffffff;
    color: #333333;
    border-bottom: 2px dotted #666;
    margin: .5em 0;
    padding: .7em;
    }

.bottomcomment a { color: #444488; }
.bottomcomment a:visited { color: #9999cc; }
.bottomcomment a:hover { color: #7b82b7; }
.bottomcomment a:active { color: #444488; }

/*--- Contextual Pop-ups ---*/

div.ContextualPopup {
    color: #333333;
    margin: auto;
    }

div.ContextualPopup div.Inner {
    background: #ffffff;
    border: 1px solid #cfcfcf;
    color: #333333;
    }

div.ContextualPopup .Userpic {
    border: 1px dotted #666;
    margin: .5em;
    padding: 0;
    }

div.ContextualPopup .Content {
    border: 0;
    color: #333333;
    }

div.ContextualPopup div.Inner a,
div.ContextualPopup div.Inner a:link,
div.ContextualPopup div.Inner a:visited,
div.ContextualPopup div.Inner a:active {
    color: #333;
    text-decoration: none;
    }

div.ContextualPopup .Relation {
    color: #333333;
    }

/*--- Navigation Bar ---*/

table#lj_controlstrip td {
    background: #ececec url(http://i.imgur.com/BgNq3gn.png);
    border: none;
    color: #333333;
    }

#lj_controlstrip input {
    background: #ffffff;
    border: 1px solid #333333;
    color: #333333;
    }

#lj_controlstrip a {
    color: #fff;
    }

#lj_controlstrip_statustext {
    color: #fff;
    }

#lj_controlstrip .ljuser a b {
    color: #fff;
    }

.has-userpic div.entry div.userpic,
            .has-userpic div.comment div.userpic {
                float: right;
                }
            .has-userpic div.entry .header {
                margin-right: 135px;
                }
            .has-userpic div.comment .header {
                margin-right: 135px;
                }

Thanks in advance for any help!

S	M	T	W	T	F	S
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Dreamwidth style system discussion

Jul. 23rd, 2013

Jul. 23rd, 2013

Rounded icons

Profile

October 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags