Witch book MySpace Layout

Witch Book MySpace Layout

October 14, 2008

Finally, the layout you’ve all been waiting for is finally here. With some extreme modifications, the highly sought after witchbook layout is finally available.

UPDATE

This layout is now available for profile 2.0. The original profile version can still be used but it is too buggy to continuously maintain it.

When updating to version 2.0 with the new code follow these steps:
1. Under Select Theme, choose “No Theme”
2. Page Width should be 960px and choose the layout to the far right.
3. Under advanced edit, you may want to reset all styles.
4. Under the css, clear all existing code and add the new code.

.layout { 
	myspace-layout-name: Witchbook Layout;
	myspace-layout-site: url(http://www.layoutwall.com);
	myspace-layout-designer: ronner;
}

body {
	background: black url(http://www.layoutwall.com/images/witchbook/witchbook.jpg) no-repeat top center;
	color:#5e5e5e;
}
#header, #header * {
	background-image:none;
	background-color:transparent;
	border:none;
}
#googlebar {
	display:none;
}
#topnav ul {
	border:none;
}
#topnav ul a:hover {
	background-color:black;
	color:#5e5e5e;
}
#topnav ul li {
	border-left:none;
	float:left;
	position:relative;
	z-index:10003;
}
#topnav ul li a {
	color:#4e0806;
}
#topnav ul.subMenu {
	background-color:black;
	border:none;
	color:#5e5e5e;
}
#topnav ul li.dropDown:hover a,#topnav ul li.hover a,#topnav ul li.hover a:hover,
div#searchContainer_Header div#srchMenuListBox_Header ul li a:hover,
#topnav li.dropDown:hover ul.subMenu a:hover,#topnav li.hover ul.subMenu a:hover{
	background-color:black;
	color:#5e5e5e;
}
#topnav ul li.dropDown:hover a, #topnav ul li.hover a, #topnav ul li.hover a:hover, #topnav li.dropDown ul.subMenu a:hover,
#topnav ul li.dropDown:hover a, #topnav ul li.hover a, #topnav ul li.hover a:hover, #topnav ul.subMenu a, #topnav ul.subMenu a:hover {
	background-color:black;
	color:#5e5e5e;
}
#topnav ul.subMenu li .mailCountNav {
	color:#4e0806 ;
}
#topnav ul li a small, #topnav ul li a small:hover,  .notificationsCountNav,
#topnav ul li a:hover small, #topnav ul li a.hover small {
	color:#4e0806;
}
div#header * {
	font-size:11px;
}
.vcard .photo a img {
	visibility:visible;
	padding:3px;
	background-color:white;
	border-top:1px solid;
	border-bottom-color:#cfcfcf;
	border-right-color:#cfcfcf;
	border-left-color:#dfdfdf;
	border-top-color:#dfdfdf;
	max-height:188px ;
	max-width:176px ;
}
.basicInfoModule {
	width: 450px;
	position:absolute;
	top:170px;
	color:#666666;
}
.nickname {
	font-family:"Comic Sans MS", cursive;
	font-weight:bold;
	font-size:20px;
}
.detailsModule {
	position:absolute;
	left:50%;
	margin-left:-283px;
	width:270px;
	top:208px;
	font-family:"Comic Sans MS", cursive;
	background: transparent url(http://www.layoutwall.com/images/witchbook/witchbook.jpg) no-repeat;
	background-position: -357px -193px;
}
.detailsModule li {
	padding:0px;
}
.blurbsModule {
	position:absolute;
	top:400px;
	left:50%;
	margin-left:-460px;
	width:450px;
	font-family:"Comic Sans MS", cursive;
}
.videoSliderModule {
	display:none;
}
.postCommentModule {
	display:none;
}
.profileDemographics {
	display:none;
}
.friendSpaceModule {
	width:450px;
	position:absolute;
	left:50%;
	margin-left:5px;
	top:245px;
}
.friendSpaceModule .moduleList li {
	max-height:90px;
	width:90px;
	overflow:inherit;
}
.friendSpaceModule .moduleList li img {
	padding:3px;
	background-color:white;
	border:1px solid;
	border-bottom-color:#cfcfcf;
	border-right-color:#cfcfcf;
	border-left-color:#dfdfdf;
	border-top-color:#dfdfdf;
	max-width:80px;
}
.friendSpaceModule .moduleList li img:hover, .friendSpaceModule .moduleList li img:focus {
	width:90px;
	height:auto;
	position:relative;
	left:-2px;
	top:-5px;
	z-index:9;
}
.moduleHead {
	display:none;
}
.musicPlayerModule {
	position:absolute;
	top:185px;
	left:50%;
	margin-left:75px;
}
div.toolbar {
	display:none;
}
.profileUserAlbum {
	display:none;
}
.commentsModule {
	position:absolute;
	top:970px;
	left:50%;
	width:500px;
	margin-left:-80px;
}
.commentsModule .userComment a {
	color:#540907;
}
div.photo {
	height:210px;
}
.msProfileLink span, .msProfileLink a {
	color:#540907;
}
.pageLinks {
	display:none;
}
div.dbs {
	position:absolute;
	top:0;
	left:0;
	display:none;
}
ul.contactLinks {
	position:relative;
	top:660px;
	z-index:9999;
	width:435px;
}
ul.contactLinks li {
	float:left ;
	margin:0 10px 0 0;
}
.contactLinks li a {
	font-family:"Comic Sans MS", cursive;
	color:#5e5e5e;
}
#footer, .localsBadgesModule, .localsReviewsModule, .urlLink, .friendSpaceModule .moduleList li span.pilDisplayName, .friendSpaceModule .moduleList li span.pilRealName, .blurbLikeToMeet, .activityMiniFeedModule {
	display:none;
}

Below is the Version 1.0 Classic layout

Use this layout with extreme caution. When using this layout, keep in mind the following.
1. Only your "About Me" text is visible. If your "About Me" is very long, it will be hidden under the contact table and the comments.
2. "General Interests", "Schools", "UserProfileURL", "Blogs", "Last Login" are not visible.
3. Displaying more than 24 friends is not advised because they will also be cut off.
4. No widgets, videos, images within your "Interests" will be displayed.
5. Will not work on MySpace's "Profile 2.0" version.

If you need help or find bugs, please leave a comment.

body table {
}
body table table {
	padding:0px;
}
body table td{
	
}
body table td table td {
	
}
body div table td {
	
}
body table table table {
	padding:0px;
}
body table table td.text table{
	
}
ul li a:hover {

}

table.profileInfo {
	width:485px;
}
table.profileInfo td.text {
	
}
table.profileInfo table td.text {
	
}
table.profileInfo table {
	
}
table.profileInfo table td {
	visibility:hidden;
}
table.profileInfo a {
	
}
table.profileInfo table td.text {
	visibility:hidden;
}
table.profileInfo span.nametext {
	font-size:18px !important;
	left:50%;
	margin-left:-270px;
	position:absolute;
	white-space:nowrap;
}
table.profileInfo table a img {
	visibility:visible;
	padding:3px;
	background-color:white;
	border:1px solid;
	border-bottom-color:cfcfcf;
	border-right-color:cfcfcf;
	border-left-color:dfdfdf;
	border-top-color:dfdfdf;
	margin-left:-50px;
	max-height:188px !important;
	position:absolute;
	max-width:176px !important;
	_width:140px;
	background-color:white;
	left:50%;
	margin-left:-460px;
	top:193px;
}
table.userProfileURL {
	
}
table.contactTable {
	left:50%;
	margin-left:-466px;
	position:absolute;
	top:774px;
	width:460px;
	border:none;
	background-image: url(http://www.layoutwall.com/images/witchbook/contact.jpg);
	background-position:top left;
	background-repeat:repeat-x;
	z-index:99;
}
table.extendedNetwork {
	
}
table.extendedNetwork td {
	
}
table.extendedNetwork td span.blacktext12 {
	
}
table.contactTable, table.interestsAndDetails,
table.userProfileDetail, table.userProfileSchool {
	
}
table.userProfileSchool, table.interestsAndDetails,
table.extendedNetwork, table.latestBlogEntry td, 
table.userProfileURL, table.userProfileApp  {
	display:none;
}

table.contactTable td, table.interestsAndDetails td,
table.userProfileDetail td, table.userProfileSchool td{
	
	
}
table.contactTable td.text, table.interestsAndDetails td.text,
table.userProfileDetail td.text, table.userProfileSchool td.text{
	
}

table.interestsAndDetails table,
table.userProfileDetail table, table.userProfileSchool table{
	
}

table.blurbs, table.friendSpace,
table.friendsComments {
	
}
table.blurbs td, table.friendSpace td,
table.friendsComments td{
	vertical-align:top;
	border:none;
}
table.blurbs table, table.friendSpace table,
table.friendsComments td.text table table{
	
}
table.blurbs td.text, table.friendSpace td.text,
table.friendsComments td.text{
	
}
table.latestBlogEntry table table, table.blurbs table table, table.friendSpace table table,
table.friendsComments table table{
	
}
table.latestBlogEntry {
	
}
table.latestBlogEntry td {
	
}
.contactTable span.whitetext12 {
	
}
.contactTable table{
	
}
.contactTable table td.text {
	width:217px;
}
.contactTable a img {
	visibility:hidden;
}
.contactTable a {
	font-size:14px !important;
}
.contactTable a:hover {
	background-image:url(http://www.layoutwall.com/images/witchbook/x.png);
	background-repeat:no-repeat;
}
.contactTable td.tdborder {
	border:none;
}
.contactTable td.text {
	
}

table.userProfileDetail {
	left:50%;
	margin-left:-265px;
	position:absolute;
	top:185px;
	width:250px;
	border:none;
}
table.userProfileDetail table {
	width:250px;
	padding:0px;
}
table.userProfileDetail td {
	border:none;
	padding:0px;
}
.interestsAndDetails .text .whitetext12 {
	
}
.userProfileDetail .text .whitetext12 {
	
}
.userProfileSchool .text .whitetext12 {
	
}
.latestBlogEntry span.btext {
	
}
table.latestBlogEntry td {
	
}
table.latestBlogEntry td span.text {
	
}
table.blurbs {
	height:294px !important;
	left:50%;
	margin-left:-444px;
	overflow:hidden;
	position:absolute;
	top:386px;
}
.blurbs .text .orangetext15 {
	display:none;
}
table.blurbs span.text {
	height:300ox;
	overflow:hidden;
	line-height:13px;
}
table.blurbs br {
	display:none;
}
table.friendSpace {
	left:50%;
	position:absolute;
	top:295px;
	width:500px;
}
.friendSpace .text .orangetext15 {
	display:none;
}
.friendSpace a {
	visibility:hidden;
	white-space:nowrap;
	font-size:0px !important;
}
.friendSpace div a {
	
}
.friendSpace a img {
	visibility:visible;
	width: 75px;
	padding:3px;
	background-color:white;
	border:1px solid;
	border-bottom-color:cfcfcf;
	border-right-color:cfcfcf;
	border-left-color:dfdfdf;
	border-top-color:dfdfdf;
	margin:-56px 0px 0px 0px;
	position:relative;
	float:left;
}
.friendSpace a:hover img, .friendSpace a:focus img,
.friendSpace a:active img {
	width:auto;
	position:absolute;
	left:-5px;
	top:-5px;
	z-index:9;
}
.friendSpace table table {
	position:relative;
}
.friendSpace table table td{
	float:left;
	width:84px;
	position:relative;
}
.friendSpace span.btext {
	display:none;
}
table[class="friendSpace"] table table table {
	
}
table.friendsComments {
	position:absolute;
	top:889px;
	height:500px;
	width:1000px;
	left:50%;
	margin-left:-500px;
	background-color:black;
	background-image:url(http://www.layoutwall.com/images/witchbook/comments.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	z-index:99;
	padding-top:90px;
}
table.friendsComments td.text table {
	border:none;
	width:950px;
}
table.friendsComments td.text table table {
	
}
table.friendsComments a, table.friendsComments .redtext,
table.friendsComments .redbtext {
	color:540907 !important;
}
.friendsComments .text .orangetext15 {
	display:none;
}
.friendsComments td.text table table a img {
	padding:3px;
	background-color:white;
	border:1px solid;
	border-bottom-color:cfcfcf;
	border-right-color:cfcfcf;
	border-left-color:dfdfdf;
	border-top-color:dfdfdf;
}
.columnsWidening object, .columnsWidening embed,
.columnsWidening img {
	
}
td.columnsWidening {
	
}
td.columnsWidening p {
	
}
div.comt {
}
div.dbs, div.dbs img {
	display:block !important;
	visibility:visible !important;
}
.profileV1 table td div div p {display:none;}
</style>

Tags: layout, myspace, witchbook

This post was written by:

admin has written 29 posts

I'm an artist and designer/developer for Layout Wall and MPRI (A division of L3 Communications). Check out my personal portfolio.

Contact the author

Promote this site:

39 Comments For This Post

Veronica Says:
December 11th, 2008 at 9:48 pm
I like this theme a lot! How do I get my music player working on myspace?
Again, really nice theme!
Ron Schirmacher Says:
December 11th, 2008 at 11:27 pm
Thank you! The music player that’s provided by MySpace should work with this layout automatically. I recommend that you use the single player with this layout due to the heavily modified absolute positioning of the elements. If you send an email to rschirmacher@tampabay.rr.com I can look at your page and see how I can help.
grenxo Says:
December 30th, 2008 at 1:54 pm
well, maybe I am just too silly…

but where do I have to put the code?
Ron Schirmacher Says:
December 30th, 2008 at 2:08 pm
Not silly at all. If you are not using the 2.0 version (which I recommend), insert the code into the “About me” section under “Edit Profile.”
Ryan Says:
January 8th, 2009 at 7:35 am
Nice theme Thanks a lot! How do I leave spaces between paragraphs like you did? Because doesn’t work :S
Ron Schirmacher Says:
January 8th, 2009 at 8:59 am
Thanks! To create paragraphs just surround your text with the paragraph tag like this:
<p>Put text here </p>
<p>And some more here </p>
Ryan Says:
January 8th, 2009 at 3:35 pm
Thanks It could just be me but the name is also a little too high: http://www.myspace.com/shame_in_you

I tried adding a bit of code but I have barely any knowledge and couldn’t get anywhere. Thanks for the help.

Do you have a paypal account or something I could donate to? Becaise I love the theme
Ron Schirmacher Says:
January 10th, 2009 at 8:35 am
Thanks Ryan! I’ve updated the code to fix the profile name. Let us know if you find any more bugs.
Ryan Says:
January 10th, 2009 at 11:23 am
Thanks, that is awesome
Ryan Says:
January 10th, 2009 at 11:30 am
There is one more sort of bug that appears occasionally.

There is a bit that says “Apps | Blog | Celebrity . . .”. It only appears sometimes, I think it’s from one of the menu’s, not sure which one.
GigaByte Says:
January 11th, 2009 at 8:52 am
woah!!
nice layout dude!!
9/10!!
JVit Says:
January 29th, 2009 at 10:23 pm
I can’t get it
not working for me
Ron Schirmacher Says:
January 29th, 2009 at 10:39 pm
Are you using myspace’s “Profile 2.0?” If so, this layout will not work.
Ray Says:
January 31st, 2009 at 12:37 am
Love the layout. I’m just having some trouble with the friend comments. The letters are black and so is the background. So i can’t read anything unless I highlight it. any suggestions? THANKS!
Ron Schirmacher Says:
January 31st, 2009 at 5:26 pm
Thanks Ray. Could you send your myspace link so that I can help you a bit better?
Verena Says:
February 2nd, 2009 at 3:15 pm
How can I display more than only 4 friends on the right site?
Ron Schirmacher Says:
February 2nd, 2009 at 4:58 pm
Verena,
When you login to MySpace and go to edit your top friends, there is a dropdown right next to “Choose number of Top Friends:” Change that number from “4″ to “20″ (or less than 20). I would recommend only showing 20 with this particular layout.
Davis Says:
February 4th, 2009 at 3:30 pm
Mine is really messed up i copy and pasted the code directly
http://www.myspace.com/_u_o_
Davis Says:
February 4th, 2009 at 3:39 pm
fixed it just changed the CSS background properties to scroll
~WMT-K9~ Says:
February 10th, 2009 at 1:43 am
Can you change the pictures on the layout??? and if not can you show me or tell me how to create the code for a layout and i will edit the pictures in photoshop…thanx…

~WMT-K9~
3PATiNE Says:
March 13th, 2009 at 11:59 pm
hey niice work damm
i want to use it but
i have profile 2.0
can someone tell me where
i could get one please
Billy Says:
March 24th, 2009 at 8:52 pm
My about me section and my details section run into each other. How do i fix that?
Ron Schirmacher Says:
April 16th, 2009 at 2:20 pm
Use paragraph tags to separate your text.
Joe Says:
April 20th, 2009 at 5:14 pm
Ron, Seems when implemented on a myspace filmmaker profile it leaves a text entry box on the About Me: section. Example: myspace.com/justiceproductionz Any ideas?

Cheers,
Joe G
Ron Schirmacher Says:
April 20th, 2009 at 6:28 pm
Joe,
There’s not much really you can do with this layout at first glance. However, you can add a line into your css like this:
body table table table {border:none;}
You’ll still have a line showing but it should take care of the box.
Joe Says:
April 20th, 2009 at 7:21 pm
Alright, thanks Ron. Should work for now, I’ll see if I can ninja in a graphic that the line can sit on top of and remain invisible. Thanks for getting back with me.

Cheers,
Joe G
Shori Says:
April 24th, 2009 at 11:50 am
Hello :), how can I put something on the right “page” of the “Book”?
Pest Says:
May 31st, 2009 at 12:17 am
Cheers man

Im having a little trouble with the add friends and message tab if you could help me I would like that very much thanks mate
Ron Schirmacher Says:
May 31st, 2009 at 8:45 am
Shori, you would have to change display:none to display:normal on whatever pieces you want shown.

Pest, when you change the background images, you will run into problems. The links exist on your page but you just can’t see them.
Phemay165 Says:
June 2nd, 2009 at 5:55 pm
hey ron…ok i tried using it for my rp charater scarlet & yea…ok the page is messing up like the friends are scattered across the page…its weird! HELP!! im a newbie when it comes to this!! also i was wondering if there was a way to change the little pics so it fit my charater? i mean i really like what youve done with it its just the pics around it dont match every1 you know?

~Phemay~
Phemay165 Says:
June 2nd, 2009 at 6:00 pm
oh i also forgot to say that my text is too far over…its falling off the “page” for some reason…
please help…

http://www.myspace.com/flirtatious_cherry

thanks!! ~phemay~
Ron Schirmacher Says:
June 2nd, 2009 at 6:26 pm
Phemay, which browser are you using? I don’t notice anything out of the ordinary using firefox and IE7.

As far as the images, you can use an image editor (photoshop) to change the images at the bottom. (That’s what everyone else has been doing apparently even though I’ve laced the site with the creative commons copywrite license - Good times…)
Ron Says:
August 19th, 2009 at 3:58 pm
it seems that every time i paste this code into my “about me”
section, it erases after saving it.. (sorry noob here)

myspace.com/cardiomegaly
Ron Schirmacher Says:
August 19th, 2009 at 4:01 pm
4. Will not work on MySpace’s “Profile 2.0″ version.
Parker Says:
August 20th, 2009 at 10:04 pm
Requesting Assistance In California; any recent updates? Would like to use layout for a seasonal music page.. come listen & help.. thanks in advance. PTHouse.
Alicia Says:
November 21st, 2009 at 7:14 pm
i think i found one little bug, in the verry middle of the page it has the words “Press Room”, its a link, and when clicked it takes you to myspace.com/pressroom…
any possible way to get rid of that?
admin Says:
November 27th, 2009 at 11:01 am
Alicia,
Try adding this line:

.profileV1 table td div div p {display:none;}

inside your style tag.

This may work.
kevin Says:
March 10th, 2010 at 5:30 pm
hey..
i’m trying to cuztomice my uncle’s myspace… and i have a problem when i want to move the about me section…
can you explain me where’s the text that i have to modifie in order to move it???
cuz so far.. i have no result at all!!…
thanx man!!!
admin Says:
March 14th, 2010 at 3:10 am
Kevin,
I’ve updated this layout to be used on Profile 2.0. I would consider changing to 2.0 to eliminate the bugs in version 1. There may still be a few bugs depending on your settings. If so, reply with those bugs and I’ll fix ‘em.

layoutwall