CSS a Go Go!

[known_as_leah]

Hey there everyone , it's coming down to the Christmas Holidays and that means more art and more updates to this place. Now if you've been keeping tabs , you know that every now and then I'll take a little detour from the cg artwork with some vector art and css layouts. Well it's that time again for some css fun...





Now this is a little something that I made for my deviantArt journal section. One of the perks to being a "subscriber" on the site is that you can design custom made css layouts for the journals. And for this particular one , my only idea was something that was red and white...I never expected the little circle things to look like the Target logo , I swear D:! And if you want to see a larger version of this image , here you go! Also , if you want a "live" preview , look right here! I have to admit , it was fun to make this.

Now we all know that you don't have to use css coding only in the world of deviantArt blogs! Of course you can use them for blogs too. Blogs like the ones found in livejournal...



Okay everyone , I'm going to do something really different! One thing I've always wanted to do since I've started making livejournal layouts , is to make a layout that other people could[and would want to] use and what I'm about post is the first out of (hopefully) many layouts...so here goes:




Theme: Cyber Rainbow
Style: Smooth Sailing
System: S2
Works w/ Navigation Strip: Yes , but it doesn't look that nice.
Customized Comment Pages: Yes[Paid and Permanent accounts only!]
Best View: 1024x768 , 1280x1024
Browser: Firefox & IE[should work on other browsers too!]
Account Type: All account levels!
Live Preview: cyberrainbow
Credit: kakumei_tenjou or known_as_leah

Things to Remember

o1. The graphics for this layout were created by me using Adobe Photoshop ver 7.0 and a Wacom Grahire3 Tablet.
o2. The custom security , user and community icons are from Famfamfam
o3. All the graphics have been uploaded to imageshack , if the images do not load properly , you just need to reupload them[I'll provide a .rar file with the graphics and css codes].
o4. If there are any mistakes or problems with the coding , just reply to this entry and I'll do my best to help ASAP :D!
o5. If you want to make a layout yourself , everything_lj is a great place for tutorials!

And now for the codes...

/* BODY */

body {
font-family: Arial, sans-serif;
font-size: 12px;
margin: 0px;
background-color: black;
color: #000000;
background-image: url('http://img401.imageshack.us/img401/815/cyberbackgroundlr8.jpg');
background-repeat: repeat-y;
}

a {
color: #FF0000;
}

a:visited {
color: #AF0000;
}

a:hover{
color:#339999;
}

.pageblock{
width:950px;
margin: 0 auto;
}
.pagefooterblock {
border-top: 2px solid white;
background-color: #ee3311;
color: white;
padding: 4px 4px 4px 24px;
margin-top: 4px;
}

/*HEADER*/

.pageheaderblock {
text-align: right;
}

.header-title {
background-color: black;
font-family:Arial Black;
font-size: 30px;
color: white;
padding: 0px 20px 0px 20px;
}

.header-subtitle {
background-color: black;
color: white;
font-family: Arial ;
font-size: 24px;
padding: 0px 24px 0px 24px;
}

.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}

.header-menu {
background-color: white;
background-image: url(http://img263.imageshack.us/img263/2419/cyberrainbowheaderqw6.jpg);
background-repeat:no-repeat;
background-position: bottom center ;
line-height: 60px;
text-align: center;
height: 400px;
}

.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: left;
padding: 2px 6px 2px 6px;
color: #ee3311;
text-decoration: none;
}
.header-menu a:hover {
background-color: black;
color: #339999;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
}

/*BODY*/

.bodyblock {
padding: 10px 20px 0px 20px;
background-color:white;
}
.bodyheaderblock {
border-top: 2px solid black;
background-color: white;
padding: 4px 0px 4px 0px;
}
.bodynavblock {
border-top: 2px solid white;
background-color: #FF0000;
color: white;
margin: 10px 0px 4px 0px;
padding: 8px;
}

.bodynavblock a, .bodynavblock a:visited {
color: #CF0000;
}

.body-title {
font-family: ;
font-size: 18px;
color: #000000;
background-color:white;
text-align: left;
padding-left: 24px;
}

.body-midtitle {
font-family: ;
font-size: 18px;
color: #000000;
text-align: left;
padding-left: 8px;
}

/*ENTRIES*/

.entryHolder {
color: #000000;
background-color: white;
font-family: ;
font-size: 12px;
border-top: 2px solid #ffffff;
margin: 4px 0px 4px 0px;
}

.entryUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;

background-color: #EFAE00;
}

.entryUserinfo-usericon img {
border: 0;
}

.entryText {
padding: 6px;
}

.entryHeader {
background-color: #E3D706;
color: white;
font-family: ;
font-size: 12px;
padding: 4px 0px 4px 8px;
}

.entryHeader a{
color: white;
}

.entryHeaderSubject {
font-weight: bold;
}

.entryHeaderDate a {
color : white;
text-decoration : none;
}

.entryHeaderDate a:hover {
color : #000000;
text-decoration : underline;
}

.entryMetadata {
margin-top: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
.entryMetadata-content img {
}
.entryMetadata ul {
list-style-type: none;
}

.entryMetadata li{
display:block;
}

.entryMetadata-label {}
}

.entryLinkbar {
font-family: ;
font-size: 11px;
color: black;
text-align: right;
padding: 4px 0px 4px 0px;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}

/*FOOTER*/

#footer-menu {
font-size: 11px;
}
#footer-menu a, .footer-menu a:visited {
color: #000000;
white-space: nowrap;
padding: 6px;
text-align: left;
}

/*SIDEBAR*/

.sidebar {
font-family: ;
font-size: 11px;
margin-right: 20px;
width: 200px;
}

.sidebox {
color: #000000;
background-color: white;
margin: 4px 0px 4px 0px;
}

.sideboxTitle {
background-color: #EF0000;
color: white;
border-top: 2px solid white;
font-family: ;
font-size: 12px;
padding: 4px 0px 4px 8px;
text-align: ;
}

.sideboxContent {
text-align: left;
padding: 2px 4px 2px 4px;
}

.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: center;
}

.sidebox #tags_sidebox {
text-align: center;
}

.sidebox #systemlinks {
text-align: left;
}

.sidebox #latestmonth table{
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}

.listtitle {
font-weight: bold;
}

.profile-label {
font-weight: bold;
}

/*OTHER PAGES*/

/* COMMENT PAGE */

.commentHolder {
color: white;
background-color: #dddd00;
border-top: 2px solid #ffffff;
font-family: ;
font-size: 12px;
margin: 4px 0px 4px 0px;
}

.commentUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;

background-color: #FFA200;
}

.commentUserinfo-usericon img {
border: 0;
}

.commentText {
padding: 6px;
}

.commentHeader {
background-color: #DF2500;
color: white;
font-family: ;
font-size: 12px;
padding: 4px 0px 4px 8px;
}

.commentHeader a{
color: #7F220F;
}

.commentHeaderScreened {
font-family: ;
font-size: 12px;
background-color: #339999;
padding: 4px 0px 4px 8px;
}

.commentHeaderSubject {
font-weight: bold;
}

.commentLinkbar {
font-family: ;
font-size: 11px;
color: #000000;
text-align: right;
padding-top: 4px;
padding-bottom: 4px;
}

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

.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}

.replyform {
background-color: #3322aa;
color: #000000;
padding-left: 10px;
}

#commenttext{
width:100%;
}

/*ARCHIVE PAGE*/
.yearlinks{
text-align: right;
}

.yearlink{
padding-left:4px;
padding-right: 4px;
}

.month {
width: 500px;
border: 1px solid #ccbbbb;
margin: 8px 8px 8px 40px;
}

.daysubjects {
color: white;
padding: 8px 8px 8px 40px;
}

.daytitles {
text-align: center;
border: 1px solid #ccbbbb;
background:#ccbbbb;
color: white;
}

.day-blank {
border: 1px solid #ccbbbb;
}

.day {
border: 1px solid #ccbbbb;
}

.day-date {
border-right: 1px solid #ccbbbb;
border-bottom: 1px solid #ccbbbb;
color: white;
width: 50%;
text-align: center;
}

.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 20px;
}

.day-count a {
text-decoration: none;
color: white;
}

/*TAGS PAGE*/

.tagstable, .tagstable td {
border: 1px solid #ccbbbb;
}
.tagstable { width: 750px; }

/*CUSTOM LJ ICONS*/

/* so that IE users will see a new image */
* html span.ljuser{
background-image: url(http://img520.imageshack.us/img520/2941/ljuserzq9.png) !important;
background-repeat: no-repeat;
background-position: left middle;
padding: 0px 16px 16px 0px !important;
}
* html span.ljuser img{
visibility: hidden;
}

/* icon for users */
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img520.imageshack.us/img520/2941/ljuserzq9.png) !important;
padding: 16px 16px 0 0 !important;
}

/* icon for communities */
.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img514.imageshack.us/img514/6721/communitybb7.png) !important;
padding: 16px 16px 0 0 !important;
}

/* icon for sponsored communities */
.ljuser img[src="http://stat.livejournal.com/img/sponcomm.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img514.imageshack.us/img514/8223/sponsoredcommunityke3.png) !important;
padding: 16px 16px 0 0 !important;
}

/* icon for syndicated */
.ljuser img[src="http://stat.livejournal.com/img/syndicated.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img502.imageshack.us/img502/6848/rsssyndicatedok2.png) !important;
padding: 16px 16px 0 0 !important;
}

/* icon for news */
.ljuser img[src="http://stat.livejournal.com/img/newsinfo.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img518.imageshack.us/img518/384/newscc0.png) !important;
padding: 16px 16px 0 0 !important;
}

/* icon for open-id */
.ljuser img[src="http://stat.livejournal.com/img/openid-profile.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img518.imageshack.us/img518/4170/openiduservs1.png) !important;
padding: 16px 16px 0 0 !important;
}

/*icon for locked entries*/
.entryHeaderSubject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
background: url(http://img526.imageshack.us/img526/7529/lockedbn8.png) !important;
padding: 16px 16px 0px 0px !important;
}

/*icon for private entries*/
.entryHeaderSubject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
background: url(http://img512.imageshack.us/img512/5745/privaterg0.png) !important;
padding: 16px 16px 0px 0px !important;
}

/*icon for locked entries in sidebar*/
#summary img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(http://img526.imageshack.us/img526/7529/lockedbn8.png) !important;
}

/*icon for private entries in sidebar*/
#summary img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(http://img512.imageshack.us/img512/5745/privaterg0.png) !important;
}

/*icon for user info in sidebar*/
#profile img[src="http://stat.livejournal.com/img/userinfo.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(http://img520.imageshack.us/img520/2941/ljuserzq9.png) !important;
}

o1. Just head over here and copy and past the codes into the CSS box!
o2. Download everything here!

Let me know how it turns out :D!

And to show that I'm not just making eyecandy for livejournal...





Remember those Utena chibi sketches I made? Well this is a little screenshot of Anthy w00t!



Some more detail...I better get this inked soon , don't want a repeat of the 2 month art hiatus.

Hope you enjoyed everything posted here today and I hope that the layout works well!

-kakumei_tenjou