Share your HTML & CSS layout

Luffy · **Posted:** 12 May 2013, 01:10

Share your layouts here so other members could use it

Sample Template 2
Avatar on left. Change this line to move avatar to the right

<div style="float:right;width:330px">

Code:

<style>
.holder{border:10px solid #FFFFFF;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left;width:300px}
.holder2{border:10px solid #FFFFFF;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left}
.clear{width:100%;clear:both!important;display:inline-block}
</style>
[BUTTONS]
<div style="float:left;width:330px">
<div class="holder">[AVATAR]</div>
<div class="clear"></div>
<div class="holder">[ABOUT_ME]</div>
<div class="clear"></div>
<div class="holder">[FRIEND_BOX]</div>
<div class="clear"></div>
<div class="holder">[MUSIC]</div>
</div>
<div class="holder2">[COMMENT_BOX]</div>

Sample Template 3
With Youtube video on top

Code:

<style>
.holder{border:10px solid #FFFFFF;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left;float:left;width:300px}
.holder2{border:10px solid #FFFFFF;margin:5px;box-shadow:2px 2px 5px #000;overflow:hidden;transition:all 0.5s Ease;text-align:left}
.clear{width:100%;clear:both!important;display:inline-block}
</style>
[BUTTONS]
<div style="float:left;width:330px">
<div class="holder">
[AVATAR]
</div>
<div class="clear"></div>
<div class="holder">[FRIEND_BOX]</div>
<div class="clear"></div>

</div>

<div class="holder2">
<object width="620" height="315"><param name="movie" value="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1" type="application/x-shockwave-flash" width="620" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>

<div class="holder2">[ABOUT_ME]</div>
<div class="holder2">[COMMENT_BOX]</div>

MirrorB · **Joined:** 03 Mar 2013, 09:04 **Posts:** 10 **Status:**

"Hey darlings! I have been waiting for such a long time for Luffy Dono to introduce this feature to Anivide! Long story short I was once a little young punk like you and back in the day I would Roleplay on YouTube channels! But then the big bad YouTube design department decided to create a 'supposedly' better profile... Oh no, no, no! What a no, no!"

He danced lightly.

"So with the new feature I thought I would give you all some nostalgia! An anivide profile design based off the old youtube channel design darlins!"

Blue:

Red:

Yellow:

Purple:

Green:

Orange:

"I ask you all not to remove the attribution on the template, but feel free to customize to your hearts content darlins! Oh and also I recomend that your avatar should be 300x500 for perfect fitting in this template!"

Medina · **Joined:** 27 Jan 2013, 12:32 **Posts:** 1 **Status:**

MirrorB wrote:

"Hey darlings! I have been waiting for such a long time for Luffy Dono to introduce this feature to Anivide! Long story short I was once a little young punk like you and back in the day I would Roleplay on YouTube channels! But then the big bad YouTube design department decided to create a 'supposedly' better profile... Oh no, no, no! What a no, no!"

He danced lightly.

"So with the new feature I thought I would give you all some nostalgia! An anivide profile design based off the old youtube channel design darlins!"

Blue:

Red:

Yellow:

Purple:

Green:

Orange:

"I ask you all not to remove the attribution on the template, but feel free to customize to your hearts content darlins! Oh and also I recomend that your avatar should be 300x500 for perfect fitting in this template!"

Very cool, I remember youtube used to be set up like this ^^
- oops this is pandi but I tried it out on this profile and it is really good.

CelesteTanaka · **Posted:** 12 May 2013, 20:49

MirrorB wrote:

"Hey darlings! I have been waiting for such a long time for Luffy Dono to introduce this feature to Anivide! Long story short I was once a little young punk like you and back in the day I would Roleplay on YouTube channels! But then the big bad YouTube design department decided to create a 'supposedly' better profile... Oh no, no, no! What a no, no!"

He danced lightly.

"So with the new feature I thought I would give you all some nostalgia! An anivide profile design based off the old youtube channel design darlins!"

Blue:

Red:

Yellow:

Purple:

Green:

Orange:

"I ask you all not to remove the attribution on the template, but feel free to customize to your hearts content darlins! Oh and also I recomend that your avatar should be 300x500 for perfect fitting in this template!"

Thank you so much for this information!

RenegadeSwordsmanX · **Posted:** 13 May 2013, 12:30

That's so cool.

LostInTranslation · **Posted:** 14 May 2013, 07:07

Can I ask (@Luffy), in the sample template 2, how do you mak ethe video play the one you chose?
In the followng line, I tried replacing each URL with the URL of the video I wanted, but that did not work.

Code:

<object width="620" height="315"><param name="movie" value="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1" type="application/x-shockwave-flash" width="620" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>

Could it be that I have to use the embed code proved by YouTube? Because that doesn't seem quite right..

Sorry to be a nuicance if it is more obvious than I make it out to be..

TaoKittyKitty · **Posted:** 14 May 2013, 07:13

Just wondering,how does one get their own cursor for their page? .3.

Crazeye · **Posted:** 14 May 2013, 07:20

TaoKittyKitty wrote:

Just wondering,how does one get their own cursor for their page? .3.

There you go:

Subject: HTML & CSS for Profile

Pandicream wrote:

ntina96 wrote:

could u tell me where could i find a cursor code please?

Here ;D
^ Click

Taichou · **Joined:** 13 Jan 2012, 15:45 **Posts:** 74 **Status:**

LostInTranslation wrote:

Can I ask (@Luffy), in the sample template 2, how do you mak ethe video play the one you chose?
In the followng line, I tried replacing each URL with the URL of the video I wanted, but that did not work.

Code:

<object width="620" height="315"><param name="movie" value="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KL5JooA4UIw?autoplay=1" type="application/x-shockwave-flash" width="620" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>

Could it be that I have to use the embed code proved by YouTube? Because that doesn't seem quite right..

Sorry to be a nuicance if it is more obvious than I make it out to be..

Make sure the youtube url doesn't go past the "?" in the embedded code. Another option is to just copy the embedded code from youtube. Then on the youtube link that's in the code, add "&autoplay=1" which in the code would be next to, "&rel=0"

harusame · **Posted:** 14 May 2013, 13:04

LostInTranslation wrote:

Can I ask (@Luffy), in the sample template 2, how do you mak ethe video play the one you chose?
In the followng line, I tried replacing each URL with the URL of the video I wanted, but that did not work.

Quote:

Could it be that I have to use the embed code proved by YouTube? Because that doesn't seem quite right..

Sorry to be a nuicance if it is more obvious than I make it out to be..

For this one, you don't use the youtube embed code, instead you use the url. The part that I highlighted is the one that you replace for the video that you want to use.

For example, let's say I want to use this youtube url: http://www.youtube.com/watch?v=9iPQP7aDe_Y. I copy the "9iPQP7aDe_Y" part of the url, and replace the highlighted area. You need to keep the "http://www.youtube.com/v/" portion for it to work.


Who is online
Users browsing this forum: No registered users and 2 guests

Share your HTML & CSS layout

Who is online