SFBPC – All-In-One (Transparency, Text, Etc.)
February 16, 2011 ·
shan1
|
|
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;
}
|
Other
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%;
}
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 1650×1000 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 2×2 pixels, depending on the pattern.
hi shan, is there any way i can make my comment box another color?
Thank you much 😆
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
Thank you for all your hard work and the very very long hours put into this. :love: