style_system | Styling comments and notifications

valiha posting in

(OK, I fumbled this one and posted it to the wrong comm, so this time I'm double checking to make sure it goes to the right location)

My question is this: I would like to style replies and IP address notifications for

mag7wallpapers.

Using Firebug I discovered that span.de is what I needed to style. I followed the instructions used on this web page but the result wasn't exactly what I was hoping for. The notice now covers the Post comment, Preview and More options buttons, and I can't figure out how to separate the two.

I would also like to lower the Quote button next to Subject, or move it up - make that whole area neater, because the elements are all over the place - if it can be done. And also, have the notice expand to the width of the textarea.

(click to enlarge)

Help?

Original css:

/*
Layout: TOP OF THE CLASS 
Theme: STUDIOUS

CREDITS
CSS: Sarken - http://sarken.dreamwidth.org/1751138.html
Icons: Yusuke Kamiyamane - http://p.yusukekamiyamane.com/
Colors: Mgine - http://www.colourlovers.com/palette/1305411
*/

body {
background-color: #3D3E40;
color: #222;
font-family: 'Lucida Grande', Helvetica, sans-serif;
margin: 0;
padding: 0;
border: 0;
}

a {
color: #3D3E40;
}

a:hover {
color: #3D3E40;
}

a:visited {
color: #3D3E40;
}

#canvas {
margin: 11em auto 0;
padding: 0;
}

#primary {
background-color: #9EBFB8;
width: 100%;
padding: .5em 0 .25em 0;
margin: 0 auto;
clear: both;
}

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

.one-column #secondary {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 75%;
padding-bottom: .5em;
color: #DBD5CC;
z-index: 50;
}

.has-navstrip #secondary {
position: absolute;
top: 50px;
left: 0;
width: 100%;
font-size: 75%;
padding-bottom: .5em;
color: #DBD5CC;
z-index: 50;
}

#secondary .inner {
margin: 0 2em 0 0;
padding: 0;
}

#secondary > .inner:first-child {
padding: 0;
margin: 0 0 0 -2em;
}

.one-column #tertiary {
clear: both;
margin: .5em auto 1em auto;
width: 100%;
font-size: 75%;
color: #DBD5CC;
}

#tertiary .inner {
margin: 0 2em 0 0;
padding: 0;
}

#tertiary > .inner:first-child {
padding: 0;
margin: 0 0 0 -2em;
}

/*HEADER*/

#header {
position: absolute;
top: 0;
left: 2em;
padding: 0;
margin: .5em;
background-color: transparent;
color: #ECE4DC;
width: 20%;
height: 11em;
z-index: 20;
}

.has-navstrip #header {
position: absolute;
top: 45px;
left: 2em;
}

#header > .inner {
padding: 0;
margin: 0;
text-align: center;
}

h1#title {
padding: 0;
margin: .5em 0 0 0;
font-style: italic;
font-family: Georgia, serif;
font-weight: normal;
font-size: 140%;
}

h2#subtitle {
padding: 0;
margin: 0;
font-family: 'Lucida Grande', Helvetica, sans-serif;
font-weight: normal;
font-size: 90%;
}

h2#pagetitle {
display: none;
}

/*ALL MODULE SECTIONS*/

.module {
margin: 0;
padding: 0;
border: 0;
}

.module a {
color: #D94848;
text-decoration: none;
}

.module a:visited {
color: #82BCB0;
}

.module a:hover {
color: #E0D9D1;
text-decoration: underline;
}

.module .module-header {
color: #93BFB7;
padding-bottom: 0px;
border-bottom: 1px #6C6E72 dotted;
width: 95%;
}

.module .module-header a {
color: #93BFB7;
width: 95%;
}

.module .module-content {
width: 94%;
}

div.module-calendar .module-content a {
text-decoration: underline;
}

div.module-calendar .module-content td.entry-day, div.module-calendar .module-content td.empty-day {
border: 1px #4E4F52 solid;
}

.module-userprofile .module-content {
text-align: center;
min-height: 100px;
}

.module-userprofile .userpic {
float: left;
margin-right: .75em;
padding: 2px;
}

.module-userprofile .userpic img {
width: 65px;
height: 65px;
padding: 4px;
border: 1px #4E4F52 solid;
}

.module-userprofile .journal-name {
padding-top: 20px;
}

.module-userprofile ul.userlite-interaction-links {
margin-top: .25em;
}

/*TOP MODULES*/

#secondary .module {
float: right;
width: 24%;
background-color: #3D3E40;
}

#secondary div.module-navlinks ul.module-list {
padding: .75em 0 0 0;
margin: 0;
}

#secondary div.module-navlinks ul.module-list li {
list-style: none;
}

#secondary div.module-navlinks ul.module-list li a {
display: block;
background-color: #BA3E3E;
text-align: center;
color: #F8F3EC;
}

#secondary div.module-calendar .module-content {
font-size: 75%;
padding-bottom: 0;
}

#secondary .module-typelist .module-header {
text-align: center;
}

#secondary .module-typelist .module-content {
text-align: center;
}

#secondary .module-typelist .module-content ul {
margin: 0;
padding: 0;
}

#secondary .module-typelist .module-content ul li {
list-style: none;
margin: .15em 0;
}

/*NAVIGATION TOP*/

.topnav {
margin: 0 10%;
text-align: left;
}

/*ENTRIES*/

div.entry {
background-color: #BA3E3E;
padding: 0;
width: 70%;
margin: 0 auto 2em auto;
border: 0;
}

div.entry > div.inner {
background-color: #F8F3EC;
padding: 0;
margin: 0 140px 0 0;
border: 0;
}

div.entry div.header {
letter-spacing: 1px;
padding: .5em .5em .5em .65em;
margin: 0 0;
background-color: #F8F3EC;
}

div.entry div.header a {
text-decoration: none;
}

div.entry h3.entry-title {
font-size: 150%;
padding: .15em 0;
margin: 0 0 0 0;
color: #4E4F52;
}

div.entry h3.entry-title a {
color: #4E4F52;
}

div.entry h3.entry-title a:hover {
color: #93BFB7;
}

div.entry span.datetime {
text-transform: uppercase;
padding: 0;
font-size: 75%;
color: #AAA;
}

div.entry span.datetime a {
color: #AAA;
}

div.entry span.access-filter img {
display: none;
}

div.entry span.restrictions img {
display: none;
}

div.entry-content {
margin: 0 0;
padding: .75em 1.5em 2em 1.5em;
text-align: justify;
min-height: 80px;
background-color: #F8F3EC;
font-size: 95%;
color: #222;
}

div.entry-content a {
color: #67A89B;
}

div.entry-content a:hover {
color: #67A89B;
}

div.entry div.userpic {
float: right;
clear: left;
margin: 0 -140px 0 0;
width: 140px;
text-align: center;
}

div.entry div.userpic img {
padding: 4px;
margin-top: -30px;
margin-bottom: 2px;
border: 1px solid #D94848;
}

div.entry span.poster {
float: right;
clear: both;
text-align: center;
margin: 0 -139px 0 0;
font-size: 60%;
width: 138px;
color: #222;
}

div.entry span.poster a {
color: #F8F3EC;
font-weight: normal;
text-decoration: none;
}

div.entry span.poster img {
display: none;
}

div.entry div.metadata {
font-size: 80%;
margin: 0 0;
padding: 0 0 0 1.5em;
color: #BFBFBF;
background-color: #F8F3EC;
}

div.entry div.metadata span.metadata-item {
color: #BA3E3E;
}

div.entry div.metadata ul, div.entry div.metadata ul li {
margin-bottom: 0;
}

div.entry div.footer {
margin: 0 0;
padding: 0 1em .75em 1.5em;
background-color: #F8F3EC;
}

div.entry div.footer div.tag {
color: #BFBFBF;
font-size: 80%;
margin: 0 0 0 0;
}

div.entry div.footer div.tag ul li a {
color: #4E4F52;
}

ul.entry-management-links {
margin: 0;
padding-top: .85em;
text-align: center;
}

ul.entry-interaction-links {
margin: 0;
text-align: center;
}

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

/*COMMENTS*/

#comments {
width: 70%;
margin: 0 auto;
padding: 0;
}

div.comment {
background-color: #F8F3EC;
border-bottom: .25em #BA3E3E solid;
margin: 0;
padding: 0;
}

.comment-wrapper-even div.comment {
border-bottom: .25em #3D3E40 solid;
}

div.comment div.header {
margin: 0;
font-size: 80%;
background-color: #BA3E3E;
}

.comment-wrapper-even div.comment div.header {
background-color: #3D3E40;
color: #F8F3EC;
}

div.comment div.comment-title {
background-color: #9EBFB8;
}

div.comment div.comment-title h4 a {
padding: .25em .25em 0 .25em;
text-transform: uppercase;
text-decoration: none;
font-weight: normal;
font-size: 110%;
color: #222;
}

div.comment span.datetime {
padding: .25em .25em 0 .25em;
margin: 0;
}

div.comment span.poster {
font-size: 80%;
}

div.comment span.poster-ip {
font-size: 80%;
color: #3D3E40;
}

div.comment div.contents {
padding: 0 0 0 .25em;
margin: 0;
}

div.comment div.userpic {
float: right;
width: 76px;
text-align: center;
margin: .5em;
}

div.comment div.userpic img {
width: 70px;
height: 70px;
border: 3px #DBD5CC solid;
}

div.comment div.comment-content {
margin: 0;
padding: 1em 0 .5em .75em;
font-size: 95%;
}

div.comment div.footer {
margin: 0;
clear: both;
padding: .5em .25em;
text-align: right;
font-size: 80%;
text-transform: uppercase;
}

ul.comment-management-links {
margin: 0;
text-align: center;
}

ul.comment-interaction-links {
margin: 0;
text-align: center;
}

ul.comment-management-links a, ul.comment-management-links a:hover, ul.comment-management-links a:visited, ul.comment-interaction-links a, 
ul.comment-interaction-links a:hover, ul.comment-interaction-links a:visited {
color: #BA3E3E;
}

/*REPLY PAGE*/

.page-reply .comment {
width: 70%;
margin: 0 auto 1em auto;
border: 0;
background-color: #F8F3EC;
}

#qrform table { 
border: 0 !important;
}

table.talkform {
width: 70%;
padding: 0 2em;
border-top: .75em solid #BA3E3E;
border-bottom: .35em solid #BA3E3E;  
background-color: #F8F3EC; 
margin: 0 auto;
}

input, select, textarea {
border: 1px solid #BA3E3E;
background-color: #F8F3EC;
}

/*NAVIGATION BOTTOM*/

.bottomcomment {
padding-bottom: 1em;
text-align: center;
}

.bottomcomment ul {
padding-bottom: .75em;
}

.bottomcomment ul a, .bottomcomment ul a:visited {
color: #3D3E40;
}

.bottomnav {
margin: 0 10% 0 0;
padding-bottom: .4em;
text-align: right;
}

/*BOTTOM MODULES*/

#tertiary .module {
float: right;
width: 24%;
margin: 0 0 1em 0;
}

#tertiary .module .module-content ul {
list-style-position: inside;
}

#tertiary .module-tags_cloud {
width: 48%;
}

#tertiary .module-tags_cloud .module-content {
text-align: justify;
margin: 0;
padding: 0 1.5em;
}

#tertiary .module-tags_cloud .module-content ul {
margin: 0;
padding: 0 1.5em 0 0;
}

#tertiary .module-tags_cloud .manage-tags-link {
text-align: right;
text-transform: uppercase;
margin-bottom: .75em;
}

#tertiary .module-active .module-content ul.module-list {
list-style-type: none;
list-style-position: outside;
}

#tertiary .module-time, #tertiary .module-powered, #tertiary .module-syndicate {
clear: both;
margin: 0 0 1em 0;
width: 95%;
}

#tertiary .module-syndicate .module-header {
display: none;
}

#tertiary .module-time .module-content, #tertiary .module-powered .module-content, #tertiary .module-syndicate .module-content {
text-align: right;
text-transform: uppercase;
font-size: 90%;
}

/*FOOTER*/

#footer {
text-align: center;
font-size: 80%;
text-transform: uppercase;
background-color: #3D3E40;
}

#footer a {
color: #ECE4DC;
}

/*ARCHIVE*/

.page-archive div.month {
margin: .25em auto 1.75em auto;
padding: 0;
width: 70%;
float: none;
margin: .25em auto 1.75em auto;
background-color: #F8F3EC;
}

.page-archive div.month h3 {
background-color: #3D3E40;
color: #F8F3EC;
padding: 0 .5em;
}

.page-archive div.month table { 
width: 70%; 
margin: 1em auto;
}

.page-archive div.month td {
border: 1px #D94848 solid;
}

.page-archive div.month th {
text-align: center; 
margin: 0 2px; 
font-weight: normal;
border: 1px #D94848 solid; 
}

.page-archive div.month td.day-has-entries p { 
padding: 0 0 0 5px; 
margin: 0; 
display: inline; 
}

.page-archive div.month div.footer {
text-align: right;
padding: .5em;
}

.page-month #archive-month { 
background-color: #F8F3EC;
width: 70%;
margin: 0 auto;
clear: both;
}

.page-month #archive-month > .inner {
margin: .5em 2em;
padding-top: .5em;
}

.page-month dt a {
font-size: 110%;
color: #4E4F52;
}

.page-month dd {
border-bottom: 1px dotted #DBD5CC;
margin-bottom: .75em;
}

.page-month .month div.tag {
margin-left: .75em;
font-size: 85%;
}

.page-day h3.day-date {
text-align: center;
}

/*TAGS PAGE*/

.page-tags .tags-container {
margin: 1em auto;
width: 70%;
padding: 0;
background-color: #F8F3EC;
}

.page-tags .tags-container h2 { 
padding: 0 .5em; 
margin: 0;
background-color: #BA3E3E;
color: #F8F3EC;
}

.page-tags .ljtaglist ul {
list-position: inside;
}

.page-tags .manage-tags-link {
text-align: right;
padding: 0 .5em .5em .5em;
}

/*LOCKED AND RESTRICTED ENTRIES*/

