#52 - Butterfly
D E S C R I P T I O N
Name:
Butterfly
Description:
Elegant, Flexible squares layout with a butterfly theme.
Originally this layout was created for S1-generator, but a layout from the amazing Irinafan opened my eyes for navigation-options.
G E N E R A L I N F O R M A T I O N
Works with ads?:
Yes
Style:
Flexible Squares.
Tested in:
IE and Mozilla Firefox.
Best Resolution:
1024*768 and above
Works with Navigation Strip?:
Yes
Credit:
Please put a link to gawariel_design in your profile or sidebar.
{Bigger}
I N S T A L L A T I O N
Website:
Make sure you have a website (Web Page) defined in your userinfo!
Go to Manage:
Customize
Select a New Theme:
- Type Flexible Squares in the search box.
- Click 'Search'.
- Apply any theme that you get in the search results, it doesn't really matter which one!
Choose a Page Setup:
- Apply the following: 2 Column (sidebar on RIGHT).
- Click Customize Selected Theme
Note:
The following section(s) can be found in the left, blue sidebar of the page.
Only the sections I mention are the ones you MUST adjust. You can play with the rest as you please.
Custom CSS:
- Use layout's stylesheet(s): No
- Use layout's stylesheet(s) when including custom external stylesheet: No
- Use external stylesheets: NO
- Custom external stylesheet URL: Leave empty
- Custom stylesheet: Paste the stylesheet (given bellow) in this box.
Known Issues:
When you do not define tags in your post, your meta-date (mood/music) will overlap your entry-text. To change that you'll need to remove the bold part of the following code:
.currents {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/Currents.jpg) no-repeat top left;
padding: 28px 0px 0px 33px;
height: 59px;
margin-top: -60px;
}
I M A G E S & C O D E
Images:
The images are hosted on my account, but it is recommended that you upload them yourself. Don't forget to change the URL's in the code!
Code:
/* LAYOUT 52: BUTTERFLY FLY AWAY */
/* S2 STYLE: FLEXIBLE SQUARES */
/* AVAILABLE AT GAWARIEL_DESIGN (http://community.livejournal.com/gawariel_design/) */
/* CREATED BY GAWARIEL (http://gawariel.livejournal.com/) */
/* ALL IMAGES MADE IN PHOTOSHOP CS */
/* ORIGINAL FLEXIBLE SQUARES STYLESHEET REARRANGED BY CARTONAGE (http://community.livejournal.com/cartonage) */
/*-----------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------
Misc
------------------------------------------------------------------------*/
blockquote {
padding: 8px;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/blockquote.jpg);
;){kind=link}
font-size: 10px!important;
border: 1px solid #C9B3B5;
border-left: 8px solid #94676C;
}
textarea {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/blockquote.jpg);
font-family: arial;
font-size: 10px;
width: 50%;
color: #9E7074!important;
line-height: 20px;
}
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/LJuser.png) !important;
padding: 16px 16px 0 0 !important;
}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/LJcomm.png) !important;
padding: 16px 16px 0 0 !important;
}
* html span.ljuser{
background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/LJuser.png) !important;
background-repeat: no-repeat;
background-position: left middle;
padding: 0px 16px 16px 0px !important;
}
* html span.ljuser img{
visibility: hidden;
}
/*---------------------------------------------------------------------
Main
------------------------------------------------------------------------*/
body {
background-color: #9E7074;
text-align: justify;
color: #B79E9F;
font-family: "Arial", sans-serif;
font-size: 10px;
overflow-x:hidden;
}
a, a:link, a:visited {
color: #B04044;
text-decoration: none;
}
a:hover {
color: #E27276;
text-decoration: underline;
}
p, td, blockquote {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content{
width: 750px;
margin-left: auto; margin-right: auto;
background:#FFFEFE;
}
#maincontent {
margin-top: 15px;
margin-right: 200px;
}
#sidebar {
margin-top: 15px;
width: 200px;
float: right;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/Header.jpg) no-repeat top center;
height: 350px;
}
.headerimage {
/* for formatting header image */
}
.title {
display: none;
}
.subtitle{
display: none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
ul.navheader {
background:url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/Navigation.jpg) no-repeat top left;
height: 547px;
width: 100px;
margin-left: -44px;
padding-top: 5px;
position:relative;
z-index:200;
}
ul.navheader li {
display: block;
margin-left: -30px;
padding: 0px;
}
html*ul.navheader li {
margin-left: 10px;
}
ul.navheader li a, ul.navheader li.view{
display:block;
width:29px;
height:107px;
font-size:0px;
color: #9E7074;
}
html*ul.navheader li a, html*ul.navheader li.view {
height: 104px;
}
ul.navheader li a:hover, ul.navheader li.view{
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/NavHover.jpg) no-repeat center right;
color: #9E7074;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 10px 0px 20px;
padding: 0px;
color: #B79E9F;
font-family: "Arial", sans-serif;
font-size: 10px;
text-align: justify;
line-height: 20px;
}
.userpic {
position: relative;
float: right;
text-align: center;
width:125px;
height:120px;
margin: 65px 0px 0px 0px;
font-size: 11px;
z-index: 15;
background:#FFFEFE;
}
.userpic img{
border: 2px solid #F7F4F4;
}
.date {
font-size:11px;
color: #654C4D;
float: right;
padding:3px;
font-variant:small-caps;
}
.subject {
text-align: left;
font-weight: bold;
font-family: georgia;
font-variant: small-caps;
font-size: 10pt;
letter-spacing: 1px;
color: #654C4D;
padding: 20px 10px 5px 35px;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/Subject.jpg) no-repeat left center;
}
.subject a, .subject a:link, .subject a:visited {
color: #654C4D;
}
.subject a:hover {
color: #b0b9c8;
}
.datesubject {
border-bottom: 1px solid #614849;
margin: 15px;
}
.entry ul li{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li{
padding-left: 5px;
margin-left: 15px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Arial", sans-serif;
font-size: 10px;
text-transform: lowercase;
}
.currents {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/Currents.jpg) no-repeat top left;
padding: 28px 0px 0px 33px;
height: 59px;
margin-top: -60px;
}
.ljtags {
padding: 30px 0px 0px 35px;
text-transform: lowercase;
position:relative;
z-index: 200;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/Comment.jpg) no-repeat top right;
height: 77px;
margin-bottom: 50px;
font-family: "arial", sans-serif;
font-size: 8pt;
letter-spacing: 2px;
font-variant: small-caps;
text-align: right;
position: relative;
}
div.comments {
padding: 28px 35px 0px 0px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #421E25;
}
div.comments a:hover {
color: #B04044;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 0px;
margin-top: -20px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: right;
text-align: center;
width:125px;
height:120px;
margin: 65px 0px 0px 0px;
font-size: 11px;
z-index: 15;
background:#FFFEFE;
}
.userpicfriends a{
font-variant: small-caps;
color: #B04044;
letter-spacing: 1px;
}
.userpicfriends a:hover {
color:#E27276;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
display: none;
}
.sbarbody {
padding: 0px 15px 0px 15px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #B04044;
}
div#sidebar a:hover {
color: #E27276;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border: 1px solid #9E7073;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border: 1px solid #9E7073;
background-color: #E1D5D6;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
padding-left: 5px;
list-style: none;
line-height: 20px;
border-bottom: 1px solid #F0E9EA;
}
li.sbartitle {
padding-left: 15px;
list-style: none;
margin-bottom: 10px;
margin-top: 10px;
color: #715859;
font-family: arial;
font-size: 14px;
font-variant: small-caps;
text-align: right;
border-bottom: 1px solid #715859;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 14px;
font-variant: small-caps;
letter-spacing: 1px;
color: #B79E9F;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
ul.navfooter li a:hover{
text-decoration: none;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px solid #9E7073;
}
table.yeartable td.yearday {
background-color: #E1D5D6;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
border-bottom: 1px solid #B79E9F;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
float: right;
text-align: center;
font-size: 11px;
z-index: 15;
background:#FFFEFE;
}
.box {
border-top: 1px solid #B79E9F;
padding: 10px;
margin: 0px 0px 0px 10px;
clear: left;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 10px;
color: #9E7074;
font-family: arial;
}
.commentbox {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/52_Butterfly/blockquote.jpg);
border: 1px solid #B79E9F;
padding: 10px;
margin: 10px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #B04044;
}
.datesubjectcomment a:hover {
color: #E27276;
}
.commentboxpartial {
border: 1px solid #B79E9F;
padding: 10px;
margin: 10px;
background-color: #9E7074;
}
.commentinfo {
background-color: #d4dce8;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
E X T R A
FO Banner:
Icon:
T R O U B L E S H O O T I N G
Before asking any questions, make sure you read all information above thouroughly and that your question isn't adressed in the FAQ.
If your problem still isn't solved, you are welcome to ask your question here