style_system | Entry's User Icon

Currently, my entry's text is wrapped around the userpic. This causes things like a blockquote to sort of slip behind the userpic. I would like to change it so that the text doesn't go beyond the alignment of the userpic, if that makes any sense. What do I need to edit in my CSS?

/* -------------------------------------

Night Watch : A Dreamwidth Tabula Rasa Layout
Variable width, should work with all page setups.

------------------------------------ */

* {margin: 0; padding: 0; font-size: 100%;}
html {font-size: 100%;}

body {
    color: #555555;
	font-family: verdana, "trebuchet ms", arial, tahoma, sans-serif;
	font-size: 62.5%;
        text-align: justify;
	padding: 0;
    background: #FFFFFF;
}

H1, H2, H3 { 
    font-weight: normal;
	margin: .25em 0;
	padding: .25em 0;
}

h1 {font-size: 1.4em;}
h2 {font-size: 1.2em;}
h3 {font-size: 1.1em;}

img { 
	border: none; 
}

hr {
	display: none;
}

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

a, a:link, a:active {
	color: #D6641D;
	font-weight: normal;
	text-decoration: none;
}
a:visited {
	color: #D6641D;
}

a:hover {
	color: #93CEDC;
}

blockquote {
	margin: 1em 3em;
	padding: 2.5em;
    line-height: 1.4em;
	background: #F0F6F5;
    border: 1px solid #d4e4e2;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -khtml-border-radius: 0.5em;
}

input, textarea, select {
	color: #555555;
        background: #FFFFFF;
	font-size: 1.2em;
	border: 1px solid #DDDDDD;
}

pre {
	font-size: 1.4em;
}

#qrform {
	margin-top: 1em !important;
}

#canvas { 
    margin: 0 auto;
    border: none;
    font-size: 1.2em;
    text-align: left;
    display: inline; /* So IE plays nice */
}

#content {
    margin-top: 0 !important;
    padding-top: 1em;
    padding-left: 5%;
    padding-right: 5%;
    background: #FFFFFF;
}

.one-column #content { 
        float: none;
}
.two-columns-left #content { 
	border-left: 21em solid transparent;
}
.two-columns-right #content {
	border-right: 21em solid transparent;
}
.three-columns-sides #content {
	border-left: 21em solid transparent;
	border-right: 21em solid transparent;
}
.three-columns-left #content {
	border-left: 42em solid transparent;
}
.three-columns-right #content {
	border-right: 42em solid transparent;
}

#primary {
	float: left;
	width:100%;
        margin-top: -1em;
	margin-right:-100%;
	margin-left: 0;
}

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

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

.one-column #secondary { width: 100%; }
.two-columns-left #secondary { 
	float: left;
	width: 21em;
	margin-left: -21em; 
}
.three-columns-sides #secondary { 
	float: left;
	width: 21em;
	margin-left: -21em; 
}
.two-columns-right #secondary { 
	float: right; 
	width: 21em;
	margin-right: -21em;
}
.three-columns-left #secondary { 
	float: left;
	width: 21em;
	margin-left: -42em; 
}
.three-columns-right #secondary { 
	float: right;
	width: 21em;
	margin-right: -21em; 
}

#secondary {margin-top: 1em;}
.three-columns-sides #tertiary, .three-columns-left #tertiary, .three-columns-right #tertiary {margin-top: 1em;}

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

.one-column #tertiary { width: 100%; }
.two-columns-left #tertiary,
.two-columns-right #tertiary {
    clear: both;
}
.two-columns-left #tertiary { margin-left: 2em; }

.two-columns-right #tertiary { margin-right: 2em; }
.two-columns-left #tertiary .module, .two-columns-right #tertiary .module {
    float: left;
    width: 100%;
}
.three-columns-left #tertiary { 
	float: left;
	width: 21em;
	margin-left: -21em; 
}
.three-columns-right #tertiary {
	float: right;
	width: 21em;
	margin-right: -42em;
	margin-left: 21em; /* so that #tertiary won't overlay #secondary in IE7 */
}
.three-columns-sides #tertiary { 
	float: right;
	width: 21em;
	margin-right: -21em; 
}

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

