FTalk

Welcome guest! Please Login or Register.

Pages: 1 2 3 … 72

Friendster Tricks and Tutorials
» Complete Compilation of CSS Codes!

#1 2007-07-31 12:16:02

nahtanoj18: ^JoNaTHaN; » FTalkAddict; Just let it out....; Pasay City, Manila; 506; 32; 2009-07-01; Website

Complete Compilation of CSS Codes!

Here are all the codes that you need to fully customize your profile! No need to add other codes just edit it all and you can have a customized profile like mine, these CSS codes are the codes that I am using in my profile... Good luck to everyone who may want to use it....

Code:

/* Friendster - Friendster Layouts by nahtanoj18 */
/* http://www.editfriendster.com */

/* PAGE BACKGROUND */
body {
  background-image: url(YOUR IMAGE URL HERE);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  scrollbar-face-color: #HEX VALUE; scrollbar-highlight-color: #HEX VALUE; scrollbar-shadow-color: #HEX VALUE; scrollbar-3dlight-color: #HEX VALUE; scrollbar-arrow-color: #HEX VALUE; scrollbar-track-color: #HEX VALUE; scrollbar-darkshadow-color: #HEX VALUE;
  cursor: url("YOUR CURSOR URL HERE THAT ENDS WITH A .ani OR .cur FORMAT"),default;
}
/* GLOBAL FONTS, PROFILE TEXT AND CONTENTS */
body, td, tr, div, p {
  color: #HEX VALUE;
  font: '10 to 16'px 'Verdana, Arial, Comic Sans MS, etc...';
  text-align: center;
}
/* GLOBAL LINKS */
a:link, a:visited, a:active, a:hover {
  font-size: '10 to 16'px;
  font-weight: normal;
  color: #HEX VALUE;
  text-decoration: none;
}
a:hover {
  font-size: '10 to 16'px;
  font-weight: bold;
  color: #HEX VALUE;
  text-decoration: underline;
}
a.action:link, a.action:visited, a.action:hover, a.action:active {
  color: #HEX VALUE;
}
a:hover {
  color: #HEX VALUE;
  text-decoration: underline;
}
/* MASTER BOXES */
.commonbox, .commonbox_noborder {
  margin-bottom: 10px;
  background: transparent;
  width: auto;
}

.evenrow {
  background-color: transparent;
}
/*TABLE AT THE BACK OF ALL YOUR BOXES*/
table#flo_wrapper {
  margin: 80px auto 10px auto;
  border: #b22222; /* can be modified */
  border-style: groove; /* can also be solid,dotted,etc */
  border-width: 6px;
  background: transparent; 
  background-attachment: scrollable;
  background-repeat: repeat; /* can also be repeat, no-repeat */
  background-image: url(YOUR IMAGE HERE);
  background-position: center; /*can also be bottom center, center top, etc */
}
/* MASTER HEADERS */
h1 {
  text-align: center;
  font-size: '125 to 150'%;
  color: #HEX VALUE;
  background-color: transparent;
  width: auto;
}
h2 {
  text-align: center;
  font-size: '110 to 125'%;
  color: #HEX VALUE;
  background-color: transparent;
  width: auto;
}
.commonbox h1, .commonbox h2 {
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-repeat: repeat;
  height: 24px;
  line-height: 24px;
  padding-left: 11px;
}
/* CONTROL PANEL: BOX */
.controlpanel {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
/* CONTROL PANEL: USER PHOTO */
.imgblock200 {
  width: 200px;
  background: transparent;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  text-align: center;
  margin-bottom: 5px;
}
.imgblock200 img {
  margin: 0 auto;
}
/* CONTROL PANEL: DATA */
.controlpanel .q {
  font-size: '10 to 16'px;
  color: #HEX VALUE;
}
.controlpanel .data {
  font-size: '10 to 16'px;
  color: #HEX VALUE;
}
.controlpanel ul.data, .minicontrolpanel ul.data {
  font-weight: bold;
  margin-bottom: 15px;
}
.controlpanel ul.data li, .minicontrolpanel ul.data li {
  margin-bottom: 5px;
}
/* CONTROL PANEL: MORE ABOUT ME LINK */
.controlpanel a.more, .minicontrolpanel a.more {
  font-weight: bold;
  background: url(http://images.friendster.com/images/blue_arrow_rt.gif) no-repeat 0 50%;
  padding-left: 8px;
  margin-top: -5px;
}
/* CONTROL PANEL: BUTTONS */
#controlPanelButtons a:hover {
  font-size: '9 to 12'px;
  color: #HEX VALUE;
  border-color: #HEX VALUE;
  background-color: #HEX VALUE;
  text-decoration: underline;
}
#controlPanelButtons {
  width: 200px;
  margin-top: 3px;
  padding-bottom: 1px;
}
#controlPanelButtons li {
  display: inline;
}
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {
  font-size: '9 to 12'px;
  color: #HEX VALUE;
  width: 100px;
  text-align: center center;
  float: left;
  display: inline;
  background: transparent;
  border: '1 to 2'px 'solid, outset, ridge, etc...' #HEX VALUE;
  margin: 0 -1px -1px 0;
  padding: 6px 0;
}
#controlPanelButtons a:hover {
  color: #HEX VALUE;
  background: #HEX VALUE;
}
/* BOX: MORE ABOUT ME */
.moreabout {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
.moreabout .q {
  font-size: '10 to 16'px;
}
/* BOX: MY PHOTO GALLERY */
.photos {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
.flogridp .flogriditem {
  margin-left: 16.5px;
  width: 101px;
  height: 87px;
  background: url(YOUR IMAGE URL HERE) no-repeat;
}
/* BOX: MY FRIENDS */
.friends {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
/* BOX: MY VIDEOS */
.videos {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
/* BOX: MY GROUPS */
.groups {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
  margin-top: -14px;
  width: 300px;
}
/* BOX: MY TESTIMONIALS */
.testimonials {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
/* BOX: MY PUBLICCOMMENTS */
.publiccomments {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
/* BOX: MY SCRAPBOOK */
.scrapbook {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
  width: 580px;
}
/* BOX: FAN OF */
.fanof {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
/* BOX: MY FANS */
.myfans {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
/* BOX: MY REVIEWS */
.reviews {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
/* BOX: MY BLOGS */
.blogs {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
/* BOX: MY BLOG REVIEWS */
.blogsreviews {
  border-width: '1 to 10'px;
  border-color: #HEX VALUE;
  border-style: 'solid, groove, ridge, etc...';
  background-color: transparent;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
/* MISC: VIEW ALL and EDIT LINKS */
.commonbox .viewall, .commonbox .editlink {
  padding: 4px 11px;
  font-weight: bold;
}
.commonbox .editlink {
  float: right;
}
/* MISC: SMALL PHOTOS */
.imgblock75 {
  width: 75px;
  height: 75px;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  background: transparent;
  overflow: hidden;
}
.imgblock75 img {
  height: 75px;
  margin: 0 auto;
}
.ir {
  background: transparent;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  text-align: center;
  overflow: hidden;
}
/* MISC: SMALL PHOTO NAMES */
.dr {
  text-align: center;
  background: transparent;
  padding: 3px 0;
  border-top: none;
  white-space: nowrap;
}
/* CURSOR: LINKS */
a,a:link,a:visited,a:active,a:hover {
  cursor:url("YOUR CURSOR URL HERE THAT ENDS WITH A .ani OR .cur FORMAT"),default;
}
/* NAVIGATION BOX */
#navigation {
  height: 50px !important;
  position: relative !important;
  margin: 0 !important;
  padding: '100 to 170'px 0 '5 to 20'px 0 !important;   /*this part depends on how big your banner will look like*/
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE !important;
  font-family: 'Verdana, Arial, Comic Sans MS, etc...' !important;
  line-height: 1.0em !important;
  background: transparent !important;
  background: url(YOUR IMAGE URL HERE) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
#navLang {
  font-size: '10 to 12'px;
  text-align: right;
  margin: 5px 15px 0;
}
#navLang a {
  font-size: '10 to 12'px;
  padding: 0 3px;
}
#navLang a:hover {
  font-size: '10 to 12'px;
}
#navLang span.selLang {
  background: transparent;
  padding: 0 3px;
}
.languagePanel {
  margin: 0;
  padding: 7px 10px !important;
  border: 2px 'solid, ridge, groove, etc...'  #HEX VALUE;
  background: #HEX VALUE;
  position: absolute;
  z-index: 2000 !important;
  text-align: left;
}
.languagePanel div, .languagePanel input {
  margin: 3px 0;
}
.languagePanel h2 {
  color: #HEX VALUE;
  font-size: 14px;
  margin-bottom: 5px;
}
.languagePanel {
  width: 280px;
  left: 680px;
  top: 10px;
  line-height: 16px;
}
.languagePanel .promptButton {
  background: transparent;
  border: 1px solid #HEX VALUE;
  color: #HEX VALUE;
  width: 60px;
}
#navBg {
  position: absolute !important;
  width: 100% !important;
  height: 85px !important;
}
#navBar {
  position: relative !important;
}
#navdivider {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border: none !important;
}
/* FRIENDSTER LOGO */
#logo img {
  height: 18px !important;
  margin-top: 5px !important;
}
#logo {
  float: left !important;
  padding-left: 20px !important;
  margin-bottom: 10px !important;
}
/* MAIN NAVIGATION LINKS */
#mainnav {
  padding: 0 !important;
  margin: 5px 0 0 0 !important;
  width: 100% !important;
  background: transparent !important;
  height: 20px !important;
  position: relative !important;
  text-align: center !important;
  color: #HEX VALUE !important;
  font-size: '10 to 16'px !important;
  font-weight: bold !important;
}
#mainnav ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style-type: none !important;
  line-height: 20px !important;
  z-index: 20000 !important;
}
#mainnav ul li {
  position: relative !important;
  display: inline !important;
  float: left !important;
  text-align: left !important;
}
#mainnav ul li#homelink {
  width: 75px !important;
}
#mainnav ul li#profilelink {
  width: 105px !important;
}
#mainnav ul li#connectionslink {
  width: 140px !important;
}
#mainnav ul li#explorelink {
  width: 93px !important;
}
#mainnav ul li#searchlink {
  width: 80px !important;
}
head:first-child+body div #mainnav ul li a {
  padding: 2px 20px 3px 8px;
}
#mainnav ul li a {
  display: inline !important;
  padding: 0 20px 0 8px !important;
  font-size: 12px !important;
  color: #HEX VALUE !important;
  line-height: 20px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background-color: transparent !important;
}
#mainnav ul li a:hover {
  font-size: '10  to 16'px !important;
  color: #HEX VALUE !important;
  text-decoration: underline !important;
  background-color: transparent !important;
}    
#mainnav ul li ul {
  left: 0 !important;
  position: absolute !important;
  top: 22px !important; /* no need to change, as true value set by script */
  display: block !important;
  visibility: hidden;
  padding: 5px 0 5px 0 !important;
  background-color: #HEX VALUE !important;
  width: 150px !important; /*width of sub menu levels*/
}
#mainnav ul li ul li {
  display: list-item !important;
  float: none !important;
  border-bottom: 1px 'dashed, solid, ridge, etc...' #HEX VALUE !important;
  margin: 0 5px 0 5px !important;
  padding: 0 !important;
}
#mainnav ul li ul li.sublink_top {
  border-top: 1px 'dashed, solid, ridge, etc...' #HEX VALUE !important;
}
#mainnav ul li ul li a {
  display: block !important;
  font-size: '10 to 14'px !important;
  color: #HEX VALUE !important;
  padding: 1px 0 1px 5px !important;
  background-color: transparent !important;
}
#mainnav ul li ul li a:hover {
  font-size: '10 to 14'px !important;
  color: #HEX VALUE !important;
  background-color: #HEX VALUE !important;
  text-decoration: underline !important;
}
#mainnav .mainfoldericon {
  background: url('http://images.friendster.com/images/arrow_down.gif') no-repeat center right;
}
* html #mainnav ul li {
  float: left !important;
  height: 1% !important;
}
* html #mainnav ul li a {
  height: 1% !important;
}
.primary_links {
  float: left;
  width: 60%;
}
.secondary_links {
  float: right !important;
  line-height: 20px !important;
}
.secondary_links a, .secondary_links a:link, .secondary_links a:visited, .secondary_links a:active {
  color: #HEX VALUE !important;
  padding: 0 10px !important;
  font-size: '10 to 16'px !important;
  font-weight: bold !important;
}
.secondary_links a:hover {
  color: #HEX VALUE !important;
  font-size: '10 to 16'px !important;
  font-weight: bold !important;
}
/* SUB NAVIGATION LINKS */
#subnav_search {
  text-align: right;
  margin-right: 15px;
}
#subnav {
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: '10 to 16'px;
  text-align: right;
  color: #HEX VALUE;
}
#subnav a, #subnav a:link, #subnav a:visited, #subnav a:active {
  font-size: '10 to 16'px;
  color: #HEX VALUE;
  font-weight: bold;
  background: transparent;
  text-decoration: none;
}
#subnav a:hover {
  font-size: '10 to 16'px;
  color: #HEX VALUE;
  background-color: transparent;
  text-decoration: underline;
}
/* SHOUTOUT BOX AND FONT */
.controlpanel .so, .minicontrolpanel .so {
  margin: 0 -20px 10px 0;
  width: 257px;
  position: relative;
  background: url(YOUR IMAGE URL HERE) repeat-y right center;
  color: #HEX VALUE;
  font-weight: bold;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
}
.controlpanel .so a, .minicontrolpanel .so a {
  color: #HEX VALUE;
}
.controlpanel .so div#cpShoutoutBox, .controlpanel .so div#cpShoutoutEditBox, .minicontrolpanel .so div#cpShoutoutBox, .minicontrolpanel .so div#cpShoutoutEditBox {
  padding: 7px 7px 5px 7px;
  margin: 0;
}
.controlpanel .so div#cpShoutoutEditBox, .minicontrolpanel .so div#cpShoutoutEditBox {
  display: none;
}
.controlpanel .sol, .minicontrolpanel .sol {
  position: absolute;
  left: -5px;
  top: 8px;
  width: 6px;
  height: 11px;
  background: url() no-repeat;
}
.controlpanel .sob, .minicontrolpanel .sob {
  width: 257px;
  height: 2px;
  background: url() no-repeat;
  line-height: 0;
  font-size: 0;
}
.controlpanel .label, .minicontrolpanel .label {
  text-align: left;
  font-weight: bold;
  margin: 10px 0 3px 0;
  color: #HEX VALUE;
}
/* NOTIFICATION STYLES */
.statusmessagebox {
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  background: none;
  padding: 3px;
  margin: 0 0 10px 0 !important;
}
.errorbox, .notificationbox, .confirmbox {
  position: relative;
  background: transparent;
  padding: 10px 10px 10px 42px;
}
.errorbox, .notificationbox, .confirmbox {
  position: relative;
  background: transparent;
  padding: 10px 10px 10px 42px;
}
.errorbox h2, .notificationbox h2, .confirmbox h2 {
  padding: 0;
  line-height: 18px;
  font-size: 140%;
}
.errorbox h2 {
  color: #HEX VALUE;
}
.notificationbox h2 {
  color: #HEX VALUE;
}
.confirmbox h2 {
  color: #HEX VALUE;
}
.errorbox .boxcontent, .notificationbox .boxcontent, .confirmbox .boxcontent {
  padding: 5px 0 5px 0;
  font-size: 110%;
}
/* BIRTHDAY and MESSAGING ALERTS */
.badge {
  width: 95%;
  background-color: transparent;
  background: url(YOUR IMAGE URL HERE) repeat-y right center;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
}
.warning {
  width: 95%;
  font-size: 145%;
  font-weight: bold;
  color: #HEX VALUE;
  display: block;
}
/* ONE COLUMN FRIENDS LIST */
.friends div .boxcontent {
  width: 100%;
  text-align: left;
  margin-left: 100px;
}
.friends .flogrid75 {
  text-align: left;
  width: 75px;
}
.friends div .viewall a {
  text-align: center;
  width: 100%;
  padding-left: 30px;
}
/* CUSTOMIZED RECENT UPDATES BOX */
.user_tracker {
  width: 95%;
  font-size: '10 to 16'px;
  background: transparent;
  background: url(YOUR IMAGE URL HERE);
  background-position: right center;
  background-repeat: no-repeat;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  color: #HEX VALUE;
}
.user_tracker ul li a, .user_tracker ul li a:link, .user_tracker ul li a:active, .user_tracker ul li a:hover, .user_tracker ul li a:visited {
  margin-left: 5px;
  font-size: '10 to 16'px;
  font-weight: normal;
  color: #HEX VALUE;
  text-decoration: none;
}
.user_tracker ul li a:hover {
  font-size: '10 TO 16'px;
  font-weight: bold;
  color: #HEX VALUE;
  text-decoration: underline;
}
/* CUSTOMIZED MEETTRAILBOX */
.meettrail {
  border: 1px 'solid, outset, ridge, etc...' #HEX VALUE;
  background: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
.meettrail .commonbox h2 {
  height: 60px;
  line-height: normal;
  padding: 1px;
}
.meettrail .commonbox h2 .commonbox {
  height: 60px;
  color: #HEX VALUE;
  padding: 0px;
  margin: 0px;
}
.meettrail .commonbox h2 h2 {
  height: 15px;
  color: #HEX VALUE;
  float: left;
  display: inline;
  background: url(YOUR IMAGE URL HERE);
  background-position: top center;
  background-repeat: repeat-x;
  padding: 2px 0px 0px 10px;
}
.meettrail .viewall {
  float: right;
  display: inline;
  font-size: 12px;
  padding: 2px 10px 0px;
}
.meettrail .bottom {
  margin: 5px;
  text-align: center;
  font-size: 11px;
  font-weight: normal;
}
.meettrail .bottom IMG {
  margin: 0px 10px;
}
*html #meettrail .bottom IMG {
  margin-bottom: 3px;
}
.meettrail .boldtext {
  font-weight: bold;
}
.meettrail .nodetails {
  text-align: center;
  padding: 5px;
}
.meettrail .badgebg {
  width: 300px;
  height: 53px;
  background: url('http://images.friendster.com/images/mt_badge.jpg') no-repeat 0 0;
  cursor: pointer !important
}
.meettrail .badgebg .badgetext {
  margin: 0;
  padding: 14px 10px 0 10px;
  letter-spacing: 0.1em;
  color: #HEX VALUE;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}
.meettrail .getyourown {
  margin: 0;
  padding: 0 5px 2px 0;
  text-align: right;
  vertical-align: top;
}
.meettrail .getyourown a {
  font-weight: normal;
  font-size: 1em !important;
  color: #HEX VALUE !important;
}
.meettrail .officialprofile {
  background: url('http://images.friendster.com/images/mt_gradient.gif') repeat-x left top;
  height: 72px;
  text-align: center;
}
.meettrail .op_badge {
  margin-top: 15px;
}
/* CUSTOMIZED FOOTER */
#footer_container {
  margin: 0 auto;
  font-family: 'Verdana, Arial, Comic Sans Ms, etc...';
  line-height: 1.0em;
  background: transparent;
}
#footer {
  width: 800px;
  height: 80px;
  font-size: '10 to 16'px;
  line-height: 1em;
  position: relative;
  padding: 10px auto;
  margin: 10px auto;
  text-align: center;
  color: #HEX VALUE;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  background: url(YOUR IMAGE URL);
  background-position: center center;
  background-repeat: repeat;
  margin-top: -20px;
}
#footer a, #footer a:link, #footer a:visited, #footer a:active {
  font-size: '10 to 16'px;
  font-weight: normal;
  color: #HEX VALUE;
  text-decoration: none;
}
#footer a:hover {
  font-size: '10 to 16'px;
  font-weight: bold;
  color: #HEX VALUE;
  text-decoration: underline;
}
#footer a {
  font-size: '10 to 16'px;
  color: #HEX VALUE;
}
/* HIDE SEARCH FORM */
#search, #search form {
  display: none !important;
}
/* HIDE TOP WHITE BACKGROUND */
#marketing_bg {
  display :none;
}
/* HIDE SPONSORED LINKS */
#sponsorsAd {
  display: none;
}
/* HIDE BANNERD AD */
.banner_ad_fix {
  display: none;
}
/* HIDE GOOGLE ADS */
#googleAdFactory.fullwidth {
  position: absolute;
  top: -5500px;
}
/* IMAGE EFFECTS */
a:hover img {
  filter:none;
}
img {
  filter:alpha(Opacity=100,FinishOpacity=0,Style=2);
}
/* HOVER BACKGROUND EFFECT */
a:hover, a.navbar:hover {
  background-image:url(YOUR GIF IMAGE URL HERE);
}
a:hover img {
  background-image:url(YOUR GIF IMAGE URL HERE);
  filter:none;
}
/* MAIN PHOTO HOVER CHANGE */
.imgblock200 a:hover img {
  opacity:.0;
  filter: alpha(opacity=0);
  margin: 0 auto;
}
.imgblock200 a:hover  {
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  margin-bottom: 5px;
}
/* MOREABOUT SCROLLINGBOX */
#content_6 {
  padding: 2px 2px 2px 2px;
  overflow: auto;
  width: 100%;
  height: 250px;
}
/* PUBLICCOMMENTS SCROLLINGBOX */
#content_18 {
  padding: 2px 2px 2px 2px;
  overflow: auto;
  width: 100%;
  height: 582px;
}
/* TESTIMONIALS CONTENT SCROLLINGBOX */
.publiccomments div div .dtd {
  width: 100%;
}
.publiccomments div div .dtd ul {
  padding: 2px 2px 2px 2px;
  overflow: auto;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  width: 400px;
  height: 100px;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: top center;
  background-repeat: no-repeat;
}
/* PUBLICCOMMENTS CONTENT SCROLLINGBOX */
.publiccomments div div .dtd {
  width: 100%;
}
.publiccomments div div .dtd ul {
  padding: 2px 2px 2px 2px;
  overflow: auto;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  width: 400px;
  height: 100px;
  background-image: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: no-repeat;
}
/* CUSTOM PAGE TITLE */
body {
  top:expr/**/ession(pagetitle()
  function pagetitle() {
  document.title='YOUR MESSAGE HERE AND USE '+pageViewerFName+' TO INDICATE NAME OF VIEWER';
  }
  window.onload=pagetitle);
}
/* WELCOME ALERT BOX */
body {
  height:expr/**/ession(
  function welcome() {
  alert('YOUR MESSAGE HERE AND USE '+pageViewerFName+' TO INDICATE NAME OF VIEWER');
  }
  window.onload=welcome);
}
/* GOODBYE ALERT BOX */
body {
  left:expr/**/ession(
  function goodbye() {
  alert('YOUR MESSAGE HERE AND USE '+pageViewerFName+' TO INDICATE NAME OF VIEWER');
  }
  window.onunload=goodbye);
}
/* CUSTOM STATUS BAR MESSAGE */
body {
  bottom:expr/**/ession(
  function windowstatus() {
  window.status='YOUR MESSAGE HERE AND USE '+pageViewerFName+' TO INDICATE NAME OF VIEWER';
  }
  if (document.layers)
  document.captureEvents(Event.mouseover)
  document.onmouseover=windowstatus);
}
/* REMOVE HORIZONTAL SCROLLBAR*/
body {
  overflow-x: hidden;
}

