Fuesch's graphics & layouts

House Rules

~~Driver picks the music, shotgun shuts his cakehole.~~

Everything is snaggable - no need to ask.

Please credit.
<lj user=fuesch>

Comments are great.

Nominations are awesome.

If you find a typo, please let me know!

If you'd like a graphic customized, just ask - please don't edit it yourself.

I don't mind if you adjust layouts a bit.

Got a question? Don't be afraid to ask. But keep it on topic.

If your question/comment doesn't fit into any entry, please send me a message.

Tags

August 2024

Previous | Memories | Tell Someone | Next

fuesch

30 March 2011 @ 01:09 am

Be the First to Know layout and matching profile layout

You know how fast social network sites can be, sometimes you've read something there before it's on the news.
This layout was inspired by this CNN logo, which reminded me of an LJ entry subject with an icon next to it. So I made a layout from it and just knew I wouldn't get it finished before they changed their logo.

Edit (March 16, 2016): Profile layout edited, because the cellpadding attribute isn't supported in HTML5.

Be the First to Know

Click here for live preview, then click on the layout's icon.

info

based on Flexible Squares
works for all account types
tested in Firefox 3, Google Chrome 9 and Internet Explorer 8 (the latter is doing it wrong on the view subjects and tag pages, though)

how to

Go to the Customize Journal page.

Make sure Style System is S2.

Choose the Flexible Squares layout.

Go to Custom CSS
» Use layout's stylesheet(s): No
» Use layout's stylesheet(s) when including custom external stylesheet: No
» Use external stylesheets: No
insert custom stylesheet

/* Be the First to Know
http://fuesch.livejournal.com/24110.html */

body {
background: #F0F0F0;
text-align: center;
color: #474747;
font-family: "Arial", sans-serif;
font-size: 12px;
margin: 0px;
}

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

a:visited {
color: #E04F4F;
text-decoration: none;
}

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

p, td, blockquote {
font-size: 12px;
}

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

blockquote {
background: #F8F8F8;
padding: 10px;
border-right: 1px solid #E7E7E7;
border-bottom: 1px solid #E7E7E7;
}

q {
font-style: italic;
}

/* GENERAL ----------------------------------------------------------------------------------------------------------------------------------------------------- */

.ljuser img { 
width: 0px;
height: 0px;
background-repeat: no-repeat;
/*so that IE users will still see an image*/
background-image:url(http://fatfrog.info/Ma/A/layout/firsttoknow/user.gif); 
padding: 13px 0px 0px 15px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/user.gif"] {
background-image: url(http://fatfrog.info/Ma/A/layout/firsttoknow/user.gif);
padding: 13px 0px 0px 15px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-image: url(http://fatfrog.info/Ma/A/layout/firsttoknow/user.gif);
padding: 13px 0px 0px 15px;
}

.clear {
height: 15px;
}

#content {
margin: 0px 50px 0px 0px;
}

#header {
padding: 0px;
margin-right: -50px;
text-align: right;
font-size: 12px;
font-weight: bold;
background: #D80000;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 10px solid #ffffff;
}

ul.navheader {
padding: 7px;
margin: 0px;
}

ul.navheader li {
display: inline;
margin: 0px -4px 0px 0px;
}

div#header a, div#header a:link {
color: #ffffff;
padding: 7px 10px;
border-left: 1px solid #EF8585;
border-right: 1px solid #990000;
}

div#header a:visited {
color: #F0F0F0;
}

div#header a:hover {
color: #D80000;
background: #ffffff;
}

.view {
background: #EF8585;
padding: 7px 10px;
border-left: 1px solid #EF8585;
border-right: 1px solid #990000;
color: #ffffff;
}

.title {
padding: 0px 20px 0px 260px;
background: #ffffff url(http://fatfrog.info/Ma/A/layout/firsttoknow/fakesidebar.gif) top left repeat-y;
font-size: 24px;
letter-spacing: normal;
}

.subtitle {
line-height: 14px;
padding: 0px 20px 0px 260px;
background: #ffffff url(http://fatfrog.info/Ma/A/layout/firsttoknow/fakesidebar.gif) top left repeat-y;
font-size: 24px;
color: #D80000;
letter-spacing: normal;
}

#sidebar {
margin: -10px 0px 0px 50px;
width: 200px;
position: absolute;
float: left;
background: #d8d8d8 url(http://fatfrog.info/Ma/A/layout/firsttoknow/globe.jpg) bottom left no-repeat;
border-right: #D80000 5px solid;
font-size: 12px;
text-align: left;
z-index: 20;
}

.sbarbody {
padding: 0px 0px 10px 0px;
}

.sbarbody2 {
margin-top: 0px;
padding: 0px 10px 10px 10px;
}

ul.sbarlist {
padding: 0px;
margin: 0px;
list-style: none;
}

li.sbartitle {
margin: 10px 0px 0px 10px;
padding: 0px 10px 1px 5px;
list-style: none;
font-size: 16px;
text-align: right;
font-weight: bold;
text-transform: uppercase;
border-bottom: 1px solid #FFFFFF;
}

.tagcloud {
list-style: none;
}

li.sbaritem {
margin: 0px 0px 0px 10px;
padding: 5px 10px 3px 0px;
border-top: 1px solid #F0F0F0;
border-bottom: 1px solid #C7C7C7;
}

.defaultuserpic {
text-align: center;
}

table.calendar {
margin: 5px auto 0px auto;
}

.sbarcalendar {
padding: 1px 2px 3px 7px;
border-top: 1px solid #F0F0F0;
border-left: 1px solid #F0F0F0;
border-right: 1px solid #C7C7C7;
border-bottom: 1px solid #C7C7C7;
text-align: center;
font-size: 10px;
}

.sbarcalendarposts {
padding: 1px 2px 3px 7px;
background-color: #f0f0f0;
text-align: center;
font-weight: bold;
font-size: 10px;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #C7C7C7;
border-bottom: 1px solid #C7C7C7;
}

#maincontent {
margin-top: 25px;
text-align: left;
}

#footer {
margin-right: -50px;
text-align: right;
font-weight: bold;
background: #D80000;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 10px solid #ffffff;
z-index: 100;
clear: both;
}

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

ul.navfooter li {
display: inline;
margin: 0px -4px 0px 0px;
}

div#footer a, div#footer a:link {
color: #ffffff;
padding: 7px 10px;
border-left: 1px solid #EF8585;
border-right: 1px solid #990000;
}

div#footer a:visited {
color: #F0F0F0;
}

div#footer a:hover {
color: #D80000;
background: #ffffff;
}

.viewing {
background: #EF8585;
padding: 7px 10px;
border-left: 1px solid #EF8585;
border-right: 1px solid #990000;
color: #ffffff;
}

.clearfoot {
clear: both;
display: none;
}

/* ENTRIES & FRIENDS ------------------------------------------------------------------------------------------------------------------------------------------- */

.subcontent {
position: relative;
z-index: 10;
}

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

.userpic {
position: relative;
float: right;
top: 20px;
*left: -3px;
width: 100px;
height: 100px;
background: #F0F0F0 url(http://fatfrog.info/Ma/A/layout/firsttoknow/iconbg.gif) top right no-repeat;
padding: 1px 5px 5px 19px;
z-index: 15;
text-align: right;
}

.userpicfriends {
position: relative;
float: right;
top: 20px;
*left: -3px;
width: 100px;
height: 100px;
background: #F0F0F0 url(http://fatfrog.info/Ma/A/layout/firsttoknow/iconbg.gif) top right no-repeat;
padding: 1px 5px 5px 19px;
z-index: 15;
text-align: right;
font-size: 10px;
}

.userpicfriends, .userpicfriends font {
color: #D80000;
}

.datesubject {
background: url(http://fatfrog.info/Ma/A/layout/firsttoknow/subject.gif) bottom repeat-x;
padding: 5px;
height: 116px;
margin-right: 100px;
}

.date {
color: #B8B8B8;
font-size: 11px;
margin-left: 260px;
}

.subject {
padding: 45px 10px 0px 260px;
color: #D80000;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
text-align: right;
}

.entry {
margin: 10px 125px 20px 270px;
font-size: 12px;
text-align: left;
clear: both;
}

.entry ul li {
padding-left: 5px;
margin-left: 15px;
}

.entry ol li {
padding-left: 5px;
margin-left: 15px;
}

.ljtags {
margin-top: 20px;
background: #FFFFFF;
padding: 2px;
}

.currents {
font-size: 12px;
background: #ffffff;
margin-top: -10px;
}

.currents strong {
background: #FFFF00;
padding: 2px;
}

.currentmood, .currentmusic, .currentlocation {
padding: 2px;
border-bottom: 5px solid #f0f0f0;
}

.comments {
position: relative;
padding: 2px 1px;
text-align: left;
font-size: 12px;
font-weight: bold;
background: #D80000;
color: #D80000;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 1px solid #EF8585;
border-bottom: 1px solid #990000;
}

div.comments a {
padding: 2px 6px;
border-left: 1px solid #EF8585;
border-right: 1px solid #990000;
color: #ffffff;
margin: 0px -11px 0px -1px;
}

.separator {
height: 35px;
}

/* COMMENTS ---------------------------------------------------------------------------------------------------------------------------------------------------- */

.skiplinks {
margin-right: 125px;
text-align: right;
color: #F0F0F0;
}

.skiplinks a {
padding: 2px 6px;
background: #D80000;
border-top: 1px solid #EF8585;
border-left: 1px solid #EF8585;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
color: #ffffff;
}

.skiplinks a:hover {
color: #D80000;
background: #ffffff;
}

.box {
margin: 0px 125px 0px 270px;
clear: left;
}

.commentbox {
margin: 10px 0px 20px 0px;
padding: 0px;
}

.datesubjectcomment {
margin-top: 0px;
padding: 10px;
background: #FFFFFF;
border-right: 1px solid #E7E7E7;
border-bottom: 1px solid #E7E7E7;
}

.datesubjectcomment strong {
color: #D80000;
text-transform: uppercase;
}

.userpiccomment {
position: relative;
float: left;
margin: 0px 0px 5px 0px;
padding: 0px 10px 0px 0px;
background: #F0F0F0;
top: -10px;
left: -10px;
z-index: 15;
}

.commentreply {
position: relative;
margin: 10px 0px 10px 0px;
}

.commentboxpartial {
margin: 10px 10px 20px 10px;
padding: 10px;
background: #FFFFFF;
border-right: 1px solid #E7E7E7;
border-bottom: 1px solid #E7E7E7;
}

#content + div {
background-color: transparent!important;
border: none!important;
}

/* COMMENTING ------------------------------------------------------------------------------------------------------------------------------------------------- */

.replytoposter {
color: #B8B8B8;
font-size: 11px;
margin-left: 260px;
}

.replytosubject {
padding: 45px 30px 0px 260px;
color: #D80000;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
text-align: right;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
}

input, textarea {
background: #ffffff;
color: #474747;
}

textarea.textbox {
width: 95% !important;
}

/* CALENDAR ---------------------------------------------------------------------------------------------------------------------------------------------------- */

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
margin: 3px;
padding: 2px 6px;
background: #D80000;
border-top: 1px solid #EF8585;
border-left: 1px solid #EF8585;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
}

ul.year li a {
color: #ffffff;
}

ul.year li:hover {
background: #ffffff;
color: #D80000;
}

ul.year li a:hover {
color: #D80000;
}

.active {
background: #EF8585!important;
color: #ffffff!important;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

td.yearmonth {
border-style: none;
font-size: 18px;
}

td.yearmonth a {
border-style: none;
font-size: 12px;
}

table.yeartable td.yearday {
padding: 5px;
background: #FFFFFF;
text-align: center;
color: #D80000;
text-transform: uppercase;
font-weight: bold;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #C7C7C7;
border-bottom: 1px solid #C7C7C7;
}

table.yeartable td.yeardate {
padding: 2px 3px;
background: #F8F8F8;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #C7C7C7;
border-bottom: 1px solid #C7C7C7;
}

table.yeartable td.yeardate a {
font-weight: bold;
}

.lj-view-month #maincontent {
margin: 30px 125px 20px 270px;
}

.lj-view-month .entry {
margin: 0px;
clear: both;
}

/* TAGS -------------------------------------------------------------------------------------------------------------------------------------------------------- */

.lj-view-tags #maincontent {
margin: 50px 125px 20px 270px;
}

.ljtaglist {
margin-left: 30px;
}

ul.ljtaglist {
list-style: none;
}

ul.ljtaglist li {
padding: 3px 5px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #E7E7E7;
}

ul.ljtaglist li:hover {
background: #F8F8F8;
}

/* EXTRAS ------------------------------------------------------------------------------------------------------------------------------------------------------ */

.caption {
background: #ffffff;
padding: 10px 10px 5px 10px;
border: 1px solid #E7E7E7;
}

.caption img {
padding-bottom: 5px;
}

.captionless img {
padding: 10px;
background: #ffffff;
border: 1px solid #E7E7E7;
}

The ads of a plus account take their color from the Custom Options. If you want to adjust the colors, go to Style and change Page - Background color of the outer table and Entries - Border color of the content and header/footer boxes.

	PROFILE LAYOUT
	Go to Edit Profile and insert the code into the Bio part. To copy the code click in the text area and then press Ctrl+A and Ctrl+C. <lj-raw><center> <table border="0" cellspacing="0"> <tr><td width="7" height="106" background="http://fatfrog.info/Ma/A/layout/firsttoknow/subject.gif"></td> <td width="350" height="106" background="http://fatfrog.info/Ma/A/layout/firsttoknow/subject.gif"><center><font face="Arial, Helvetica, sans-serif" size="5" color="#D80000"><b>PROFILE LAYOUT</b></font></center></td> <td width="7" height="106" background="http://fatfrog.info/Ma/A/layout/firsttoknow/subject.gif"></td> </tr> <tr> <td bgcolor="#F0F0F0"></td> <td width="350" bgcolor="#F0F0F0"><font face="Arial, Helvetica, sans-serif" size="2" color="#474747">Go to <a href="http://www.livejournal.com/manage/profile/">Edit Profile</a> and insert the code into the <b>Bio</b> part. To copy the code click in the text area and then press Ctrl+A and Ctrl+C. <center><textarea name="textarea" rows="5" cols="30"><lj-raw><center> </center></lj-raw></textarea></center> If you need more cells, you can add columns or rows or both. If you need help with that, let me know.</font></td> <td bgcolor="#F0F0F0"></td> </tr> <tr><td colspan="3" bgcolor="#F0F0F0" height="7"></td></tr> </table> </center></lj-raw> If you need more cells, you can add columns or rows or both. If you need help with that, let me know. You don't have to use the lj-raw tags. With them you can only make line breaks/new paragraphs with <br> and <p>. Without the lj-raw tags you can also create line breaks and new paragraphs just by hitting the enter key. If you want to change the link color, put a font tag with a different color in your link. Like so: `<a href="URL"><font color="#D80000">LINK TEXT</font></a>`

Tags: - layouts, miscellaneous