style_system | Feed Username

How can I get feed usernames to behave like comm/journal usernames do?

It's a customized stylesheet and I've moved things around, but even though I finally got the usernames where I want them, the feeds keep jutting out to the right like so:

Custom CSS:

/*--  Boxed In (Tabula Rasa) --*/
/*--  select "2 Column (sidebar on right)" --*/
/*-- stylesheet by arobynsung @ visualwit for DW --*/

/*--- main ---*/

* {
		margin: 0px; 
		padding: 0px;
		}

BODY { 
		background-image: url(''); 
		background-color: #f5f5f5;
		color: #5f5f5f; 
		font-size: .95em; 
		margin: 30px 0px 0px 0px; 
		font-family: Arial Narrow, sans-serif;
		}

.ljuser a b {
		color: #7B98C1;
		}

a, a:link, a:visited { 
		color: #7B98C1;
		text-decoration: none;
		}

a:hover {
		color: #757575;
		}

b, strong, i, em {
		color: #757575;
		}

code, kbd, pre, tt, textarea {
		font-family: monospace;
		}

input, textarea {
		background-color: #FFFFFF;
		color: #757575;
		border: 1px solid #d1d1d1;
		}

::-moz-selection { 
		background-color: #ededed; 
		color: #757575; 
		}

q { 
		font-style: italic; 
		}

blockquote {
		margin: 10px 10px 10px 50px;
		padding: 5px;
		width: 88%;
		border: 1px solid #d1d1d1;
		border-right: 15px solid #d1d1d1;
		}

ul {
		margin: 5px 0px 5px 15px;
		list-style: square;
		list-style-position: inside;
		}

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

/*--- containers and things ---*/

#canvas { 
		width: 80%; 
		margin: 0px auto; 
		}

#primary { 
		float: right; 
		margin: 0px;   
		width: 76%; 
		}

/*--- titles ---*/

#header { 
		padding: 10px; 
		background-color: #FFFFFF;   
		margin: 0px 0px 15px 0px; 		
		border: 1px solid #d1d1d1;
		}

h1#title { 
		color: #7B98C1; 
		font-weight: lighter; 
		font-size: 1.3em; 
		text-transform: uppercase;
		}

h2#subtitle { 
		color: #757575;
		font-weight: lighter; 
		font-size: 1.23em; 
		text-transform: lowercase;
		}

h2#pagetitle { 
		font-size: 1.21em; 
		display: none; 
		}

/*-- journal navigation --*/

div.module-navlinks { 
		font-size: 1.2em; 
		text-align: right;
		list-style: none; 
		}

div.module-navlinks ul.module-list { 
		text-transform: uppercase;
		}

/*--- sidebar options ---*/

.two-columns-right #secondary { 
		float: left; 
		width: 23%; 
		margin: 0; 
		}

.two-columns-right #tertiary { 
		clear: both; 
		}

.two-columns-right #tertiary .module { 
		float: left; 
		}

/*--- sidebar ---*/

.module { 	
		background-color: #FFFFFF;   
		margin: 0px 0px 15px 0px; 		
		border: 1px solid #d1d1d1;
		}

.module-content { 
		padding: 10px; 
		}

h2.module-header {
		background-color: #DCDCDC;   
		padding: 3px; 
		margin: 0px 0px; 
		color: #757575; 
		font-size: 1.2em; 
		font-weight: normal; 
		text-transform: uppercase; 
		}

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

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

div.module-content div.userpic img { 
		height: 70px;
		width: 70px;
		padding: 7px; 
		background-color: #dfdfdf;   
		border: 1px solid #d1d1d1;
		}

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

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

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

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

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

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

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

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

div.manage-tags-link { 
		margin: 10px 0px 0px 0px;
		text-transform: uppercase; 
		text-align: right; 
		}

div.module-calendar table { 
		text-align: center; 
		margin: auto; 
		width: 55%; 
		}

div.module-calendar th { 
		text-transform: uppercase; 
		background-color: #ECECEC;
		border: 1px solid #DCDCDC; 
		}

div.module-calendar td.empty-day { 
		text-transform: uppercase; 
		background-color: #FFFFFF; 
		border: 1px solid #DCDCDC; 
		}

div.module-calendar td.entry-day { 
		text-transform: uppercase; 
		background-color: #EFEFEF; 
		border: 1px solid #DCDCDC; 
		}

/*--- navigation (for entries) ---*/

.navigation { 
		text-align: center; 
		padding: 5px; 
		background-color: #FFFFFF;   
		margin: 0px 0px 15px 0px; 		
		border: 1px solid #d1d1d1;
		font-size: 1.2em; 
		text-transform: uppercase;
		}

.page-separator { 
		padding: 10px; 
		}

div.navigation ul { 
		display: inline; 
		}

div.navigation li { 
		display: inline; 
		list-style: none; 
		}

li.page-back, li.page-forward {
		display: inline; 
		list-style: none; 
		}

/*--- entries ---*/

div.entry { 
		margin: 0px 0px 15px 0px;
		background-color: #DCDCDC;   
		border: 1px solid #d1d1d1;
		}

div.entry div.userpic { 
		float: right; 
		margin: 0px 8px 20px 20px; 
		}

div.entry div.userpic img { 
		padding: 10px; 
		background-color: #FFFFFF;   
		border: 1px solid #d1d1d1;
		}

div.entry-content { 
		background-color: #FFFFFF;  
		padding: 15px; 
		padding-top: 30px; 
		margin: 0px; 
		margin-right: 140px; 
		margin-top: -10px; 
		}

div.entry div.header { 
		padding: 5px 10px 5px 10px; 
		margin: 0px 0px 5px 0px; 
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

.entry-poster { 
		background-color: #FFFFFF;  
		padding: 5px;
		margin-top: -5px; 
		float: right; 
		}

h3.entry-title { 
		color: #757575; 
		text-transform: uppercase; 
		font-weight: normal; 
		}

h3.entry-title a { 
		color: #757575; 
		}

.datetime {  
		text-transform: uppercase; 
		color: #7B98C1; 
		font-size: 0.75em; 
		}

.datetime a {  
		color: #7B98C1; 
		}

/*--- currents and tags ---*/

.metadata { 
		font-size: 0.85em; 
		padding: 10px 15px 5px 15px; 
		margin: 0px;  
		text-transform: uppercase; 
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

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

div.metadata ul li { 
		list-style: none; 
		padding: 0px; 
		margin: 0px; 
		}

span.metadata-item-location, span.metadata-item-music, span.metadata-item-mood, div.tag ul  { 
		color: #7B98C1;
		text-align: right; 
		text-transform: uppercase; 
		display: inline; 
		}

.metadata img {
display: none;
}

div.tag { 
		font-size: 0.85em; 
		padding: 15px; 
		text-transform: uppercase;
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

span.tag-text { 
		text-transform: uppercase;
		}

div.tag ul li { 
		text-align: right; 
		display: inline; 
		list-style: none; 
		font-weight: normal; 
		margin: 5px 5px 0px 0px; 
		}

ul.entry-management-links {
		padding: 2px; 
		list-style: none; 
		text-align: center;
		margin: 0px; 
 		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

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

ul.entry-interaction-links { 
		padding: 2px; 
		text-align: center; 
		margin: 0px; 
		margin-right: 140px; 
		background-color: #FFFFFF;  
		}

ul.entry-interaction-links li { 
		display: inline; 
		list-style: none;  
		font-weight: normal; 
		font-size: 1.152em; 
		color: #757575; 
		text-transform: uppercase; 
		margin: 0px 5px 0px 0px;
		padding: 0px; 
		}

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

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

/*--- archive page ---*/

.month { 
		padding: 20px; 
		background-color: #FFFFFF; 
		margin: 0px 0px 15px 0px; 		
		border: 1px solid #d1d1d1;
		}

table.month { 
		border: 0px solid #DCDCDC;
		}

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

.month caption { 
		display: none; 
		}

.month h3 { 
		color: #757575; 
		font-size: 1.2em; 
		font-weight: normal;
		text-transform: uppercase; 
		}

.month th { 
		background-color: #EDEDED; 
		margin: 0px 2px; 
		padding: 5px 2px; 
		font-size: 1.15em; 
		font-weight: normal; 
		text-align: center; 
		text-transform: uppercase; 
		border: 1px solid #DCDCDC; 
		}

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

td.day { 
		padding: 10px;
		text-align: center; 
		}

.month td.day-has-entries {
		background-color: #ededed; 
		font-weight: normal; 
		}

.month td.day-has-entries p { 
		font-size: 1.14em; 
		font-weight: bold; 
		padding: 0px 0px 0px 5px; 
		display: inline; 
		}

/*--- tags page ---*/

.page-tags .tags-container { 
		background-color: #FFFFFF;
		margin: 0px 0px 10px 0px; 
		border: 1px solid #d1d1d1;
		}

.page-tags h2 { 
		padding: 5px 10px 5px 10px; 
		font-size: 1.2em; 
		color: #757575;
		font-weight: normal; 
		text-transform: uppercase; 
		}

.page-tags .ljtaglist { 
		padding: 10px; 
		}

.manage-tags-link { 
		padding: 10px; 
		}

/*--- comments ---*/

.comment { 
		margin: 0px 0px 15px 0px;
		background-color: #DCDCDC;   
		border: 1px solid #d1d1d1;
		}

.bottomcomment { 
		background-color: #FFFFFF; 
		padding: 10px; 
		margin: 0px; 
		border: 1px solid #d1d1d1;;
		}

.comment-content {
 		background-color: #FFFFFF;  
		padding: 15px; 
		padding-top: 30px; 
		margin: 0px; 
		margin-right: 140px; 
		margin-top: -10px; 
		}

div.comment div.header { 
		padding: 5px 10px 5px 10px; 
		margin: 0px 0px 5px 0px; 
		margin-right: 140px; 
		background-color: #FFFFFF;   
		color: #757575; 
		text-transform: uppercase; 
		}

div.comment div.header a {  
		font-weight: lighter;  
		font-size: 1.15em; 
		color: #757575; 
		}

.comment-poster { 
		background-color: #FFFFFF;  
		padding: 5px;
		margin-top: -5px; 
		float: right; 
		}

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

textarea.textbox  { 
		width: 80% !important; 
		color: #757575;
		border: 1px solid #d1d1d1;
		}

.poster-ip { 
		background-color: #FFFFFF;
		float: right; 
		}

div.comment div.userpic { 
		float: right; 
		margin: 0px 8px 20px 20px; 
		}

div.comment div.userpic img { 
		padding: 10px; 
		background-color: #FFFFFF;   
		border: 1px solid #d1d1d1;
		}

div.comment div.footer { 
 		margin-right: 140px; 
		background-color: #FFFFFF; 
		padding: 0px 10px 0px 10px; 
		font-weight: bold; 
		color: #757575; 
		text-transform: uppercase; 
		}

.comment-management-links ul, .comment-interaction-links ul {
		list-style: none; 
		}

ul.comment-management-links { 
		padding: 2px; 
		text-align: center; 
		margin: 0px;

background-color: #FFFFFF;  
		}

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

ul.comment-interaction-links { 
		padding: 2px; 
		text-align: center; 
		margin: 0px;

background-color: #FFFFFF;  
		}

ul.comment-interaction-links li { 
		display: inline; 
		list-style: none;  
		font-weight: normal; 
		font-size: 1.152em; 
		color: #757575; 
		text-transform: uppercase; 
		margin: 0px 5px 0px 0px;
		padding: 0px; 
		}

ul.comment-interaction-links a { 
		color: #757575; 
		}

#qrform table { 
		border: 0!important; 
		}
		
		.comment-poster {  
		text-transform: uppercase; 
		}

table.talkform { 
		background-color: #FFFFFF; 
		margin: 0px 0px 10px 0px; 
		padding: 10px; 
		}

/*------- mini icons from dryicons.com -------*/

/*-- entry security icons --*/

.subject img {
		vertical-align: middle !important;
		}

img[src*="locked.png"] { 
		width: 0;  
		height: 0; 
		padding: 18px 18px 0px 0px !important; 
		background: transparent url(http://i34.tinypic.com/v5zklz.png) no-repeat scroll 0 0; 
		}

img[src*="filtered.png"] { 
		width: 0;  
		height: 0; 
		padding: 18px 18px 0px 0px !important; 
		background: transparent url(http://i34.tinypic.com/v5zklz.png) no-repeat scroll 0 0; 
		}

img[src*="private.png"] { 
		width: 0;  
		height: 0; 
		padding: 18px 18px 0px 0px !important; 
		background: transparent url(http://i35.tinypic.com/2mqroux.png) no-repeat scroll 0 0; 
		}

/*--- contextual pop-up ---*/

div.ContextualPopup {
		margin: auto;
 		text-align: left; 
		width: 300px;
		text-transform: uppercase;
		font-family: Tahoma, Arial, sans-serif;
		}

div.ContextualPopup div.Inner {
		background-color: #FFFFFF; 	
		color: #757575!important;
		border: 1px solid #d1d1d1;
		}

div.ContextualPopup .Userpic {
		padding: 5px;
		margin:  5px;
		background-color: #f5f5f5;
		border: 1px solid #d1d1d1;
		}

div.ContextualPopup .Content {
		background-color: #FFFFFF; 
		border: 0px solid #757575;
		margin: auto;
		}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:link {
		text-decoration: none !important;
		color: #7B98C1!important;
		}

div.ContextualPopup .Relation {
		text-transform: uppercase;
		color: #757575;
		}

/*--- navigation bar ---*/

table#lj_controlstrip td {
		background-color: #FFFFFF; 
		border: 1px solid #d1d1d1;
		color: #5f5f5f;
		text-transform: uppercase;
		font-family: Tahoma, Arial, sans-serif;
		}

#lj_controlstrip input {
		background-color: #FFFFFF;
		padding: 0px 5px 0px 5px;
		color: #5f5f5f;
		text-transform: uppercase;
		border: 1px solid #d1d1d1;
		}

#lj_controlstrip a  {
		color: #7B98C1;
		}

ETA:

Fixed with:

.userpic {
min-width: 120px;
}

Thanks to all who offered suggestions :)

Flat | Top-Level Comments Only

From:

tyger

I think it's because feeds don't have icons - since the icons are also floated to the right I think the usernames are kind of stacking next to them? But since the feeds don't have icons there's nothing taking up that space.

I'm not anything like an expert, though - try posting something without an icon to check, maybe? And I don't know how to fix it, either. =/ Maybe absolute positioning, using the top right corner of the username as the focus point?

timeasmymeasure

I suspected that might be it but wasn't sure how to fix it myself. I think the comments below might do something about that though. Thanks for your feedback :)

^^; No problem!

ninetydegrees

Maybe with:

.userpic {
min-width: 120px;
}

Edit: not sure it's not gonna cause issues with non-standard icons, though.

Edited Date: 2011-08-31 10:12 am (UTC)

Thanks, as always :)
I'll try it and let you know :)

ETA: PERFECT FIX!
Thanks =D

Edited Date: 2011-09-01 03:07 am (UTC)

afuna

Depending on whether you want to affect just feeds, or all entries that have no icon, I would suggest one of these two options:

.entry-wrapper.journal-type-Y .userpic { width: 120px;}
.entry-wrapper.no-userpic .userpic { width: 120px; }

ETA: Actually, I think that

ninetydegree's comment is going to work better for icons that are smaller than 100px.

Edited (noticed other comments) Date: 2011-08-31 11:06 am (UTC)

Thanks for this!
I think it'll work :)

Dreamwidth style system discussion

Feed Username

Feed Username

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Profile

October 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags