Flexible Squares: bustle
Been a long long while, let's see if I can actually stick to this, huh?
-Click for larger cap, opens in new window-
"bustle"
*Note: This layout doesn't working perfectly in IE, crazy, right? But the issue is just the title image won't extend all the way across without making the icon freak the hell out. But otherwise, it's fine. Maybe later when I'm not in a rage I'll try to fix it.
Template: fragile proceeding
For: Flexible Squares
Directions: Click here. In search box put "Flexible Squares" and choose the template "Black and White and Red All Over".
Click on Customize Selected Theme. Click on "Customize CSS" menu link on left. "Use layout's 'Base Weblog' stylesheet" needs to be set on "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.
Images: These are hosted on my own Photobucket account, I encourage you to save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!
Pink round corners: top2.jpg
Red-purple round corners: top.jpg
Background: bg.jpg
Code:
/* --
fragile proceeding
For: Flexible Squares
Available: http://community.livejournal.com/betterdolphin/
By: Toby @ http://itsanooray.livejournal.com
-- */
/* DIRECTIONS: Full directions on how to install are on the bottom of this document! */
/* Please remember to upload the images to Photobucket or some other free image service and replace the links in this stylesheet! */
/*******************************General/Misc*******************************/
body {
background:url(http://i621.photobucket.com/albums/tt296/quillsh/pink/bg.jpg);
background-color: #342329;
color: #1b1215;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0 auto;
text-align: center;
margin-top: 30px;
}
a, a:link {
color: #bb565c;
text-decoration: underline;
}
a:hover {
color: #342329;
text-decoration: underline;
}
a:visited {
color: #342329;
text-decoration: underline;
}
ul, ol {
padding: 3px;
margin: 3px 0 0 35px;
margin-bottom: -5px;
.margin-bottom: 0;
}
blockquote {
border-left: 3px solid #bb565c;
padding:3px;
margin-bottom: -5px;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content-outer {
margin: 0 auto;
text-align: center;
}
#content {
background:url(http://i621.photobucket.com/albums/tt296/quillsh/pink/top.jpg);
background-repeat: repeat-x;
background-color: #bb565c;
width: 699px;
margin: 0 auto;
text-align: center;
}
/*******************************Header*******************************/
#header {
margin: 0 auto;
padding: 20px 0 3px 0;
padding-bottom: 10px;
.margin-bottom: -10px;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #fde8d3;
font-weight: bold;
width: 650px;
}
div#header a, div#header a:link, div#header a:visited {
color: #fde8d3;
text-decoration: none;
}
div#header a:hover {
color: #fcaf9f;
text-decoration: none;
}
.title {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
top: 10px;
padding: 0 0 0 5px;
color: #fde8d3;
font-weight: bold;
display: inline;
float: left;
}
.subtitle{
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color: #fde8d3;
top: 10px;
display: none;
}
/****Styles the top meny****/
ul.navheader {
padding: 0;
margin: 0;
display: inline;
float: right;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
display:inline;
list-style-type:none;
padding-left:10px;
margin-left:10px;
}
/*******************************Main Content*******************************/
#maincontent {
margin-top: 15px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #1b1215;
text-align: left;
}
.subcontent {
margin: 0 auto;
text-align: center;
width: 650px;
}
.entry {
margin: 0px 0 10px 0;
padding: 10px 0 10px 0;
background-color: #fde8d3;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
psoition: relative;
}
.entry_text {
padding: 0 0 10px 15px;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: right;
background-color: #bb565c;
padding: 5px;
margin: 10px 10px 0 0;
z-index: 15;
}
.userpicfriends {
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
z-index: 15;
position: relative;
float: right;
background-color: #bb565c !important;
padding: 5px;
margin: 10px 10px 0 0;
z-index: 15;
}
.datesubject {
background:url(http://i621.photobucket.com/albums/tt296/quillsh/pink/top2.jpg);
background-repeat: repeat-x;
background-color: #fde8d3;
height: 27px;
padding: 5px 0 0 0;
position: relative;
text-align: left;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color: #bb565c;
}
.date {
padding: 10px 0 10px 10px;
display: inline;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
color: #bb565c;
}
.subject {
padding: 10px 0 10px 7px;
display: inline;
text-algin: right;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #bb565c;
font-weight: bold;
}
.subject a, .subject a:link, .subject a:visited, .subject a:hover {
color: #bb565c;
text-decoration: none;
}
.currents {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0 0 0 5px;
}
.ljtags {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 30px 0 0 -10px;
font-weight: bold;
}
.comments {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: right;
color: #bb565c;
background-color: #fcaf9f;
padding: 5px 5px 5px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #bb565c;
font-weight: bold;
text-decoration: none;
}
div.comments a:hover {
color: #342329;
font-weight: bold;
text-decoration: none;
}
/*******************************Footer*******************************/
#footer {
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #fde8d3;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*******************************Comments*******************************/
.datesubjectcomment {
background-color: #fcaf9f;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
background-color: #bb565c;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #ffffff;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #ffffff;
color: #000000;
}
textarea.textbox {
width: 95% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #ffffff;
color: #000000;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family:Arial, Helvetica, sans-serif;
color: #000000;
}
.commentbox {
padding: 10px;
margin: 10px;
background-color: #fde8d3;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ffffff;
}
.datesubjectcomment a:hover {
color: #000000;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #fde8d3;
}
.commentinfo {
background-color: #fde8d3;
margin-top: 10px;
width: 100%;
}
/*******************************Calendar*******************************/
.year a, .year a:link, .year a:visited{
color: #fde8d3;
}
.year a:hover {
color: #342329;
text-decoration: none;
}
.yeardate a, .yeardate a:link, .yeardate a:visited{
color: #fde8d3;
}
.yeardate a:hover {
color: #342329;
text-decoration: none;
}
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
color: #fde8d3;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #342329;
}
table.yeartable td.yearday {
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*******************************Misc*******************************/
.clear {
display: none;
}
.skiplinks {
text-align: center;
}
.headerimage {
/* for formatting header image */
}
.separator{
/* for formatting separators between entries */
height: 35px;
}
* 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: #000000;
}
/*******************************Sidebar*******************************/
/****This layout doesn't have a sidebar, but I'll leave this uneditted code here in case anyone wants to try to add one****/
#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #000000;
border-color: #ffffff;
border-width: 1px;
border-style: solid;
font-size: 11px;
font-family:Arial, Helvetica, sans-serif;
color: #ffffff;
width: 160px;
text-align: left;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #999999;
}
div#sidebar a:hover {
color: #ffffff;
text-decoration: none;
}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3px 0;
border-bottom: 1px #ffffff solid;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #ff0000;
border-width: 1px;
border-style: solid;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #ff0000;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem, .tagcloud {
padding-left: 15px;
list-style: none;
}
li.sbartitle {
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
background-color: #cc0000;
margin-bottom: 10px;
margin-top: 10px;
}
/* DIRECTIONS: To install, go to your Home section in LJ. Scroll over Journal in the menu, click Journal Style. To the right you'll find a box telling your Current Theme. Under the section "Select a different theme" there is a search box, in it put "Flexible Squares" and choose the theme "Black and White and Red All Over." In the box in the top right that says "(lj_user)'s Current Theme", click "Change page setup" and choose "1 column (no sidebar)." Now click on "Customize selected theme ->" button on the right.
On that page, on your left, you'll see a sidebar. Click on "Custom CSS." You'll see some drop down options: "Use layout's 'Base Weblog' Stylesheet," "Use layout's stylesheet(s) when including custom external stylesheet," and "Use external stylesheets ". Select "NO" for all of them. Leave "Custom external stylesheet URL" entry blank.
If you haven't already, you need to replace all the image URLs in thie stylesheet with your own URL. Copy and paste this WHOLE document into the "Custom stylesheet" box.
Click "Save Changes" and it should be ready to go! */
Save changes and it should work fine!
Please remember to credit to betterdolphin and enjoy!
-Click for larger cap, opens in new window-
"bustle"
*Note: This layout doesn't working perfectly in IE, crazy, right? But the issue is just the title image won't extend all the way across without making the icon freak the hell out. But otherwise, it's fine. Maybe later when I'm not in a rage I'll try to fix it.
Template: fragile proceeding
For: Flexible Squares
Directions: Click here. In search box put "Flexible Squares" and choose the template "Black and White and Red All Over".
Click on Customize Selected Theme. Click on "Customize CSS" menu link on left. "Use layout's 'Base Weblog' stylesheet" needs to be set on "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.
Images: These are hosted on my own Photobucket account, I encourage you to save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!
Pink round corners: top2.jpg
Red-purple round corners: top.jpg
Background: bg.jpg
Code:
/* --
fragile proceeding
For: Flexible Squares
Available: http://community.livejournal.com/betterdolphin/
By: Toby @ http://itsanooray.livejournal.com
-- */
/* DIRECTIONS: Full directions on how to install are on the bottom of this document! */
/* Please remember to upload the images to Photobucket or some other free image service and replace the links in this stylesheet! */
/*******************************General/Misc*******************************/
body {
background:url(http://i621.photobucket.com/albums/tt296/quillsh/pink/bg.jpg);
;){kind=link}
background-color: #342329;
color: #1b1215;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0 auto;
text-align: center;
margin-top: 30px;
}
a, a:link {
color: #bb565c;
text-decoration: underline;
}
a:hover {
color: #342329;
text-decoration: underline;
}
a:visited {
color: #342329;
text-decoration: underline;
}
ul, ol {
padding: 3px;
margin: 3px 0 0 35px;
margin-bottom: -5px;
.margin-bottom: 0;
}
blockquote {
border-left: 3px solid #bb565c;
padding:3px;
margin-bottom: -5px;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content-outer {
margin: 0 auto;
text-align: center;
}
#content {
background:url(http://i621.photobucket.com/albums/tt296/quillsh/pink/top.jpg);
;){kind=link}
background-repeat: repeat-x;
background-color: #bb565c;
width: 699px;
margin: 0 auto;
text-align: center;
}
/*******************************Header*******************************/
#header {
margin: 0 auto;
padding: 20px 0 3px 0;
padding-bottom: 10px;
.margin-bottom: -10px;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #fde8d3;
font-weight: bold;
width: 650px;
}
div#header a, div#header a:link, div#header a:visited {
color: #fde8d3;
text-decoration: none;
}
div#header a:hover {
color: #fcaf9f;
text-decoration: none;
}
.title {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
top: 10px;
padding: 0 0 0 5px;
color: #fde8d3;
font-weight: bold;
display: inline;
float: left;
}
.subtitle{
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color: #fde8d3;
top: 10px;
display: none;
}
/****Styles the top meny****/
ul.navheader {
padding: 0;
margin: 0;
display: inline;
float: right;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
display:inline;
list-style-type:none;
padding-left:10px;
margin-left:10px;
}
/*******************************Main Content*******************************/
#maincontent {
margin-top: 15px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #1b1215;
text-align: left;
}
.subcontent {
margin: 0 auto;
text-align: center;
width: 650px;
}
.entry {
margin: 0px 0 10px 0;
padding: 10px 0 10px 0;
background-color: #fde8d3;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
psoition: relative;
}
.entry_text {
padding: 0 0 10px 15px;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: right;
background-color: #bb565c;
padding: 5px;
margin: 10px 10px 0 0;
z-index: 15;
}
.userpicfriends {
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
z-index: 15;
position: relative;
float: right;
background-color: #bb565c !important;
padding: 5px;
margin: 10px 10px 0 0;
z-index: 15;
}
.datesubject {
background:url(http://i621.photobucket.com/albums/tt296/quillsh/pink/top2.jpg);
;){kind=link}
background-repeat: repeat-x;
background-color: #fde8d3;
height: 27px;
padding: 5px 0 0 0;
position: relative;
text-align: left;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color: #bb565c;
}
.date {
padding: 10px 0 10px 10px;
display: inline;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
color: #bb565c;
}
.subject {
padding: 10px 0 10px 7px;
display: inline;
text-algin: right;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #bb565c;
font-weight: bold;
}
.subject a, .subject a:link, .subject a:visited, .subject a:hover {
color: #bb565c;
text-decoration: none;
}
.currents {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0 0 0 5px;
}
.ljtags {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 30px 0 0 -10px;
font-weight: bold;
}
.comments {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: right;
color: #bb565c;
background-color: #fcaf9f;
padding: 5px 5px 5px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #bb565c;
font-weight: bold;
text-decoration: none;
}
div.comments a:hover {
color: #342329;
font-weight: bold;
text-decoration: none;
}
/*******************************Footer*******************************/
#footer {
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #fde8d3;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*******************************Comments*******************************/
.datesubjectcomment {
background-color: #fcaf9f;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
background-color: #bb565c;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #ffffff;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #ffffff;
color: #000000;
}
textarea.textbox {
width: 95% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #ffffff;
color: #000000;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family:Arial, Helvetica, sans-serif;
color: #000000;
}
.commentbox {
padding: 10px;
margin: 10px;
background-color: #fde8d3;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ffffff;
}
.datesubjectcomment a:hover {
color: #000000;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #fde8d3;
}
.commentinfo {
background-color: #fde8d3;
margin-top: 10px;
width: 100%;
}
/*******************************Calendar*******************************/
.year a, .year a:link, .year a:visited{
color: #fde8d3;
}
.year a:hover {
color: #342329;
text-decoration: none;
}
.yeardate a, .yeardate a:link, .yeardate a:visited{
color: #fde8d3;
}
.yeardate a:hover {
color: #342329;
text-decoration: none;
}
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
color: #fde8d3;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #342329;
}
table.yeartable td.yearday {
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*******************************Misc*******************************/
.clear {
display: none;
}
.skiplinks {
text-align: center;
}
.headerimage {
/* for formatting header image */
}
.separator{
/* for formatting separators between entries */
height: 35px;
}
* 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: #000000;
}
/*******************************Sidebar*******************************/
/****This layout doesn't have a sidebar, but I'll leave this uneditted code here in case anyone wants to try to add one****/
#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #000000;
border-color: #ffffff;
border-width: 1px;
border-style: solid;
font-size: 11px;
font-family:Arial, Helvetica, sans-serif;
color: #ffffff;
width: 160px;
text-align: left;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #999999;
}
div#sidebar a:hover {
color: #ffffff;
text-decoration: none;
}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3px 0;
border-bottom: 1px #ffffff solid;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #ff0000;
border-width: 1px;
border-style: solid;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #ff0000;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem, .tagcloud {
padding-left: 15px;
list-style: none;
}
li.sbartitle {
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
background-color: #cc0000;
margin-bottom: 10px;
margin-top: 10px;
}
/* DIRECTIONS: To install, go to your Home section in LJ. Scroll over Journal in the menu, click Journal Style. To the right you'll find a box telling your Current Theme. Under the section "Select a different theme" there is a search box, in it put "Flexible Squares" and choose the theme "Black and White and Red All Over." In the box in the top right that says "(lj_user)'s Current Theme", click "Change page setup" and choose "1 column (no sidebar)." Now click on "Customize selected theme ->" button on the right.
On that page, on your left, you'll see a sidebar. Click on "Custom CSS." You'll see some drop down options: "Use layout's 'Base Weblog' Stylesheet," "Use layout's stylesheet(s) when including custom external stylesheet," and "Use external stylesheets ". Select "NO" for all of them. Leave "Custom external stylesheet URL" entry blank.
If you haven't already, you need to replace all the image URLs in thie stylesheet with your own URL. Copy and paste this WHOLE document into the "Custom stylesheet" box.
Click "Save Changes" and it should be ready to go! */
Save changes and it should work fine!
Please remember to credit to betterdolphin and enjoy!