img[src*='locked.png'], img[src*='filtered.png'], img[src*='private.png'], img[src*='icon_18.png'], img[src*='icon_nsfw.png'] {
width: 0;
height: 0;
padding: 0 5px 18px 0;
}

.security-protected .entry .entry-title, img[src*='locked.png']{
padding-left: 20px;
background: transparent url('http://yoursite/images/securityprotected.png') no-repeat center left;
}

.security-filtered .entry .entry-title, img[src*='filtered.png'] {
padding-left: 20px;
background: transparent url('http://yoursite/images/securityfiltered.png') no-repeat center left;
}

.security-private .entry .entry-title, img[src*='private.png'] {
padding-left: 20px;
background: transparent url('http://yoursite/images/securityprivate.png') no-repeat center left;
}

.restrictions-18 .entry .entry-title a, img[src*='icon_18.png'] {
padding-left: 20px;
background: transparent url('http://yoursite/images/restricted18.png') no-repeat center left;
}

.restrictions-NSFW .entry .entry-title a, img[src*='icon_nsfw.png'] {
padding-left: 20px;
background: transparent url('http://yoursite/images/restrictednsfw.png') no-repeat center left;
}

/*ICONS*/

img[src*='edit.png'] {
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/edit.png') no-repeat;
}

img[src*='tag_edit.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/tagsedit.png') no-repeat;
}

img[src*='memories_add.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/addmemories.png') no-repeat;
}

img[src*='track.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/track.png') no-repeat;
}

img[src*='tellafriend.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/tellafriend.png') no-repeat;
}

img[src*='next.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/entrynext.png') no-repeat;
}

img[src*='previous.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/entryprevious.png') no-repeat;
}

img[src*='anonymous.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/anonymous.png') no-repeat;
}

img[src*='delete.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/delete.png') no-repeat;
}

img[src*='screen.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/screen.png') no-repeat;
}

img[src*='unscreen.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/unscreen.png') no-repeat; 
}

img[src*='freeze.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/freeze.png') no-repeat;
}

img[src*='unfreeze.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/unfreeze.png') no-repeat;
}

img[src*='subscription_add.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/subscribeadd.png') no-repeat; 
}

img[src*='subscription_remove.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/subscriberemove.png') no-repeat;
}

img[src*='access_grant.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/accessgrant.png') no-repeat;
}

img[src*='access_remove.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/accessremove.png') no-repeat; 
}

img[src*='community_join.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/communityjoin.png') no-repeat;
}

img[src*='community_leave.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/communityleave.png') no-repeat; 
}

img[src*='post.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/post.png') no-repeat; 
}

img[src*='message.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/message.png') no-repeat;
}

img[src*='sticky_entry.png'] {
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://yoursite/images/sticky.png') no-repeat; 
}

.ljuser img {
width: 0;
height: 0;
background-image: none;
padding: 0 0 16px 18px;
}

img[src*='user.png'] { 
width: 0; height: 0; 
padding: 0 0 16px 18px; 
background: url('http://yoursite/images/user.png') no-repeat; 
vertical-align: middle !important;
}

img[src*='user.png'], img[src*='lj-userinfo.gif'], img[src*='userinfo.gif'], img[src*='user_other.png'], img[src*='user_staff.png'], img[src*='.ico'] { 
background: url('http://yoursite/images/user.png') no-repeat bottom left;
padding: 0 0 16px 18px;
}

img[src*='community.png'], img[src*='community.gif'], img[src*='comm_staff.png'] { 
background: url('http://yoursite/images/community.png') no-repeat bottom left;
padding: 0 0 16px 18px;
width: 0; height: 0;  
}

img[src*='openid.png'] {
background: url('http://yoursite/images/openid.png') no-repeat bottom left;
padding: 0 0 16px 18px;
width: 0; height: 0;
}

/*CONTEXTUAL POP-UP*/

div.ContextualPopup div.Inner { 
font-family: 'Lucida Grande', Helvetica, sans-serif;
background: #F8F3EC; 
border: 3px double #BA3E3E; 
color: #3D3E40; 
padding: 3px; 
text-transform: lowercase;
}

div.ContextualPopup .Content { 
padding: 1em;
}

div.ContextualPopup .Relation { 
margin-bottom: .8em;
}

div.ContextualPopup .Userpic { 
float: right; 
width: 50px; height: 50px; 
padding: 4px; 
border: 1px solid #D94848; 
margin-right: .5em;
}

div.ContextualPopup img { 
border: 0;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { 
color: #4E4F52; 
font-weight: normal;
}

/*CONTROL STRIP*/

#lj_controlstrip {
background-color: #4E4F52;
background-image: none;
border-bottom: 1px dotted #BA3E3E;
}

#lj_controlstrip a {
font-family: 'Lucida Grande', Helvetica, sans-serif;
color: #9EBFB8;
}

#lj_controlstrip_statustext, #lj_controlstrip_actionlinks, #lj_controlstrip_search {
font-family: 'Lucida Grande', Helvetica, sans-serif !important;
color: #DBD5CC !important;
}

#lj_controlstrip_login input, #lj_controlstrip_login input#xc_user, #lj_controlstrip_login input#xc_password,
#lj_controlstrip_user input, #lj_controlstrip_search select, #lj_controlstrip_search input, 
#lj_controlstrip_search input#search, #lj_controlstrip_actionlinks select, #lj_controlstrip_actionlinks input {
padding: 0px 2px;
text-transform: uppercase;
font-family: 'Lucida Grande', Helvetica, sans-serif;
color: #3D3E40;
border: 1px solid #3D3E40;
background-color: #DBD5CC;
}

#lj_controlstrip_login input:hover, #lj_controlstrip_user input:hover, #lj_controlstrip_search input:hover, 
#lj_controlstrip_actionlinks input:hover {
color: #DBD5CC;
border: 1px solid #DBD5CC;
background-color: #3D3E40;
}

#lj_controlstrip_search input#search {
text-transform: none;
}

Edited css:

/*
Layout: TOP OF THE CLASS 
Theme: STUDIOUS

CREDITS
CSS: Sarken - http://sarken.dreamwidth.org/1751138.html
Icons: Yusuke Kamiyamane - http://p.yusukekamiyamane.com/
Colors: Mgine - http://www.colourlovers.com/palette/1305411
*/

body {
background-color: #2B1B05;
color: #222;
font-family: 'Lucida Grande', Helvetica, sans-serif;
margin: 0;
padding: 0;
border: 0;
}

a {
color: #3D3E40;
}

a:hover {
color: #3D3E40;
}

a:visited {
color: #3D3E40;
}

ul li {
margin: 0px 0px 0px 15px;
padding: 0px;
list-style: disc;
list-style-position: inside;
}

ol li {
margin: 0px 0px 0px 15px;
padding: 0px;
list-style-position: inside;
list-style: decimal;
}

#canvas {
margin: 11em auto 0;
padding: 0;
}

#primary {
background-color: #cfcac2;
width: 100%;
padding: .5em 0 .25em 0;
margin: 0 auto;
clear: both;
}

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

.one-column #secondary {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 75%;
padding-bottom: .5em;
color: #DBD5CC;
z-index: 50;
}

.has-navstrip #secondary {
position: absolute;
top: 50px;
left: 0;
width: 100%;
font-size: 75%;
padding-bottom: .5em;
color: #DBD5CC;
z-index: 50;
}

#secondary .inner {
margin: 0 2em 0 0;
padding: 0;
}

#secondary > .inner:first-child {
padding: 0;
margin: 0 0 0 -2em;
}

.one-column #tertiary {
clear: both;
margin: .5em auto 1em auto;
width: 100%;
font-size: 75%;
color: #DBD5CC;
}

#tertiary .inner {
margin: 0 2em 0 0;
padding: 0;
}

#tertiary > .inner:first-child {
padding: 0;
margin: 0 0 0 -2em;
}

/*HEADER*/

#header {
position: absolute;
top: 0;
left: 2em;
padding: 0;
margin: .5em;
background-color: transparent;
color: #ECE4DC;
width: 20%;
height: 11em;
z-index: 20;
}

.has-navstrip #header {
position: absolute;
top: 45px;
left: 2em;
}

#header > .inner {
padding: 0;
margin: 0;
text-align: center;
}

h1#title {
padding: 0;
margin: .5em 0 0 0;
font-style: italic;
font-family: Georgia, serif;
font-weight: normal;
font-size: 140%;
}

h2#subtitle {
padding: 0;
margin: 0;
font-family: 'Lucida Grande', Helvetica, sans-serif;
font-weight: normal;
font-size: 90%;
}

h2#pagetitle {
display: none;
}

/*ALL MODULE SECTIONS*/

.module {
margin: 0;
padding: 0;
border: 0;
}

.module a {
color: #D94848;
text-decoration: none;
}

.module a:visited {
color: #82BCB0;
}

.module a:hover {
color: #E0D9D1;
text-decoration: none;
}

.module .module-header {
font-family: Georgia;
font-style: italic;
color: #92B0AA;
padding-bottom: 0px;
border-bottom: 1px #6C6E72 dotted;
width: 95%;
}

.module .module-header a {
color: #92B0AA;
width: 95%;
}

.module .module-content {
width: 94%;
}

div.module-calendar .module-content a {
text-decoration: none;
border-bottom: 1px #4e4f52;
}

div.module-calendar .module-content td.entry-day, div.module-calendar .module-content td.empty-day {
border: 1px #4E4F52 dotted;
}

.module-userprofile .module-content {
text-align: center;
min-height: 100px;
}

.module-userprofile .userpic {
float: left;
margin-right: .75em;
padding: 2px;
}

.module-userprofile .userpic img {
width: 77px;
height: 77px;
padding: 4px;
border: 1px #4E4F52 solid;
}

.module-userprofile .journal-name {
padding: 5px 0 5px 0;
font-family: Georgia;
font-style: italic;
font-size: 170%;
}

.module-userprofile ul.userlite-interaction-links {
margin-top: .25em;
}

/*TOP MODULES*/

#secondary .module {
float: right;
width: 24%;
background-color: #2B1B05;
}

#secondary div.module-navlinks ul.module-list {
padding: .75em 0 0 0;
margin: 0;
}

#secondary div.module-navlinks ul.module-list li {
list-style: none;
}

#secondary div.module-navlinks ul.module-list li a {
display: block;
padding: 2px 0;
font-weight: bold;
color: #F8F3EC;
background-color: #BA3E3E;
text-align: center;
}

#secondary div.module-calendar .module-content {
font-size: 75%;
padding-bottom: 0;
}

#secondary .module-typelist .module-header {
text-align: center;
}

#secondary .module-typelist .module-content {
text-align: center;
}

#secondary .module-typelist .module-content ul {
margin: 0;
padding: 0;
}

#secondary .module-typelist .module-content ul li {
list-style: none;
margin: .15em 0;
}

/*NAVIGATION TOP*/

.topnav {
margin: 0 10%;
text-align: left;
}

/*ENTRIES*/

div.entry {
background-color: #BA3E3E;
padding: 0;
width: 75%;
margin: 0 auto 2em auto;
border: 0;
}

div.entry > div.inner {
background-color: #F8F3EC;
padding: 0;
margin: 0 140px 0 0;
border: 0;
}

div.entry div.header {
letter-spacing: 1px;
padding: .5em .5em .5em .65em;
margin: 0 0;
background-color: #F8F3EC;
}

div.entry div.header a {
text-decoration: none;
}

div.entry h3.entry-title {
font-size: 150%;
padding: .15em 0;
margin: 0 0 0 0;
color: #4E4F52;
}

div.entry h3.entry-title a {
color: #4E4F52;
}

div.entry h3.entry-title a:hover {
color: #93BFB7;
}

div.entry span.datetime {
text-transform: uppercase;
padding: 0;
font-size: 75%;
color: #AAA;
}

div.entry span.datetime a {
color: #AAA;
}

div.entry span.access-filter img {
display: none;
}

div.entry span.restrictions img {
display: none;
}

div.entry-content {
margin: 0 0;
padding: .75em 1.5em 2em 1.5em;
text-align: justify;
min-height: 80px;
background-color: #F8F3EC;
font-size: 95%;
color: #222;
	border-bottom: 1px solid #D3DFA7;
}

div.entry-content img {
max-width:700px;
}

div.entry-content a {
color: #BA3E3E;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted;
}

div.entry-content a:hover {
color: #67A89B;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted;
}

div.entry div.userpic {
float: right;
clear: left;
margin: 0 -140px 0 0;
width: 140px;
text-align: center;
}

div.entry div.userpic img {
padding: 4px;
margin-top: -30px;
margin-bottom: 2px;
border: 1px solid #D94848;
}

div.entry span.poster {
float: right;
clear: both;
text-align: center;
margin: 0 -139px 0 0;
font-size: 60%;
width: 138px;
color: #222;
}

div.entry span.poster a {
color: #F8F3EC;
font-weight: normal;
text-decoration: none;
}

div.entry span.poster img {
display: none;
}

div.entry div.metadata {
font-size: 80%;
margin: 0 0;
padding: 5px 7px 2px 5px; color: #4f4f4f; background-color:#fafafa;
}
div.entry div.metadata img {
	display: block;
	padding-right: 5px;
    }
div.entry div.metadata span.metadata-item {
color: #AF0000;
}
.entry .metadata-label {
        font-weight: bold; 
    }

div.entry div.metadata ul, div.entry div.metadata ul li {
margin-bottom: 0;
list-style: none; display: block; padding: 2px 0;
}

div.entry div.footer {
margin: 0 0;
padding: 0 0 10px 0;
background-color: #F8F3EC;
}

div.entry div.footer div.tag {
color: #4f4f4f; background-color:#fafafa;
font-size: 80%;
       font-weight: bold; 
margin: 0 0 0 0;
       padding: 2px 7px 7px 25px; 
}

.tag a {
        font-weight: normal;
        text-decoration: none;
        border-bottom: 1px dotted;
    }
    .tag ul { display: inline; margin: 0; padding: 0; }

.tag li { display: inline; list-style: none;  padding: 0px;
    }

ul.entry-management-links {
	margin: 0px 0px 10px 0px;
	padding: 10px 0px 0px 0px;
	list-style: none;
	text-align: center;
	border-top: 1px solid #D3DFA7;
	}

ul.entry-management-links li {
	margin: 0px auto;
	display: inline;
	list-style: none;
	text-align: center;
	}

ul.entry-interaction-links {
	padding: 0px;
	margin: 5px 0px 10px 0px;
	text-align: center;
	}

ul.entry-interaction-links li {
      display: inline;
      list-style: none;
      font-weight: bold;
      font-size: .9em;
      color:#333333;
      margin-left: 2px;
      padding: 2px 10px;
      text-transform: uppercase;
      background: #EEEEEE url(http://i.imgur.com/atVUl.png);
      border: 1px solid #DDDDDD;
      -moz-border-radius: 2px;
}

ul.entry-interaction-links li:hover {
      background: #EEEEEE
      url(http://i.imgur.com/atVUl.png);
      border: 1px solid #DDDDDD;
      border-top: 4px solid #C1272D;}

ul.entry-interaction-links a {
    color: #888888;
    text-shadow: 1px 1px 0 #FFF;
    }
ul.entry-interaction-links a:hover {
    color: #888888;
    text-shadow: 1px 1px 0 #FFF;
    }

li.entry-readlink,
ul.entry-interaction-links li.entry-readlink,
ul.entry-interaction-links li.readlink {
    display: inline;
    list-style: none;
    font-weight: bold;
    font-size: .9em;
    color: #FFFFFF;
    margin-left: 2px;
    text-transform: uppercase;
    padding: 2px 10px;
    background: #C1272D url(http://i.imgur.com/atVUl.png);
    text-shadow:-1px -1px 0 #111111;
    -moz-border-radius: 2px;
    border: 1px solid #9D090E;
    }

li.entry-readlink:hover,
ul.entry-interaction-links li.entry-readlink:hover,
ul.entry-interaction-links li.readlink:hover {
    color: #FFFFFF;
    background: #A30207 url(http://i.imgur.com/atVUl.png);
    border: 1px solid #760105;
    text-shadow:-1px -1px 0 #111111;
    }

ul.entry-interaction-links li.entry-readlink a {
    color: #FFFFFF;
    text-shadow:-1px -1px 0 #111111;
    }

li.active {
	list-style: none;
	display: inline;
	margin: 10px;
	}

/*COMMENTS*/

#comments {
width: 75%;
margin: 0 auto;
padding: 0;
}

div.comment {
background-color: #F8F3EC;
border-bottom: .25em #BA3E3E solid;
margin: 0;
padding: 0;
}

.comment-wrapper-even div.comment {
border-bottom: .25em #3D3E40 solid;
}

div.comment div.header {
margin: 0;
font-size: 80%;
background-color: #BA3E3E;
}

.comment-wrapper-even div.comment div.header {
background-color: #3D3E40;
color: #F8F3EC;
}

div.comment div.comment-title {
background-color: #9EBFB8;
}

div.comment div.comment-title h4 a {
padding: .25em .25em 0 .25em;
text-decoration: none;
font-weight: normal;
font-size: 110%;
color: #222;
}

div.comment span.datetime {
padding: .25em .25em 0 .25em;
margin: 0;
}

div.comment span.poster {
font-size: 80%;
}

div.comment span.poster-ip {
font-size: 80%;
color: #3D3E40;
}

div.comment div.contents {
padding: 0 0 0 .25em;
margin: 0;
}

div.comment div.contents a {
color: #BA3E3E;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted;
}

div.comment div.contents a:hover {
color: #67A89B;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted;
}

div.comment div.userpic {
float: right;
width: 76px;
text-align: center;
margin: .5em;
}

div.comment div.userpic img {
width: 70px;
height: 70px;
border: 3px #DBD5CC solid;
}

div.comment div.comment-content {
margin: 0;
padding: 1em 0 .5em .75em;
font-size: 95%;
}

div.comment div.footer {
margin: .5em 0;
clear: both;
padding: .5em .25em;
text-align: right;
font-size: 80%;
font-variant: small-caps;
}

ul.comment-management-links {
margin: 0;
text-align: center;
}

ul.comment-interaction-links {
margin: 0;
text-align: center;
}

/*NAVIGATION BOTTOM*/

.bottomcomment {
padding-bottom: 1em;
text-align: center;
}

.bottomcomment ul {
padding-bottom: .75em;
}

.bottomcomment ul a, .bottomcomment ul a:visited {
color: #3D3E40;
}

.bottomnav {
margin: 0 10% 0 0;
padding-bottom: .4em;
text-align: right;
}

/*REPLY PAGE*/

.page-reply .comment {
width: 75%;
margin: 0 2em;
border: 0;
background-color: #F8F3EC;
}

#qrform table { 
border: 0 !important;
}

table.talkform {
width: 75%;
border-top: .75em solid #BA3E3E;
border-bottom: .35em solid #BA3E3E;  
background-color: #F8F3EC; 
margin: 0 auto ; 
padding: 0 2em;
}

input, select, textarea {
border: 1px solid #BA3E3E;
background-color: #F8F3EC;
margin: 0px; 
padding: 0 0.15em;
}

/*BOTTOM MODULES*/

#tertiary .module {
float: right;
width: 24%;
margin: 0 0 1em 0;
}

#tertiary .module .module-content ul {
list-style-position: inside;
}

#tertiary .module-tags_cloud {
width: 48%;
}

#tertiary .module-tags_cloud .module-content {
text-align: justify;
margin: 0;
padding: 0 1.5em;
}

#tertiary .module-tags_cloud .module-content ul {
margin: 0;
padding: 0 1.5em 0 0;
}

#tertiary .module-tags_cloud .manage-tags-link {
text-align: right;
text-transform: uppercase;
margin-bottom: .75em;
}

#tertiary .module-active .module-content ul.module-list {
list-style-type: none;
list-style-position: outside;
}

#tertiary .module-time, #tertiary .module-powered, #tertiary .module-syndicate {
clear: both;
margin: 0 0 1em 0;
width: 95%;
}

#tertiary .module-syndicate .module-header {
display: none;
}

#tertiary .module-time .module-content, #tertiary .module-powered .module-content, #tertiary .module-syndicate .module-content {
text-align: right;
text-transform: uppercase;
font-size: 90%;
}

/*FOOTER*/

#footer {
text-align: center;
font-size: 80%;
text-transform: uppercase;
background-color: #2B1B05;
}

#footer a {
color: #ECE4DC;
}

/*ARCHIVE*/

.page-archive div.month {
margin: .25em auto 1.75em auto;
padding: 0;
width: 75%;
float: none;
margin: .25em auto 1.75em auto;
background-color: #F8F3EC;
}

.page-archive div.month h3 {
background-color: #3D3E40;
color: #F8F3EC;
padding: 0 .5em;
}

.page-archive div.month table { 
width: 75%; 
margin: 1em auto;
}

.page-archive div.month td {
border: 1px #D94848 solid;
}

.page-archive div.month th {
text-align: center; 
margin: 0 2px; 
font-weight: normal;
border: 1px #D94848 solid; 
}

.page-archive div.month td.day-has-entries p { 
padding: 0 0 0 5px; 
margin: 0; 
display: inline; 
}

.page-archive div.month div.footer {
text-align: right;
padding: .5em;
}

.page-month #archive-month { 
background-color: #F8F3EC;
width: 75%;
margin: 0 auto;
clear: both;
}

.page-month #archive-month > .inner {
margin: .5em 2em;
padding-top: .5em;
}

.page-month dt a {
font-size: 110%;
color: #4E4F52;
}

.page-month dd {
border-bottom: 1px dotted #DBD5CC;
margin-bottom: .75em;
}

.page-month .month div.tag {
margin-left: .75em;
font-size: 85%;
}

.page-day h3.day-date {
text-align: center;
}

/*TAGS PAGE*/

.page-tags .tags-container {
margin: 1em auto;
width: 75%;
padding: 0;
background-color: #F8F3EC;
}

.page-tags .tags-container h2 { 
padding: 0 .5em; 
margin: 0;
background-color: #BA3E3E;
color: #F8F3EC;
}

.page-tags .ljtaglist ul {
list-position: inside;
}

.page-tags .manage-tags-link {
text-align: right;
padding: 0 .5em .5em .5em;
}

/*LOCKED AND RESTRICTED ENTRIES*/

img[src*='locked.png'], img[src*='filtered.png'], img[src*='private.png'], img[src*='icon_18.png'], img[src*='icon_nsfw.png'] {
width: 0;
height: 0;
padding: 0 5px 18px 0;
}

.security-protected .entry .entry-title, img[src*='locked.png']{
padding-left: 20px;
background: transparent url('http://img217.imageshack.us/img217/5811/securityprotected.png') no-repeat center left;
}

.security-filtered .entry .entry-title, img[src*='filtered.png'] {
padding-left: 20px;
background: transparent url('http://img515.imageshack.us/img515/7246/securityfiltered.png') no-repeat center left;
}

.security-private .entry .entry-title, img[src*='private.png'] {
padding-left: 20px;
background: transparent url('http://img210.imageshack.us/img210/9441/securityprivate.png') no-repeat center left;
}

.restrictions-18 .entry .entry-title a, img[src*='icon_18.png'] {
padding-left: 20px;
background: transparent url('http://img221.imageshack.us/img221/5976/restricted18.png') no-repeat center left;
}

.restrictions-NSFW .entry .entry-title a, img[src*='icon_nsfw.png'] {
padding-left: 20px;
background: transparent url('http://img84.imageshack.us/img84/2337/restrictednsfw.png') no-repeat center left;
}

/*ICONS*/

img[src*='edit.png'] {
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img809.imageshack.us/img809/2171/editi.png') no-repeat;
}

img[src*='tag_edit.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img513.imageshack.us/img513/1378/tagsedit.png') no-repeat;
}

img[src*='memories_add.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img98.imageshack.us/img98/7530/addmemories.png') no-repeat;
}

img[src*='track.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img156.imageshack.us/img156/799/tracko.png') no-repeat;
}

img[src*='tellafriend.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img839.imageshack.us/img839/8812/tellafriend.png') no-repeat;
}

img[src*='next.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img137.imageshack.us/img137/6137/entrynext.png') no-repeat;
}

img[src*='previous.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img684.imageshack.us/img684/3527/entryprevious.png') no-repeat;
}

img[src*='anonymous.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img585.imageshack.us/img585/3443/anonymous.png') no-repeat;
}

img[src*='delete.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img263.imageshack.us/img263/5628/deleteqv.png') no-repeat;
}

img[src*='screen.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img3.imageshack.us/img3/9714/screenfk.png') no-repeat;
}

img[src*='unscreen.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img510.imageshack.us/img510/1627/unscreen.png') no-repeat; 
}

img[src*='freeze.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img641.imageshack.us/img641/1418/freeze.png') no-repeat;
}

img[src*='unfreeze.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img526.imageshack.us/img526/1844/unfreeze.png') no-repeat;
}

img[src*='subscription_add.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img121.imageshack.us/img121/3002/subscribeadd.png') no-repeat; 
}

img[src*='subscription_remove.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img704.imageshack.us/img704/8314/subscriberemove.png') no-repeat;
}

img[src*='access_grant.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img9.imageshack.us/img9/306/accessgrantn.png') no-repeat;
}

img[src*='access_remove.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img526.imageshack.us/img526/9239/accessremove.png') no-repeat; 
}

img[src*='community_join.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img405.imageshack.us/img405/5208/communityjoin.png') no-repeat;
}

img[src*='community_leave.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img121.imageshack.us/img121/6097/communityleave.png') no-repeat; 
}

img[src*='post.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img543.imageshack.us/img543/455/postoo.png') no-repeat; 
}

img[src*='message.png'] { 
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img190.imageshack.us/img190/7870/messageir.png') no-repeat;
}

img[src*='sticky_entry.png'] {
width: 0; height: 0; 
padding: 16px 18px 0 0; 
background: url('http://img137.imageshack.us/img137/4947/stickya.png') no-repeat; 
}

.ljuser img {
width: 0;
height: 0;
background-image: none;
padding: 0 0 16px 18px;
}

img[src*='user.png'] { 
width: 0; height: 0; 
padding: 0 0 16px 18px; 
background: url('http://img211.imageshack.us/img211/8576/userw.png') no-repeat; 
vertical-align: middle !important;
}

img[src*='user.png'], img[src*='lj-userinfo.gif'], img[src*='userinfo.gif'], img[src*='user_other.png'], img[src*='user_staff.png'], img[src*='.ico'] { 
background: url('http://img211.imageshack.us/img211/8576/userw.png') no-repeat bottom left;
padding: 0 0 16px 18px;
}

img[src*='community.png'], img[src*='community.gif'], img[src*='comm_staff.png'] { 
background: url('http://img571.imageshack.us/img571/5605/communitys.png') no-repeat bottom left;
padding: 0 0 16px 18px;
width: 0; height: 0;  
}

img[src*='openid.png'] {
background: url('http://img264.imageshack.us/img264/953/openid.png') no-repeat bottom left;
padding: 0 0 16px 18px;
width: 0; height: 0;
}

/*CONTEXTUAL POP-UP*/

div.ContextualPopup div.Inner { 
font-family: 'Lucida Grande', Helvetica, sans-serif;
background: #F8F3EC; 
border: 3px double #BA3E3E; 
color: #3D3E40; 
padding: 3px; 
text-transform: lowercase;
}

div.ContextualPopup .Content { 
padding: 1em;
}

div.ContextualPopup .Relation { 
margin-bottom: .8em;
}

div.ContextualPopup .Userpic { 
float: right; 
width: 50px; height: 50px; 
padding: 4px; 
border: 1px solid #D94848; 
margin-right: .5em;
}

div.ContextualPopup img { 
border: 0;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { 
color: #4E4F52; 
font-weight: normal;
}

/*CONTROL STRIP*/

#lj_controlstrip {
background-color: #2B1B05;
background-image: none;
border-bottom: 0px dotted #BA3E3E;
}

#lj_controlstrip a {
font-family: 'Lucida Grande', Helvetica, sans-serif;
color: #9EBFB8;
}

#lj_controlstrip_statustext, #lj_controlstrip_actionlinks, #lj_controlstrip_search {
font-family: 'Lucida Grande', Helvetica, sans-serif !important;
color: #DBD5CC !important;
}

