MySpace Blog Page Layout Customize Style

This page covers the myspace blog page. If you are trying to customize (style, hide, remove) the blog space, on your profile page go here:
MySpace Blog Table Style or Hide

MySpace Blog Customization

MySpace made some MAJOR changes to the blog page over the last few days. Everything in this article has been updated as of 30 Sep 2007

I am not going to cover the "official" customization method.
This one is obvious. If all you want to do is ditch the ugly color scheme and pick your own, I recommend using the built in customizing editor.

What I am going to cover is the "other stuff".
How to customize the blog withOUT using the built in blog customize editor.

This article was inspired by an efriend of mine, when myspace made some changes which messed up her customized blog. (It messed up a lot more than I originally thought, and I am having 2nd thoughts about my suggestion to just use their customizing features.)

Please refer to the diagram on this page:
Click Here: This is an actual mySpace blog Page with style commands added to show the classes and structure
As dynamic as the myspace code is, the above diagram is subject to change at any moment. But it does have the style coded directly into it, so if myspace changes their code, the diagram should automatically reflect that.

If you bring up the myspace page, with the diagram, in a different window, you can refer to it while you read this article.
Notice the key to the left (on the diagram).
We will be referring to this key.

Remove the "who gives kudos" along with the name and the kudos they gave.
You can paste this code into the "custom style sheet" data entry space.

table.profile strong, table.profile span {display:none;} 

Hide the number of kudos shown at the bottom of the blog entry.
To do this I also hide the time and the number of comments (not that it is impossible not to, but not worth the effort, unless someone asks me specifically).
You can paste this code into the "custom style sheet" data entry space.

p.blogContentInfo {visibility:hidden; font-size:0px; letter-spacing:-300px;}
p.blogContentInfo a {visibility:visible; font-size:11px; letter-spacing:1px;} 

Remove the MySpace Logo
Now that this has been moved to the top, just left of the ad banner, it is no longer as invasive. But removing it is even easier than before.
Notice that it is one table deep (look at the key, and you will see that a solid hotpink border represents a table).
If I do this:
table img {display:none}
It will remove a lot more content than I want to remove.
So I recover the other content like this:
table.main img {display:block}
You can paste this code into the "custom style sheet" data entry space.

{! hide myspace logo !} 
table img {display:none}
{! ditch the border causing it to look funny !}
table {border:0px;}
{! recover images in main blog area !}
table.main img {display:block;}

You can add code to put in table borders where you want them.

Bottom Links and Copyright
Notice that these are 1 table deep, and the table has no class assigned.
Notice that all of the text in this space, has some attribute assigned to it, which we can use in a style command.
It is all inside a font tag (which I indicate with a double green border.)
REMEMBER that the actual content of the blog may contain font, div, strong or other tags which do not show up in my own blog examples. Keep this in mind when making edits.

If I want to get rid of the bottom link section (and take those pesky pipe characters with it) and NOT effect anything else, I do this:

{! hide bottom links !}
table strong{visibility:hidden;}
{! recover stuff !}
table.main strong {visibility:visible;}
{!ditch the space if desired!}
table.main {margin-bottom:-20px;}

Now if I also want to remove the bottom links and copyright thing I do this

{! hide copyright thing !}
table font {visibility:hidden;}
{! recover any blog content which may use u tag !}
table.main font {visibility:visible;}

If I only wanted to remove the copyright, and leave the links, I would do this:

 table a font u {visibility:hidden;}
{! restore any use of u in blog content !}
table.main a font u {visibility:visible;}

You can choose to use display:none instead of visibility:hidden. Then the unDo would need either display:block or display:inline.
However, sometimes, neither block OR inline will get things back to the way they were. Often an element has some other default display mode, that is not recoverable.
This is why visibility:hidden is sometimes a better choice.

Removing the menu which is between the custom header (the one you add) and the main blog area
Looking at the diagram, this has a violet border around it. Looking at the key I can see that this is assigned to class="nav".
One line of code to remove this is:

{! remove nav links !}
table.nav {display:none;}

Putting the Blog Into A Scroll Box
I use the Custom Header area for this.
Mark the circle next to "Your Own Header HTML"
(If you don't, it will not read any html put in the text entry box in that section).

Put this code inside the text entry box, for the Header Code:

<span class="off">! START CUSTOM HEADER TEXT OR CODE !</span>

<span class="off">! END CUSTOM HEADER TEXT OR CODE !</span>
<span class="off">! OPEN DIV !</span>
<div class="myDivB" style="height:400px;  border:2px green solid; overflow:auto">

Put any code, for your actual header, between the START header span comment and the END header span comment.
Change the height of the div as needed.
To eliminate the border change it to 0px. Otherwise change color and size as desired.

The left side bar contents (where it has your profile info and such) will be inside the scroll box. The bottom links, and header information, will not be inside the scroll box.

Adding Your Own SideBar to Your mySpace Blog
The following code block will add a side bar to the right of your blog.
The sideBar Will start just under your custom Header, float right, and run parallel to the main table. In this example, the bottom links will float left with the main content.

To make this code block work, you must mark the circle that says "Your Own Header HTML" in the page header section, of the blog customize page.
This code goes into the textbox just next to this.

CODE FOR CUSTOM HEADER GOES HERE

<p class=C> 
- START Code for Side Bar.
- STEPS: 
- - Go up one Table level
- - Create Div for Right Side Bar
- - Put in Side Bar Content
- - Close Right Side Bar Div
- - Open Div which will suck in our main content and Bottom Links
- - (do not close above div it will close automatically when parent table closes).
- In the style block:
- - Size and Float the Right Side Bar to the Right
- - Size and Float the main content Div to the Left.
</p>

</td></tr></table>
<div class="RightSideBar">
Stuff In Right Side Bar Here<br>
more stuff in right side bar <br>
</div>

<div class="mainDiv">

<style>
p.C {display:none !important}
div.RightSideBar {width:20% !important; height:auto;  float:right; margin-right:5px; border:1px magenta solid;}
div.mainDiv {width:76% !important; border:1px pink solid; float:left;}
table.main {width:99% !important;}
</style>

Things to be aware of:
IF you do not allow enough room for the side bar, it will float to the top, and push down the rest of your content.
In my testing, I was able to make the page pretty narrow before this occurred.
Feel free to change the above values, just insure there is room. Include any space required by borders and/or padding. FF and IE treat these differently.

I will cover another strategy later, one that has less risk of floating to the top of it runs out of room (instead it will overlap). The other strategy also takes more code.

If you want the bottom links to fall under the side bar it gets a little more complicated.
Because float, acts like position:absolute (in FF but not in IE) unless we create an outer container, which has a hard set size, with enough space to accomodate our side bar content, we risk having the side bar overlap the bottom links.
(I will cover this one later also)

Thank you for Visiting; Have a Nice Day :-)

Queries hitting other pages of mine, which should be hitting this page:
-myspace blog page codes.
-how to customize myspace blog page.
-myspace blog; how to change color
-myspace customize blog
-style sheet to customize blog on myspace
custom style my blog on myspace