764 - 0
yes

design and style your friendburst profile – bottom area

2010-12-09 at 06:25 am BlogBlog  RSSRSS  Subscribe

bottom area – border and background

div#bottom {
background-color: blue;
border: 1px solid red;
border-bottom: 0px;
}

bottom area – links and hover effect

div#bottom div.bottom_menu ul li a {
color: gold;
}
div#bottom div.bottom_menu ul li a:hover {
color: black;
}

bottom area – link seperators

div#bottom div.bottom_menu ul li span {
color: red;
}

bottom area – copyright notification

div#bottom div.copyright {
color: red;
}

Replace the RSS-feed icon (20 x 21 px)
Pre-made icons: Graphic Ressources (RSS Icons)

div#bottom div.bottom_menu ul li.rss_link a {
background-image: url(URL);
}
div#bottom div.bottom_menu ul li.rss_link a img {
visibility: hidden;
}

replace the “select language” icon

div#bottom div.bottom_menu ul li a#select_lang_pack {
background-image: url(http://i53.tinypic.com/2mzi5bc.png);
background-position: center right;
background-repeat: no-repeat;
}
div#bottom div.bottom_menu ul li a#select_lang_pack img {
visibility:hidden;
}

I’ll add some pre-made icons later.

Last 5 posts by pfeiffer_stylez


View Counter: 1,313 views


20 Responses to “design and style your friendburst profile – bottom area”

  1. [...] • Bottom Area [...]

    Likes: Thumb up 0

  2. [...] • Bottom Area [...]

    Likes: Thumb up 0

  3. [...] • Bottom Area [...]

    Likes: Thumb up 0

  4. * on the very first code, the bottom border did not show up. i changed this part >>> border-bottom: 0px; to >>> border-bottom: -10px; and the bottom border came up and is working *

    Likes: Thumb up 0

    pfeiffer stylez customizing
    pfeiffer_stylez Reply:

    Well, yeah, the bottom border does not show up… that was my intention. There is no empty space between the bottom area and the end of the page, so I think it looks better this way.
    If you prefer borders on all four sides of the section just delete the line “border-bottom: 0px;”.

    Likes: Thumb up 0

    MarsMuzik
    MarsMuzik Reply:

    that’s what i thought. figured i’d bring it up in case someone did want the bottom border. i like keeping the borders small, either 1 or 2 px. i’ll go ahead and delete that bit of code, see what happens.

    Likes: Thumb up 0

  5. * for the link hovers >>> know how you have the underline for the language and the language selector arrows ?, they are backwards.

    Likes: Thumb up 0

    pfeiffer stylez customizing
    pfeiffer_stylez Reply:

    .
    The link hovers are underlined per default. The command to cancel this is “text-decoration:none;”

    I don’t know why they made it this way, but for some reason the last link seperator is within the link to change the language.
    Use…
    div#bottom div.bottom_menu ul li span {visibility: hidden;}
    …to hide the seperators and keept the space between the links.

    Likes: Thumb up 0

    MarsMuzik
    MarsMuzik Reply:

    i added text-decoration:none; to the code and removed those underlines, that works for me ;-)

    Likes: Thumb up 0

  6. [...] • Bottom Area [...]

    Likes: Thumb up 0

  7. [...] • Bottom Area You can also use all this codes to affect only a single module. Just replace the second selector (“div.block”) with the module specific ID. This will be compatible with global values for the left column, because the most specific adressed code will prevail. [...]

    Likes: Thumb up 0

  8. [...] • Bottom Area [...]

    Likes: Thumb up 0

  9. [...] • Bottom Area [...]

    Likes: Thumb up 0

  10. [...] • Bottom Area [...]

    Likes: Thumb up 0

  11. [...] • Bottom Area [...]

    Likes: Thumb up 0

  12. [...] • Bottom Area [...]

    Likes: Thumb up 0

  13. [...] • Bottom Area [...]

    Likes: Thumb up 0

  14. [...] design and style your friendburst profile -- bottom area | Blogs » Welcome to FriendBurst! You… [...]

    Likes: Thumb up 0

  15. [...] • Bottom Area [...]

    Likes: Thumb up 0

  16. [...] • Bottom Area [...]

    Likes: Thumb up 0

Leave a Reply

You must be logged in to post a comment.