/* --------- HEADER ------- */

#header { 
    clear: both;
	margin: 0;
    font-family: helvetica, arial, verdana, sans-serif;
	font-size: 1.4em;
	text-align: center;        
    background: #111111;
}

#header .inner {
    margin: 0 !important;
    padding: 0 2em 2em 2em;
}

#pagetitle { 
        display: none;
        margin: 0;
        padding-top: 1em;
        font-size:0.8em;
        color: #D6641D;
}

h1#title {
	margin: 0;
        padding: 1.5em 0 0 0;
	color: #D6641D;
	font-size: 2.1em;
	font-weight: bold;
	letter-spacing: 0.1em;
}

h2#subtitle {
	margin-top: -0.4em;
	padding-bottom: 0.6em;
	color: #72acb6;
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* --------- FOOTER ------- */

#footer {
    margin: 0;
    clear: both;
    background: transparent;
    text-transform: uppercase;
    background: #111111;
}

#footer .inner {
    padding: 2em 2em 4em 2em;    
}

#footer a:hover { color: #93CEDC; }

/* Previous and Next links */

.navigation {
        padding: 0 0 1em 0;
	font-family: arial, helvetica, verdana, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
        color: #D6641D;
}

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

.navigation li:first-child {
	padding-left: 0.2em; 
}

.bottomnav {
    padding-top: 1em;
    border-top: 1px solid #CCCCCC;
}

.page-archive .bottomnav, .page-month .bottomnav {
        border-top: 0;
        padding-top: 0;
}

.topnav {
        min-height: 1em;
}

/* line up top of entry with sidebar */
.page-entry .entry-wrapper, .page-tags .tags-container {margin-top: 2em;}

/* --------- ENTRY CONTENT ------- */

#content {
    margin-top: 1em;
}

.entry-wrapper {
	margin-bottom: 1.5em;
	font-size: 1em;
}

/* space bwtn entries and sidebar */

.two-columns-left .entry-wrapper, .three-columns-left .entry-wrapper, .two-columns-left .comment-wrapper, .three-columns-left .comment-wrapper,  .two-columns-left .bottomcomment, .three-columns-left .bottomcomment, .two-columns-left .topnav, .three-columns-left .topnav, .two-columns-left .bottomnav, .three-columns-left .bottomnav {
	margin-left: 2em;
	margin-right: 0;
}

.two-columns-right .entry-wrapper, .three-columns-right .entry-wrapper, .two-columns-right .comment-wrapper, .three-columns-right .comment-wrapper,  .two-columns-right .bottomcomment, .three-columns-right .bottomcomment, .two-columns-right .topnav, .three-columns-right .topnav, .two-columns-right .bottomnav, .three-columns-right .bottomnav {
	margin-left: 0;
	margin-right: 2em;
}

.two-columns-right .entry-wrapper, .three-columns-right .entry-wrapper {
	margin-left: 0;
	margin-right: 2em;
}

.three-columns-sides .entry-wrapper, .three-columns-sides .comment-wrapper, .three-columns-sides .bottomcomment, .three-columns-sides .topnav, .three-columns-sides .bottomnav {
    margin-left: 2em;
    margin-right: 2em;
}

.entry .header {
	padding: 0 0 0.5em 0;
	font-family: arial, helvetica, verdana, sans-serif;
    background: #FFFFFF;
    border-top: 1px solid #CCCCCC;
    vertical-align: bottom;
}

.entry .entry-title {
	margin: 0;
	padding: 1em 0 0 0;
	font-size: 1.4em;
	color: #D6641D;
}

.entry .entry-title a, .comment .comment-title a {
	font-weight: bold !important;
}

.entry .access-filter img, .entry .restrictions img {
	padding-right: 0.3em;
}

.entry .datetime {
	font-size: 0.9em;
	text-transform: uppercase;
    color: #999999;
}

.entry .datetime a {
        color: #6DB4C1;
}

.entry .datetime a:hover {
        color: #D6641D;
}

.entry .contents {
        clear: both;
	padding: 0;
	line-height: 1.4em;
        background: #FFFFFF;
        text-align: justify;
}

.entry .contents ul, .entry .contents ol {
	margin: 1em 1em 1em 3em;
}

.entry .contents h2, .entry .contents h3 {
	color: #D6641D;
}

.entry-content p {
        margin: 1em 0;
}

.entry-content a, .comment-content a {
	color: #D6641D;
}

.entry-content a:visited, .comment-content a:visited {
	color: #6DB4C1;
}

.entry-content a:hover, .comment-content a:hover {
	color: #93CEDC;
}

.entry-content .ljuser a, .comment-content .ljuser a {
	color: #D6641D;
}

.entry-content .ljuser a:hover, .comment-content .ljuser a:hover {
	color: #93CEDC;
}

/* ------- entry userpics ------- */

.entry .userpic {
	float: right;
        margin: 0 0 0 1em;
	padding: 0;
	text-align: center;
	width: 110px;
}

.contents .userpic img {
	padding: 5px;
	border: 1px solid #D6641D;
	background: #FFFFFF;
}

.entry .poster {
	float: right; 
        clear: right;
        margin: 2px 0 0.5em 1em;
        width: 110px;
        font-size: 0; 
        line-height: 1em;
        color: #FFFFFF; 
        text-align: center;
}

.entry .poster .ljuser {display: block !important; font-size: 10px;}

.entry-poster .ljuser a {
	color: #6DB4C1;
}

.entry-poster a:hover {
	color: #93CEDC;
}

.entry-content {
	padding: 1em 0;
}

/* ---- metadata ----- */

.metadata {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.2em;
}

.metadata-label {
	font-weight: normal;
	font-size: 0.9em;
	text-transform: uppercase;
}

.metadata ul {
	position: relative;
	left: -3em;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.metadata img {display: none;}

.entry .footer {
        clear: right;
        padding-top: 0.5em;
        padding-bottom: 1em;
        background: #FFFFFF;
}

.tag {
	padding: 0 0 1em 0;
	font-size: 0.9em;
	text-transform: lowercase;
}

.tag-text {
	color: #D6641D;
	font-size: 0.9em;
	font-weight: normal;
	text-transform: uppercase;
}

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

.entry-management-links {
	float: left;
	list-style: none;
}

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

.entry-interaction-links li, .entry-management-links li { 
	display: inline;
	padding: 0 0.3em 0 0.5em !important;
        font-size: 0.9em;
        border-left: 1px solid #D6641D;
}

.entry-interaction-links li:first-child {
        border-left: 0;
        padding-left: 0;
}

.entry-readlink {display: inline-block !important;}

.entry-management-links li:first-child {
        border-left: 0;
        padding-left: 0 !important;
}

/* COMMENTS */

#comments {
	margin-top: -2em;
	padding-top: 2em;
	background: #FFFFFF;
}

.comment-pages {
	text-align: center;
	padding-top: 0;
	padding-bottom: 1em;
}

.partial {
	padding: .3em 0 !important;
}

.partial .comment {
    display: inline !important;
	font-size: 1em;
}
.partial .comment-title {
	display: inline !important;
	font-size: 1em;
}
.comment-title h4 {
	display: inline !important;
        padding-right: 0.5em;
}

.comment-wrapper {
	padding: 0;
	border-top: 1px solid #CCCCCC;
}

.comment {
	padding: 0.5em 0;
}

.comment .comment-title a {
	color: #D6641D;
	font-weight: bold;
}

.comment .comment-title a:hover {
	color: #93CEDC;
}

.comment .header .datetime {
	padding: 0 0 1em 0;
	font-size: 0.8em;
	text-transform: uppercase;
}

.comment .contents {
	clear: both;
	text-align: left;
	line-height: 1.5em;
	padding: 0.5em;
}

