Share your HTML & CSS layout

Show your personal arts, videos or anything that you've created in this forum.

Moderators: RukiaKuchiki, tsundere

PS4Pro
Posts: 8
Joined: 05 Jul 2012, 16:47

Re: Make an image on the comment box

Post by PS4Pro » 18 Jul 2016, 13:20

I need help to place an image on the comment box on my page.

User avatar
Lavina
Anispace Apprentice
Anispace Apprentice
Posts: 221
Joined: 06 Nov 2015, 20:55

Re: Share your HTML & CSS layout

Post by Lavina » 18 Jul 2016, 13:36

SonicTheHedgehog3 wrote:I need help to place an image on the comment box on my page.
I had already responded to this same question on another thread.
viewtopic.php?f=2&t=72&start=680#p2119369
Image
[2016-11-11 3:24:07 PM] —: niggie is the cutest
[2016-11-11 3:24:19 PM] Young: I love my lil niggie x3

User avatar
SoneroUzumaki
Anispace Apprentice
Anispace Apprentice
Posts: 217
Joined: 13 Jun 2014, 18:20

Re: Share your HTML & CSS layout

Post by SoneroUzumaki » 01 Aug 2016, 20:23

So I updated this theme from my 'BMTH' Account.
please do not remove the credit or repost.

the Avi Image size should be at least 500px in height.
the scrollbar is only for the about me or comments.
the links you can edit yourself.
music? youtube or a music player.


PREVIEW:
Image
CODE:
<style type="text/css">

::-webkit-scrollbar {width: 9px; height: 3px; background: #faf8f8;}
::-webkit-scrollbar-thumb {background-color:#ba8786; border: 1px solid #333333;}

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
font-size: 10px;
font-weight: bold;
color: #707070;
}

textarea {
color: #ccc;
font-size:10px;
border:1px solid #eee;
font-family:ms ui gothic;
font-size: 11px;
background:#fff;
}

.button {
background:#fff;
border:1px solid #eee;
padding: 3px 6px;
color: #ccc;
font-size: 10px;
text-transform:uppercase;
font-family:ms ui gothic;
text-decoration: none;
text-align: center;
-webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;
opacity:1;
}

.button:hover {
cursor: url(http://66.media.tumblr.com/8d531d6c9021 ... r4ugnn.png), auto;
text-decoration:line-through;
}

a {
text-transform:uppercase;
font-size:9px;
width:auto;
padding:0px;
font-family:ms ui gothic;
color:#ccc;
position:relative;
display:inline-block;
}

a:hover {
cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), auto;
text-decoration:none;
color:#ccc;
text-decoration:line-through;
}


body {
cursor: url(http://66.media.tumblr.com/8d531d6c9021 ... r4ugnn.png), auto;
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 9px;
word-wrap: break-word;
color: #cccccc;
background-color: #ffffff;

background-attachment: fixed;
background-repeat: no-repeat;
}


table.gridtable {
margin-top:30px;
font-family: 'Montserrat', sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #eeeeee;
border: 1px dashed #eeeeee;
border-collapse: collapse;
}
table.gridtable th {
width: 180px;
height: 110px;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #eeeeee;
border: 1px dashed #eeeeee;
background-color: #fff;
}
table.gridtable td {
width: 180px;
height: 110px;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #eeeeee;
background-color: #ffffff;
}

#links{
position:fixed;
top:0;
left:0;
background:#ffffff;
border: 1px solid #eeeeee;
width:100%;
text-align:center;
z-index:9;
line-height:40px;
}

#links a{
font:9px 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:3px;
padding:2px;
margin:-1px;
line-height:40px;
height:37px;
width:90px;
display:inline-block;
color:#ba8786;
}

#links a:last-child{
margin-right:-1px;
}
#links a:first-child{
margin-left:-1px;
}

#links a:hover{
color:#333333;
}

</style>
<!-- Table goes in the document BODY -->
<div id="links">
<a href="/">home</a>
<a href="/">link 1</a>
<a href="/">link 2</a>
<a href="/">link 3</a>
<a href="/user/SoneroUzumaki">theme</a>
</div>

<table class="gridtable">
<tr>
<td><a href="/"><img src="500PX URL IMAGE HERE" align="center" /></a></td><td><center><object width="300" height="215"><param name="movie" value="http://www.youtube.com/v/YT7C4ax0xGg?au ... ram><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YT7C4ax0xGg?autoplay=1" type="application/x-shockwave-flash" width="300" height="215" allowscriptaccess="always" allowfullscreen="true"></embed></object></center><br><div style="overflow:auto; width: 300px; height:250px; border: 1px dashed #eeeeee; background-color: #ffffff; text-align: center;">[ABOUT_ME][COMMENT_BOX]</div></td>
</tr>
</table>

<style type="text/css">
#box_top,#box_ticker,#box_top_ads,#nav{ display: none;}
.Buttons{display: none;}

User avatar
Jagiya
Anispace Beginner
Posts: 59
Joined: 24 Jun 2014, 12:49

Re: Share your HTML & CSS layout

Post by Jagiya » 09 Mar 2017, 08:53

SINGLE COLUMN LAYOUT - JAGIYA
I shared these codes with a few people, though I know they're going to spread so why not post them here?

RULES
- You are not allowed to take bit and pieces of the code
- You are allowed to edit it but keeping the credit is very appreciated. When edited, I would like to see what it looks like as well.
- Minor edits are accepted but if you change it completely, make it look a whole different and share it, that is a no no. You will be reported.
- Do not take off the credit whatsoever. Placing it somewhere else is fine but be sure it's readable.

SINGLE COLUMN LAYOUT VER. 1
Image

Code: Select all

[DISABLE_NAV_MENU]
<style>
#box_left_ads,#box_top_ads,#box_ticker {display: none;}

.button {
background: /add colour hex/;
color: /add colour hex/;
border:1px solid /add colour hex/;
border-radius:2px;}

.button:hover {
background: /add colour hex/;
color: /add colour hex/;
border:1px solid /add colour hex/;
border-radius:2px;
-webkit-transition: background-color 0.2s ease-out;
-moz-transition: background-color 0.2s ease-out;
-o-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;
}

#melli{position:fixed; float:right; top:3px; right:0px; width:150px;}

#buttons td a font b {
color: #aaa;
font-size: 14px;
font-family: 'Baskerville Old Face';}
#buttons img {display:none;}

.Banner{Float:center; Width: 575px; Height: auto; Margin: 3px; overflow:hidden; text-align: left;margin-top:10px;padding:5px;font-family:Adobe Ming Std L;background-color:;border:1px solid /add colour hex/;}
.Banner img{max-width:100%;}

.Comments {Float:center; Width: 575px; Height: auto; Margin: 3px; overflow:hidden; text-align:left;margin-top:10px;padding:5px;font-family:Adobe Ming Std L;background-color:/add colour hex - optional/;border:1px solid /add colour hex/;}

</style>
</head>
<body>

<div style=margin-top:450px;>
<div class="Comments">
<Font Size=4>
<font face="Arial">
<span style="color: /add colour hex/"><u>➥ STATS</u></span>
</font>
<br>
<Font Size=2>
<font face="Arial">[MY_STATS]</font>
<br>
<Font Size=4>
<font face="Arial">
<span style="color: /add colour hex/"><u>➥ ABOUT ME</u></span>
</font>
<br>
<Font Size=2>
<font face="Arial">[ABOUT_ME]</font>
<br>
<Font Size=4>
<font face="Arial">
<span style="color: /add colour hex/"><u>➥ COMMENTS</u></span>
</font>
<br>
<Font Size=2>
<font face="Arial">[COMMENT_BOX]</font>

<i>Code Designed By: Melli</i></div>

<div style=display:none>[BUTTONS]</div>

[MUSIC]
SINGLE COLUMN LAYOUT VER. 2
Image

Code: Select all

[DISABLE_NAV_MENU]
<style>
#box_left_ads,#box_top_ads, #box_top, #box_ticker {display: none;}

.button {
background: /add colour hex/;
color: /add colour hex/;
border:1px solid  /add colour hex/;
border-radius:2px;}

.button:hover {
background: /add colour hex/;
color: /add colour hex/;
border:1px solid  /add colour hex/;
border-radius:2px;
-webkit-transition: background-color 0.2s ease-out;
-moz-transition: background-color 0.2s ease-out;
-o-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;
}

#melli{position:fixed; float:right; top:3px; right:0px; width:150px;}

#buttons td a font b {
color: #aaa;
font-size: 14px;
font-family: 'Baskerville Old Face';}
#buttons img {display:none;}

.Banner{Float:center; Width: 575px; Height: auto; Margin: 3px; overflow:hidden; text-align: left;margin-top:10px;padding:5px;font-family:Adobe Ming Std L;background-color: /add colour hex/;border:1px solid  /add colour hex/;}
.Banner img{max-width:100%;}

.Comments {Float:center; Width: 575px; Height: auto; Margin: 3px; overflow:hidden; text-align:left;margin-top:10px;padding:5px;font-family:Adobe Ming Std L;background-color: /add colour hex/;border:1px solid  /add colour hex/;}

</style>
</head>
<body>

<div class=Banner><img src="IMAGE URL HERE /MUST BE 515x213 px of SIZE/" style="opacity:"></div>

<div class="Comments">
<Font Size=4>
<font face="Arial">
<span style="color: /add colour hex/"><u>➥ STATS</u></span>
</font>
<br>
<Font Size=2>
<font face="Arial">[MY_STATS]</font>
<br>
<Font Size=4>
<font face="Arial">
<span style="color: /add colour hex/"><u>➥ ABOUT ME</u></span>
</font>
<br>
<Font Size=2>
<font face="Arial">[ABOUT_ME]</font>
<br>
<Font Size=4>
<font face="Arial">
<span style="color: /add colour hex/"><u>➥ COMMENTS</u></span>
</font>
<br>
<Font Size=2>
<font face="Arial">[COMMENT_BOX]</font>
<i>Code designed by: Melli</i></div>

<div style=display:none>[BUTTONS]</div>

[MUSIC][code][/spoiler][/Align]
{ }

Image

- Your everything shakes up my heart -

Elite Editor

User avatar
totosaki
Anispace Beginner
Posts: 24
Joined: 18 Jan 2009, 09:32

Re: Share your HTML & CSS layout

Post by totosaki » 14 Mar 2017, 11:47

how can i change my comment box to a display picture and make the text colorful?!

User avatar
Royalene
Anispace Pro
Anispace Pro
Posts: 1039
Joined: 22 May 2013, 14:52

Re: Share your HTML & CSS layout

Post by Royalene » 14 Mar 2017, 12:02

totosaki wrote:
14 Mar 2017, 11:47
how can i change my comment box to a display picture and make the text colorful?!
I don't think that textarea code works at this point. It might be due to some glitches that have to be fixed. Unless someone knows a better way to input it

"The more time passes, the more unfocused my eyes get
Suddenly, your voice is in my ears
I’m getting lost because I see someone who looks like you

"

User avatar
totosaki
Anispace Beginner
Posts: 24
Joined: 18 Jan 2009, 09:32

Re: Share your HTML & CSS layout

Post by totosaki » 14 Mar 2017, 12:16

Royalene wrote:
14 Mar 2017, 12:02
totosaki wrote:
14 Mar 2017, 11:47
how can i change my comment box to a display picture and make the text colorful?!
I don't think that textarea code works at this point. It might be due to some glitches that have to be fixed. Unless someone knows a better way to input it
figured ... ugh i hate the glitches... gotta start over and what not with what i know... and it sucks.... is there any other link i can go to make my profile look neat?! i just want avatar, about me and comment with video. nothing to crazy ... basic

User avatar
Royalene
Anispace Pro
Anispace Pro
Posts: 1039
Joined: 22 May 2013, 14:52

Re: Share your HTML & CSS layout

Post by Royalene » 14 Mar 2017, 12:26

totosaki wrote:
14 Mar 2017, 12:16
Royalene wrote:
14 Mar 2017, 12:02
totosaki wrote:
14 Mar 2017, 11:47
how can i change my comment box to a display picture and make the text colorful?!
I don't think that textarea code works at this point. It might be due to some glitches that have to be fixed. Unless someone knows a better way to input it
figured ... ugh i hate the glitches... gotta start over and what not with what i know... and it sucks.... is there any other link i can go to make my profile look neat?! i just want avatar, about me and comment with video. nothing to crazy ... basic
There's a plenty in this thread but most of them are distorted because the same reason. I had to change a bunch of my codes to make them look somewhat the same. I doubt that YouTube works either. But you can always play around with profile music thing. I'll be working on a code on Saturday so I'll try to create something that fits what you want

"The more time passes, the more unfocused my eyes get
Suddenly, your voice is in my ears
I’m getting lost because I see someone who looks like you

"

User avatar
totosaki
Anispace Beginner
Posts: 24
Joined: 18 Jan 2009, 09:32

Re: Share your HTML & CSS layout

Post by totosaki » 14 Mar 2017, 12:29

Royalene wrote:
14 Mar 2017, 12:26
totosaki wrote:
14 Mar 2017, 12:16
Royalene wrote:
14 Mar 2017, 12:02


I don't think that textarea code works at this point. It might be due to some glitches that have to be fixed. Unless someone knows a better way to input it
figured ... ugh i hate the glitches... gotta start over and what not with what i know... and it sucks.... is there any other link i can go to make my profile look neat?! i just want avatar, about me and comment with video. nothing to crazy ... basic
There's a plenty in this thread but most of them are distorted because the same reason. I had to change a bunch of my codes to make them look somewhat the same. I doubt that YouTube works either. But you can always play around with profile music thing. I'll be working on a code on Saturday so I'll try to create something that fits what you want
thanks that would be great. the color picker is down too and im over here resorting to google. youtube and any links that can help. =_=
who ever is in charge needs to work on this account... big time, i am a long time loyal since 09...

User avatar
Firefly
Posts: 2
Joined: 07 Apr 2013, 16:49

Re: Share your HTML & CSS layout

Post by Firefly » 14 Mar 2017, 17:49

I wonder if luffy will ever fix the codes. My laziness can't be bothered to make a new one. Or at least give an update.

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests