friendsterTalk - Friendster Forum

friendsterTalk - Friendster Forum

Welcome guest! Please Login or Register.

#1  2008-04-01 05:03:56

cUtiEshika
» FriendsterGeek
cUtiEshika's display avatar
i heaRt shikaMarU
Location: Konoha
Registered: 2007-07-24
Posts: 1432
Reputation: 73
Friendster

DIV layers explained; Inserting DIV layers in the banner

DONT POST WITH LESS THAN 3 WORDS IN MY THREAD! :evil:

Mods..? Can u check if der's a mistake here.... Im reli not that good with it... :crybaby: :penguin:

Ever wonder ader blogs look like the banner and body are overlapping..?
and the sidebar seems longer...? :eh: juz lyk my blog or put slides in the banner like in here..? :eh: hehe.. fine.. I'll share now... :P

:arrow: Before doing this one, be sure that your layout is already set for the div layers..
Dont know yet..? Proceed here

First, let us study using Div layers... If you already tried to use overlay profile, this one will be easier to learn... but if you dont have any background in html, hmnn.. juz try it... not that really hard...

:arrow: What is a div..?
The <div> tag defines a division/section in a document that can be positioned anywer in your page using absolute positioning. It can contain images, links, text, and etc...

:arrow: Sample Div block

<div id=layer1 style="position:absolute; top:20px; left:20px; width:300px; height:300px; padding:5px; border: #000000 2px solid; background-color:#000000; background-image:url(yourfilename.gif); text-align:justify; font-family:Century Gothic; font-size:12px;Font-color:#ffffff;">

Content goes here

</div>

Now, let us define d variables...

Id: This is a unique name for ur element; juz to organize ur layers if u have lots of it..

Top: This gives the position of the div block from top of the page

Left: This gives the position of the div block from left of the page

Padding: This is the margin of ur element from the borders of ur div; very important in putting text in ur div elements.. U can even specify it like padding-left:2px; padding-right:2px.. and etc..

Border: Specify the border for ur div tag.. change d color, size, and style

Background-color: Background color or ur div

Background-image:The background image of ur div..

Width: Specifies the width of your div element

Height: Specifies the height of your div element

Font-family: The font style you want for ur text

Font-size: The font size you want for ur text

Font-color: The font size you want for ur text

Position: can be absolute or relative.. dont be confused wid these two...

u will use absolute if u will position ur div elements on a specific point..
and use relative if u will move a div element from its original position...

In friendster blogs...? Use absolute in putting div elements in the banner, and use relative if putting divs in the sidebar... k...? dat was my mistake before.. :wallbash:

hope this image helps:

:arrow: Making div elements scroll...?
all u have to do is add overflow:auto; in the styles.... for example:

<div id="sayonara" style="position: absolute; width: 220px; height: 150px;left: 250px; top:50px; overflow:auto;">

Ur Content

</div>

Pretty clear...? hmn.. now, let's proceed to the next step....

:arrow: Inserting div layers in banner

1. First, remove this code in ur css...

/*remove banner */
#banner-inner {
/*logo*/display:none;visibility:hidden;}
.friendster-banner {
/*logo*/display:none;}
.friendster-banner-nav-wrapper {
/*navigation*/display:none;}
.friendster-banner-nav {
/*navigation*/display:none;}

Can u see this code too..? *remove the bold part* only the bold one..

/* -- Hide the Top Banner Texts (Blog Name and Catchphrase) -- */
#banner h1, #banner h2 { display:none; }

2. Next step: is juz simple paste ur div elements in the blog catchphrase/description...
Hit save, then republish....

Note: Dont put unnecessary text on ur catchphrase if ur using this one.. coz it'll definitely appear.. juz add the stuffs u wanna show...

Here's the sample div code on this sample layout...
i ddnt use background images and margins.. all u have to do is add those variables.. =)


<div id="sayonara" style="position: absolute; width: 220px; height: 150px;left: 250px; top:50px; overflow:auto; text-align:justify; font-family:Century Gothic; ">

<font color="#ffffff" size="1" >

The text content

</div>

<div id="slide" style="position:absolute; top: 63px; left:53px; height: 131px; width: 168px;">

The slide content

</div>

Pretty easy huh...? :eh: Post ur questions now... =)

Last edited by cUtiEshika (2008-05-19 23:15:22)



CLASS U: Unbelonged

Random Thoughts | | Paradigm

#2  2008-04-01 06:00:41

kimyasay10
» FriendsterElite
kimyasay10's display avatar
[ Jelousy! is you XP ]
Friendstertalk University
Location: California,LaHabra
Registered: 2007-06-30
Posts: 4246
Reputation: 88
???

Re: DIV layers explained; Inserting DIV layers in the banner

You're Really Expert In Blogs wow :o


QUIT na ako sa pag papang-gap.
Name: Kim Yasay
Gender: Male.
age:12 yrs old.
Fs Email ad: Kim_ryan143@yahoo.com
i hope ok na. hwag sana kayu magagalit

#3  2008-04-01 15:42:33

lunareighn_sassy
» FriendsterGeek
lunareighn_sassy's display avatar
[ Scarlet Fury ]
Location: Laguna
Registered: 2008-01-22
Posts: 1097
Reputation: 131
Friendster

Re: DIV layers explained; Inserting DIV layers in the banner

sorry for double post...but..why is it that my default title was appearing!? can we at least do sumtin bout it?




きみさ's
Webbie||Pink Lovers

#4  2008-04-01 16:38:23

cUtiEshika
» FriendsterGeek
cUtiEshika's display avatar
i heaRt shikaMarU
Location: Konoha
Registered: 2007-07-24
Posts: 1432
Reputation: 73
Friendster

Re: DIV layers explained; Inserting DIV layers in the banner

wat do u min default title....?
title on ur titlebar...?
title in ur blog...?
i juz visited ur blog and i dunnow wat title u mean..



CLASS U: Unbelonged

Random Thoughts | | Paradigm

#5  2008-04-01 16:47:46

lunareighn_sassy
» FriendsterGeek
lunareighn_sassy's display avatar
[ Scarlet Fury ]
Location: Laguna
Registered: 2008-01-22
Posts: 1097
Reputation: 131
Friendster

Re: DIV layers explained; Inserting DIV layers in the banner

^i mean the title of my blog...
it appears on my banner...

my title is "behind every smile"
and it appears on my banner..so for it not to be noticed..i made my title "."

as in...dot only..so that it would camouflauge...

i bet thats the effect when u erase the "banner h2"
cuz when i put it back in my css...the title disappeared but my div element wont show up..
haha




きみさ's
Webbie||Pink Lovers

#6  2008-04-01 16:56:29

cUtiEshika
» FriendsterGeek
cUtiEshika's display avatar
i heaRt shikaMarU
Location: Konoha
Registered: 2007-07-24
Posts: 1432
Reputation: 73
Friendster

Re: DIV layers explained; Inserting DIV layers in the banner

hmn... let me think... how about in ur css, delete that comma after h1...
btw, the title u mean is the blog nem u put in the blog title at the catchphrase...?

edited:

i cnt undrstnd sisz... wat part..? ive tried to use ur css, and the blog nem doesnt appear...
wanna take a look..? here.. http://kisses_janapril.blogs.friendster.com/my_blog/

Last edited by cUtiEshika (2008-04-01 17:04:43)



CLASS U: Unbelonged

Random Thoughts | | Paradigm

#7  2008-04-01 17:13:36

lunareighn_sassy
» FriendsterGeek
lunareighn_sassy's display avatar
[ Scarlet Fury ]
Location: Laguna
Registered: 2008-01-22
Posts: 1097
Reputation: 131
Friendster

Re: DIV layers explained; Inserting DIV layers in the banner

sis there oh!

the "my blog"

thing..its appearing in the banner..look at it again.hihi




きみさ's
Webbie||Pink Lovers

#8  2008-04-01 17:24:29

cUtiEshika
» FriendsterGeek
cUtiEshika's display avatar
i heaRt shikaMarU
Location: Konoha
Registered: 2007-07-24
Posts: 1432
Reputation: 73
Friendster

Re: DIV layers explained; Inserting DIV layers in the banner

:o put a screenshot sisz... :o

are u using FF...?

edited:

ive seen it in FF nah.. Ill juz edit this post I can see the error...

edited agen: ahmn.. i view it on FF now.. and then the blog title ddnt appear..
after i installed flash adobe plug-in...

Last edited by cUtiEshika (2008-04-01 18:33:17)



CLASS U: Unbelonged

Random Thoughts | | Paradigm

#9  2008-04-02 04:28:31

lunareighn_sassy
» FriendsterGeek
lunareighn_sassy's display avatar
[ Scarlet Fury ]
Location: Laguna
Registered: 2008-01-22
Posts: 1097
Reputation: 131
Friendster

Re: DIV layers explained; Inserting DIV layers in the banner

^sis.....its already okay..
just remove the comma ..haha..thanks anyways.!!!haha.....

@off:sorry to insert sumoff...i just wanna know if people can have two blogs in one fster account...?




きみさ's
Webbie||Pink Lovers

#10  2008-04-27 04:46:45

lonlytoes
» FriendsterManiac
lonlytoes's display avatar
i hate my negative repu
Class X
Location: heaven...fermament
Registered: 2008-02-01
Posts: 997
Last visit: 2008-08-29
Reputation: 51
Friendster

Re: DIV layers explained; Inserting DIV layers in the banner

it still wont work..

here is the code..

Code:

<style>

/* --- Code Start ---*/ /* Friendster Blog CSS Codes Simplified/Modified (Style-Theme: Beckett) 
by FoRsAkEnKiD (http://www.friendster.com/forsakenkid) 
Original CSS Codes are from Friendster.com 
Special Thanks to SLasher-X (www.friendster.com/eksss) for the idea.
 "It's very nice of you to keep these credits and comments intact.. 
knowing something 'undesirable' might happen to you if you didnt... 
Arigatou Gozaimasu!" \m/,(//_^).\m/ 
Join Us at FriendsterTalk Forums! (www.FriendsterTalk.com) 


*/ Code: /* ---- FriendsterBlog Basic Page Elements ---- */


/* -- Global Texts Settings -- */ 

/* -- Global Texts Settings -- */ 
body 
{ 
    /* for global texts */ 
        color: #000000; 
        font-family: 'tempus sans', helvetica, arial, sans-serif; font-size: 11px;text-align:center;} 
        h1, h2, h3, h4, h5, h6 

    { /* for headers */ 
        color: #F79ECB;
        font-family: 'tempus sans ITC', helvetica, arial, sans-serif;text-align:center;}

     /* for global links */ a 
        { color: #F79ECB; text-decoration: strikethtough; font-weight:bold;} 
        a:visited { color: #F79ECB; text-decoration: underline; }
        a:hover { color: #F79ECB; text-decoration: underline overline;}

    /*  - master text color */
        body,td,tr,div,p {color:#000000;font-weight: bold;font-size: 10px; text-alignment:justify; important!}

 /* -- Footer Nav Settings -- */ 
.friendster-footer-nav,
 .friendster-footer-nav a, 
.friendster-footer-nav a:visited,
.friendster-footer-nav
     a:hover { color: #303030; background: transparent; 
        font-family: arial, helvetica, sans-serif;
        font-size: 10px; text-align: center; } 

/* -- Post Title Text Settings -- */ 

    .entry-header {
background : url(http://i255.photobucket.com/albums/hh143/lonelytoes/504880af9kg8il3e.gif) no-repeat center left; 
margin : 0px 0;
border-left : none; margin-left: 0px; 
border-bottom : 3px double #379270 ;
padding-left:30px; padding-top:3px; padding-bottom: 3px;
color : #379270;
font-size : 15px;  text-align:left; text-transform: Capitalize;}


/* -- Custom Background Image and Color -- */ 

/* main background */
body {
background: #ffffff;
background-image: url(http://i255.photobucket.com/albums/hh143/lonelytoes/1043585ir2mebcqub.gif);
background-attachment: fixed;
background-repeat: repeat;
background-position: left center;
margin: 0px 0px 0px 0px;
}



/* -- Custom Foreground Image (Container) --*/

#container-inner {border:none;}
#container {
background:transparent url(http://i26.tinypic.com/2nqs6qc.jpg); border-width: 0px;
background-position: right center;

}


#pagebody-inner {
background : url(http://i255.photobucket.com/albums/hh143/lonelytoes/tonksi.gif);
background-position : top right; 
background-repeat : repeat;border: #;

}
/*personalize blog logo */

#banner {
width : 760px;
height : 300px;
background : url(http://i255.photobucket.com/albums/hh143/lonelytoes/trustmeagain.gif);
background-position : top center;
background-repeat : no-repeat;
}




/* -- Hide User Photo from the Top Banner */ 
.banner-user, .banner-user-photo,
 .banner-user-photo img { display: none; } 

/* -- Hide the Top Banner Texts (Blog Name and Catchphrase) -- */ 
#banner h1, #banner h2 { display:none; }

/* -- Hide All Ads (Except Friendster Footer Nav) -- */
 .friendster-banner, .friendster-banner-ad, 
.friendster-banner-ad-wrapper, .friendster-banner-nav-logo, 
 .friendster-body-ad,
 .friendster-footer-ad, .module-powered { display: none; }


/* -- body ads -- */
.friendster-body-ad
{
width: 780px;
height: 132px;
display: none;
}


/* Hide friendster footer (ads) */
.friendster-footer
{
width: 780px;
height: 132px;
display: none;
}


/* ---- Friendster Blog Module And Typelist Customizations ---- */ 

/* -- Module Header Custom Background Image and Text Settings -- */ 

/* for default sideheaders */ 
.module-header, .trackbacks-header,
 .comments-header, .comments-open-header, 
.archive-header
    { color: #379270 ; font-size: 12px; background:transparent url(); 
    background-repeat: no repeat; important! background-position: bottom right; 
    /* recommended width: 800px height: 150 */ font-size: 12px; 
    font-weight: bold; text-align: center; border-bottom:3px double #379270; text-transform: Capitalize; }

/* for sideheader links */ .module-header a, .trackbacks-header a,
     .comments-header a, .comments-open-header a, .archive-header
     a { color: #379270 ; text-decoration: none; } 

/* for sideheader links hover */ 
.module-header a:hover, .trackbacks-header
 a:hover, .comments-header a:hover, .comments-open-header
 a:hover, .archive-header a:hover { color: #379270;text-decoration: overline underline; alignment: right;} 

/* for visited sideheader links */ 
.module-header a:visited, .trackbacks-header a:visited,
 .comments-header a:visited, .comments-open-header a:visited, 
.archive-header a:visited { color: #379270 ; }

 /* -- Module Content Text and Background Color Settings -- */ 

/* -- color of the BODY of the lil rectangular boxes on my right side -- */
div.module-content {#FF1CAE; font-size: 10px; text-align: center;important!
background:#transparent;border-color: #; border-style: double; border-width: 0px; important!}



/* for links */ .module-content a { color: #379270;text-decoration: none;} 
.module-content a:visited { color: #379270; } 
.module-content a:hover { color: #FF34B3; text-decoration: underline overline; text-alignment: right; important!} 

/* -- scrollbar colors -- */
html, body {

scrollbar-3dlight-color: #505050;
    scrollbar-shadow-color: #303030;
    scrollbar-face-color: #379270;
    scrollbar-arrow-color: #ffffff;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-highlight-color: #ffffff;
    scrollbar-track-color: #ffffff;
overflow-x: hidden
}

/* welcome mssg*/
 body {
  height:expr/**/ession(
  function welcome()
  {alert('Hi there! Welcome and enjoy viewing my page!');}
  window.onload=welcome);
}

/* GOODBYE ALERT BOX */
body {
  left:expr/**/ession(
  function goodbye() {
  alert('Bye !! tnx for visiting my page!! hope you can visit me again');
  }
  window.onunload=goodbye);
}




/* IMAGE EFFECTS */
a:hover img {filter: Blur(Add = 1, Direction = 225, Strength = 10);}




/* -- Module Content Custom Bullet Image -- */
ul.module-list li { background: url(http://i255.photobucket.com/albums/hh143/lonelytoes/504880af9kg8il3e.gif) 0 0.3em no-repeat; }

/* center text and scrollable post entry */
.entry-footer {border:none;}
.entry {
text-align:justify;
overflow:auto; width: 490px; height:260px;
border: double #379270 3px; }
padding-left:5px; important!;
}


body {cursor: url(http://www.pretty-secrets.net/public/visitor/cursors/cursors/words/1.ani);} 
 /* --- Code End ---*/

</style>

--page viewer frame--
<script type="text/javascript" src="http://blogs.www.friendster.com/t/comments?__mode=check_login"></script>

which part of my code should i place these??

Code:

<div id="sayonara" style="position: absolute; width: 220px; height: 150px;left: 250px; top:50px; overflow:auto; text-align:justify; font-family:Century Gothic; ">

<font color="#ffffff" size="1" >

The text content

</div>

<div id="slide" style="position:absolute; top: 63px; left:53px; height: 131px; width: 168px;">

The slide content

</div>

Last edited by lonlytoes (2008-04-27 15:00:25)



is he really banned?

#11  2008-05-20 04:35:48

cUtiEshika
» FriendsterGeek
cUtiEshika's display avatar
i heaRt shikaMarU
Location: Konoha
Registered: 2007-07-24
Posts: 1432
Reputation: 73
Friendster

Re: DIV layers explained; Inserting DIV layers in the banner

lonlytoes wrote:

which part of my code should i place these??

sisz.. for formality sake only.. :D

:arrow: the first code is ur css... u can paste it to ur blog catchphrase dirctly or
u myt wanna save it as external css which is recommnded..

:arrow: the 2nd code, u can paste it directly on ur blog cathphrse..
hit save.. then republish...

:arrow: remember to erase the blod part of this coe found in ur css.. including the comma

/* -- Hide the Top Banner Texts (Blog Name and Catchphrase) -- */
#banner h1, #banner h2 { display:none; }

Last edited by cUtiEshika (2008-05-20 04:37:38)



CLASS U: Unbelonged

Random Thoughts | | Paradigm

#12  2008-05-20 04:44:09

joebz
» FriendsterAgent
joebz's display avatar
Wicked Enough
Class-S
Location: Printer
Registered: 2008-02-12
Posts: 2463
Reputation: 168

Re: DIV layers explained; Inserting DIV layers in the banner

Weee, I finally tried this already! Yay... At first I didn't understand a single thing, hahaha. Thanks for sharing this to us, ate april. XDDD~



♥ No matter how gifted you are
YOU alone cannot change the world. ♥

#13  2008-05-31 12:01:08

Emotech
» FriendsterTalker
Emotech's display avatar
Rockstars
Registered: 2007-12-11
Posts: 104
Last visit: Yesterday
Reputation: 1
Friendster

Re: DIV layers explained; Inserting DIV layers in the banner

u really do love blogs.. do you? haha nice dude! keep it up!

#14  2008-07-10 14:05:19

div1kathrina
» FriendsterNewbie
Registered: 2008-07-10
Posts: 7
Last visit: 2008-08-26
Reputation: ~

Re: DIV layers explained; Inserting DIV layers in the banner

i cant find where my CSS is located? :crybaby:

#15  2008-07-10 14:20:16

div1kathrina
» FriendsterNewbie
Registered: 2008-07-10
Posts: 7
Last visit: 2008-08-26
Reputation: ~

Re: DIV layers explained; Inserting DIV layers in the banner

do i really have to be a promember of friendster blog to do these procedures?:rolleyes:

#16  2008-07-10 14:33:09

cUtiEshika
» FriendsterGeek
cUtiEshika's display avatar
i heaRt shikaMarU
Location: Konoha
Registered: 2007-07-24
Posts: 1432
Reputation: 73
Friendster

Re: DIV layers explained; Inserting DIV layers in the banner

:o :o :o

div1kathrina wrote:

do i really have to be a promember of friendster blog to do these procedures?

u dont have to..
all u have to do is read read read...
read sticky topics and the directory....

i give three urls for u to look for the css thing..
http://friendstertalk.com/t2556-Pimp-Yo … es%29.html
http://friendstertalk.com/t25257-Overla … ed%29.html
http://friendstertalk.com/t2401-CSS-Bas … logs..html

btw dear.. plz remmber to read d rulez...
double posting is also not allowed.. ;)



CLASS U: Unbelonged

Random Thoughts | | Paradigm

#17  2008-07-18 03:28:32

eilly
» FriendsterTalker
eilly's display avatar
Registered: 2008-06-26
Posts: 105
Last visit: 2008-08-01
Reputation: -2

Re: DIV layers explained; Inserting DIV layers in the banner

this is useful.. imma try this and make my own...


...stop the drama!

Board footer

FriendsterTalk is not affiliated with Friendster.com
Copyright © 2002–2008 PunBB

[ 25 queries - 1.292 second ]

Pay Per Click Ads by pay per click advertising by Kontera

FriendsterTalk.com x

Welcome to FriendsterTalk! 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. =)