.comment .userpic {
	margin-right: 1em;
	float: left;
	text-align: center;
	width: 110px;
	background: #FFFFFF;
}

.comment .poster {
	margin: 0;
	font-size: 0.9em !important;
}

.comment-poster .anonymous {
	color: #D6641D !important;
	font-weight: bold;
}

.comment .poster-ip {
	font-size: 0.9em;
	color: #D6641D;
}

.comment .footer {
        clear: left;
        padding-top: 0.5em;
}

.comment .multiform-checkbox {
	float: right;
	padding-left: 0.5em;
	font-size: 0.8em;
}

.comment-interaction-links {
	list-style: none;
	font-size: 0.8em;
	text-align: right;
}

.comment-interaction-links li {
	display: inline;
	padding-left: 0.5em;
        padding-right: 0.5em;
	border-right: 1px solid #D6641D;
}

.comment-interaction-links a {
	font-weight: normal;
}

.comment-management-links {
	padding: 0;
	list-style: none;
	font-size: 0.8em;
	float: right;
    border-right: 1px solid #d6641d;
}

.comment-management-links li {
	display: inline;
	padding-left: 0.3em;
	padding-right: 0.3em;
}

.comment-management-links li:first-child {
	border-left: 0;
}

.comment-management-links a {
	font-weight: normal;
}

.edittime {
     padding-top: 1em;
     color: #D6641D;
}

.bottomcomment {
	padding: 1.5em 0;
    text-align: center;
}

.bottomcomment .entry-interaction-links {
	padding-top: 1em;
    padding-bottom: 1.5em;
	border-top: 1px solid #CCCCCC;
}

.bottomcomment .entry-management-links {
	padding-top: 1em;
        padding-bottom: 1.5em;
}

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

/* --- DAY PAGE --- */

.day .day-date {
	padding-top: 0;
        padding-left: 1.5em;
	font-size: 1.4em;
	font-family: helvetica, arial, verdana, sans-serif;
}

/* ----- VIEW BY MONTH PAGE ----- */

#archive-month .month {
	padding: 2em;
	background: #FFFFFF;
}

.month .entry-title {
        font-size: 1em;
}

.month .entry-title a {
	font-weight: bold;
}

dd.month { display: inline; }

.month .datetime, .month .access-filter, .month .entry-title {
	display: inline;
	margin: 0;
	padding-right: 5px;
}

.month .tag {
    padding-top: 0.5em;
	padding-left: 0;
}

#archive-month .navigation {
	text-align: center;
}

#archive-month .bottomnav {
       margin-top: 2em;
}

.navigation .month-back, .navigation .month-forward {
	display: inline;
	list-style-type: none;
	text-align: center;
}

/* ------- ARCHIVE PAGE ------- */

#archive-year {
	padding: 0 4em 2em 4em; 
	background: #FFFFFF;
}

#archive-year .navigation {
	text-align: center;
	font-size: 1.1em;
}

.month-wrapper {
	margin: 1em 0;
}

.month-wrapper .header {
        padding-left: 2.5em;
	font-size: 1.1em;
}

.month-wrapper .contents caption {display: none;}

table.month {
	margin: 0 auto;
	width: 90%;
	text-align: center;
}

.month-wrapper th {
	padding: 0.5em;
	border-right: 1px solid #CCCCCC !important;
	border-top: 1px solid #CCCCCC !important;
	border-bottom: 1px solid #CCCCCC !important;
        font-weight: normal;
	height: 4em;
}

.month-wrapper td {	
	border-right: 1px solid #CCCCCC !important;
	border-bottom: 1px solid #CCCCCC !important;
	width: 4em;
	height: 4em;
}

.month-wrapper td:first-child, .month-wrapper th:first-child {	
	border-left: 1px solid #CCCCCC;
}

.month-wrapper .day-has-entries {
	background-color: #F0F6F5;
}

.month-wrapper .day-has-entries a {
        font-size: 1.3em;
}

.month-wrapper .day-has-entries:hover {
	background-color: #E1EDEB;
}

.month-wrapper .label {font-weight: normal;}

.month-wrapper .footer {
        padding-top: 1em;
        padding-right: 2.5em;
	text-align: right;
	font-size: 1.1em;
	text-transform: none;
}

/* ------- TAG PAGE ------- */

.tags-container {
	padding: 0 2em;
	background: #FFFFFF;
}

.tags-container h2 {
	padding-bottom: 1em;
}

.tags-container .ljtaglist {
	margin-left: 3em;
	line-height: 1.8em;
}

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

.tags-container .ljtaglist li {
	border-top: 1px solid #CCCCCC;
}

.tags-container .manage-tags-link {
	margin-top: 2em;
}

/* MODULES */

.module {
	margin-bottom: 1em;
	font-size: 0.9em;
	text-align: left;
	line-height: 1.5em;
        background: #FFFFFF;
}

.module a:hover { 
	color: #6DB4C1;
}

.module h2 {
	margin: 0;
	padding: 0.5em;
	font-size: 1em;
	color: #D6641D;
	text-transform: uppercase;
	font-weight: bold;
}

.module-customtext h2, .module-syndicate h2, .module-calendar h2 {
    border-bottom: 1px solid #CCCCCC;
}

.module h2 a {
	font-weight: bold;
}

.module-content ul {
	list-style-type: none;
	padding-left: 0;
}
.module-content li { 
	margin: 0;
        padding: 0;
}

/* --- USER INFO --- */
.module-userprofile h2 {display: none;}

.module-userprofile .module-content {
	padding: 1.5em 0 1em 0;
	text-align: center;
}

.module-userprofile .userpic {
	padding: 0;
        margin: 0 auto;
	width: 110px;
	height: 110px;
    background: #FFFFFF;
}

.module-userprofile .userpic img {
	padding: 5px;
	border: 1px solid #D6641D;
}

.module-userprofile .journal-name {
	display: none;
	padding-top: 0.5em;
}

.module-userprofile .journal-website-name {
	padding-top: 0.5em;
}

ul.userlite-interaction-links {
	list-style: none;
	margin: 0 auto;
	padding-top: 1.5em;
}
ul.userlite-interaction-links li { 
	display: inline;
	padding: 0 0.5em 0 0.2em; 
        border-right: 1px solid #CCCCCC;
        border-bottom: 0 transparent;
}

.module-user-links .module-content { 
	text-align: center;
}

/* Nav Links and Links List */

.module-typelist .h2 {
       padding-left: 0;
}

.module-navlinks ul, .module-typelist ul { 
        margin-left: 0;
        list-style-type: none;
}

.module-navlinks li, .module-typelist li, .module-pagesummary li, .module-active li { 
        border-bottom: 1px solid #CCCCCC;
}

.module-navlinks li:first-child, .module-typelist li:first-child, .module-pagesummary li:first-child, .module-active li:first-child { 
        border-top: 1px solid #CCCCCC;
}

.module-navlinks .module-list-item a, .module-typelist .module-list-item a {
	display: block;
	padding: 0.3em 0 0.3em 0.5em;
}

.module-navlinks .module-list-item a:hover, .module-typelist .module-list-item a:hover {
	color: #6DB4C1;
	background: #F0F6F5;
}

/* Custom Text  */

.module-customtext .module-content {
        margin: 0;
	padding: 0.6em 0.5em 1.5em 0.5em;
	line-height: 1.2em;
}

/* --- sidebar calendar --- */

.module-calendar .module-content { 
	padding: 1em 0.5em 0 0.5em;
	text-align: center;
}

.module-calendar {width: 100%;}

.module-calendar table {
	width: 100%;
	text-align: center;
}

.module-calendar th, .module-calendar td {
	margin: 0.5em;
	height: 2.2em;
	line-height: 2.2em;
	border: 1px solid #CCCCCC;
}

.module-calendar td a {
	display: block;
	text-align: center;
        font-weight: bold;
	background: #E1EDEB;
}

.module-calendar td a:hover {
	color: #55555;
	background: #F0F6F5;
}

/* tags list */

.module-tags_list ul {
	margin: 0; 
        padding: 0;
}

.module-tags_list li {
	padding: 0.5em;
        line-height: 1.2em;
        border-top: 1px solid #CCCCCC;
}

.module-tags_list h2.module-header a {
	font-weight: bold;
}

/* multi-level tags list */

.module-tags_multilevel .module-content {
	padding-bottom: 0.5em;
	line-height: 2em;
}

.module-tags_multilevel ul {
       margin-left: 0;
}

.module-tags_multilevel li {
	list-style-type: none;
         margin-left: 0;
	padding-left: 0.5em;
        border-top: 1px solid #CCCCCC;
}

.module-tags_multilevel li ul li {
	margin-left: -0.5em;
	padding-left: 2em;
}

/* tags cloud */

.module-tags_cloud h2 {
     border-bottom: 1px solid #CCCCCC;
}

.module-tags_cloud .module-list {
	padding: 0.5em;
	line-height: 1.8em;
}

.module-tags_cloud .module-list, .module-tags_cloud .module-list ul, .module-tags_cloud .module-list-item {
list-style-type: none;
list-style-image: none;
display:inline;
}

.module-tags_cloud .module-list a {
	text-decoration: underline;
}

.manage-tags-link {
	padding: 0.3em 0.5em;
         border-top: 1px solid #CCCCCC;
}

/* --- Page Summary and Active Entries --- */

.module-pagesummary .module-content, .module-active .module-content {
	line-height: 1.2em !important;
}

.module-pagesummary ul, .module-active ul {
        margin-left: 0;
}

.module-pagesummary .module-content a img {
	display: none;
}

.module-pagesummary li, .module-active li {
	padding: 0.5em 0.2em 0.5em 0.5em;
}

.module-credit .module-content {
	padding: 1em;
	line-height: 1.2em;
	text-align: center;
}

.module-credit dt, .module-credit dd {
	display: inline;
    margin: 0;
    padding: 0;
}

.module-syndicate .module-content {
	padding: 1em 0;
	text-align: center;
}

.module-powered, .module-time { 
	padding: 0;
	text-align: center;
        font-size: 0.8em;
	color: #6DB4C1;
}

.module-time {
        margin-top: -1em;
}

/* ----------------- NAVBAR ----------------- */

#lj_controlstrip {
       background: #000000;
       border-bottom: 1px solid #878080;
}

#lj_controlstrip_statustext, #lj_controlstrip .ljuser a {
       color: #d6641d;
}

/* --- Place any additional css overrides under here -- */

.tag-text { display: none; }
div.tag ul { background: url('http://members.ziggo.nl/droomers/Dreamwidth/Layout/Mini%20icons/Tag.png') no-repeat center left; padding: 16px 16px 16px 16px;margin: -2px;
}

.entry-content hr,
.comment-content hr {
margin: 0;
}

img[src*='community.png'], img[src*='community.gif'], img[src*='comm_staff.png'] { 
background: url('http://members.ziggo.nl/droomers/Dreamwidth/Layout/Mini%20icons/Directions.png') no-repeat bottom left;
padding: 0 0 16px 18px;
width: 0; height: 0;  
}

#header {
    background: url(http://members.ziggo.nl/droomers/Dreamwidth/Layout/DW%20Header.jpg) center left no-repeat #111111;
    height: 200px;
    width: 1263px;
}

#title, #subtitle {
display: none;
}

Flat | Top-Level Comments Only

From:

winterfish

I'm not familiar with Practicality, so don't know how to float the icon outside the entry, though adding this:

.has-userpic .entry-content {
margin-right: 120px;
padding-right: 1em;
}

should stop the text from wrapping around the icon. (Change right to left if your icon's on the left.)

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

Dreamwidth style system discussion

Entry's User Icon

Entry's User Icon

no subject

Profile

June 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags