style_system | Metadata

I'm back with yet another question. I feel like I am spamming this community... My sincere apologies.

I would like to seperate my currents (the tags to be specific) with a comma. Right now, there's just a blank space, which is a little confusing. However, I don't know what to edit in my CSS. Any help is greatly appreciated.

Here's my CSS.

*---------------------------------------------------
CREDIT:
http://community.livejournal.com/beatcrusher/
http://community.livejournal.com/kuribati/
(don't remove this area)
-----------------------------------------------------*/

/*-------------------- BODY --------------------*/
    
body    {
background: #FFFFFF url(http://i25.tinypic.com/339iz4w.jpg) top left repeat scroll;
margin: 20px 0 20px 20px;
}

body, td, th {
font: normal 11px/1.5 "Verdana", sans-serif;
color: #777777;
text-align:justify;
}

/*-------------------- LINKS, HOVER, BLOCKQUOTE, CODE --------------------*/
    
a, a:link, a:visited {
color: #69C9C8;
text-decoration: none;
}
    
a:hover {
color: #8BDFDD;
text-decoration: none;
}
    
blockquote {
border:1px solid #CCCCCC;
padding:25px;
color: #AAAAAA;
}

blockquote:hover{
border-color:#8BDFDD;
}
        
code {
font-family: monospace;
}

input, textarea, select {
background-color: #3F3833;
font: normal 10px "Verdana", sans-serif;
color: #FFFFFF;
border:0;
}

/*-------------------- GENERAL PAGE ALIGNMENT --------------------*/
        
#content{      
width: 70%;
margin-left: auto; 
min-width: 850px;
margin-right: auto;                
}

#maincontent {         
margin-top: 15px;
background-color: #FAFAFA;
-moz-border-radius: 1%;
-moz-box-shadow: 0 0 20px #AAAAAA;
margin-left: 260px;
}
    
#sidebar {    
padding: 15px;
margin-top: 15px;
background-color: #2F2823;
width: 200px;
float: left;
-moz-border-radius: 2%;
-moz-box-shadow: 0 0 20px #888888;
color: #BBBBBB;
}

/*-------------------- HEADER AND FOOTER !!NO HEADERIMAGE --------------------*/

#header {        
width: 100%;
padding: 30px 0 0 0;
margin: 0px;
text-align: right;
font: italic normal 20px "Garamond", sans-serif;
text-transform:lowercase;
letter-spacing:-1px;    
color: #777777;
}

#footer {            
width: 100%;
text-align: right;
text-transform:uppercase;
z-index: 100;
clear: both;
}

/*-------------------- LINKS OF THE HEADER AND FOOTER --------------------*/
        
    
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #AAAAAA;
}
    
div#header a:hover, div#footer a:hover {
text-decoration: none;
}    
    
ul.navheader {    
padding: 0px;    
margin: 0px;
}
    
ul.navheader li  {
display: inline;            
padding: 0 0px 0 5px;
}

/*-------------------- TITLE AND SUBTITLE --------------------*/

.title, .subtitle    {    
display:none;
}

/*-------------------- ALIGNMENT OF THE SIDEBAR - DEFAULT USERPIC AND BODY --------------------*/
    
.defaultuserpic {
text-align: center;
}

.defaultuserpic img {
border:10px solid #3F3833;
}
    
.sbarbody {
padding: 0px 5px 0px 5px;        
}
    
.sbarbody2 {
padding: 0 5px 0 5px;
}

/*-------------------- CALENDAR OF THE SIDEBAR --------------------*/
            
table.calendar {
margin-right: auto;
margin-left: auto;
}
        
.sbarcalendar {
text-align: center;
}

td.sbarcalendar {
padding:0 20px 10px 0;
}
    
.sbarcalendarposts {
background-color: #3F3833;
}

/*-------------------- LOOK OF THE LINKS-LIST-BODY IN THE SIDEBAR --------------------*/
        
.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

/*-------------------- LOOK OF THE LINKS IN THE LINK-LIST IN THE SIDEBAR --------------------*/

li.sbaritem {
list-style: none;
border-bottom: 1px solid #3F3833;
padding: 5px 0;        
}

/*-------------------- TITLES IN THE SIDEBAR --------------------*/

li.sbartitle {
list-style: none;
text-align:right;
color:#3F3833;
text-transform:uppercase;
padding: 10px 0 0 0;
margin: 0 0 -5px 0;
}

/*-------------------- MAINCONTENT --------------------*/    
    
.subcontent {        
}

/*-------------------- ENTRY, ENTRY-LISTS --------------------*/
        
.entry {
margin: 0px 20px 10px 20px;
padding: 10px;
}

.entry_text img {
max-width:420px;
height:auto;
border: 1px solid #EEEEEE;
padding:1px;
}
        
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
        
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}

/*-------------------- USERPIC, USERPICFRIENDS --------------------*/

.userpic, .userpicfriends {
position: relative;
float: left;
background-color: transparent!important;
padding: 5px;
margin: 10px;
z-index: 15;
text-align:center;
}

.userpic img, .userpicfriends img{
border:10px solid #3F3833;
margin: 0 0 5px 0;
}

.userpic a, .userpicfriends a, .userpic font, .userpicfriends font{
color:#AAAAAA;
text-transform:uppercase;
font-size:8px;
}

/*-------------------- DATE AND SUBJECT --------------------*/
        
.date {            
color: #CCCCCC;
text-transform:lowercase;
}
    
.subject, .subject a {        
text-transform:uppercase;
color: #69C9C8;
}

.datesubject {                
padding: 15px 5px 0 5px;
}

/*-------------------- TAGS AND TAGS-PAGE --------------------*/
.ljtags { 
margin: 20px 0 0 0;
font-size:0;
border-left:10px solid #3F3833;
padding: 0 0 0 10px;
}

.ljtags a {
font-size:10px;
margin: 0 5px 0 0;
}

h2 { 
padding: 20px 0 0 20px;
margin:0;
font: bold 10px "Verdana", sans-serif;
text-transform:uppercase;
color:#69C9C8;
}

.ljtaglist { 
list-style-type:none;
padding: 0 20px 20px 20px;
}

.ljtaglist li {
padding: 3px 0;
border-bottom: 1px solid #EEEEEE;
}

/*-------------------- CURRENT MOOD, CURRENT MUSIC AND CURRENT LOCATION --------------------*/
        
.currents {
margin: -30px 0 0 0;
color: #CCCCCC;
}

.currents strong {
display:none;
}

.currentmusic {
border-left:10px solid #69C9C8;
padding: 0 0 0 10px;
}

.currentmood {
border-left:10px solid #3F3833;
padding: 0 0 0 10px;
}

.currentlocation {
border-left:10px solid #69C9C8;
padding: 0 0 0 10px;
}

/*-------------------- COMMENTS !!NOT THE COMMENT-PAGE --------------------*/

.comments {
text-align: center;
position: relative;
top: 15px;
font-size:0;
}

.comments a {
font-size:10px;
display:block;
float:right;
background-color:#3F3833;
width:50px;
color:#FFFFFF;
padding: 3px 5px;
margin: 0 0 2px 0;
text-transform:uppercase;
margin: 0 0 0 5px;
-moz-border-radius: 5%;
}

.comments a[href$="reply"] {
background-color:#69C9C8;
}
        
/*-------------------- COMMENT-PAGE --------------------*/    
    
.datesubjectcomment {                
padding: 5px;
margin-top: 20px;
}    
        
.userpiccomment {
position: relative;
top: -30px;
left: 0px;
border: 10px solid #69C9C8;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
        
.box {
padding: 10px;
clear: left;
}
        
textarea.textbox  {
width: 100% !important;
   }
    
.reply    {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
}
        
.replytosubject {
font-weight: bold;
}
            
        
.commentreply {
position: relative;
margin: 10px;
}
        
.commentbox { 
padding: 10px; 
margin: 10px;
border: 1px solid #EEEEEE;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
}
        
.datesubjectcomment a:hover {
}
    
.commentboxpartial {
padding: 10px; 
margin: 10px; 
}

.commentinfo {
margin-top: 10px; 
width: 100%;
}

/*-------------------- ARCHIVE PAGE --------------------*/
        
ul.year {
text-align: center;
padding-bottom: 40px;
}
    
ul.year li {
display: inline;        
}
    
table.yeartable {
margin-left: auto;
margin-right: auto;
}
    
table.yeartable td.yeardate, table.yeartable td.yearday {
padding:10px;
border:1px solid #EEEEEE;
}
    
table.yeartable td.yearday {
background-color: #69C9C8;
text-align: center;
color: #FFFFFF;
}
    
td.yearmonth {
border-style: none;
}
    
        
/*-------------------- FOOTER --------------------*/
        
ul.navfooter{
padding: 0px;    
margin: 0px;
}
    
ul.navfooter li  {
display: inline;    
margin: 0 5px 0 5px;
}

.clearfoot {        
clear: both;
}
        
        
/*-------------------- MISC; CLEAR, SEPARATOR AND SKIPLINKS --------------------*/
                
.clear {        
height: 15px;
}
        
.skiplinks {
text-align: center;
text-transform:uppercase;
}

.separator{
height: 35px;
}

form#qrform table {
border-width: 0px !important; 
}

/*-------------------- HEADERIMAGE --------------------*/

.headerimage {
position: relative;
width:  000px; 
height: 000px; 
margin-left: auto; 
margin-right: auto;     
background-image: url("");
background-repeat: no-repeat;
}

/*-------------------- LJ-USERS, TINY ICONS --------------------*/

.ljuser img[src*="http://s.dreamwidth.org/img/silk/identity/user.png"] {
width: 0;
height: 0;
background-repeat: no-repeat !important;
background-image: url(http://i29.tinypic.com/2yweh42.gif) !important;
padding: 13px 10px 0 0 !important;
text-decoration: none;
}

.ljuser img[src*="community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat !important;
background-image: url(http://i26.tinypic.com/ejvjuu.gif) !important;
padding: 10px 10px 0 0 !important;
text-decoration: none;
}

img[src*="icon_protected.gif"]  {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://members.ziggo.nl/droomers/LiveJournal/Layout/Mini%20icons/Pin.gif) !important;
padding: 9px 11px 0 0 !important;
text-decoration: none;
}

img[src*="http://s.dreamwidth.org/img/silk/entry/locked.png"]  {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i29.tinypic.com/1zmnio4.gif);
padding: 9px 11px 0 0 !important;
text-decoration: none;
}

.ljcmt, .commentbox img[src*="btn_del.gif"] { 
width:0; 
height:0; 
padding: 0 18px 18px 0; 
background: url(http://i43.tinypic.com/1zefg4l.png) no-repeat; 
}

.ljcmt, .commentbox img[src*="btn_scr.gif"]{ 
width:0; 
height: 0; 
padding: 0 17px 17px 0; 
background: url(http://i43.tinypic.com/11ugigy.png) no-repeat; 
}

.ljcmt, .commentbox img[src*="btn_unscr.gif"]{ 
width:0; 
height: 0; 
padding: 0 17px 17px 0; 
background: url(http://i46.tinypic.com/ilvwc6.png) no-repeat; 
}

.ljcmt, .commentbox img[src*="btn_freeze.gif"] { 
width: 0; 
height: 0; 
padding: 0 17px 17px 0; 
background: url(http://i40.tinypic.com/28lvp02.png) no-repeat; 
}

.ljcmt, .commentbox img[src*="btn_unfreeze.gif"] { 
width: 0; 
height: 0; 
padding: 0 17px 17px 0; 
background: url(http://i39.tinypic.com/35mp9jm.png) no-repeat; 
}

.ljcmt, .commentbox img[src*="btn_edit.gif"] { 
width: 0; 
height: 0; 
padding: 0 17px 17px 0; 
background: url(http://i41.tinypic.com/2coq7f7.png) no-repeat; 
}

.ljcmt, .commentbox img[src*="btn_track.gif"]{ 
width: 0; 
height: 0; 
padding: 0 17px 17px 0;
background: url(http://i42.tinypic.com/fd63rc.png) no-repeat; 
}

.box img[src*="anonymous.gif"]{ 
width: 0; 
height: 0; 
padding: 0 17px 17px 0;
background: url(http://i44.tinypic.com/2hmk2gl.png) no-repeat; 
}

.box img[src*="openid-profile.gif"]{ 
width: 0; 
height: 0; 
padding: 0 17px 17px 0;
background: url(http://i44.tinypic.com/bi2e6e.png) no-repeat; 
}

.box img[src*="help.gif"]{ 
width: 0; 
height: 0; 
padding: 0 17px 17px 0;
background: url(http://i39.tinypic.com/10cn1vb.png) no-repeat; 
}

img[src*="userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url('http://i41.tinypic.com/vygoy.png');
padding: 17px 15px 0 0 !important;
text-decoration: none;
}

/*----------------------- CONTEXTUAL POP-UP ---------------------*/

div.ContextualPopup div.Inner {
padding: 2px 2px 0px 2px !important;
background-color: #ffffff;
font-family: "Verdana", sans-serif;
color: #999999 !important;
font-size: 10px;
border: 0px;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:active {
color: #69C9C8 !important;
font-weight: normal;
text-decoration: none !important;
}

div.ContextualPopup .Relation {
color: #666666;
font-weight: normal !important;
border-bottom: 1px dashed #dddddd;
text-transform:uppercase;
}

Flat | Top-Level Comments Only

Try adding .ljtags :after{ content: ","; }

It looks like you are using a custom layout layer. If you feel comfortable editing it, I suggest pasting the following statement in propgroup text {}:
property use text_tags_item_sep;

This will allow you to set the tag separator using the customization wizard.

I have very little knowledge of CSS and custom layers, so I don't feel comfortable editing it. Plus I don't know exactly what the customization wizard is... :(

Here's the customization wizard: http://www.dreamwidth.org/customize/options
Text, colors, fonts, positioning and other things can be customized here.

If you don't feel comfortable editing your layout layer, then I recommend pasting

jana's code into you css. Easy as pie.

I think I'll try editing my CSS first. Although I am don't really know what to add where. I'm not sure what is meant by { content: ","; }.

What

jana meant was to add .ljtags :after { content: ","; } to your css. It adds a comma to your tags. That's what content: ","; means. If you want to use another separator, you replace the comma with the separator you want to use instead. You can add the code anywhere in your css, but if you'd like to keep things organized I recommend adding it to the section that says "TAGS AND TAGS-PAGE".

Consider me a major noob regarding CSS... *blushes*

Adding the code to my CSS worked like a charm, thank you very much for your help! :)

No problem! Glad it worked out for you.

Metadata

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject