 |
|
By referring to the above diagram I can easily figure out the needed codes to style this space.
The interests table is at this level:
table table table.interestsAndDetails
It can also be addressed in many other ways, some of which are:
.interestsAndDetails
td td table.interestsAndDetails
table td table td table.interestsAndDetails
I prefer this:
table.interestsAndDetails
If I want to eliminate the entire table, and effect nothing else in the profile, I can use this:
<style>
table.interestsAndDetails {display:none}
</style>
In the below I use a margin-top on the table just under the interests table. The reason I choose this, is because the music player is above. The music player can NOT be addressed without effecting other objects on the page.
<style>
table.interestsAndDetails {display:none}
table.userProfileDetail {margin-top:-12px}
</style>
Removing the Left Column (where the row headers are)
This leaves the table header in place, removes the row headers, and makes the table appear as one single column.
<style>
table.interestsAndDetails span.lightbluetext8 {display:none;}
table.interestsAndDetails table td {width:auto !important; padding:0px; }
</style>
Styling the text in the interests section
The below code block styles all of the text in this section. Before each line there is a comment indicating what is effected by the line of code.
You can replace the fonts and colors with the style you want.
<style>
{! style main interests heading !}
table.interestsAndDetails td span.whitetext12 {color:hotpink !important; font-size:22px !important; font-family:impact; background-color:lightgreen}
{! style row headers !}
table.interestsAndDetails td span.lightbluetext8 {color:darkblue !important; font-size:16px !important; font-family:Arial; background-color:yellow}
{! style the rest of the text !}
table.interestsAndDetails td, table.interestsAndDetails td a {color:green !important; font-size:12px !important; font-family:Comic Sans MS; background-color:lightblue;}
</style>
For a list of additional font attributes you can use in the style line go Here
Eliminate some Interests Table Rows
IF you do not put data into a specific row, the row should not show up. However, if you have code in it, it will show up.
And sometimes, it just shows up.
To eliminate a single row, it takes two lines of code.
Place this code at the BOTTOM of the row just above the row you want to eliminate.
<table class="off"><tr><td>
</td></tr></table>
(There is a way to eliminate the "General" row, but because it takes a chunk of code, and a new class, and is best accomplished by just not putting data into that space, I will leave that out for now.
Custom Headers
If you want ALL Custom Headers, I suggest you make a complete custom Interests Table.
To learn how to do that go Here: Creating a Custom Interests Table
If you want SOME custom headers:
It is easiest to change the row headings which are BELOW the General, so I will cover those first.
To change any single heading, without effecting the others, place this code in the section ABOVE the heading you wish to change:
<table class="off"><tr><td>
</td></tr></table></tr></td>
<tr><td><span class="lightbluetext8">CUSTOM HEADING</span></td>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
Your data for this section goes here
Changing the Heading for the General Interests Column
If you want to change the heading for the "General" interests column, it gets more complicated. Because there is no data entry point, BEFORE this title is created, we have to enter our code AFTER the creation of this title.
Therefore we have to create a new class, so that we can hide the old "Genreal" heading without hiding our new heading.
Place this block at the TOP of the General Interests Row:
<span class="off">!-START code for custom General Interests Row header-!</span>
<style>
table.interestsAndDetails table {display:none;}
table.interestsAndDetails table.myI2 {display:block;}
</style>
</td></tr></table>
<table class="myI2" bordercolor="000000" cellspacing="3" cellpadding="3" width="300" align="center" bgcolor="ffffff" border="0">
<tr><td valign="top" align="left" width="100" bgcolor="b1d0f0" NOWRAP><span class="lightbluetext8">
Your CUSTOM HEADING
</span></td>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
<span class="off">!-END code for custom General Interests Row header-!</span>
Data to go with your Custom Heading goes here
If you want to change to main heading (the heading that says "Your-Name's Interests), you also have to re-create the "General" heading. This also requires that you assign a new class to the interests table (the default class interestsAndDetails will be used to hide the residue text from the old header).
Therefore, if you have used my style block above, you must replace table.interestsAndDetails with table.myInterests
Place this code at the top of the General Interests Box:
<span class="off">!-START code for custom General Interests header-!</span>
<style>
table.interestsAndDetails {display:none;}
table.myInterests {display:block;}
</style>
</td></tr></table></td></tr></table>
<table bordercolor="6699cc" cellspacing="0" cellpadding="0" width="300" bgcolor="ffffff" border="1" class="myInterests">
<tr><td class="text tdborder" valign="middle" align="left" width="300" bgcolor="6699cc" wrap="" style="WORD-WRAP:break-word">
<span class="whitetext12">
YOUR CUSTOM TABLE HEADER
</span></td></tr>
<tr valign="top">
<td class="tdborder">
<table class="myI2" bordercolor="000000" cellspacing="3" cellpadding="3" width="300" align="center" bgcolor="ffffff" border="0">
<tr><td valign="top" align="left" width="100" bgcolor="b1d0f0" NOWRAP><span class="lightbluetext8">
YOUR CUSTOM ROW HEADING
</span></td>
<td width="175" bgcolor="d5e8fb" style="WORD-WRAP: break-word">
<span class="off">!-END CODE FOR CUSTOM INTERESTS HEADER-!</span>
YOUR GENERAL INTERESTS HERE
