Harry Potter and the Layout of the Phoenix & profile layout
Harry Potter and the Layout of the Phoenix
preview
Click here for live preview, then click on the layout's icon.
layout info
Based on Flexible Squares.
Works for all account types.
Tested in Firefox 31, Google Chrome 37 and Internet Explorer 11.
The widths of maincontent and sidebar are changeable without problem.
how to implement this layout
Go to the Customize Journal page.
Make sure Style System is S2.
Choose the Flexible Squares layout.
Go to Custom CSS
» Use layout's stylesheet(s): No
» Use layout's stylesheet(s) when including custom external stylesheet: No
» Use external stylesheets: No
insert custom stylesheet
/* Harry Potter and the Layout of the Phoenix
http://fuesch.livejournal.com/45501.html */
body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
color: #00539F;
font-size: 12px;
background: #A61926 url(http://fatfrog.info/Ma/A/layout/hp/5/bg1.jpg) top center fixed;
background-size: cover;
}
body > div[style*="width"] {
width: 100%!important;
margin: 0px!important;
padding: 0px!important;
background-color: #FFD526!important;
border: none!important;
}
body > .wrapper + div[style*="width"] {
background-color: #000000!important;
}
a, a:link {
color: #A61926;
text-decoration: none;
}
a:visited {
color: #CC6A26;
text-decoration: none;
}
a:hover {
color: #A61926;
text-decoration: underline;
}
a:active {
color: #CE0013;
text-decoration: underline;
}
code, kbd, pre, tt {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}
p, td, blockquote {
font-size: 12px;
}
blockquote {
padding: 15px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight.png);
;){kind=link}
}
q {
font-style: italic;
}
q i {
font-style: normal;
}
/* ------- GENERAL ------- */
.ljuser a {
color: #A61926;
}
.ljuser a:active {
color: #CE0013;
}
.clear {
display: none;
}
#header {
margin: 0px 0px 50px 0px;
padding: 20px 0px;
text-align: center;
font-weight: bold;
letter-spacing: 2px;
background: #FFD526;
border-bottom: 5px solid #00539F;
}
ul.navheader {
display: inline-block;
height: 24px;
margin: 0px auto;
padding: 10px 10px 0px 10px;
font-size: 0px;
color: #FFFFFF;
text-transform: uppercase;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/navheader-left.png) left bottom no-repeat, url(http://fatfrog.info/Ma/A/layout/hp/5/navheader.png) right top;
}
ul.navheader a, ul.navheader a:link, ul.navheader a:visited {
color: #FFD526;
}
ul.navheader a:hover, ul.navheader a:active {
color: #FFFFFF;
text-decoration: none;
}
ul.navheader li {
display: inline;
padding: 10px;
font-size: 12px;
}
.title {
margin-top: 11px;
padding: 0px 100px;
color: #A61926;
font-size: 36px;
text-transform: uppercase;
}
.subtitle {
padding: 0px 100px;
color: #00539F;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
}
#sidebar {
float: right;
width: 200px;
margin: 0px 100px 0px 0px;
}
#sidebar > div[style*="width"] {
position: relative;
top: -15px;
width: 200px!important;
margin: 0px!important;
text-align: center;
}
.sbarbody {
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) top center fixed;
background-size: cover;
border-top: 5px solid #00539F;
}
.sbarbody2 {
margin: 0px 0px 30px 0px;
padding: 5px 10px 7px 10px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) top center fixed;
background-size: cover;
border-bottom: 5px solid #00539F;
}
ul.sbarlist {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.sbarlist + .sbarlist {
margin: 0px 0px 30px 0px;
padding: 0px;
list-style: none;
border-bottom: 5px solid #00539F;
}
li.sbartitle {
margin: 0px;
padding: 5px 5px 6px 5px;
list-style: none;
text-align: center;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight.png) bottom repeat-x;
}
.tagcloud {
padding: 6px 10px 12px 10px;
list-style: none;
text-align: center;
}
.tagcloud span {
display: inline-block;
margin-top: 6px;
vertical-align: middle;
}
.tagcloud a {
padding: 2px 5px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight.png);
}
.tagcloud a:hover {
padding: 2px 5px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/highlight.png);
;){kind=link}
}
li.sbaritem {
margin: 0px;
padding: 5px 5px 7px 5px;
text-align: center;
}
li.sbaritem + li {
margin: 0px;
padding: 6px 5px 7px 5px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight.png) top repeat-x;
}
li.sbaritem:hover {
padding: 5px 5px 7px 5px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/highlight.png);
}
li.sbaritem + li:hover {
margin-top: 1px;
padding-top: 4px;
border-top: 1px solid #DAAD28;
border-width: 1px 0px 0px 0px;
-moz-border-image: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight100x100.png) 1 round;
-webkit-border-image: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight100x100.png) 1 round;
-o-border-image: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight100x100.png) 1 round;
border-image: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight100x100.png) 1 round;
border-image-outset: 1px 0px 0px 0px;
}
.defaultuserpic {
margin: 0px 0px 30px 0px;
padding: 10px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) top center fixed;
background-size: cover;
border-top: 5px solid #00539F;
border-bottom: 5px solid #00539F;
}
table.calendar {
margin: 8px auto;
}
.sbarcalendar {
padding: 2px 4px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight.png);
}
.sbarcalendarposts {
padding: 2px 4px;
text-align: center;
font-weight: bold;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight.png);
}
.sbarcalendarposts a {
display: block;
}
.sbarcalendarposts:hover {
background: url(http://fatfrog.info/Ma/A/layout/hp/5/highlight.png);
}
#maincontent {
margin: 0px 350px 0px 100px;
text-align: left;
}
#maincontent > div[style*="margin"] {
position: relative;
top: -15px;
margin: 0px auto!important;
text-align: center;
}
.clearfoot {
height: 1px;
margin-bottom: 0px;
font-size: 0px;
clear: both;
}
#footer {
margin: 0px;
padding: 10px;
text-align: center;
font-weight: bold;
text-transform: capitalize;
letter-spacing: 1px;
background: #000000;
border-top: 5px solid #00539F;
z-index: 100;
clear: both;
}
ul.navfooter{
margin: 0px;
padding: 0px;
}
ul.navfooter li {
display: inline;
margin: 0px 10px;
color: #FFFFFF;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #00539F;
}
div#footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
div#footer a:active {
text-decoration: underline;
}
#footer + .clearfoot {
display: none;
}
/* ------- ENTRIES & FRIENDS ------- */
.subcontent {
margin-bottom: 40px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) top center fixed;
background-size: cover;
border-top: 5px solid #00539F;
border-bottom: 5px solid #00539F;
}
.userpic {
position: relative;
float: right;
margin: 0px 0px 10px 10px;
padding: 0px;
background: none!important;
border-bottom: 5px solid #00539F;
z-index: 15;
}
.userpicfriends {
position: relative;
float: right;
margin: 0px 0px 10px 10px;
padding: 0px;
text-align: center;
font-size: 10px;
color: #FFFFFF;
font-style: italic;
background: #00539F!important;
border-bottom: 5px solid #00539F;
z-index: 15;
}
.userpicfriends img {
padding-bottom: 3px;
}
.userpicfriends font {
color: #FFD526;
}
.datesubject {
text-align: center;
}
.date, .replytoposter {
padding: 5px 10px 5px 10px;
font-style: italic;
}
.subject, .replytosubject {
padding: 0px 10px 10px 10px;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.entry {
margin: 0px;
padding: 0px 10px 10px 10px;
text-align: left;
}
.ljtags, .currents {
margin-top: 15px;
color: #825A86;
font-size: 10px;
font-weight: bold;
font-style: italic;
}
.currentmood img {
margin-right: 3px;
}
.comments {
position: relative;
top: 29px;
height: 24px;
margin-top: -20px;
padding: 9px 100px 0px 100px;
color: #A61926;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/comments.png) top center no-repeat;
}
div.comments a, div.comments a:link, div.comments a:visited {
padding: 0px 5px;
color: #FFD526;
}
div.comments a:hover, div.comments a:active {
color: #FFFFFF;
}
.separator {
display: none;
}
/* ------- COMMENTS ------- */
.skiplinks {
padding: 10px;
font-size: 0px;
text-align: center;
font-weight: bold;
text-transform: capitalize;
letter-spacing: 1px;
background: #000000;
}
.skiplinks a, .skiplinks a:link, .skiplinks a:visited {
margin: 0px 10px;
font-size: 12px;
color: #00539F;
}
.skiplinks a:hover {
color: #FFFFFF;
text-decoration: none;
}
.skiplinks a:active {
text-decoration: underline;
}
.box center {
margin-bottom: 20px;
}
.box + .box {
text-align: center;
}
.box + .box center {
margin-top: 10px;
}
.commentbox {
margin-bottom: 20px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) top center fixed;
background-size: cover;
border-top: 5px solid #00539F;
}
.datesubjectcomment {
padding: 10px;
padding: 5px 10px;
font-style: italic;
}
.datesubjectcomment strong {
font-size: 20px;
font-style: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
.userpiccomment {
position: relative;
float: left;
margin: -5px 10px 5px -10px;
padding: 0px;
background: none!important;
border-bottom: 5px solid #00539F;
z-index: 15;
}
.commentreply {
margin: 10px;
}
.commentreply + div {
padding: 7px 10px 10px 10px;
text-align: center!important;
font-size: 0px!important;
font-weight: bold;
text-transform: capitalize;
letter-spacing: 1px;
background: #000000;
border-top: 5px solid #00539F;
}
.commentreply + div a {
margin: 0px 5px;
font-size: 10px;
color: #00539F;
}
.commentreply + div a:hover {
color: #FFFFFF;
text-decoration: none;
}
.commentreply + div a:active {
text-decoration: underline;
}
.commentreply + div div {
display: inline;
padding: 0px!important;
font-size: 10px;
}
.commentreply + div div img {
width: 12px;
height: 12px;
vertical-align: text-bottom;
}
.commentreply + div div input[type="checkbox"] {
margin-bottom: 0px;
vertical-align: bottom;
}
.commentboxpartial {
margin-bottom: 20px;
padding: 10px;
font-style: italic;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) top center fixed;
background-size: cover;
}
#qrform {
margin-bottom: 20px;
padding: 10px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) top center fixed;
background-size: cover;
border-top: 5px solid #00539F;
border-bottom: 5px solid #00539F;
}
#qrform table {
margin: 0px auto;
border: none!important;
}
.commentbox #qrform {
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
text-align: left!important;
font-size: 12px!important;
color: #FFFFFF;
font-weight: normal;
text-transform: none;
letter-spacing: 0px;
background: none;
border-top: none;
border-bottom: none;
}
.commentbox #qrform a {
margin: 0px;
font-size: 12px;
}
.commentbox #qrform input[type="checkbox"] {
margin-top: 0px;
vertical-align: text-top;
}
.commentbox #qrform input, .commentbox #qrform textarea {
background: #38293D;
color: #FFFFFF;
}
input, textarea {
padding: 2px;
color: #00539F;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight.png);
border-top: 2px solid #00539F;
border-right: none;
border-bottom: 2px solid #00539F;
border-left: none;
}
input[type='radio'], input[type='checkbox'] {
padding: 0px;
background: none;
border: none;
}
input[type='submit'], input[type='button'], .commentbox #qrform input[type='submit'] {
padding: 1px 3px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
color: #FFD526;
font-weight: bold;
background: #00539F;
border-top: 2px solid #006CB0;
border-right: 2px solid #003D87;
border-bottom: 2px solid #003D87;
border-left: 2px solid #006CB0;
}
input[type='submit']:active, input[type='button']:active {
position: relative;
top: 1px;
left: 1px;
border-top: 2px solid #0063AA;
border-right: 2px solid #004590;
border-bottom: 2px solid #004590;
border-left: 2px solid #0063AA;
}
textarea.textbox {
width: 95% !important;
}
#postform {
margin-bottom: 20px;
padding: 10px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) top center fixed;
background-size: cover;
border-top: 5px solid #00539F;
border-bottom: 5px solid #00539F;
}
#postform table {
margin: 0px auto;
}
/* ------- CALENDAR ------- */
.lj-view-archive #maincontent br {
display: none;
}
.lj-view-archive #maincontent {
margin: 0px 340px 0px 90px;
text-align: center;
}
ul.year {
margin: 0px 10px -10px 10px;
padding: 10px;
text-align: center;
color: #FFFFFF;
font-weight: bold;
text-transform: capitalize;
letter-spacing: 1px;
background: #000000;
}
.year a, .year a:link, .year a:visited {
color: #00539F;
}
.year a:hover, .year a:active {
color: #FFFFFF;
}
ul.year li {
margin: 0px 10px;
padding: 0px;
display: inline;
}
table.yeartable {
display: inline-table;
margin: 10px 10px;
padding: 3px 10px 8px 10px;
vertical-align: top;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) top center fixed;
background-size: cover;
border-top: 5px solid #00539F;
border-bottom: 5px solid #00539F;
}
.yeartable td {
width: 25px;
}
td.yearmonth {
padding: 0px 0px 10px 0px;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
vertical-align: top;
border-style: none;
}
td.yearmonth a {
font-size: 12px;
font-weight: normal;
text-transform: none;
letter-spacing: 0px;
font-style: italic;
border-style: none;
}
table.yeartable td.yearday {
padding: 10px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight.png);
}
table.yeartable td.yeardate a {
display: block;
}
td.yeardate div {
padding: 3px 5px 0px 5px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight.png);
}
td.yeardate div + div {
padding: 0px 0px 3px 0px;
font-size: 16px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight.png);
}
.lj-view-month #maincontent form {
margin: 0px;
padding: 10px;
text-align: center;
font-weight: bold;
text-transform: capitalize;
letter-spacing: 1px;
background: #000000;
}
.lj-view-month #maincontent form a, .lj-view-month #maincontent form a:link, .lj-view-month #maincontent form a:visited {
color: #00539F;
}
.lj-view-month #maincontent form a:hover, .lj-view-month #maincontent form a:active {
color: #FFFFFF;
}
.lj-view-month #maincontent form br, .lj-view-month #maincontent form + br , .lj-view-month #maincontent form + br + br {
display: none;
}
.lj-view-month .subcontent {
margin-bottom: 0px;
padding: 0px;
background: none;
border: none;
}
.lj-view-month .entry {
padding: 0px;
font-size: 0px;
}
.lj-view-month dt {
margin: 0px;
padding: 5px 10px 0px 10px;
text-align: center;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) top center fixed;
background-size: cover;
border-top: 5px solid #00539F;
}
.lj-view-month dd {
margin: 0px 0px 30px 0px;
padding: 10px 10px 10px 10px;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) top center fixed;
background-size: cover;
border-bottom: 5px solid #00539F;
}
.lj-view-day .separator + .clear + .clear + .skiplinks {
margin-top: -40px;
margin-bottom: 20px;
padding: 12px 10px;
}
/* ------- TAGS ------- */
.lj-view-tags h2 {
margin: 0px;
padding: 10px;
text-align: center;
font-size: 20px;
font-weight: bold!important;
text-transform: uppercase;
letter-spacing: 1px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) bottom center fixed;
border-top: 5px solid #00539F;
font-weight: normal;
}
.ljtaglist {
margin: 0px 0px 40px 0px;
padding: 0px 10px 0px 10px;
list-style: none;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/bg2.jpg) bottom center fixed;
border-bottom: 5px solid #00539F;
}
ul.ljtaglist li {
padding: 5px 5px 7px 5px;
}
ul.ljtaglist li + li {
margin: 0px;
padding: 6px 5px 7px 5px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight.png) top repeat-x;
}
ul.ljtaglist li:hover {
padding: 5px 5px 7px 5px;
background: url(http://fatfrog.info/Ma/A/layout/hp/5/highlight.png);
}
ul.ljtaglist li + li:hover {
border-top: 1px solid #4D416C;
border-width: 1px 0px 0px 0px;
-moz-border-image: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight100x100.png) 1 round;
-webkit-border-image: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight100x100.png) 1 round;
-o-border-image: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight100x100.png) 1 round;
border-image: url(http://fatfrog.info/Ma/A/layout/hp/5/lowlight100x100.png) 1 round;
border-image-outset: 1px 0px 0px 0px;
}
ul.ljtaglist li:hover a {
color: #A61926;
}
ul.ljtaglist li:hover a:active {
color: #CE0013;
}
This profile
layout has a fixed width,
changing the width would mess up the layout.
There are 3 places where you can put your text:
1. The (height-wise) inflexible part at the top. You shouldn't put too much text in there or the background picture will repeat and you'll need to put in line breaks, to avoid having text on the blue bits.
2. Here, the flexible part in the middle. You can put in as much as you like, no problem with pictures.
3. And the inflexible bottom part. There you should keep the text from going into the darker parts of the background image.
Go to Edit Profile and insert the code into the Bio part.
To copy the code, click in the text area and then press Ctrl+A and Ctrl+C.
| http://fatfrog.info/Ma/A/layout/hp/5/profile-topleft.png"> | http://fatfrog.info/Ma/A/layout/hp/5/profile-topmidleft.png"> | http://fatfrog.info/Ma/A/layout/hp/5/profile-topmidright.png"> | http://fatfrog.info/Ma/A/layout/hp/5/profile-topright.png"> |
| http://fatfrog.info/Ma/A/layout/hp/5/profile-midleft.png"> | http://fatfrog.info/Ma/A/layout/hp/5/profile-midmiddle.png" valign="top" align="center"> TOP CONTENT HERE | http://fatfrog.info/Ma/A/layout/hp/5/profile-midright.png"> | |
| MID CONTENT HERE | |||
| http://fatfrog.info/Ma/A/layout/hp/5/profile-bottomleft.png" valign="top"> BOTTOM CONTENT HERE | http://fatfrog.info/Ma/A/layout/hp/5/profile-bottomright.png"> | ||
You don't have to use the lj-raw tags. With them you can only make line breaks/new paragraphs with
and
. Without the lj-raw tags you can also create line breaks and new paragraphs just by hitting the enter key.
If you want to change the link color, put a font tag with a different color in your link. Like so:
LINK TEXT