#lj_controlstrip_search input#search {
text-transform: none;
}

#lj_controlstrip_user,
#lj_controlstrip_login,
#lj_controlstrip_loggedout_userpic,
#lj_controlstrip_actionlinks
{
    border-right: 1px solid #3D3E40;
}

span.de, .info, .success, .warning, .error, .validation {
  border: 1px solid;
  margin: 25px 0px 5px 0px;
  padding:5px 10px 15px 50px;
  background-repeat: no-repeat;
  background-position: 10px center;
}
.info {
  color: #00529B;
  background-color: #BDE5F8;
  background-image: url('info.png');
}
.success {
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image:url('success.png');
}
span.de, .warning {
  color: #9F6000;
  background-color: #FEEFB3;
  background-image: url('http://img141.imageshack.us/img141/351/warninga.png');
}
.error {
  color: #D8000C;
  background-color: #FFBABA;
  background-image: url('error.png');
}

(Fingers crossed!)

Current Mood: sheepish

Tags:

Flat | Top-Level Comments Only

From:

marahmarie

If you'll put the CSS that you had when you posted here back in I can check to see what the problem is tomorrow sometime, hopefully, since I have to get offline now. I can tell you're online since every time I check your CSS with the Web Dev add-on you've changed the span.de styling again, but I didn't catch the page in time to see the original issue you were having with it.

span.de is actually pretty easy to style (check my journal's reply pages for my ideas on that) but I've never added an image to it before, and I'm not sure if you want the IP notice floating or fixed (floating might be another issue).

The quote button can probably be moved where you want it with CSS, but again, I can't really check until tomorrow...

From:

valiha

:headdesk: This has really not been my week. Sorry! I'll go include the original css as well as my fiddled one. I just posted this question and went back to trying different things because I didn't think anyone will add a reply any time soon.

I've seen it styled and know it can be done, but couldn't think of a way to do it myself. I'll be back soon.

(While you're offline, I will try to see what happens if span.de is floated and whether that would have any influence on the problem.)

You are a genius! Floating the element fixed the issue. :) Now it's just a matter of aligning the reply elements.

Edited Date: 2010-12-30 11:52 am (UTC)

From:

marahmarie

A couple of questions: first of all, you say floating fixed the problem, but I thought last night that perhaps floating was the problem, having been unable to see your original CSS in action -

Secondly, which page view are you applying your changes to, since I cannot see them at all?

~~I keep checking the reply page at this link: http://mag7wallpapers.dreamwidth.org/321.html?mode=reply ... but that is not showing me your warning image for the IP notice or any other styling.~~

Ok, that actually *isn't* showing me any styling, but maybe the code has to be modified to work on that page as well....I see your styling on the entry view, though (I had forgotten to check that, whoops).

~~Are you trying to apply your new code to all page views that support replies or only a certain one that I haven't checked?~~

You probably are trying to apply it to all page views, but let me know, before I offer any code...

Lastly, do you still want me to look at moving the Quote button, or is that sorted?

Edited (more info) Date: 2010-12-30 09:58 pm (UTC)

From:

valiha

So many new comments! It makes me happy. :)

Huh, look at that, it really isn't showing. Yes, I'd like it to be visible on all page views. And yes, I'd like to arrange everything in a neat line (the link you tried actually shows how I'd like it to look - From, then below that Subject, followed by Don't auto-format and Quote, then finally the textbox - if it's doable, of course.

From:

marahmarie

OK, on the page reply view there's little I can do because the HTML to hook the CSS to is just not there - just like on my own journal (I was hoping different DW layouts would have more options for styling that page than mine does, but I guess we are SOL).

When I try to work with the existing HTML on the page-reply view, I wind up applying your IP image to all the bolded form options, and there is no way to undo that so it applies just to the IP notice, from what I can see. Also no way to move the quote button on that page, for the same reason.

On the entry page, though, you can move the quote button where you want it with this:

.page-entry #quotebuttonspan{display:block; position:absolute; margin-top: .3em; margin-left: 12em;}

Normally, with absolute positioning, you don't use margin-top or margin-left like I did: you use top and left, but the button moves too far out of view with those, and requires too high an amount of re-adjustment space to bring it back inline, so margin-top and margin-left are my workarounds for that little problem (telling you this just so you don't form bad habits thanks to my hacks).

Edited (more info) Date: 2010-12-30 11:38 pm (UTC)

From:

valiha

Thank you, I will try it out. I'd love to be able to set aside the time to really work on learning css; unfortunately, work and school leave little time for anything extra. :( The next best thing then is this, trial and error and asking questions when I don't understand something. I appreciate you guys helping me out!

Just tried it, and it pushes the quote button straight on top of the subject line. I'll try changing the margin a bit to see if that will make a difference, and I might change margin-top and -left to just top and left to see what you meant by it being too far out of view.

If it doesn't work out, I might remove styling for this completely because I'd much rather have it align correctly than have pretty colors.

Edited Date: 2010-12-30 11:54 pm (UTC)

From:

marahmarie

Tried it again; still works perfectly for me. Which browser are you using (Firefox, I assume, since you have Firebug, but which version?)? I'm using 3.6.13 - don't know if that makes any difference...

"If it doesn't work out, I might remove styling for this completely because I'd much rather have it align correctly than have pretty colors."

Just to be clear, the colors are only applying to your IP notice styling. If you want to toss the quote CSS you can still keep the IP (span.de) CSS; one won't affect the other.

Edited (more info) Date: 2010-12-31 12:21 am (UTC)

From:

valiha

I'm also using 3.6.13 , so that can't be it. I just tried changing the width of the table.talkform, but it didn't seem to make a difference. I even removed the entire thing, and the elements are still all over the place, which shouldn't happen, right? At least I don't think it should. (It bugs the heck out of me, but it's not like it's a life-and-death problem.)

From:

marahmarie

Viewport width? I'm on 1450 x 960, or something like that (huge resolution). I'll look again (chances are, that block is not respecting absolute positioning, so on different viewports, it displays at different positions- I have the same problem with the "Back to Top" link CSS on my journal - in which case, I have no fix for it, either, sorry).

From:

valiha

I'm on a 15" laptop, with a 1280x768 resolution. Eh, well, like I said, it was worth a try, and I'll keep on fiddling with it (maybe increasing the .entry width might help some). In any case, thanks for trying to find the solution for me. :)

From:

marahmarie

Nope, it's not that, either. Everything is fine from what I can see at any res, except that the quote button lays next to the subject textbox at ~~600 x 400~~ 800 x 600, but I fixed that while I was looking by changing margin-left to ~~13em~~ 14em...I can post screen caps, if you like, and/or look at yours if you want, to see what you're talking about...

Edited (typos) Date: 2010-12-31 12:49 am (UTC)

From:

marahmarie

http://img233.imageshack.us/i/1440x90020101230194435.jpg/ (1440 x 900)
http://img217.imageshack.us/i/800x60020101230194726.jpg/ (800 x 600)

From:

valiha

Hm, that might be because I just changed the width of the entry from 75% to 85%, and the elements fell into place.

Here are my screencaps, at my original resolution:

http://img407.imageshack.us/img407/3172/replyonentry.png
http://img218.imageshack.us/img218/6172/replyoncomment.png

They're still holding at 1024x768, but fall apart at 800x600.

From:

marahmarie

Yeah, it falls apart with no styling at all, even at the increased page-width. So I'd still suggest my original CSS with the width increase on margin-left to account for smaller viewports (but yeah, it did also work fine at 1280 x 768 with my original code):

.page-entry #quotebuttonspan{display:block; position:absolute; margin-top: .3em; margin-left: 14em;}

That code closes up that huge space you're going to have between the subjectbox and the quote button otherwise, and it opens up that same space when the viewport is small without pushing the quote button way, way out there into the page gutter.

From:

valiha

I have to change it to margin-top: .2em; margin-left: 20em; to make it work on my end, otherwise the quote button covers the subjectbox. Strange that we're getting such different results.

From:

marahmarie

Yes, it is strange indeed. I don't know what I'm missing here. Just to be sure it's not some strange Windows thing I adjusted my Windows screen res to 1280 x 768 a minute ago, then I tried my original code at both that res and 800 x 600, and it's still perfect. From here. Why it's not quite right on your end is not something I can quite figure out (fonts? if you have Vista fonts in the style sheet, which I haven't checked for, they're often much narrower than XP fonts so they can throw off padding on some elements).

If this was IE we were seeing such differences in, then I could instantly blame the fact that I use Vista if you use XP (because IE8 for XP and IE8 for Vista actually display some of the same style elements a bit differently), but since we're both in Firefox, I'm simply out of ideas.

2nd edit: Just checked my Fonts folder; I don't have "Lucida Grande" installed and that's your main font throughout; if you do, maybe that's the reason (assuming it's a wider/smaller font)? *feels clueless*

Edited (typo/more info) Date: 2010-12-31 01:57 am (UTC)

From:

valiha

Just checked my Fonts folder, adn no, I don't have Lucida Grande. I have several other Lucida fonts, but not that one. Maybe I should change the font family into something generic??

If it helps any, I'm on an XP Acer laptop with SP3 installed, no Vista fonts, and mostly use Firefox, IE rarely if ever. I think it's best to just leave it, since we've gotten it to look the best we could. If we ever have an idea, we can always go back and try something else.

(And it just occurred to me, we're two people most likely on the opposite sides of the world, who have never met and who are trying to solve a problem one of us has. Isn't this just an awesome environment? \(^_^)/)

Edited Date: 2010-12-31 05:23 pm (UTC)

From:

marahmarie

It's making me regret that I don't have the laptop I had until a few days ago (it was a friend's and he wanted it back). It was a 15" HP Pavilion Limited Edition, it ran XP with SP3, and had no Vista fonts, etc. Just like yours. It would have been perfect for trying to see what the problem was. If you want to leave my code for the Quote button off that's fine; I tested it again tonight at your layout's new width in 1280 x 768, 800 x 600, and 600 x 400, and again, it seemed to improve things, but I can't see what you're seeing, so, so be it.

At least we tried!

I love your IP notice image and background color, BTW; that was a very creative way to code it. :)

From:

valiha

At least we tried!

Yes, we did! And it's no big deal that I can't make it perfect, or fit each and every display. What's important is that it's functional. I kept the code, just changed the pixel values a bit, and I'm satisfied.

Thank you, though I can't take any credit for it; I found it at Lone Wolf Designs while I was googling for notice styling. I will have to come up with some way to use the other notices in the comm. :ponders: Perhaps to emphasize some of the rules? :off to fiddle some more:

[edited for html fail]

Edited Date: 2011-01-01 03:46 pm (UTC)

From:

valiha

I kept the span.de at the end of the css, together with other notification styles since I might find a way to use them in actual entries. I just made sure to add display:block; to it.

From:

ninetydegrees

I can't help with the quote button but adding display: block; to span.de worked for me.

From:

valiha

float: left; seems to have the same effect, but that's good to know in case another problem crops up. Thank you!

From:

marahmarie

display:block will work better. :)

From:

valiha

I'll replace float with block then. Thanks!

From:

marahmarie

You are a genius, in this case. First of all, I hadn't meant to suggest floating as an option, I just got misinterpreted by the OP, and while the OP is right that floating *somewhat* fixes the problem, setting the display property to "block" makes it look much better than the float does (and negates the need for a float, while we're at it, since it centers the IP notice at the perfect width beneath the textarea). Awesome. :)

Edited Date: 2010-12-30 10:03 pm (UTC)

From:

ninetydegrees

*g* Trial and error has made me realized that when dealing with SPANs you want to style as DIVs, display: block is often the better option.

From:

marahmarie

Yeah; where it gets thorny is often where links are involved in the span; then I usually go with inline-block, myself, which was something I just kinda pulled out of my butt one night years ago, but it's done the trick a lot of times since. I'm really not sure if I have the span.de CSS on my journal block displayed or not, but I'll check now, since it seems to seriously prettify things. :)

Edit: Yeah, actually, I do have it block displayed:

.de{display:block; padding: 4px; width: 98%; border: 1px solid #c3c0ba; margin-top: 1em!important;font-size: 80%; background: #F3F5F2; color:#af230c;font-weight:bold; font-style:oblique;}

I've added so much code to the original layout I literally cannot recall all of it, but at least now that's cleared up. :)

Edited (more info) Date: 2010-12-30 10:25 pm (UTC)

From:

ninetydegrees

I'm slowly getting used to using inline-block. It remains a bit of mysterious thing, though. :)

And it looks pretty! I've always thought this should be more emphasized than it is.

(I've subscribed to CSS code BTW; I'm probably going to need it soon; I have a style I have no idea how to code...)

From:

marahmarie

Oh, thank you!

From:

valiha

That is a really beautiful layout. Would you mind if I tried some of the code you used, to see what would work with my layout? And is there a big difference between using span.de vs. just .de?

From:

marahmarie

Try away! No difference at all between span.de and .de, it's just less code to write. The only time you need to include the word span and the dot before the code is when the span is supplementary to it.

For instance, on LJ and DW, the CSS for our user icons is .ljuser, but there's also a span around them in many page views that you can style separately. In that case you would try something like span.ljuser {background: red}. If you just want to style the icon, then you'd leave off the span and write something like .ljuser {height: 13px}.

In other words (editing after realizing why this is confusing, and that my explanation was not terribly clear) in my example, .ljuser controls the user-icon image only, while span.ljuser can control the background for that image and the image itself, if you like. Hope that helps. :)

Edited (html flubs/clarity) Date: 2010-12-30 11:50 pm (UTC)

From:

valiha

I just got misinterpreted by the OP

I seem to do that a lot lately. :)

I just replaced float with block, and you're right, it does look much better. I'll go read other replies now.

Flat | Top-Level Comments Only

Profile

Dreamwidth style system discussion

April 2025

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

Page Summary

Style Credit

Style: Radiant Aqua for Venture by onlyembers

Expand Cut Tags

No cut tags

Page generated May. 31st, 2025 03:07 am

Styling comments and notifications

Links

Page Summary

Style Credit

Expand Cut Tags