Forums > 2.0 layout link help

Help - Search - Members - Calendar

Full Version: 2.0 layout link help

Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics

kalientemexikana

Jun 27 2009, 12:18 AM

how do i make my links look like block headers?

rectangles with the words if you are confused

please help me out

<3

Mikeplyts

Jun 27 2009, 12:55 AM

can you give an example?

kalientemexikana

Jun 27 2009, 12:57 PM

Mikeplyts

Jun 27 2009, 01:59 PM

^ That's a 1.0 layout though. But I guess you can sort of make links like that in 2.0.

First, we'll need to hide the navigation. Put this in your CSS:

CODE

#topnav li {display:none;}
div#googlebar {display:none;}

Next, we'll add a custom div class to your CSS so we can display it later in your HTML. Put this in your CSS:

CODE

.cstmnav {
position:absolute;
top:###px;
_top:###px;
left:50%;
_left:50%;
margin-left:-###px;
_margin-left:-###px;
width:###px;
height:###px;
}

Replace the ### with your own values.

Now, we need to define a class for how our little block header links are going to look like. Use this in your CSS:

CODE

a.cstmnav_link {
font-family:arial;
font-size:12px;
color:#FFFFFF;
background-color:#333333;
border-width:1px;
border-color:#777777;
border-style:solid;
padding:4px;
display:block;
}
a.cstmnav_link:hover {
font-family:arial;
font-size:12px;
color:#333333;
background-color:#FFFFFF;
border-width:1px;
border-color:#010101;
border-style:solid;
padding:4px;
display:block;
}

You can edit or add more properties if you'd like. Finally, we move on to the HTML.

We're going add the DIV container and the links inside it so add this in your About Me:

CODE

Now edit that stuff, Save Changes, and you're done!

kalientemexikana

Jun 27 2009, 07:11 PM

omg thank you!! ive been trying to do this since i switched to 2.0

Mikeplyts

Jun 27 2009, 09:33 PM

haha, no problem.

Mickey

Jun 28 2009, 02:44 PM

Topic closed & moved.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.