Hello Guest, please Login or Register
  



Forum Search: Advanced search





Post new topic Reply to topic  [ 16 posts ]  Go to page 1, 2  Next
Author Message

Site Admin
Site Admin
 Post subject: Share your HTML & CSS layout
PostPosted: 12 May 2013, 01:10 
User avatar

Joined: 13 Jun 2008, 09:46
Posts: 1423
Location: The sea ♥
Status: Offline
Share your layouts here so other members could use it :D


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>

_________________
~Monkey D. Luffy was here~


Top
 Profile  
 

Newbie
Newbie
 Post subject: Re: Share your HTML & CSS layout
PostPosted: 12 May 2013, 11:16 
User avatar

Joined: 03 Mar 2013, 09:04
Posts: 10
Status: Offline
"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:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Red:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


Yellow:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Purple:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Green:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


Orange:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


"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!"

_________________
Image


Top
 Profile  
 

Newbie
Newbie
 Post subject: Re: Share your HTML & CSS layout
PostPosted: 12 May 2013, 11:38 
User avatar

Joined: 27 Jan 2013, 12:32
Posts: 1
Status: Offline
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:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Red:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


Yellow:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Purple:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Green:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


Orange:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


"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.


Top
 Profile  
 

Newbie
Newbie
 Post subject: Re: Share your HTML & CSS layout
PostPosted: 12 May 2013, 20:49 
User avatar

Joined: 03 Mar 2013, 14:05
Posts: 37
Location: London
Status: Offline
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:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #0094FF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Red:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FF0000; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


Yellow:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FFD800; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Purple:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #7F52BF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>



Green:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #7FBFBF; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


Orange:
Code:
<html>
<head>
<style>

.Buttons {Width: 936px; Height: 30px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Video {Float: left;Width: 610px; Height: 520px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Avatar {Float: right; Width: 300px; Height: 520px; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Info {Padding-Left: 2px; Float: left; Width: 320px; Height: auto; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden;  text-align: left;}

.Comments {Float: right; Width: 590px; Height: auto; Margin: 3px; Background: #FFAB3F; Border: #1B1B1B 3PX Solid; overflow:hidden; text-align: left;}

</style>
</head>
<body>

<div style="float:left;width:936px; Marin:3px;">

<div class=Buttons>[BUTTONS]</div>

<div class="Video">
<---THIS IS WHERE YOUTUBE HTML GOES, DO NOT USE IFRAMES--->
<br>
<div style="Margin: 3px;">
<Font Size=3>
<---THIS IS WHERE YOUR UPDATE HEADING GOES--->
</font>
<br> <br>
<font size = 2>
<---THIS IS WHERE YOUR UPDATE GOES--->
</font>
</div>
</div>

<div class="Avatar">[AVATAR]</div>

<div class="Info">[MY_STATS] <br> [ABOUT_ME] <br> <br> <font size=1>Profile designed by MirrorB of Anivide, use and modification of this template's code is allowed however you may not remove this attribution.</font></div>

<div class="Comments">[COMMENT_BOX]</div>


"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!

_________________
Image


Top
 Profile  
 

Newbie
Newbie
 Post subject: Re: Share your HTML & CSS layout
PostPosted: 13 May 2013, 12:30 
User avatar

Joined: 11 Apr 2013, 10:16
Posts: 28
Location: Limbo City
Status: Offline
That's so cool.

_________________
Image


Top
 Profile  
 

Newbie
Newbie
 Post subject: Re: Share your HTML & CSS layout
PostPosted: 14 May 2013, 07:07 
User avatar

Joined: 11 Jul 2012, 12:58
Posts: 13
Location: Behind this screen.
Status: Offline
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..

_________________
~"If you don’t believe in yourself, then very few will believe in you. You can be whoever you want to be.”~
~Joshua Franceschi~


Top
 Profile  
 

Newbie
Newbie
 Post subject: Re: Share your HTML & CSS layout
PostPosted: 14 May 2013, 07:13 
User avatar

Joined: 16 Sep 2012, 13:48
Posts: 35
Location: Your Refrigerator
Status: Offline
Just wondering,how does one get their own cursor for their page? .3.

_________________
Image

Image


Top
 Profile  
 

Forum moderators
Forum moderators
 Post subject: Re: Share your HTML & CSS layout
PostPosted: 14 May 2013, 07:20 
User avatar

Joined: 18 May 2011, 01:25
Posts: 4732
Location: Unidentified Exit.
Status: Offline
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

_________________
Image
"When you don't fit in anywhere in the world, what should you do?
Carve yourself to fit the world...? ...Or carve the world to fit
you?!"


C.C.C (Crazeye's Creative Corner)
◕‿◕

My enter key & spell-checker are morons!


Top
 Profile  
 

Newbie
Newbie
 Post subject: Re: Share your HTML & CSS layout
PostPosted: 14 May 2013, 12:49 
User avatar

Joined: 13 Jan 2012, 15:45
Posts: 74
Status: Offline
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, "&amp;rel=0"

_________________
Image


Top
 Profile  
 

Forum moderators
Forum moderators
 Post subject: Re: Share your HTML & CSS layout
PostPosted: 14 May 2013, 13:04 
User avatar

Joined: 31 Aug 2009, 18:47
Posts: 3020
Location: B.C., Canada
Status: Online
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:
<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..

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.

_________________
Haru~


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 16 posts ]  Go to page 1, 2  Next


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  
Powered By phpBB © 2008

© 2008 by Anivide.com | Privacy Policy | Disclaimer | Contact Us

online counters