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:

got_swagger

Is there any way something like this would work on Practicality? Or possibly float it outside of the entry?

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	31

Dreamwidth style system discussion

Entry's User Icon

Entry's User Icon

no subject

no subject

Profile

October 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags