friendsterTalk - Friendster Forum

friendsterTalk - Friendster Forum

Welcome guest! Please Login or Register.

  • Friendster Blogs
  •  » Overlapping banner and body tutorial and some CSS & add-ons (updated)

#1  2008-03-27 07:37:48

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

Overlapping banner and body tutorial and some CSS & add-ons (updated)

BE UNIQUE AND BE CREATIVE... EXPLORE AND LEARN....
Sharing time guyz... :eh:
Since I'm still here, ask questions and wat part u wanna know...
hmn.. I'll share my js add ons next and the div layers... =)

:arrow: Embedding media and animated images as blog entry

juz use the mailto link.. wat is mailto link..?
wyl u are composing a new post, can u see the toolbox..?
juz click d envelope thng.. oh.. dats the mailto link..?  :o
and a new window will pop up..
juz place d codes on the box for email address..

i know this was already a topic solved, but aders are juz so lazy to read
and den juz PM me directly... so i added it here..

:arrow: Familiarize with the parts



:arrow: The banner and the background are already obvious....
:arrow: Container- the pink one
:arrow: Page-inner body: contains the sidebar and body... extending to the green ones before the pink part... Basically, page-inner body is the part inside the container and below the banner...
:arrow: The sidebar has two parts.. the header and the body...

:arrow:  Overlapping banner and body

I don't know what is the exact term but it looks like your sidebar and the entries are un-cut at the top... Still don't get it...? Here's a screenshot:


To make it..? The trick lies in the banner....
For example, this is my image for the banner...

1. Open a new document with a size of:
760x300px (760px is the standard width of the banner... the height can be of ur choice)
2. Add a new layer and fill it with a color that blends with ur banner.. or any color u like..
for me, i filled it with darkgreen... Copy your image for the banner and paste it on ur new document.. it may now luk lyk this:

3. Add new layers then put the rectangles/rounded rectangles (watever u want) below the banner... juz lyk this... ( u can add sum stuffs too... i added lines on it)

4. Then that's for ur banner... But before u flatten all ur layers and discard the document, we have to extract a part from the banner to make the page-inner body..
:arrow: Making the page-inner body
5. Hide the stuffs (if u put any at those rectangles), flatten ur layers and select the lower part of the banner using ur rectangular marquee tool.. (dont include the top of the rectangles wen selecting) juz like this:

6. Copy the selected part, open a new document and paste the extracted part.. and tada... u now have d image for ur page-inner body... u willl have sumthing dat luk lyk dis...

7. Since u now have the images, lets's put em' on codes... it cud be better if ull compile all ur css...

For the banner:

/*personalize blog logo */

#banner {
width : 760px;
height : 300px;
background : url(http://i25.tinypic.com/mio1tu.jpg);
background-position : top center;
background-repeat : no-repeat;
}

remember: the standard width is 760px...

For the page-inner body:

#pagebody-inner {
background : url(http://i28.tinypic.com/2n14xzm.jpg);
background-position : top right;
background-repeat : repeat;border: #;

}

For the container: the pink one...

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

}

For the background:

body {
background: #ffffff;
background-image: url(http://i32.tinypic.com/153bev9.jpg);
background-attachment: fixed;
background-repeat: repeat;
background-position: left center;
margin: 0px 0px 0px 0px;
}

For the background: play along wid margins if u want to have spaces outside the container..
Note: for the page-inner, container, and background: if u are using small images, b sure to put it on "background repeat"; or u can put only colors and add borders... and ur done wid d main images...

:arrow: Title Post Settings

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

    .entry-header {
background : url(http://i28.tinypic.com/21brg48.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;}

U can customize it using that code.. add borders and background...
If your image is left align, and ur title is left align, takenote with the padding-left... increasing its no. will move the title text to the right...

:arrow: center text and scrollable post entry/ entries wid borders

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

The code above shows centered entries + scrollables....
If u dont want to have scrolling entries, juz erase overflow:auto... and change the height to 100%... Play with the borders and colors...

:arrow: Hiding the footer

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

:arrow: Alert messages

welcome:

body {
  height:expr/**/ession(
  function welcome()
  {alert('UR MESSAGE');}
  window.onload=welcome);
}

goodbye:

body{left:exp/**/ression(
function goodbye()
{alert('UR MESSAGE');}
window.onunload=goodbye);}

no ryt click:

body{right:expr/**/ession(
function rightclick() {if (event.button==2)
{alert('UR MESSAGE')}}
document.onmousedown=rightclick);}

Dont use apostrophes [ ' ] in ur message...

:arrow: Cursors and on hover

body {cursor: url(URL OF UR CURSOR NOT ON HOVER);}
a,a:link,a:visited,a:active,a:hover { cursor: url("URL OF CURSOR U WANT ON HOVER"),default;}

Here's my sample css... open it and try to practice making layout in ur own..
Best thing to do..? Open my CSS

Some CSS in the tricks and tutorials can be applied in ur blog too...
like customizing titlebar, hover effect, falling images, and etc...




I'll share more if I have time... :penguin:

If you think this is useful, plz do credit me... =)

:arrow: Blog design explained; Arrange your sidebar; Manage # of posts...

Last edited by cUtiEshika (2008-03-31 06:13:18)



CLASS U: Unbelonged

Random Thoughts | | Paradigm

#2  2008-03-27 07:40:18

♥~rocker.baby.LOUIZ~♥
» FriendsterAgent
♥~rocker.baby.LOUIZ~♥'s display avatar
Location: SUMWR UBR DR ~ XD
Registered: 2008-02-13
Posts: 2049
Last visit: 2008-08-13
Reputation: 97
Friendster

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

awwtz..
tnx ate shika 4 dis..
it helps a lot :D
tnx so much..
i'll try to make one :P


#3  2008-03-27 13:57:34

tellie
» FriendsterNewbie
tellie's display avatar
ergh.. newbie,,
Registered: 2008-01-20
Posts: 18
Last visit: 2008-03-31
Reputation: ~
Friendster

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

i love it. !
thank you.
i made my first blog layout myself because of this!..
thank you..
much. much. much!
here's my blog...
http://good-for-nothing-kristel.blogs.f … .com/naked

thank you really..
mwah mwah


#4  2008-03-28 06:01:02

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

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

Weee, this is really helpful.. If I have the time, i'll try this style... Thanks, ate april..[:



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

#5  2008-03-28 09:12:43

adamin
» FriendsterGeek
adamin's display avatar
1..2..3...Go!!(hujan Epi)
Location: Malaysia-kelate
Registered: 2008-01-05
Posts: 1206
Last visit: 2008-09-04
Reputation: 4
Friendster

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

cool...thankz 4 sharing yea...


Adamin Music Store

sɹǝqɯǝW ʞʃɐ⊥ɹǝʇspuǝıɹℲ

#6  2008-03-28 09:17:18

pinkblack08
» FriendsterElite
pinkblack08's display avatar
gimme moar.XD
The Scandalers
Location: on Planet Earth
Registered: 2007-11-02
Posts: 3589
Last visit: Today
Reputation: 137
Friendster

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

wow thanks for sharing this..cool huh!



don't PM me nonsense things/questions unless i PMed ya first

ayhhl0eveet~!

#7  2008-03-29 03:09:33

charmcharmcharm14
» FriendsterManiac
Alchemy Explicit AE
Location: hideout ^^
Registered: 2008-01-26
Posts: 850
Last visit: 2008-09-01
Reputation: 16

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

ei ateshieka
soo now now u reveal ur secretz =D
nice step by step procedure. . .
but i think i still cant make my own
it will only looks so thrashy as before :wallbash:
ill treasure my layiee for now =)
coz itz made by you ;]
"limited edition" by ateapril heheh =D




charmBusy scheDcharm

#8  2008-03-30 05:46:26

tellie
» FriendsterNewbie
tellie's display avatar
ergh.. newbie,,
Registered: 2008-01-20
Posts: 18
Last visit: 2008-03-31
Reputation: ~
Friendster

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

charmcharmcharm14 wrote:

ei ateshieka
soo now now u reveal ur secretz =D
nice step by step procedure. . .
but i think i still cant make my own
it will only looks so thrashy as before :wallbash:
ill treasure my layiee for now =)
coz itz made by you ;]
"limited edition" by ateapril heheh =D

huwaat? whut part did you not understand?
its really detailed..=)


#9  2008-04-07 15:23:40

hana kimi
» FriendsterNewbie
Registered: 2008-04-07
Posts: 1
Last visit: 2008-04-07
Reputation: ~

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

tellie wrote:

charmcharmcharm14 wrote:

ei ateshieka
soo now now u reveal ur secretz =D
nice step by step procedure. . .
but i think i still cant make my own
it will only looks so thrashy as before :wallbash:
ill treasure my layiee for now =)
coz itz made by you ;]
"limited edition" by ateapril heheh =D

huwaat? whut part did you not understand?
its really detailed..=)

#10  2008-04-13 05:58:41

-NiK-
» FriendsterGeek
-NiK-'s display avatar
[TAURUSLADY]
Registered: 2008-04-12
Posts: 1421
Last visit: Today
Reputation: 101
Friendster

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

wow!!! :wow: thanks for sharing ^^




Why some of you rips my codes/works and have the guts to add me in their fs??? You must go to hell!!!

#11  2008-04-18 06:40:25

+_ramza_+
» FriendsterManiac
+_ramza_+'s display avatar
deviously deviant
Artwork 101
Location: mi galleria
Registered: 2008-02-26
Posts: 940
Reputation: 42
Friendster

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

noob here..
question regarding the overlapping banner and body,
did you that using paint, photoshop or lunapic?
help!
thanks for sharing your secrets...

#12  2008-04-20 17:56:45

dollface02
» FriendsterTalker
dollface02's display avatar
adoodoodoo-adadada-ahaha
Location: Pilipinas!
Registered: 2007-12-16
Posts: 188
Last visit: Yesterday
Reputation: ~
Friendster

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

thank you soo much for this! it helps me a lot!:D



thenkz 2 PaulaNicole123
4 d blinkie!
GROUPERZ || FRiENDSTER

#13  2008-05-14 18:21:31

mary cris
» FriendsterNewbie
mary cris's display avatar
Location: sa mga tyange
Registered: 2007-12-16
Posts: 21
Last visit: 2008-08-05
Reputation: ~

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

w0w..:O:o

tnx for the help...

Godspeed!!:wow:


#14  2008-05-19 06:06:35

♥brains&beauty♥
» FriendsterManiac
♥brains&beauty♥'s display avatar
^ [am inlove...] ♥
Muzikeroz-Muzikeraz
Location: [in HIS ♥]
Registered: 2008-04-28
Posts: 720
Last visit: Today
Reputation: 73
Friendster

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

Thanks so much for this Ate April! You've helped so many newbies like me! =)

I'm so sorry that you are leaving..... :crybaby:

But don't worry, when I become as good as you, I'd be sure to give all credits to you and your works... :D


EDIT: Can I make a Blog Layout w/o Overlapping them? Is this possible? Thanks in advance... :thumbsup:

Last edited by ♥brains&beauty♥ (2008-05-20 05:31:43)

#15  2008-05-20 04:44:02

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

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

thnkyou all for the comments...
keep tweaking ur blog... =)

at ramza: i use photoshop dear...
but u can still use paint or any phot editing shop though..
its juz that it take a lot of skills to do those stuffs in paint...



CLASS U: Unbelonged

Random Thoughts | | Paradigm

#16  2008-05-20 06:32:32

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

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

@t:this topic never gets old..haha!!

ate shika...wanna ask if i could feature the tuts ur making in other forum...

you know...so that we could share to other forums the way to pimp their own friendster blog..
do you mind??
ill credit you anyway..reply back...hihi




きみさ's
Webbie||Pink Lovers

#17  2008-05-20 17:54:30

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

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

if ur talking about my tuts, u can wid d ff reqs:
:arrow: link back to my blog and link back to friendstertalk...
if u wont, den i dunnw wid u... u can or cant... its ur judgemnt..

Last edited by cUtiEshika (2008-05-20 18:02:28)



CLASS U: Unbelonged

Random Thoughts | | Paradigm

#18  2008-05-21 23:37:11

darkrenz
» FriendsterTalker
darkrenz's display avatar
-> i'm still paranoid T_T
Location: dark-sequence
Registered: 2008-03-04
Posts: 265
Last visit: 2008-09-02
Reputation: 2
Friendster

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

^^.. ohayo gusaimas...^^ tnx 4 the info...^^




-> tnx eptalk...^^

#19  2008-05-23 08:19:48

bratinela01
» FriendsterFreak
[ Baka~! ]
Class-S
Location: squatter toh! =))
Registered: 2008-01-04
Posts: 1875
Reputation: 65
Friendster

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

@ate shika~ what's  the  height and width of the banner btw~ :penguin:

#20  2008-05-23 12:37:29

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

Re: Overlapping banner and body tutorial and some CSS & add-ons (updated)

the stndard width is 760 px,if u set all margins to 0px....
but the default one is 750px...because of the 10px padding...

hyt..? u can use any hyt.. juz be sure to chnge the hyt value on the code..

btw, ribbon opened a thread about this..
and i think its included in my post... :paranoid:

Last edited by cUtiEshika (2008-05-23 13:25:33)



CLASS U: Unbelonged

Random Thoughts | | Paradigm

  • Friendster Blogs
  •  » Overlapping banner and body tutorial and some CSS & add-ons (updated)

Board footer

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

[ 28 queries - 0.392 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. =)