Flexible Squares: hooky
Image Preview - Live Preview with Texture and Live Preview without Texture
"hooky"
Has many variations. There's a textured version with 4 colors, there's also a no texture version with just one color but that's because you can change colors on your own, and then both have a stickied sidebar and non-sticky sidebar option.
Notes: To turn OFF the sticky sidebar, search for #sidebar in the stylesheet. Replace "fixed" with "absolute." If you have a Plus account make sure you have ads between the entries or vertical, as horizontal will break it. Though when I tried to do ads between the entries it was oddly not showing up on my journal, so please comment if something is wrong on your end.
If you do use the sticky sidebar, keep in mind screen resolutions. If you have a lot of info in your sidebar it WILL be cut off. The sticky sidebar was made with RP journals in mind where the tag or link list would basically be the only important thing needed. If you have a lot of tags, use the tag cloud instead of list.
This was tested in IE9, FF4+ and Chrome, it should stand to reason it will work in Safari and Opera. However, when I tried to test it in IE7-8 it looked broken, but I wasn't sure if it was due to my codes (which it shouldn't) or my IE test browsers were faulty. Either way, be wary of IE users just in case.
Please upload all images to your own image server and replace the URLs in the style sheet!
Directions: Click here. In search box put "Flexible Squares" and choose the template called "Black and White and Red All Over". In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar right)". Make sure your ads are either between entries or vertical here as well if you have a Plus account.
Click on Customize Selected Theme. On your left you'll see a blue sidebar, and click on "Customize CSS" menu link in the same sidebar. Make sure all options are set to "no", and "Custom external stylesheet URL" field remains blank.
Then, copy and paste the entire stylesheet below into "Custom stylesheet" field and click Save Changes.
Template: orange hooky
For: Flexible Squares
Images: These are hosted on my own domain, PLEASE save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!
Here is a zip of the images and stylesheet.
Code:
/*
Hooky
For: Flexible Squares
Available: http://community.livejournal.com/betterdolphin/
By: Toby
*/
/* DIRECTIONS: Full directions on how to install are on the bottom of this document! */
/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */
html, body{
height: 100%;
min-height: 100%;
}
body {
background: #f3f3f1 url(http://hodo7.com/web/freebies/hooky/texture/bg.png);
;){kind=link}
color: #797878;
font: 13px "Arial", sans-serif;
margin: 0 auto;
}
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: normal;
src: local('Lobster'), url('http://themes.googleusercontent.com/static/fonts/lobster/v4/MWVf-Rwh4GLQVBEwbyI61Q.woff') format('woff');
}
a, a:link, a:visited {
color: #fd9e52;
text-decoration: underline;
}
a:hover {
color: #797878;
text-decoration: underline;
}
p, td, blockquote {
font-size: 12px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/****************************************** header ******************************************/
#lj_controlstrip_new{
position: fixed;
}
#header {
background:url(http://hodo7.com/web/freebies/hooky/texture/nav-bg.png) bottom left repeat-x;
position: fixed;
width: 100%;
height: 70px;
z-index: 2;
}
.title{
color: #FD9E52;
font: 28px "Lobster", "Georgia", times, serif;
margin: 5px 0 0 15px;
}
.subtitle{
display: none;
}
/******* nav *******/
ul.navheader {
float: right;
list-style-type: none;
padding: 0;
margin: 0;
}
ul.navheader li {
background-color: #000;
border: 1px solid #262626;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
float: left;
margin: 0 10px;
position: relative;
-webkit-transition:background-color .5s linear;
-moz-transition:background-color .5s linear;
-o-transition:background-color .5s linear;
transition:background-color .5s linear;
}
ul.navheader li:hover {
background-color: #d08448;
-webkit-transition:background-color .5s linear;
-moz-transition:background-color .5s linear;
-o-transition:background-color .5s linear;
transition:background-color .5s linear;
}
ul.navheader li a {
color: #797878;
display: block;
padding: 10px 15px;
text-decoration: none;
}
ul.navheader li:hover a {
color: #fff;
text-decoration: none;
-webkit-transition:color .5s linear;
-moz-transition:color .5s linear;
-o-transition:color .5s linear;
transition:color .5s linear;
}
ul.navheader li.view {
background-color: #d08448;
color: #fff;
padding: 10px 15px;
}
ul.navheader li:hover.view {
color: #fff;
}
/****************************************** content ******************************************/
/******* main *******/
#content {
margin: 0 auto;
padding: 0;
width: 100%;
}
#content-outer{
}
#maincontent {
float: left;
left: 265px;
position: relative;
top: 120px;
width: 75%;
}
/******* maincontent *******/
.subcontent {
background: #f6f5f4;
border: 1px solid #e1e1e1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
box-shadow: 0 0 2px #fff inset;
margin: 10px 0 20px;
padding: 20px;
}
.entry {
}
.entry_text{
margin-top: 20px;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.userpic{
background:url(http://hodo7.com/web/freebies/hooky/texture/orange-bg.png);
;){kind=link}
border: 1px solid #E5C4B1;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.userpic img{
border: 1px solid #E5C4B1;
}
.userpicfriends {
background:url(http://hodo7.com/web/freebies/hooky/texture/orange-bg.png);
border: 1px solid #E5C4B1;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.userpicfriends a{
color: #797878 !important;
font-weight: bold;
text-decoration: none !important;
}
.date {
color: #a2a2a2;
float: right;
margin: -68px 0 0;
}
.lj-view-friends .date{
}
.subject{
color: #FD9E52;
float: right;
font: 40px/20px "Lobster","Georgia",times,serif;
margin: -50px 0 0;
text-align: right;
width: 80%;
}
.subject a{
color: #FD9E52;
text-decoration: none;
}
.subject a, .subject a:link, .subject a:visited, .subject a:hover {
text-decoration: none;
}
.datesubject {
}
.currents{
clear: both;
}
.currents a{
text-decoration: none;
}
.currentmood, .currentmusic, .currentlocation{
padding: 5px 0 5px 25px;
}
.currentlocation {
background: url(http://hodo7.com/web/freebies/hooky/texture/location.png) 5px center no-repeat;
}
.currentmusic {
background: url(http://hodo7.com/web/freebies/hooky/texture/music.png) left center no-repeat;
}
.currentmood {
background: url(http://hodo7.com/web/freebies/hooky/texture/mood.png) left center no-repeat;
}
.ljtags{
background: url(http://hodo7.com/web/freebies/hooky/texture/tags.png) left center no-repeat;
clear: both;
font-weight: bold;
padding: 5px 0 5px 25px;
}
.ljtags a{
font-weight: normal;
text-decoration: none;
}
.comments {
border-top: 1px dotted #d7d7d7;
clear: both;
color: #95918F;
font-size: 11px;
margin: 20px auto;
padding: 5px 5px 0 5px;
position: relative;
text-align: right;
width: 96%;
}
.comments a, .comments a:link, .comments a:visited{
color: #95918f;
padding: 0 5px;
text-decoration: none;
}
.comments a:hover {
color: #FD9E52;
text-decoration: none;
}
/******* entry *******/
.datesubjectcomment {
}
.userpiccomment {
background:url(http://hodo7.com/web/freebies/hooky/texture/orange-bg.png);
border: 1px solid #E5C4B1;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.box {
}
input, textarea {
background: #fff;
color: #000;
}
textarea.textbox {
width: 95% !important;
}
.reply{
background: #fff;
color: #000;
font: 11px "Verdana", sans-serif;
line-height: 125%;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
position: relative;
text-align: left;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
margin: 10px;
position: relative;
}
.commentbox {
background: #e9e9e9;
padding: 10px;
margin: 10px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
}
.datesubjectcomment a:hover {
}
.commentboxpartial {
background: #fff;
border: 1px solid #fff;
margin: 10px;
padding: 10px;
}
.commentinfo {
background: #fff;
margin-top: 10px;
width: 100%;
}
/******* sidebar *******/
#sidebar {
padding: 78px 20px 10px;
position: fixed;
/*to make the sidebar scrollable, replace "fixed" with "absolute"*/
width: 160px;
z-index: 1;
}
#sidebar a, #sidebar a:link, #sidebar a:visited{
color: #535352;
}
#sidebar a:hover {
color: #7e7e7c;
}
.defaultuserpic {
background:url(http://hodo7.com/web/freebies/hooky/texture/gray-bg.png);
;){kind=link}
border: 1px solid #e5c4b1;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto 20px;
padding: 10px;
width: 100px;
}
.defaultuserpic img{
border: 1px solid #E1E1E1;
}
.sbarheader {
}
.sbarbody , .sbarbody2 {
margin-bottom: 20px;
}
.sbarbody ul{
margin: 0;
padding: 0;
}
#sidebar_summary li.sbaritem {
}
.sbarlist li.sbaritem {
}
#sidebar_calendar{
}
table.calendar {
margin: 0 auto;
}
.sbarcalendar {
border: 1px solid #464646;
text-align: center;
}
.sbarcalendarposts {
background: #F7E2CF;
border: 1px solid #464646;
}
.sbarcalendarposts a{
}
ul.sbarlist {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li.sbaritem, .tagcloud {
list-style: none;
}
.tagcloud a{
font-size: 11px !important;
}
li.sbaritem{
border-bottom: 1px solid #e3c5a8;
border-top: 1px solid #fbe8d6;
padding: 5px 0;
}
li:first-child.sbaritem{
border-top: 0;
}
li:last-child.sbaritem{
border-bottom: 0;
}
li.sbaritem a{
color: 535352;
text-decoration: none;
}
li.sbartitle {
font: 24px "Lobster", "Georgia", times, serif;
}
/******* archive *******/
ul.year {
color: #797878;
font: bold 15px "Arial Black", arial, sans-serif;
padding-bottom: 40px;
text-align: center;
}
ul.year li {
display: inline;
}
table.yeartable {
border-collapse: collapse;
margin: 0 auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background: #F6F5F4;
border: 1px solid #797878;
padding: 2px 2px 10px 0;
}
table.yeartable td.yearday {
background: #F5D5B5;
color: #797878;
font-weight: bold;
text-align: center;
}
td.yearmonth {
border: none;
color: #797878;
font: bold 15px "Arial Black", arial, sans-serif;
padding: 0 0 10px 0;
}
/****************************************** footer ******************************************/
#footer {
clear: both;
float: right;
margin: 130px 0 0;
position: relative;
z-index: 100;
}
ul.navfooter{
margin: 0;
padding: 0;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
ul.navfooter li{
color: #797878;
font: 20px "Lobster", "Georgia", times, serif;
margin: 0 15px 0 0;
}
ul.navfooter li a{
color: #797878;
text-decoration: none;
}
ul.navfooter li + li{
color: #FD9E52;
margin: 0;
}
ul.navfooter li + li a{
color: #FD9E52;
text-decoration: none;
}
ul.navfooter li a:hover{
color: #adadad;
}
ul.navfooter li.viewing{
display: none;
}
ul.navfooter li a{
text-decoration: none;
}
.clearfoot {
clear: both;
height: 0;
}
/****************************************** misc ******************************************/
.clear {
height: 0;
}
.skiplinks {
margin: 10px 0 35px;
text-align: center;
}
.skiplinks a{
color: #797878;
font-weight: bold;
text-decoration: none;
}
.skiplinks a:hover{
color: #FD9E52;
}
.headerimage {
/* for formatting header image */
}
.separator{
/* for formatting separators between entries */
height: 35px;
}
* html .subcontent {
/* fixes an IE reply page bug */
clear: none;
height: 1%;
}
* html .box#commentform {
/* fixes an IE reply page bug */
background: #000;
border: 1px solid #fff;
position: absolute;
}
/****************************************** contextual popup ******************************************/
div.ContextualPopup {
text-shadow: none;
}
/****************************************** mini icons ******************************************/
.sbaritem img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png);
;){kind=link}
padding: 11px 14px 8px 5px !important;
width: 0;
height: 0;
}
.entry-title img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 23px 0 0 29px !important;
width: 0;
height: 0;
}
.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.sbaritem img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
padding: 11px 6px 2px 16px !important;
width: 0;
height: 0;
}
.entry-text dl dd img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.sidebar-summary img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 16px 16px 0 0!important;
width: 0;
height: 0;
}
/* DIRECTIONS: To install, go to your Home section in LJ. Scroll over Journal in the menu, click Journal Style. Below you'll find a section of themes to select and a search field. In the search box put in "Flexible Squares" and choose the template called "Black and White and Red All Over". In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar on the left)" and make your add placement between entries if you have a Plus account. (Vertical banner may work as well, but horizontal will break the layout). Then click the "Customize selected theme" button next to that. On your left you'll see a blue sidebar, and click on "Custom CSS." You'll see a drop down options, make sure they're all marked "No". Leave "Custom external stylesheet URL" entry blank.
If you haven't already, you need upload all the images to your own server/image service and replace all the image URLs on this stylesheet with your own URLs. Then copy and paste this WHOLE document into the "Custom stylesheet" box.
Click "Save Changes" and it should be ready to go! */
Template: green hooky
For: Flexible Squares
Images: These are hosted on my own domain, PLEASE save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!
Here is a zip of the images and stylesheet.
Code:
/*
Hooky
For: Flexible Squares
Available: http://community.livejournal.com/betterdolphin/
By: Toby
*/
/* DIRECTIONS: Full directions on how to install are on the bottom of this document! */
/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */
html, body{
height: 100%;
min-height: 100%;
}
body {
background: #f3f3f1 url(http://hodo7.com/web/freebies/hooky/texture/bg4.png);
;){kind=link}
color: #797878;
font: 13px "Arial", sans-serif;
margin: 0 auto;
}
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: normal;
src: local('Lobster'), url('http://themes.googleusercontent.com/static/fonts/lobster/v4/MWVf-Rwh4GLQVBEwbyI61Q.woff') format('woff');
}
a, a:link, a:visited {
color: #b7cd37;
text-decoration: underline;
}
a:hover {
color: #797878;
text-decoration: underline;
}
p, td, blockquote {
font-size: 12px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/****************************************** header ******************************************/
#lj_controlstrip_new{
position: fixed;
}
#header {
background:url(http://hodo7.com/web/freebies/hooky/texture/nav-bg.png) bottom left repeat-x;
position: fixed;
width: 100%;
height: 70px;
z-index: 2;
}
.title{
color: #b7cd37;
font: 28px "Lobster", "Georgia", times, serif;
margin: 5px 0 0 15px;
}
.subtitle{
display: none;
}
/******* nav *******/
ul.navheader {
float: right;
list-style-type: none;
padding: 0;
margin: 0;
}
ul.navheader li {
background-color: #000;
border: 1px solid #262626;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
float: left;
margin: 0 10px;
position: relative;
-webkit-transition:background-color .5s linear;
-moz-transition:background-color .5s linear;
-o-transition:background-color .5s linear;
transition:background-color .5s linear;
}
ul.navheader li:hover {
background-color: #87962d;
-webkit-transition:background-color .5s linear;
-moz-transition:background-color .5s linear;
-o-transition:background-color .5s linear;
transition:background-color .5s linear;
}
ul.navheader li a {
color: #797878;
display: block;
padding: 10px 15px;
text-decoration: none;
}
ul.navheader li:hover a {
color: #fff;
text-decoration: none;
-webkit-transition:color .5s linear;
-moz-transition:color .5s linear;
-o-transition:color .5s linear;
transition:color .5s linear;
}
ul.navheader li.view {
background-color: #87962d;
color: #fff;
padding: 10px 15px;
}
ul.navheader li:hover.view {
color: #fff;
}
/****************************************** content ******************************************/
/******* main *******/
#content {
margin: 0 auto;
padding: 0;
width: 100%;
}
#content-outer{
}
#maincontent {
float: left;
left: 265px;
position: relative;
top: 120px;
width: 75%;
}
/******* maincontent *******/
.subcontent {
background: #f6f5f4;
border: 1px solid #e1e1e1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
box-shadow: 0 0 2px #fff inset;
margin: 10px 0 20px;
padding: 20px;
}
.entry {
}
.entry_text{
margin-top: 20px;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.userpic{
background:url(http://hodo7.com/web/freebies/hooky/texture/green-bg.png);
;){kind=link}
border: 1px solid #ccda75;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.userpic img{
border: 1px solid #ccda75;
}
.userpicfriends {
background:url(http://hodo7.com/web/freebies/hooky/texture/green-bg.png);
border: 1px solid #E1E1E1;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.userpicfriends a{
color: #797878 !important;
font-weight: bold;
text-decoration: none !important;
}
.date {
color: #a2a2a2;
float: right;
margin: -68px 0 0;
}
.lj-view-friends .date{
}
.subject{
color: #b7cd37;
float: right;
font: 40px/20px "Lobster","Georgia",times,serif;
margin: -50px 0 0;
text-align: right;
width: 80%;
}
.subject a{
color: #b7cd37;
text-decoration: none;
}
.subject a, .subject a:link, .subject a:visited, .subject a:hover {
text-decoration: none;
}
.datesubject {
}
.currents{
clear: both;
}
.currents a{
text-decoration: none;
}
.currentmood, .currentmusic, .currentlocation{
padding: 5px 0 5px 25px;
}
.currentlocation {
background: url(http://hodo7.com/web/freebies/hooky/texture/location.png) 5px center no-repeat;
}
.currentmusic {
background: url(http://hodo7.com/web/freebies/hooky/texture/music.png) left center no-repeat;
}
.currentmood {
background: url(http://hodo7.com/web/freebies/hooky/texture/mood.png) left center no-repeat;
}
.ljtags{
background: url(http://hodo7.com/web/freebies/hooky/texture/tags.png) left center no-repeat;
clear: both;
font-weight: bold;
padding: 5px 0 5px 25px;
}
.ljtags a{
font-weight: normal;
text-decoration: none;
}
.comments {
border-top: 1px dotted #d7d7d7;
clear: both;
color: #95918F;
font-size: 11px;
margin: 20px auto;
padding: 5px 5px 0 5px;
position: relative;
text-align: right;
width: 96%;
}
.comments a, .comments a:link, .comments a:visited{
color: #95918f;
padding: 0 5px;
text-decoration: none;
}
.comments a:hover {
color: #b7cd37;
text-decoration: none;
}
/******* entry *******/
.datesubjectcomment {
}
.userpiccomment {
background:url(http://hodo7.com/web/freebies/hooky/texture/green-bg.png);
border: 1px solid #ccda75;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.box {
}
input, textarea {
background: #fff;
color: #000;
}
textarea.textbox {
width: 95% !important;
}
.reply{
background: #fff;
color: #000;
font: 11px "Verdana", sans-serif;
line-height: 125%;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
position: relative;
text-align: left;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
margin: 10px;
position: relative;
}
.commentbox {
background: #e9e9e9;
padding: 10px;
margin: 10px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
}
.datesubjectcomment a:hover {
}
.commentboxpartial {
background: #fff;
border: 1px solid #fff;
margin: 10px;
padding: 10px;
}
.commentinfo {
background: #fff;
margin-top: 10px;
width: 100%;
}
/******* sidebar *******/
#sidebar {
padding: 78px 20px 10px;
position: fixed;
/*to make the sidebar scrollable, replace "fixed" with "absolute"*/
width: 160px;
z-index: 1;
}
#sidebar a, #sidebar a:link, #sidebar a:visited{
color: #535352;
}
#sidebar a:hover {
color: #7e7e7c;
}
.defaultuserpic {
background:url(http://hodo7.com/web/freebies/hooky/texture/gray-bg.png);
border: 1px solid #ccda75;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto 20px;
padding: 10px;
width: 100px;
}
.defaultuserpic img{
border: 1px solid #E1E1E1;
}
.sbarheader {
}
.sbarbody , .sbarbody2 {
margin-bottom: 20px;
}
.sbarbody ul{
margin: 0;
padding: 0;
}
#sidebar_summary li.sbaritem {
}
.sbarlist li.sbaritem {
}
#sidebar_calendar{
}
table.calendar {
margin: 0 auto;
}
.sbarcalendar {
border: 1px solid #464646;
text-align: center;
}
.sbarcalendarposts {
background: #f2f8cb;
border: 1px solid #464646;
}
.sbarcalendarposts a{
}
ul.sbarlist {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li.sbaritem, .tagcloud {
list-style: none;
}
.tagcloud a{
font-size: 11px !important;
}
li.sbaritem{
border-bottom: 1px solid #ccda75;
border-top: 1px solid #f4f8dd;
padding: 5px 0;
}
li:first-child.sbaritem{
border-top: 0;
}
li:last-child.sbaritem{
border-bottom: 0;
}
li.sbaritem a{
color: 535352;
text-decoration: none;
}
li.sbartitle {
font: 24px "Lobster", "Georgia", times, serif;
}
/******* archive *******/
ul.year {
color: #797878;
font: bold 15px "Arial Black", arial, sans-serif;
padding-bottom: 40px;
text-align: center;
}
ul.year li {
display: inline;
}
table.yeartable {
border-collapse: collapse;
margin: 0 auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background: #F6F5F4;
border: 1px solid #797878;
padding: 2px 2px 10px 0;
}
table.yeartable td.yearday {
background: #f2f8cb;
color: #797878;
font-weight: bold;
text-align: center;
}
td.yearmonth {
border: none;
color: #797878;
font: bold 15px "Arial Black", arial, sans-serif;
padding: 0 0 10px 0;
}
/****************************************** footer ******************************************/
#footer {
clear: both;
float: right;
margin: 130px 0 0;
position: relative;
z-index: 100;
}
ul.navfooter{
margin: 0;
padding: 0;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
ul.navfooter li{
color: #797878;
font: 20px "Lobster", "Georgia", times, serif;
margin: 0 15px 0 0;
}
ul.navfooter li a{
color: #797878;
text-decoration: none;
}
ul.navfooter li + li{
color: #b7cd37;
margin: 0;
}
ul.navfooter li + li a{
color: #b7cd37;
text-decoration: none;
}
ul.navfooter li a:hover{
color: #adadad;
}
ul.navfooter li.viewing{
display: none;
}
ul.navfooter li a{
text-decoration: none;
}
.clearfoot {
clear: both;
height: 0;
}
/****************************************** misc ******************************************/
.clear {
height: 0;
}
.skiplinks {
margin: 10px 0 35px;
text-align: center;
}
.skiplinks a{
color: #797878;
font-weight: bold;
text-decoration: none;
}
.skiplinks a:hover{
color: #b7cd37;
}
.headerimage {
/* for formatting header image */
}
.separator{
/* for formatting separators between entries */
height: 35px;
}
* html .subcontent {
/* fixes an IE reply page bug */
clear: none;
height: 1%;
}
* html .box#commentform {
/* fixes an IE reply page bug */
background: #000;
border: 1px solid #fff;
position: absolute;
}
/****************************************** contextual popup ******************************************/
div.ContextualPopup {
text-shadow: none;
}
/****************************************** mini icons ******************************************/
.sbaritem img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png);
padding: 11px 14px 8px 5px !important;
width: 0;
height: 0;
}
.entry-title img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 23px 0 0 29px !important;
width: 0;
height: 0;
}
.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.sbaritem img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
padding: 11px 5px 2px 16px!important;
width: 0;
height: 0;
}
.entry-text dl dd img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.sidebar-summary img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 16px 16px 0 0!important;
width: 0;
height: 0;
}
/* DIRECTIONS: To install, go to your Home section in LJ. Scroll over Journal in the menu, click Journal Style. Below you'll find a section of themes to select and a search field. In the search box put in "Flexible Squares" and choose the template called "Black and White and Red All Over". In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar on the left)" and make your add placement between entries if you have a Plus account. (Vertical banner may work as well, but horizontal will break the layout). Then click the "Customize selected theme" button next to that. On your left you'll see a blue sidebar, and click on "Custom CSS." You'll see a drop down options, make sure they're all marked "No". Leave "Custom external stylesheet URL" entry blank.
If you haven't already, you need upload all the images to your own server/image service and replace all the image URLs on this stylesheet with your own URLs. Then copy and paste this WHOLE document into the "Custom stylesheet" box.
Click "Save Changes" and it should be ready to go! */
Template: purple hooky
For: Flexible Squares
Images: These are hosted on my own domain, PLEASE save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!
Here is a zip of the images and stylesheet.
Code:
/*
Hooky
For: Flexible Squares
Available: http://community.livejournal.com/betterdolphin/
By: Toby
*/
/* DIRECTIONS: Full directions on how to install are on the bottom of this document! */
/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */
html, body{
height: 100%;
min-height: 100%;
}
body {
background: #f3f3f1 url(http://hodo7.com/web/freebies/hooky/texture/bg2.png);
;){kind=link}
color: #797878;
font: 13px "Arial", sans-serif;
margin: 0 auto;
}
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: normal;
src: local('Lobster'), url('http://themes.googleusercontent.com/static/fonts/lobster/v4/MWVf-Rwh4GLQVBEwbyI61Q.woff') format('woff');
}
a, a:link, a:visited {
color: #954f8d;
text-decoration: underline;
}
a:hover {
color: #797878;
text-decoration: underline;
}
p, td, blockquote {
font-size: 12px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/****************************************** header ******************************************/
#lj_controlstrip_new{
position: fixed;
}
#header {
background:url(http://hodo7.com/web/freebies/hooky/texture/nav-bg.png) bottom left repeat-x;
position: fixed;
width: 100%;
height: 70px;
z-index: 2;
}
.title{
color: #954f8d;
font: 28px "Lobster", "Georgia", times, serif;
margin: 5px 0 0 15px;
}
.subtitle{
display: none;
}
/******* nav *******/
ul.navheader {
float: right;
list-style-type: none;
padding: 0;
margin: 0;
}
ul.navheader li {
background-color: #000;
border: 1px solid #262626;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
float: left;
margin: 0 10px;
position: relative;
-webkit-transition:background-color .5s linear;
-moz-transition:background-color .5s linear;
-o-transition:background-color .5s linear;
transition:background-color .5s linear;
}
ul.navheader li:hover {
background-color: #72406c;
-webkit-transition:background-color .5s linear;
-moz-transition:background-color .5s linear;
-o-transition:background-color .5s linear;
transition:background-color .5s linear;
}
ul.navheader li a {
color: #797878;
display: block;
padding: 10px 15px;
text-decoration: none;
}
ul.navheader li:hover a {
color: #fff;
text-decoration: none;
-webkit-transition:color .5s linear;
-moz-transition:color .5s linear;
-o-transition:color .5s linear;
transition:color .5s linear;
}
ul.navheader li.view {
background-color: #72406c;
padding: 10px 15px;
}
ul.navheader li.view{
color:#fff;
}
ul.navheader li:hover.view {
color: #fff;
}
/****************************************** content ******************************************/
/******* main *******/
#content {
margin: 0 auto;
padding: 0;
width: 100%;
}
#content-outer{
}
#maincontent {
float: left;
left: 265px;
position: relative;
top: 120px;
width: 75%;
}
/******* maincontent *******/
.subcontent {
background: #f6f5f4;
border: 1px solid #e1e1e1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
box-shadow: 0 0 2px #fff inset;
margin: 10px 0 20px;
padding: 20px;
}
.entry {
}
.entry_text{
margin-top: 20px;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.userpic{
background:url(http://hodo7.com/web/freebies/hooky/texture/purple-bg.png);
;){kind=link}
border: 1px solid #B393AF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.userpic img{
border: 1px solid #B393AF;
}
.userpicfriends {
background:url(http://hodo7.com/web/freebies/hooky/texture/purple-bg.png);
border: 1px solid #E1E1E1;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.userpicfriends a{
color: #797878 !important;
font-weight: bold;
text-decoration: none !important;
}
.date {
color: #a2a2a2;
float: right;
margin: -68px 0 0;
}
.lj-view-friends .date{
}
.subject{
color: #954f8d;
float: right;
font: 40px/20px "Lobster","Georgia",times,serif;
margin: -50px 0 0;
text-align: right;
width: 80%;
}
.subject a{
color: #954f8d;
text-decoration: none;
}
.subject a, .subject a:link, .subject a:visited, .subject a:hover {
text-decoration: none;
}
.datesubject {
}
.currents{
clear: both;
}
.currents a{
text-decoration: none;
}
.currentmood, .currentmusic, .currentlocation{
padding: 5px 0 5px 25px;
}
.currentlocation {
background: url(http://hodo7.com/web/freebies/hooky/texture/location.png) 5px center no-repeat;
}
.currentmusic {
background: url(http://hodo7.com/web/freebies/hooky/texture/music.png) left center no-repeat;
}
.currentmood {
background: url(http://hodo7.com/web/freebies/hooky/texture/mood.png) left center no-repeat;
}
.ljtags{
background: url(http://hodo7.com/web/freebies/hooky/texture/tags.png) left center no-repeat;
clear: both;
font-weight: bold;
padding: 5px 0 5px 25px;
}
.ljtags a{
font-weight: normal;
text-decoration: none;
}
.comments {
border-top: 1px dotted #d7d7d7;
clear: both;
color: #95918F;
font-size: 11px;
margin: 20px auto;
padding: 5px 5px 0 5px;
position: relative;
text-align: right;
width: 96%;
}
.comments a, .comments a:link, .comments a:visited{
color: #95918f;
padding: 0 5px;
text-decoration: none;
}
.comments a:hover {
color: #954f8d;
text-decoration: none;
}
/******* entry *******/
.datesubjectcomment {
}
.userpiccomment {
background:url(http://hodo7.com/web/freebies/hooky/texture/purple-bg.png);
border: 1px solid #B393AF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.box {
}
input, textarea {
background: #fff;
color: #000;
}
textarea.textbox {
width: 95% !important;
}
.reply{
background: #fff;
color: #000;
font: 11px "Verdana", sans-serif;
line-height: 125%;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
position: relative;
text-align: left;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
margin: 10px;
position: relative;
}
.commentbox {
background: #e9e9e9;
padding: 10px;
margin: 10px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
}
.datesubjectcomment a:hover {
}
.commentboxpartial {
background: #fff;
border: 1px solid #fff;
margin: 10px;
padding: 10px;
}
.commentinfo {
background: #fff;
margin-top: 10px;
width: 100%;
}
/******* sidebar *******/
#sidebar {
padding: 78px 20px 10px;
position: fixed;
/*to make the sidebar scrollable, replace "fixed" with "absolute"*/
width: 160px;
z-index: 1;
}
#sidebar a, #sidebar a:link, #sidebar a:visited{
color: #535352;
}
#sidebar a:hover {
color: #7e7e7c;
}
.defaultuserpic {
background:url(http://hodo7.com/web/freebies/hooky/texture/gray-bg.png);
border: 1px solid #B393AF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto 20px;
padding: 10px;
width: 100px;
}
.defaultuserpic img{
border: 1px solid #E1E1E1;
}
.sbarheader {
}
.sbarbody , .sbarbody2 {
margin-bottom: 20px;
}
.sbarbody ul{
margin: 0;
padding: 0;
}
#sidebar_summary li.sbaritem {
}
.sbarlist li.sbaritem {
}
#sidebar_calendar{
}
table.calendar {
margin: 0 auto;
}
.sbarcalendar {
border: 1px solid #464646;
text-align: center;
}
.sbarcalendarposts {
background: #D6BCD2;
border: 1px solid #464646;
}
.sbarcalendarposts a{
}
ul.sbarlist {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li.sbaritem, .tagcloud {
list-style: none;
}
.tagcloud a{
font-size: 11px !important;
}
li.sbaritem{
border-bottom: 1px solid #b393af;
border-top: 1px solid #d3bad0;
padding: 5px 0;
}
li:first-child.sbaritem{
border-top: 0;
}
li:last-child.sbaritem{
border-bottom: 0;
}
li.sbaritem a{
color: 535352;
text-decoration: none;
}
li.sbartitle {
font: 24px "Lobster", "Georgia", times, serif;
}
/******* archive *******/
ul.year {
color: #797878;
font: bold 15px "Arial Black", arial, sans-serif;
padding-bottom: 40px;
text-align: center;
}
ul.year li {
display: inline;
}
table.yeartable {
border-collapse: collapse;
margin: 0 auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background: #F6F5F4;
border: 1px solid #797878;
padding: 2px 2px 10px 0;
}
table.yeartable td.yearday {
background: #D6BCD2;
color: #797878;
font-weight: bold;
text-align: center;
}
td.yearmonth {
border: none;
color: #797878;
font: bold 15px "Arial Black", arial, sans-serif;
padding: 0 0 10px 0;
}
/****************************************** footer ******************************************/
#footer {
clear: both;
float: right;
margin: 130px 0 0;
position: relative;
z-index: 100;
}
ul.navfooter{
margin: 0;
padding: 0;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
ul.navfooter li{
color: #797878;
font: 20px "Lobster", "Georgia", times, serif;
margin: 0 15px 0 0;
}
ul.navfooter li a{
color: #797878;
text-decoration: none;
}
ul.navfooter li + li{
color: #954f8d;
margin: 0;
}
ul.navfooter li + li a{
color: #954f8d;
text-decoration: none;
}
ul.navfooter li a:hover{
color: #adadad;
}
ul.navfooter li.viewing{
display: none;
}
ul.navfooter li a{
text-decoration: none;
}
.clearfoot {
clear: both;
height: 0;
}
/****************************************** misc ******************************************/
.clear {
height: 0;
}
.skiplinks {
margin: 10px 0 35px;
text-align: center;
}
.skiplinks a{
color: #797878;
font-weight: bold;
text-decoration: none;
}
.skiplinks a:hover{
color: #954f8d;
}
.headerimage {
/* for formatting header image */
}
.separator{
/* for formatting separators between entries */
height: 35px;
}
* html .subcontent {
/* fixes an IE reply page bug */
clear: none;
height: 1%;
}
* html .box#commentform {
/* fixes an IE reply page bug */
background: #000;
border: 1px solid #fff;
position: absolute;
}
/****************************************** contextual popup ******************************************/
div.ContextualPopup {
text-shadow: none;
}
/****************************************** mini icons ******************************************/
.sbaritem img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png);
padding: 11px 14px 8px 5px !important;
width: 0;
height: 0;
}
.entry-title img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 23px 0 0 29px !important;
width: 0;
height: 0;
}
.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.sbaritem img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
padding: 11px 5px 2px 16px!important;
width: 0;
height: 0;
}
.entry-text dl dd img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.sidebar-summary img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 16px 16px 0 0!important;
width: 0;
height: 0;
}
/* DIRECTIONS: To install, go to your Home section in LJ. Scroll over Journal in the menu, click Journal Style. Below you'll find a section of themes to select and a search field. In the search box put in "Flexible Squares" and choose the template called "Black and White and Red All Over". In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar on the left)" and make your add placement between entries if you have a Plus account. (Vertical banner may work as well, but horizontal will break the layout). Then click the "Customize selected theme" button next to that. On your left you'll see a blue sidebar, and click on "Custom CSS." You'll see a drop down options, make sure they're all marked "No". Leave "Custom external stylesheet URL" entry blank.
If you haven't already, you need upload all the images to your own server/image service and replace all the image URLs on this stylesheet with your own URLs. Then copy and paste this WHOLE document into the "Custom stylesheet" box.
Click "Save Changes" and it should be ready to go! */
Template: blue hooky
For: Flexible Squares
Images: These are hosted on my own domain, PLEASE save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!
Here is a zip of the images and stylesheet.
Code:
/*
Hooky
For: Flexible Squares
Available: http://community.livejournal.com/betterdolphin/
By: Toby
*/
/* DIRECTIONS: Full directions on how to install are on the bottom of this document! */
/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */
html, body{
height: 100%;
min-height: 100%;
}
body {
background: #f3f3f1 url(http://hodo7.com/web/freebies/hooky/texture/bg3.png);
;){kind=link}
color: #797878;
font: 13px "Arial", sans-serif;
margin: 0 auto;
}
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: normal;
src: local('Lobster'), url('http://themes.googleusercontent.com/static/fonts/lobster/v4/MWVf-Rwh4GLQVBEwbyI61Q.woff') format('woff');
}
a, a:link, a:visited {
color: #7ed0d6;
text-decoration: underline;
}
a:hover {
color: #797878;
text-decoration: underline;
}
p, td, blockquote {
font-size: 12px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/****************************************** header ******************************************/
#lj_controlstrip_new{
position: fixed;
}
#header {
background:url(http://hodo7.com/web/freebies/hooky/texture/nav-bg.png) bottom left repeat-x;
position: fixed;
width: 100%;
height: 70px;
z-index: 2;
}
.title{
color: #7ed0d6;
font: 28px "Lobster", "Georgia", times, serif;
margin: 5px 0 0 15px;
}
.subtitle{
display: none;
}
/******* nav *******/
ul.navheader {
float: right;
list-style-type: none;
padding: 0;
margin: 0;
}
ul.navheader li {
background-color: #000;
border: 1px solid #262626;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
float: left;
margin: 0 10px;
position: relative;
-webkit-transition:background-color .5s linear;
-moz-transition:background-color .5s linear;
-o-transition:background-color .5s linear;
transition:background-color .5s linear;
}
ul.navheader li:hover {
background-color: #267379;
-webkit-transition:background-color .5s linear;
-moz-transition:background-color .5s linear;
-o-transition:background-color .5s linear;
transition:background-color .5s linear;
}
ul.navheader li a {
color: #797878;
display: block;
padding: 10px 15px;
text-decoration: none;
}
ul.navheader li:hover a {
color: #fff;
text-decoration: none;
-webkit-transition:color .5s linear;
-moz-transition:color .5s linear;
-o-transition:color .5s linear;
transition:color .5s linear;
}
ul.navheader li.view {
background-color: #267379;
color: #fff;
padding: 10px 15px;
}
ul.navheader li:hover.view {
color: #fff;
}
/****************************************** content ******************************************/
/******* main *******/
#content {
margin: 0 auto;
padding: 0;
width: 100%;
}
#content-outer{
}
#maincontent {
float: left;
left: 265px;
position: relative;
top: 120px;
width: 75%;
}
/******* maincontent *******/
.subcontent {
background: #f6f5f4;
border: 1px solid #e1e1e1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
box-shadow: 0 0 2px #fff inset;
margin: 10px 0 20px;
padding: 20px;
}
.entry {
}
.entry_text{
margin-top: 20px;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.userpic{
background:url(http://hodo7.com/web/freebies/hooky/texture/blue-bg.png);
;){kind=link}
border: 1px solid #98ced3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.userpic img{
border: 1px solid #98ced3;
}
.userpicfriends {
background:url(http://hodo7.com/web/freebies/hooky/texture/blue-bg.png);
border: 1px solid #E1E1E1;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.userpicfriends a{
color: #797878 !important;
font-weight: bold;
text-decoration: none !important;
}
.date {
color: #a2a2a2;
float: right;
margin: -68px 0 0;
}
.lj-view-friends .date{
}
.subject{
color: #7ed0d6;
float: right;
font: 40px/20px "Lobster","Georgia",times,serif;
margin: -50px 0 0;
text-align: right;
width: 80%;
}
.subject a{
color: #7ed0d6;
text-decoration: none;
}
.subject a, .subject a:link, .subject a:visited, .subject a:hover {
text-decoration: none;
}
.datesubject {
}
.currents{
clear: both;
}
.currents a{
text-decoration: none;
}
.currentmood, .currentmusic, .currentlocation{
padding: 5px 0 5px 25px;
}
.currentlocation {
background: url(http://hodo7.com/web/freebies/hooky/texture/location.png) 5px center no-repeat;
}
.currentmusic {
background: url(http://hodo7.com/web/freebies/hooky/texture/music.png) left center no-repeat;
}
.currentmood {
background: url(http://hodo7.com/web/freebies/hooky/texture/mood.png) left center no-repeat;
}
.ljtags{
background: url(http://hodo7.com/web/freebies/hooky/texture/tags.png) left center no-repeat;
clear: both;
font-weight: bold;
padding: 5px 0 5px 25px;
}
.ljtags a{
font-weight: normal;
text-decoration: none;
}
.comments {
border-top: 1px dotted #d7d7d7;
clear: both;
color: #95918F;
font-size: 11px;
margin: 20px auto;
padding: 5px 5px 0 5px;
position: relative;
text-align: right;
width: 96%;
}
.comments a, .comments a:link, .comments a:visited{
color: #95918f;
padding: 0 5px;
text-decoration: none;
}
.comments a:hover {
color: #7ed0d6;
text-decoration: none;
}
/******* entry *******/
.datesubjectcomment {
}
.userpiccomment {
background:url(http://hodo7.com/web/freebies/hooky/texture/blue-bg.png);
border: 1px solid #98ced3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
margin: -40px 15px 15px -40px;
padding: 10px;
}
.box {
}
input, textarea {
background: #fff;
color: #000;
}
textarea.textbox {
width: 95% !important;
}
.reply{
background: #fff;
color: #000;
font: 11px "Verdana", sans-serif;
line-height: 125%;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
position: relative;
text-align: left;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
margin: 10px;
position: relative;
}
.commentbox {
background: #e9e9e9;
padding: 10px;
margin: 10px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
}
.datesubjectcomment a:hover {
}
.commentboxpartial {
background: #fff;
border: 1px solid #fff;
margin: 10px;
padding: 10px;
}
.commentinfo {
background: #fff;
margin-top: 10px;
width: 100%;
}
/******* sidebar *******/
#sidebar {
padding: 78px 20px 10px;
position: fixed;
/*to make the sidebar scrollable, replace "fixed" with "absolute"*/
width: 160px;
z-index: 1;
}
#sidebar a, #sidebar a:link, #sidebar a:visited{
color: #535352;
}
#sidebar a:hover {
color: #7e7e7c;
}
.defaultuserpic {
background:url(http://hodo7.com/web/freebies/hooky/texture/gray-bg.png);
border: 1px solid #98ced3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto 20px;
padding: 10px;
width: 100px;
}
.defaultuserpic img{
border: 1px solid #E1E1E1;
}
.sbarheader {
}
.sbarbody , .sbarbody2 {
margin-bottom: 20px;
}
.sbarbody ul{
margin: 0;
padding: 0;
}
#sidebar_summary li.sbaritem {
}
.sbarlist li.sbaritem {
}
#sidebar_calendar{
}
table.calendar {
margin: 0 auto;
}
.sbarcalendar {
border: 1px solid #464646;
text-align: center;
}
.sbarcalendarposts {
background: #C9EAED;
border: 1px solid #464646;
}
.sbarcalendarposts a{
}
ul.sbarlist {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li.sbaritem, .tagcloud {
list-style: none;
}
.tagcloud a{
font-size: 11px !important;
}
li.sbaritem{
border-bottom: 1px solid #98ced3;
border-top: 1px solid #daeff0;
padding: 5px 0;
}
li:first-child.sbaritem{
border-top: 0;
}
li:last-child.sbaritem{
border-bottom: 0;
}
li.sbaritem a{
color: 535352;
text-decoration: none;
}
li.sbartitle {
font: 24px "Lobster", "Georgia", times, serif;
}
/******* archive *******/
ul.year {
color: #797878;
font: bold 15px "Arial Black", arial, sans-serif;
padding-bottom: 40px;
text-align: center;
}
ul.year li {
display: inline;
}
table.yeartable {
border-collapse: collapse;
margin: 0 auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background: #F6F5F4;
border: 1px solid #797878;
padding: 2px 2px 10px 0;
}
table.yeartable td.yearday {
background: #C9EAED;
color: #797878;
font-weight: bold;
text-align: center;
}
td.yearmonth {
border: none;
color: #797878;
font: bold 15px "Arial Black", arial, sans-serif;
padding: 0 0 10px 0;
}
/****************************************** footer ******************************************/
#footer {
clear: both;
float: right;
margin: 130px 0 0;
position: relative;
z-index: 100;
}
ul.navfooter{
margin: 0;
padding: 0;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
ul.navfooter li{
color: #797878;
font: 20px "Lobster", "Georgia", times, serif;
margin: 0 15px 0 0;
}
ul.navfooter li a{
color: #797878;
text-decoration: none;
}
ul.navfooter li + li{
color: #7ed0d6;
margin: 0;
}
ul.navfooter li + li a{
color: #7ed0d6;
text-decoration: none;
}
ul.navfooter li a:hover{
color: #adadad;
}
ul.navfooter li.viewing{
display: none;
}
ul.navfooter li a{
text-decoration: none;
}
.clearfoot {
clear: both;
height: 0;
}
/****************************************** misc ******************************************/
.clear {
height: 0;
}
.skiplinks {
margin: 10px 0 35px;
text-align: center;
}
.skiplinks a{
color: #797878;
font-weight: bold;
text-decoration: none;
}
.skiplinks a:hover{
color: #7ed0d6;
}
.headerimage {
/* for formatting header image */
}
.separator{
/* for formatting separators between entries */
height: 35px;
}
* html .subcontent {
/* fixes an IE reply page bug */
clear: none;
height: 1%;
}
* html .box#commentform {
/* fixes an IE reply page bug */
background: #000;
border: 1px solid #fff;
position: absolute;
}
/****************************************** contextual popup ******************************************/
div.ContextualPopup {
text-shadow: none;
}
/****************************************** mini icons ******************************************/
.sbaritem img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png);
padding: 11px 14px 8px 5px !important;
width: 0;
height: 0;
}
.entry-title img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 23px 0 0 29px !important;
width: 0;
height: 0;
}
.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.sbaritem img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
padding: 11px 5px 2px 16px!important;
width: 0;
height: 0;
}
.entry-text dl dd img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 18px 0 0 29px !important;
width: 0;
height: 0;
}
.sidebar-summary img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
padding: 16px 16px 0 0!important;
width: 0;
height: 0;
}
/* DIRECTIONS: To install, go to your Home section in LJ. Scroll over Journal in the menu, click Journal Style. Below you'll find a section of themes to select and a search field. In the search box put in "Flexible Squares" and choose the template called "Black and White and Red All Over". In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar on the left)" and make your add placement between entries if you have a Plus account. (Vertical banner may work as well, but horizontal will break the layout). Then click the "Customize selected theme" button next to that. On your left you'll see a blue sidebar, and click on "Custom CSS." You'll see a drop down options, make sure they're all marked "No". Leave "Custom external stylesheet URL" entry blank.
If you haven't already, you need upload all the images to your own server/image service and replace all the image URLs on this stylesheet with your own URLs. Then copy and paste this WHOLE document into the "Custom stylesheet" box.
Click "Save Changes" and it should be ready to go! */
Template: orange hooky (NO texture)
For: Flexible Squares
NOTES: If you use this option the sidebar won't stretch down to the browser, but it's styled nicely.
Images: These are hosted on my own domain, PLEASE save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!
Here is a zip of the images and stylesheet.
Code:
The post is too long, rather than making a second post I'll have to link to the style style here, which will open in a new window.
Rules of the Game: - Credit betterdolphin somewhere viewable, like a stickied post or userinfo, and leave the credit on the sheet
- You may edit to suit your needs, but credit would still be nice.
- Commenting not necessary, but makes me feel good all over anyway if you do.