Modifying the look of your Profile Banner

Replies to This Discussion

Permalink Reply by Jeff Rothe on November 7, 2008 at 11:25am

Have a logo that you want to be at the top of your profile page, or a custom banner? You can just hide the text for the site on your own personal page, as of right now, I don't see a problem in doing that.

If you use Firebug you can see the id's you need to modify. Id's are signaled by a # sign.

The two id's are paragraph tags, which are block level elements, which means you can hide them with the display:none; attribute value pair.

So you can add this to your custom stylesheet;

#xg_sitename, #xg_sitedesc{
display:none;
}

Your masthead may shrink, so you'll need to play with this.

If you can, just use padding on the top and bottom to achieve the height.

#xg_masthead{
padding:40px 0;
}

Or just set your banner to a fixed height.

#xg_masthead{
height:200px;
}

This may or may not may your navigation render a little bit different. Test to taste.

▶ Reply to This

Permalink Reply by Paul Olson on November 7, 2008 at 12:09pm

Thanks Jeff, I will try this when I get home tonight.

▶ Reply to This

Permalink Reply by Jeff Rothe on November 7, 2008 at 7:29pm

Keep me posted.

▶ Reply to This

Permalink Reply by Paul Olson on November 7, 2008 at 9:08pm

That was easy. It shortened the picture area by a very small amount, if I wasn't watching it when it changed, I would have never noticed it. Thanks for the help.

You were right about firebug, great tool.

▶ Reply to This

Permalink Reply by Jeff Rothe on December 10, 2008 at 3:27pm

Just remember....when using - Display:none; that the physically defined space for that block level element will be removed, so anything stacked below it will move also. You may need to set a physical height on some elements, or add extra padding to position them correctly as a result.

▶ Reply to This

▶ Reply to This