LiveJournal's S2 Styles

Recent Entries

Customize

Dec 16th, 2009 - 06:04 pm - New Code for Contextual Popup Link Color

easteden

Hey! This is not really a question, but I hope it's allowed nonetheless...

I just wanted to inform you that the usual css code for the Contextual Popup links does not work anymore. Instead you now have to use the following code for the link colors. :)

--> div.ContextualPopup div.Inner div.Content a <--

Feel free to delete if that has already been posted.

Current Tags:customization

Dec 8th, 2009 - 11:45 am - Sidebar on left?

destroyah_des

My style is based on Flexible Squares and I nearly have it the way I want it. I'd appreciate if someone could help me.

I'm quite happy that I've changed my layout to a Christmas theme. It looks very nice but I'm wondering if there is a way to get the sidebar on the left side so pictures don't get pushed under it?
Here is my layer.

http://www.livejournal.com/customize/advanced/layerbrowse.bml?id=18365243

Can you tell me exactly where I have to put this code? I've been given so many codes I'm not sure which are which. Thanks.

Dec 4th, 2009 - 12:09 am - Questions from a newb...

hanachan01

Okay, these questions may sound kind of dumb, but this my first time working with CCS. I'm editing this style based off of Flexible Squares, and what I've done so far can be seen at my journal, which is what I am editing.

Anyways, five questions:

1. That bar at the top, where it says "You are viewing _____'s journal"- what is it called? Also, how can I change the colors of it in CCS where I retain the gradient effect? I've done it using LJ's editor before and I liked the effect.

2. How can I change the little user symbol (you know, the one with the bald white head and blue shoulders) into my own image? And is there any technical specs I need to know so I don't attempt to use an image that doesn't work?

3. My previous style (Three Columns is what I believe the name was) had it so that next to the person's username was their "name", in both entries and comments. My current one does not. Is there an override I can use so that the names show up in this one?

4. Currently, my comment space looks like this. Is there any way to change it so that the comments are in a yellow box, similar to my entries?

5. Is there an override so I get Link/Edit/Memories/Tell a Friend/Track Comments links?

Current Tags:customization, layout:flexible squares, question
Current Location:Dorm
Current Mood:frustrated
Current Music:"Gacha Gacha CUTE Figure @ KAITO" by KAITO

Dec 1st, 2009 - 04:48 pm - topbar issues in internet explorer (screenshots)

tribulation

Topbar in firefox (correct)

Topbar in internet explorer (incorrect)

Anyone know how I can get the default userpic in my topbar probably aligned in Internet Explorer?

/* stylesheet by morirvivo@estiloamor */

body {
background:#eeeeee;

background-image: url(http://i39.tinypic.com/mja5x2.png);
background-attachment: fixed;
        text-align: center;
        color: #fff;
        font-family: arial;
        font-size: 10px;
        margin: 20px;
        line-height: 150%
        }

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

a:hover {
        color: #ccc;
        text-decoration: none;
        }

b, i, s, u, emphasise, abbr, strong, strike { color: #444;}

blockquote {
            font-size: 11px;
            color: #444;
            background-image:url(http://i44.tinypic.com/m80az7.png);
            border: #eee dotted 1px; 
            padding: 10px;
            font-family: courier new;
            
        }

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

#content
    {
        margin: auto;
        background-image: url(); background-attachment: scroll; 
width: 100%;
margin-right: auto:
margin-left: auto;

}

#maincontent {
        width: 650px;
        text-align: left;
margin-left: auto;
margin-right: auto;

}

#sidebar {		
        padding: 10px 0 5px 0;
        width: 650px;
margin-left: auto;
margin-right: auto;		
        color: #fff;
        text-align: justify;
	font-family: courier new;
	font-size: 10px;
        text-transform: none;
        letter-spacing: 1px;	
	background-image:url(http://i42.tinypic.com/286v53.png);	
}

#header {	
                padding: 10px 0px 10px 0px;	
		width: 650px;
		margin-left: auto;
margin-right: auto;
font-style:italic;
		text-align: right;
		font-family: georgia;
		font-size: 9px;
                text-transform: lowercase;
		font-weight: lighter;
		color: #444;	
display: block;

}

div#header li.view, div#footer li.viewing { 	margin-left: 8px; margin-right: 8px; padding:15px 0px 0px 0px; color: #88aeb9; font-style: italics;}

#footer {

padding: 40px 0;
		text-align: center;
		font-family: courier new;
		font-weight: normal;
		letter-spacing: 1px;
	background-image:url(http://i42.tinypic.com/286v53.png);
		color: #E6AC98;
		z-index: 100;
		clear: both;
width:650px;
margin-left:auto;
margin-right:auto;

}

/* header -- links to views; title of journal; subtitle of journal */

div#header a, div#header a:link, div#header a:visited {
        color: #637e86;
        padding: 10px;
        margin-left:-12px;
        background-color: ;
        text-decoration: none;
        border-left:#F8EDCE 0px solid;
    }

div#footer a:hover {
}

div#footer a, div#footer a:link, div#footer a:visited {
		color: #333;
		text-align: right;
	}

div#header a:hover{
        border-top: 1px #97927f dotted;
        text-decoration: none;
    }

ul.navheader
        {
        padding: 0px;
        display: inline;
        margin: 0px;
        }

ul.navheader li  {
        display: inline;
        padding-bottom: 0px;
        margin: 2px 2px 2px 2px;
        }

.title {display: none;}
.subtitle{ display:none;}

/* sidebar */ 	
			
	div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
		color:;
	}
	
	div#sidebar a:hover {
		color:;

}
	
	.defaultuserpic { position:absolute;

display: block; padding:10px; text-align:center; margin-left: 20px; margin-top:20px; background:#fff;}
.defaultuserpic img {padding: 15px 15px 10px 5px;  border: 0px; margin: 0px 0 10px 10px; width: 60px; height: 60px; float: left; }

}

.sbarheader {
		padding: 0 5px 0 5px;
		}
	
	.sbarbody {
		padding: 0 5px 0 5px;	
		}
	
	.sbarbody2 { 
                font-family: times new roman;
                margin-left: 150px; 
                width:450px;
                margin-right: auto;
                padding:10px 7px 7px 15px;
}
			
	table.calendar {
		margin-right: auto;
		margin-left: auto;
		display: none;
		}

.sbarcalendarposts { 
        padding: 3px; 
        border: 1px solid #f0f0f0; 
        background: #f7f7f7; 
        text-align: center; 
              }

ul.sbarlist
	{
display: block;
		padding-left: 0; 
margin-left: auto;
margin-right: auto;
width: auto; 
		margin-left: 15px;

}

li.sbaritem
	{
                border-right: 1px solid #2c393c;
                border-bottom:#2c393c solid 1px;
		padding: 5px;
		list-style: none;
		text-align: left;
width: 500px;
margin-left:1px;
		text-transform: uppercase;
                display: inline;
                background:#435055;
                
	}
		
 
	li.sbartitle
	{
		display: none;

}

#sidebar_linklist  
        { 
         font-family: times new roman; 
         font-size:8px;
         text-align: left;
         padding:2px 0px;
        
         }
#sidebar_summary { display:none;} 
#sidebar_calendar {display:none;} 
#sidebar_tags {display:none;}

/* maincontent */

.subcontent { 
                padding: 0px;
                margin-top: 8px;
                margin-left: auto;
                margin-right: auto;
                position: relative;

}

.entry { 
background: #fff;
         padding: 30px;
padding-top:15px;
margin-bottom: -40px;
text-align: justify;

}
    .entry_text { 
        font-family: arial;
        font-size: 10px;
color: #000000;
}

.entry ul li, ol li, li
		{
                padding-left: 5px; 
                margin-left: 0; 
                list-style: decimal-leading-zero; 
                list-style-position: inside;
		}
		
        hr {

height: 1px; 
                background-color: #ffffff; 
                border-bottom: 1px solid #ccc; }

.userpic {
		padding: 5px;
		z-index: 15;   
                border: 1px solid #f7f7f7;
		background: #fff;
display: block; float: right; margin:30px 30px 10px 20px; position: relative;

}

.userpicfriends { 
                position: relative;
		float: right;
padding:5px;
margin:30px 30px 10px 20px;
		z-index: 15;   
		background: #fff!important;
border:1px solid #f7f7f7;
-moz-border-radius: 0 0 15px 15px;}
		
.userpicfriends font { color: #333!important;}
.userpic font { color: #333!important;}

.userpicfriends img {
width:70px;
height:70px;
}
.userpic img {
width:70px;
height:70px;
}
	.date { 
               text-transform: uppercase; 
               color: #aaaaaa; 
               font-family:Helvetica;
               font-size: 10px; 
padding-left: 15px;
               letter-spacing: 1px; 
               word-spacing: 0px;}
    .subject { 
                color: #999; 
                background-color: transparent;
                padding-left: 15px; 
               font-family: "georgia", arial, sans-serif;
font-size: 12pt;
                text-transform: none; 
                line-height: 100%;

}
.subject a, .subject a:link, .subject a:visited {text-decoration: bold; color: #999;}

.datesubject {
        text-align: right;
        background-image: url();
        background: #fff;
        padding-top: 30px;
padding-left:15px;
        padding-right:30px;
        }

.ljtags { 
margin-top: -15px; 
color: #5e5656; 
text-transform: lowercase; 
font-weight: bold;
}

.currents, .currentmood, .currentmusic, .currentlocation {
font-family: verdana;
font-size: 7.5pt;
color:#353535;
}

.currents strong, .currentmood strong, .currentmusic strong .currentlocation strong, .ljtags strong { 
color: #5e5656; 
font-weight: bold; 
text-transform: lowercase;
margin-top: 0px;   
font-size: 7pt;
}

margin-left: 0px;
margin-bottom: -5px;}
	    
	.ljtags a, .ljtags a:link, .ljtags a:hover, .ljtags a:visited { 
	    color: #ccc; 
	    text-transform: lowercase; 
	    font-weight: bold;  }

.currents, .currentmood, .currentmusic {
		font-size: 7.5pt;
                margin-left: 0px;
                line-spacing: -1px;
		font-weight: lighter;
		color: #ccc;
		text-transform: lowercase;
		}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited { 
        color: #ccc; 
	    font-weight: bold; 
        text-transform: lowercase; 
        }

.currentlocation a:hover, .ljtags a:hover { 
        color: #504F4F; 
        font-weight: bold; 
        text-transform: lowercase;
         }

.comments {
text-transform: lowercase;
margin-top: 12px;
font-family: georgia;
		font-size: 12px;
                color: #858585;
		text-align: right;
		padding: -15px;
padding-top: 10px;
		position: relative;
		}

div.comments a, div.comments a:link, div.comments a:visited{
		color:#858585;
	}
	
	div.comments a:hover { color:; }

/* maincontent --  entry, reply pages */

.datesubjectcomment {
            background-color: #fff;
            padding: 5px;
            margin-top: 20px;
            color:#444;
            }

.userpiccomment {
        position: relative;
        border: 5px solid #fff;
        background-color: #ffffff;
        top: -30px;
        left: 0px;
        padding: 5px;
        margin: 10px 10px -20px 10px;
        z-index: 15;
        float: left;
        border: 5px solid #fff;
        }

.box {
        border: #eee 1px solid;
        background-color: #ffffff;
        padding: 10px;
        clear: left;
        }

input, textarea {
        background-color: #ffffff;
        color: #000000;
        }

textarea.textbox  {
          width: 90% !important;
          background-color: #ffffff;
           }

.reply    {
        position: relative;
        margin: 20px 30px 10px 30px;
        padding: 25px 10px 10px 10px;
        text-align: left;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        line-height: 125%;
        background-color: #ffffff;
        color: #000000;
        }

.replytosubject {
        font-weight: bold;
        background-color: #ffffff;
        }

.commentreply {
        background-color: #ffffff;
        position: relative;
        margin: 10px;
        font-size: 11px;
        font-family: arial ;
        color: #444;
        }

.commentbox {

border-color: #ffffff;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #ffffff;
        }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
        color: #444;
        }

.datesubjectcomment a:hover {
        color: #000000;
        }

.commentboxpartial {
        border-color: #ffffff;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #ffffff;
        }

.commentinfo {
        background-color: #ffffff;
        margin-top: 10px;
        width: 100%;
        color:#444;
        }

/* maincontent -- year/achive pages */
		
	ul.year {
		text-align: center; 
		padding: 20px 0 20px 0; 
		}
	
	ul.year li {
		display: inline;	
                color:#444;	
		}
	
	table.yeartable {
		margin-left: auto; 
		margin-right: auto; 
		padding: 8px; 
		border: 0px solid #fff; 
		background: #fff;
color:#444;		}
	
	table.yeartable td.yeardate, table.yeartable td.yearday {
		}
	
	table.yeartable td.yearday {
		background-color: #fff;
		text-align: center;
		}
	
	td.yearmonth {
		border-style: none;
		}

/* footer */

ul.navfooter{
        padding: 0px;
        margin: 0px;
        }

ul.navfooter li  {
        padding: 10px;
        display: inline;
        margin: 0 5px 0 5px;
        }

.clearfoot {
        clear: both;
        }

/* misc  */

.clear {
        height: 15px;
        }

.skiplinks {
        background-color: transparent;
        margin: 30px 0px -15px 0px;
        margin-top: 10px;
        padding-left: 3px;
        text-align: center;
        color: transparent;
        text-transform: lowercase;
        }

.headerimage {
        /* for formatting header image */
        }

.separator{
        /* for formatting separators between entries */
        height: 15px;
    }

* html div.subcontent {
        /* fixes an IE reply page bug */
        height: 1%;
        clear: none;
    }

* html div.box#commentform {
        /* fixes an IE reply page bug */
        position: absolute;
        border-width: 1px;
        border-style: solid;
        border-color: #ffffff;
        background-color: #fff;
    }
    
#footer .viewing { color: #BFBFBF; }

/*--- MAKING ALL IMAGES SEE-THROUGH ON HOVER ---*/

img:hover {
	filter: alpha(opacity=70);
	moz-opacity: .70;
	opacity: .70;
	}

span.ljuser a b { font-weight: lighter; padding: 2px 0 2px 0; color: #ccc ; background:#transparent; }

span.ljuser a:hover { font-weight: lighter; padding-top: 2px; padding-bottom: 2px; color: #f0f0f0;  }

/*----------------------------------------------------
 Tiny Icons
----------------------------------------------------------------*/

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
		width: 0;
		height: 0;
		padding: 16px 16px 0px 0px;
		background: url(http://i40.tinypic.com/29fw1uh.png);
		}

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
		width: 0;
		height: 0;
		padding: 16px 16px 0px 0px;
		background: url(http://i39.tinypic.com/2uypsec.png);
		}

.ljuser img {
		width: 0;
		height: 0;
		background-repeat: no-repeat;
		background-color: transparent;
		background-image: url(http://i40.tinypic.com/2801p2x.png);
		padding: 16px 17px 2px 2px !important;
		}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
		background-color:transparent;
  		background-image: url(http://i47.tinypic.com/33cni2c.png)!important;
background-repeat: no-repeat!important;
  		padding: 19px 15px 0 2px!important;
		}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
		background-color:transparent;
 		background-image: url(http://i45.tinypic.com/10ejygk.png)!important;
background-repeat: no-repeat!important;
 		padding: 16px 16px 0 2px;
		}

img[src="http://l-stat.livejournal.com/img/btn_del.gif"] {
          height: 0px;
          width: 0px;
          padding: 0px 0px 16px 16px !important;
          background: url(http://i43.tinypic.com/2w74r2u.png);
          }

img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] {
          height: 0px;
          width: 0px;
          padding: 0px 0px 16px 16px !important;
          background: url(http://i32.tinypic.com/11i27oz.png);
          }

img[src="http://l-stat.livejournal.com/img/btn_unscr.gif"] {
          height: 0px;
          width: 0px;
          padding: 0px 0px 16px 16px !important;
          background: url(http://i27.tinypic.com/vxgnll.png);
          }

img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] {
          height: 0px;
          width: 0px;
          padding: 0px 0px 16px 16px !important;
          background: url(http://i32.tinypic.com/2uqgius.png);
          }

img[src="http://l-stat.livejournal.com/img/btn_unfreeze.gif"] {
          height: 0px;
          width: 0px;
          padding: 0px 0px 16px 16px !important;
          background: url(http://i29.tinypic.com/o8ewz8.png);
          }

img[src="http://l-stat.livejournal.com/img/btn_track.gif"] {
          height: 0px;
          width: 0px;
          padding: 0px 0px 16px 16px !important;
          background: url(http://i32.tinypic.com/23jjs5s.png);
          }

Here's my css, flexible squares layout with paid account. Thanks!

Current Mood:frustrated

Nov 14th, 2009 - 11:19 am - I have 2 questions regarding FlexiSquares layout

danfan74

I've been searching everywhere and haven't found anything. Hopefully someone can help.

1. How do I add pics to the sides of the journal? There's a LOT of space under my sidebar and I wondered if I could add pics there or if they have to be in the sidebar. If so, how do I do that?

2. One person, who also uses FlexiSquares, tried to show me how to accomplish the photos in the sidebar but I didn't have what she had on hers. She said to go to 'Customize Journal'. Go to 'Sidebars' and find the big box at the bottom with 'Body of Custom Sidebar Module' beside it. Paste the HTML code of pic inside box. Problem is, I don't have that box under Sidebars. Are all FlexiSqares layouts not the same?

I have a Paid account. I'm using FlexiSquares: Eclipse.

PLEASE can anyone help? I know NOTHING about this stuff, codes, etc.

Thanks.

Nov 7th, 2009 - 04:52 pm - 2 questions about FlexiSquares

ancient_immie

I'm one of the mods of

phoenixfndrpg. And I had a few questions about tweaking a few things in our S2FlexiSquares layout.

[1]Can I include a picture in my links list next to my link? (Example: [image] Link)

[2] Is there a way I can add another box to my sidebar?

Its been awhile since I fussed with FlexiSquares. I'm functional in HTML and CSS.

Feel free to point me to any tutorials/guides/how tos.

Thanks for you help ahead of time.

Current Tags:customization, layout:flexible squares
Current Mood:curious

Oct 28th, 2009 - 06:07 pm - Smooth Sailing

lovesrogue36

I'm working in a custom layout for a community I co-mod,

eastwick_fic . The layout works just fine and I have everything where it should be except the sidebox is cutting through my banner. It should be placed below the navigation bar but when I put in the pixel height of my banner, it moved the sidebox up. The sidebox position is at absolute; I changed it to both top and bottom but that only messed up the layout. How do I fix this?

Current Tags:custom layout, layout:smooth sailing

Oct 7th, 2009 - 03:44 pm - Pictures in Sidebar?

watilicious

Hi all, I'm using the S2 Tranquility layout and would very much need your help!!!

How do I put pictures into my sidebar??? Linkable or not linkable, doesn't matter. I've read through almost every page and question in this community but nothing seems to help. Please help? I would like to put in my facebook badge or a page counter if possible.

Oct 5th, 2009 - 03:51 pm - need help with header image override.

natila

I just changed my LJ to "FLEUR" and I wanted to get rid of the flowery header image and replace it with one of my own.
I entered the following code that I found on "S2 Howto Journal"

#header-inner {
background-image: url("http://www.boomspeed.com/natila/yazooheader.jpg");
height: 300px;
}

#header-content-inner {
background-image: none;

}

in the custom stylesheet and it doesnt work.
Does anybody know what I am doing wrong ? (I am a complete dummie when it comes to CSS by the way)

Sep 27th, 2009 - 12:35 pm - Displaying tags on month view?

sineala

Hi. I'm currently in the process of trying to back-tag my four thousand entries, and for reasons unknown to me, the prev/next buttons have been skipping entries on me, meaning that my journal is now rather haphazardly tagged. I am in search of an easier way to see what entries have/haven't been tagged than the day/entry view. One of my friends said she thought there might be styles that would print tags on the month view. Are there? If this is possible, that would be great.

I found a post about how to turn the calendar view into a tags view, but that isn't quite what I want, I think. I want the calendar as-is, but the month view to print the tags used somewhere next to the entry names/security levels. Basically, I just want to see what I haven't tagged without having to click through eight years. Again.

I have a paid account, and I currently use Expressive, but I am more than willing to switch to any other style to get this done. Thanks!

Current Tags:code overrides, question
Current Mood:curious

This page was loaded Dec 23rd 2009, 11:54 pm GMT.

Advertisement