The only thing you need to do here is edit the contents of these codes and there you may have it complete! Copy all of these codes and paste it in a notepad for easy editing... After that proceed here to know how to use a hosting site for these codes....
http://theftalk.com/t2376-Linker.html

For those who have JavaScript(.js) Main Boxes and Side Bar Boxes, you may want to look for the codes below to edit those things....

Code:

/* REMOVE DOUBLE BORDER ON SIDE BARS */   /*Use this with my codes for the MASTER BOXES*/
#ul_cbox_content, #visitors {
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  background-color: transparent;
  background: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
/* CUSTOMIZED SEND MESSAGE and SEND SMILE BOX FORM */
#quickmessage, #quickmess  {
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  background-color: transparent;
  background: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
#recepient, #subjectfield {
  background-color: transparent;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  color: #HEX VALUE;
  font-family: 'Verdana, Arial, Comic Sans MS, etc...';
  font-size: '10 to 16'px;
  font-weight: bold;
}
#messagefield {
  width: 500px;
  height: 150px;
  background-color: transparent;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  color: #HEX VALUE;
  font-family: 'Verdana, Arial, Comic Sans MS, etc...';
  font-size: '10 to 16'px;
  font-weight: normal;
}
/* CUSTOMIZED NEW COMMENT BOX FORM */
#quickcomment {
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  background-color: transparent;
  background: url(YOUR IMAGE URL HERE);
  background-position: center center;
  background-repeat: repeat;
}
.pc_textarea {
  width: 500px;
  height: 150px;
  background-color: transparent;
  border: '1 to 10'px 'solid, outset, ridge, etc...' #HEX VALUE;
  color: #HEX VALUE;
  font-family: 'Verdana, Arial, Comic Sans MS, etc...';
  font-size: '10 to 16'px;
  font-weight: normal;
}

