748 - 0
yes

SFBPC – All-In-One (Transparency, Text, Etc.)

2011-02-16 at 11:26 pm BlogBlog  RSSRSS  Subscribe

All-In-One Transparency

*Save a copy of your original code, in case there is code you need to add again. It is recommended to start with the default theme “flavaheat”. If you set your background in the editor, or with code, you may keep it. Simply add this code below the background code in the CSS box. Remove pre-made layouts and/or remove code in the CSS box that may be targeting the same elements as this code, to avoid conflicts.

div#header {
background-color: transparent;
border: none;
}
div#header #ttitopnav {
background-image: none;
color: #00ff00;
}
div#header #ttitopnav ul li a:hover {
background-color: transparent;
}
div#header ul#main_nav {
background-color: transparent;
background-image: none;
}
div#header div#top_nav_search {
background-color: transparent;
border: 1px solid #191919;
}
div#header input#search_field {
background-color: transparent;
}
div#header div#top_nav_holder {
background-color: transparent;
border: none;
}
div.profile_header {
background: transparent;
border-bottom: none;
}
div#profile_menu {
background-color: transparent;
}
div#profile_menu ul li a {
background-color: transparent !important;
border-color: #000000;
color: #777777 !important;
}
div#profile_menu ul li.active a {
background-color: transparent !important;
border-color: #000000;
color: #999999 !important;
}
div#profile_menu ul li a:hover {
background-color: transparent !important;
border-color: #000000;
color: #ffffff !important;
}
div#profile_nav_list {
background-color: transparent;
border: none;
}
div#profile_nav_list ul li a {
background-color: transparent;
border: none;
}
div#profile_nav_list ul li a:hover {
background-color: transparent;
color: ffffff;
}
div#content_container {
background-color: transparent;
border: none;
}
div.block {
background: transparent !important;
border: none !important;
}
div.block div.title {
background: transparent !important;
border: none;
}
div.block div.bottom {
background: transparent !important;
border: none;
}
div.block div.bottom a {
background-color: transparent;
border: none;
}
div.block div.bottom a:hover {
background-color: transparent;
color: #ffffff;
border: none;
}
ul.action li a {
background-color: transparent !important;
border: 1px solid #333333 !important;
color: #bb0000 !important;
}
div.comment_header {
background: transparent;
border: none;
}
div.comment_box {
background: transparent;
border: none;
}
div.comment_content {
background: transparent;
border: none;
}
div.comment_link {
background-color: transparent;
color: #ffffff;
border: none;
}
div.comment_link li a {
background-color: transparent;
border: 1px solid #333333 !important;
color: #777777 !important;
}
div.comment_link li a:hover {
background-color: transparent;
border: 1px solid #494949 !important;
color: #ffffff !important;
}
.pager_left {
color: #777777 !important;
}
.pager li {
color: #777777;
}
.pager li a {
background-color: transparent !important;
border: 1px solid #333333 !important;
color: #777777 !important;
}
.pager li a.active {
background-color: transparent !important;
border: 1px solid #494949 !important;
color: #bb0000 !important;
}
.pager li a:hover {
background-color: transparent !important;
border: 1px solid #494949 !important;
color: #ffffff !important;
}
div#bottom {
background-color: transparent;
border: none;
color: #ffffff;
}

Last 5 posts by shan1


View Counter: 3,254 views


9 Responses to “SFBPC – All-In-One (Transparency, Text, Etc.)”

  1. hey shan…thanks for these codes, they work great on my profile. I was wondering if you knew of a css code to stretch a background pic here on friendburst so that it fills the screen. I got this one off the net and it kinda worked in preview. I thought great… but it didn’t work when I saved & went back to myprofile. That was with your codes above included…but it didn’t work without your codes in the css box either. Any assistance is appreciated…in your own time. Thanks.

    body {
    background: url(bgimage.jpg) no-repeat;
    background-size: 100%;
    }

    Likes: Thumb up 0

  2. Hi. The background-size property isn’t widely supported. There currently is not a cross-browser-friendly way to “stretch” a background. Also, there is a drawback of doing such -- depending on how small the image is, it will pixelate and distort, making the image look very blurry. The best thing to do is either use an image that will fit most monitor resolutions, around 1650x1000 pixels for a full image e.g., photos… or use an image that can be repeated (tiled) seamlessly. If using a full image, it is recommended to optimize it in an image editor to reduce the file size to as low as possible, without losing too much quality… This will help reduce page load time. If using a repeating smaller image, the image can be as small as 2x2 pixels, depending on the pattern.

    Likes: Thumb up 1


    peacemaker Reply:

    yes…I figured that a larger size of the pic might be my final option and you’ve confirmed this here. Thanks for your help & advice here mate…it is appreciated.

    Likes: Thumb up 0

  3. hi shan, is there any way i can make my comment box another color?

    Likes: Thumb up 0

    shän
    shan1 Reply:

    It’s under the Comments Block link on the index page:

    http://www.friendburst.com/blog/17413/sfbpc-comments-block/

    Likes: Thumb up 1

  4. Photobucket
    Thank you much :lol:

    Likes: Thumb up 0

  5. Hi Shan, I loved your lux layout and I tweaked the left side and size. Now it looks great in firefox, but in IE……the about me is way too big……..lol……Can you help me figure out what I might’ve done? And why it is different in different browsers? Thank you

    Likes: Thumb up 0

    shän
    shan1 Reply:

    I would suppose it has something to do with what you changed on the left side. I suggest that you start with the original code and then keep notes of the changes you make.

    Likes: Thumb up 0

  6. Thank you for all your hard work and the very very long hours put into this. :love:

    Likes: Thumb up 0

Leave a Reply

You must be logged in to post a comment.