That's all I can share to all forum members here, have a nice day!!

Last edited by ducheszv (2008-09-19 08:42:13)

kennections :)^[?], jennychicc^[?], /*/love.ceii/*/^[?], gracemac^[?], levisornothing^[?], NOSIOJ^[?], pauline^[?], phranxis^[?], 'airene17^[?], and mama0114^[?] like this topic.

#2 2007-07-31 14:27:48

hansz: ^{Hanna Krishia}; » FTalkAddict; Sigh!; In Your Heart; 371; 3; 2008-06-18; Website

Re: Complete Compilation of CSS Codes!

Thanks For Sharing..

#3 2007-07-31 14:31:25

dale: ^{Dale Pernz}; » Former Moderator; Clique Mee; Friendstertalk University; G.Lagro.subd.; 7214; 77; 2010-02-19; Website

Re: Complete Compilation of CSS Codes!

thanks for sharing dude..

#4 2007-07-31 14:41:06

applerain: ^Aime; » FTalkGeek; SuJu Fighting!; Artwork 101; Gakuen Alice; 1055; 18; 2010-01-05; Website

Re: Complete Compilation of CSS Codes!

it's so long
tnx for sharing!

Last edited by applerain (2009-05-19 09:11:33)

Sungminnie <3

#5 2007-07-31 14:46:13

xavierkym: ^{!!bloody bastard!!}; » Former Moderator; The Sinister; Class-S; London, England; 5386; 147; 2010-03-11; Website

Re: Complete Compilation of CSS Codes!

@jonathan.. nice codes here.. good for all & especially newbies..

ps: you might wana use the [code..] tag
instead of [quote..]tags

Last edited by xavierkym (2007-07-31 16:51:44)

#6 2007-07-31 16:31:06

loolo: ^Juan; » FTalker; What???; Pardon???; 254; 0; 2008-11-29; Website

Re: Complete Compilation of CSS Codes!

wew. nice sir Nahtano..but it's very long

#7 2007-07-31 16:43:03

ezil2007: ^{E z i L}; » Moderator; Bits and Pieces; NEETworks; 4058; 31; Today

Re: Complete Compilation of CSS Codes!

^ huh?! Its a compilation .. so its natural to be long..
anyway.. your not pasting the whole code right?

Under the starry sky..
We vowed and made a promise together. （　ﾟヮﾟ）

#8 2007-07-31 16:48:25

nurfara: ^Nurfara; » FTalker; Fara Farella; singapore; 138; 2; 2009-12-09; Website

Re: Complete Compilation of CSS Codes!

hey tnx...i was finding this codes to customized the meetrail box.

#9 2007-07-31 22:39:41

inngrade: ^{Vicq John}; » FTalker; Destined To BE Alone; Land Below Da Wind; 130; 0; 2008-07-09; Website

Re: Complete Compilation of CSS Codes!

nice nice!!.. in that case!! i don't need to read the all the topic to search what i want.. jonathan!!.. is all the code compatible with all browser?? ever u try yet?

omost 7 o'clock :clock: !!.. time to sleep!!

Last edited by inngrade (2007-07-31 22:41:36)

#10 2007-08-01 01:40:51

frostmourne_05: ^arjhaye; » FTalkManiac; just silent....; in my yhab's heart; 871; 18; Website

Re: Complete Compilation of CSS Codes!

very long code....hehehe but anyways thanks man for sharing this!!! :

DIABLO 3: The Sin Wars...Coming Soon

#11 2007-08-01 02:47:51

eehjhay: ^eehjhay; » Former Moderator; What can I put in here?; Class X; Liverpool NSW AU; 4746; 144; 2009-09-07; Website

Re: Complete Compilation of CSS Codes!

Topic sticked

For me this is useful for newbies. Great job dude.

As for other moderators, if you want, check his code if there's something wrong or missing

#12 2007-08-01 02:49:06

kyoshiro09: » n00b; 1; 0; 2007-08-01

Re: Complete Compilation of CSS Codes!

who knows how to made html... plz help me

#13 2007-08-01 03:10:53

eehjhay: ^eehjhay; » Former Moderator; What can I put in here?; Class X; Liverpool NSW AU; 4746; 144; 2009-09-07; Website

Re: Complete Compilation of CSS Codes!

i am. lol. i think you are lost huh? the title says CSS Codes and you are talking about html. hehehe..

anyway, PM me if you want to learn more about html

#14 2007-08-01 03:44:58

rexis28: ^unknown; » FTalkAddict; Certified Lazy . . .; Philippines; 351; 2; 2010-01-29; Website

Re: Complete Compilation of CSS Codes!

Huwaw!!!

Thnx For Sharing This One Man.....

#15 2007-08-01 04:28:07

diabolicious: ^Luis; » FTalkGeek; EPIC; South East Asia; 1302; 21; 2009-10-19; Website

Re: Complete Compilation of CSS Codes!

sticked again!

Yeah this is useful to us

#16 2007-08-01 04:35:24

slashedkite: ^{The Keyblade Master}; » FTalkGeek; got it memorized?; Class-S; Dark Meridian; 1365; 39; Website

Re: Complete Compilation of CSS Codes!

Nice one! It's good for the newbies to make their own customized profile. Thanks for sharing!

#17 2007-08-01 04:36:50

eehjhay: ^eehjhay; » Former Moderator; What can I put in here?; Class X; Liverpool NSW AU; 4746; 144; 2009-09-07; Website

Re: Complete Compilation of CSS Codes!

what you mean sticked again?

we choose topics which are very useful for beginners.
coz beginners may tend to read the first page of a forum.

advance users will have to strive or work hard of course,
that's part of the learning process

#18 2007-08-01 06:40:15

pipswake_24: ^{TRiXiE CULLEN}; » FTalker; buzz! :); witch mountain; 169; 1; 2009-04-27; Website

Re: Complete Compilation of CSS Codes!

nice.. thaks for sharing.. it'll be very useful for me.. thanks..

"..too depressed to write.. too hurt to cry.. too sick to be well.. all i need is you baby and everything wud be alright.."

#19 2007-08-01 06:45:08

airish: ^airish; » n00b; batangas; 9; -1; 2008-06-21; Website

Re: Complete Compilation of CSS Codes!

kuya what's meetrailbox??
im just a newbie here!!

Bold textpink text .: iM Not HEre To FIt In coz I was BORN TO STAND OUT:.Bold textpink text

#20 2007-08-01 07:02:30

nahtanoj18: ^JoNaTHaN; » FTalkAddict; Just let it out....; Pasay City, Manila; 506; 32; 2009-07-01; Website

Re: Complete Compilation of CSS Codes!

airish wrote:
kuya what's meetrailbox??
im just a newbie here!!

That's the box with the "How You're Connected:"....

@eddie1315 , don't post languages other than English, this is an international forum so one of the rules is to use the world wide language which is English....

Pages: 1 2 3 … 72

Friendster Tricks and Tutorials
» Complete Compilation of CSS Codes!

Search Friendstertalk

Moderated by Ephemeral, andHa, duchess, portuniecho

Board footer

Current time is 22:56:30 GMT

[ 13 queries - 0.068 second ]
Powered by SyntheticNetwork

FTalk

Welcome to FTalk! You'll need to login in order to fully use all the features and view all the sections of this site.

Please register if you're not yet a member. =)

( hide )