HTML/CSS/JS Help, Making Pages, Free Template

July 5, 2014 - 9:26am — AlisonRobin

HTML/CSS/JS Help
Answering Questions, Making Pages

ABOUT

I like doing coding and so far I've been selfish and used my time to only make pages for me. So to rid myself of some guilt I'd like to help others for free any way I can. Gotta fight artificial scarcity per my personal philosophies, too.

I'm no expert in these things, but I am pretty getting pretty decent.

I want everyone to have access to the look they want for their page. Some people like it plain and that is awesome, but if you don't know what to do and want something fancier, I can help.

I HAVE A QUESTION / HOW DO YOU DO X?

Hopefully I have an answer. Try me. If I don't know I apologize in advance and will try to do some research and figure out the answer. If I do know, I'll try my best to explain and toss you some links maybe. W3Schools is a very good site to help you learn HTML/CSS/JS.

If you have problem code that you want me to look through, drop it off at pastebin and send me a link to it. I will play with it and try to get it to behave. If you don't have a pastebin link I'll just comb your source code.

WILL YOU MAKE ME A THING?

I would love to. It's fun for me. There's also a template in the completed projects section you can use if you like.

What I will need from you:

Tell me what you want as clearly as possible. It's best if you can draw me a picture of the page layout you want. It is just fine if you use MS-Paint and draw some boxes. Sometimes it is helpful if you can link me to non-TEF websites and tell me things you like about them (ex "I like the text arrangement") but I don't want to take more than minor inspiration from any one source and I don't like to do it from other pages on this site. The website colourlovers is helpful if you want to register and make yourself a color palette for me to work from.
Host any files you would like me to use and link me to them so that I can work with them when I am designing the page. If you don't have images yet, you can tell me the exact dimensions that you want them to be and I can doodle little mockups for them that will hold their place until you replace them. If you don't care about dimensions, I will make the decision. Dropbox and Photobucket are both good sites for hosting files.

What I can do in return:

Do my best to make a page that looks like what you had in mind. I may not be able to do everything you wanted if you had something complicated in mind, but we can work something out.
I can give you your code via pastebin in one chunk or with heavy, organized comments. I recommend the latter because if you are new to coding you will be able to see which part affects what, and ultimately I think that will make it easier for you to learn in the future. The more you learn, the less you will need me. I'll always leave credits commented in the code where they are appropriate.

But please do note:

I work at my own pace
I'm not gonna help you if you are mean
If you vanish from the site and I don't see you for a while I'll put your project on hold and move on to someone else, but if you come back I'll get back to it eventually
I won't make a design that uses tiny text I cannot read. I bad terrible eyesight and a vendetta against small text and low contrast. I make sure all my text complies with the WGAC 2.0 contrast ratio formula. This is the only part of the page code that I really ask that you do not modify yourself because it really hurts that people still use small text in their posts and blogs. Contrary to popular belief it doesn't make pages look better, just less legible.
I won't make a design that a colorblind person cannot read. I check against several varieties of colorblindness using a helpful website.
I will not make a page that cannot be viewed on common monitor sizes, because some people can't afford big monitors.

PROJECTS QUEUED UP

These will happen in an unorderly fashion of my choosing, possibly working on some simultaneously.

Bela for NikaGika (But I need some files first before I can start)

Arachneae for Sentinal

Callielujah's twig-antlered fawn when I know more about her

After that, open open open

Here's the test blog. When I work on these I host CSS/JS externally so that makes it MUCH easier for me to switch between projects without worrying about them affecting each other. Don't worry if you see one vanish and another one come up, I have stuff saved and just like to bounce between things.

PROJECTS FINISHED

Click the thumbnail to see the page as my 1920x1080 desktop sees them. It's a common monitor size for TEFc users, but it's important to remember in page design that some people have teensy tiny screens so I try to limit the size of the designs.

	Vaq for Skittlezrawr. I ended up doing all the pictures and everything because he wheedled me into it and we live together. So I let him get away with it. He had almost no involvement outside of the character design, haha.
	Jezara for Chromai <3. She did the great background pattern herself on Colourlovers and also came up with the layout, so it wasn't too much work on my part.
	Template, free for anyone to use. Click the thumbnail to see what it looks like, and there's also some info written on it about the template too. Here is the code! There is also a version that does not have the javascript tabs here if you prefer. Have fun with it!
	For 7x. They provided the ideas but I changed a few things here and there about the spacing. The background image is fixed, so stays put when scrolling but in the screen capture that doesn't show. Background image is from NASA and is in the public domain, edited by me.

Community Events

alisonrobin's blog
Login to post comments

August 22, 2014 - 2:42pm — 7x

I like it so much

I like it so much <3

—

Art by Arres

August 22, 2014 - 3:39pm — Seed

I once did an event called

I once did an event called the Forest Game Day, where a bunch of people got together to do organized playground-style games: you know, Red-Light, Green Light, Devout Pelt Tag, Simon Says, that sort of thing. I've always said I should do that again.

And your template would work very well for it: it has a section for explaining the event, a section for talking about time, place, people, a section for talking, I dunno, terms, and most important, a separate section with switchable tabs for talking about the rules for different games.

—

Updates (important links)

August 22, 2014 - 10:07pm — AlisonRobin

I'm glad you like it 7x. If

I'm glad you like it 7x.

If you want it as is I can get you the code mondayish. I'm on my phone presently.

And Seed I adore that idea, it sounds mega fun.

—

August 23, 2014 - 4:51pm — 7x

Could you try to give some

Could you try to give some background there? (background image) :3 I like night...

—

Art by Arres

August 23, 2014 - 5:49pm — AlisonRobin

I could make you one if you

I could make you one if you can't find one online. Did you want a huge background or a smaller one that repeats? I think NASA has released a lot of photos to public domain that would be good night sky images.

—

August 24, 2014 - 8:51pm — Private-Parts

Tracking before I lose this

Tracking before I lose this again.
That free template is pretty. I may use it<3

August 24, 2014 - 10:20pm — 7x

Fullscreen! I do not want to

Fullscreen! I do not want to repeat the figure. If you understand me c: I have bad translator!

—

Art by Arres

August 24, 2014 - 11:55pm — AlisonRobin

It's ok, I understand you. I

It's ok, I understand you.

I can make a background like that for you.

—

August 25, 2014 - 12:00am — 7x

Thank you! I can not wait c:

—

Art by Arres

August 26, 2014 - 12:21am — sentinal

Ok, my sketch is complete and

Ok, my sketch is complete and I have a key for the color pallette as well. Take a look and tell me what you think and if anything is not doable or you need to change anything just let me know!

—

~He/They~

August 26, 2014 - 2:15am — AlisonRobin

7x, I added a background and

7x, I added a background and changed a few little things. How is it?

Sentinel Awesome! Unfortunately the links you tossed me don't work, you'll have to upload the pictures to the internet first before you can link them to me. Sites like Imgur, Photobucket, or Dropbox are the ones I'd recommend. I'm almost done with 7x's page and then I can start on the one for you.

—

August 26, 2014 - 11:09am — 7x

Yes its perfect I like it. No

Yes its perfect I like it. No wait I love it! This is awesome work. Thank you. I cant wait. *scream*

—

Art by Arres

August 26, 2014 - 9:49pm — AlisonRobin

Yay! I'm glad you're happy

Yay! I'm glad you're happy with it

Here is the code. Make sure you put it under the cut and change the input format to BBCode if you haven't done that already.

I made it so the edit link will work on Korra's biography already.

—

August 27, 2014 - 11:03am — 7x

It's nice I like it but when

It's nice I like it but when I put bio to CSS tes And I gave edit. Then it jumps to Korra bio and I do not know what to do.

—

Art by Arres

August 27, 2014 - 11:40pm — AlisonRobin

http://endlessforest.org/comm

http://endlessforest.org/community/node/98028/edit is the link to your CSS Test 3 blog.

If you change the title of your blog to only a period like "." then your blog will have a URL that is numbers forever, even after you change the name (like my blog here). Then you add "/edit" after the numbers and you can edit it.

—

August 28, 2014 - 1:31pm — 7x

Thank you Alison here is the

Thank you Alison here is the link how it loosk like now http://endlessforest.org/community/quotweak-breathingquot-korra-new-css-alison-robin But the second song dont playing :/. An thank you so much <3 I love this new CSS <3.

—

Art by Arres

August 28, 2014 - 1:40pm — hoactzin

Hi Alison~ Just wondering

Hi Alison~
Just wondering what I would have to remove from the template code to have just one more box on the bottom, minus the javascript so it's just a bunch of scrollboxes.

I hope I'm being clear enough, basically I just want one box, no tabs, so like a regular div.

Thanks in advance~

—

August 28, 2014 - 1:47pm — Farelia

Track eue

August 28, 2014 - 11:05pm — AlisonRobin

7x, I figured out the second

7x, I figured out the second song. It was a tiny typo. You can go and replace the URL of the second song from http://k007.kiwi6.com/hotlink/houjre8mvr/Hungry_Ghosts.mp3 and change it to mp3=http://k007.kiwi6.com/hotlink/houjre8mvr/Hungry_Ghosts.mp3. It needs to have that mp3= at the beginning of the URL. I might have accidentally removed it when I gave you the code.

Hoactzin, I cut out the javascript entirely and made a new paste for it, so you should be good to go just copying this. Hope I understood you right.

—

August 29, 2014 - 10:13am — 7x

Thank you so much Alison its

Thank you so much Alison its working thank you :3

—

Art by Arres

September 20, 2014 - 8:32pm — Laiia

Hello ! I'm sorry to bother

Hello ! I'm sorry to bother you again... I have an issue that is driving me crazy..
It's on this CSS test. The tabs work, but when I click on "Ties", then I click back on another tab, the Tie's content appears in the other tabs. It's not clear at all, that's why I gave a link.. The problem is with the Ties tab, because it doesn't appear with any of the other ones.
Here is the code (from the 'Ties' tab until the links part)

<span id="six"class="tab" style="display:none;"><center><div style="text-shadow: 0 0 10px #FFFFFF;">[=#FFFFFF][=29*]Ties.[/][/]</div>

None.

</center></span></div></div></div>


<center>[IMG*]http://nsa33.casimages.com/img/2014/09/20/140920022411998978.png[/IMG]</center></div>


<a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('one').style.display='inline';"><div style="position:absolute;top:200px;left:70px;"><div class="STATUS"><img src="http://nsa33.casimages.com/img/2014/09/20/140920040902631269.png"><span></span></div></div></a>  <a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('two').style.display='inline';"><div style="position:absolute;top:370px;left:50px;"><div class="ART"><img src="http://nsa33.casimages.com/img/2014/09/20/14092004090196464.png"><span></span></div></div></a>  <a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('three').style.display='inline';"><div style="position:absolute;top:570px;left:90px;"><div class="INFORMATIONS"><img src="http://nsa34.casimages.com/img/2014/09/20/14092004090294652.png"><span></span></div></div></a>  <a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('four').style.display='inline';"><div style="position:absolute;top:701px;left:510px;"><div class="MENTAL"><img src="http://nsa34.casimages.com/img/2014/09/20/140920040902325146.png"><span></span></div></div></a>  <a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('five').style.display='inline';"><div style="position:absolute;top:555px;left:680px;"><div class="PHYSIC"><img src="http://nsa33.casimages.com/img/2014/09/20/140920040902247360.png"><span></span></div></div></a>  <a href="javascript:;" onmousedown="for(var i=0;i<5;i++){document.getElementsByClassName('tab')[i].style.display='none';};document.getElementById('six').style.display='inline';"><div style="position:absolute;top:755px;left:370px;"><div class="TIES"><img src="http://nsa34.casimages.com/img/2014/09/20/140920040903582184.png"><span></span></div></div></a>

There is no <*div> missing or added, I checked it.. I'm 90% sure there isn't. 10% left because I'm bad at coding and awkward. Sorry again... I've been searching the solution for about three hours now, and I can't find it. If you don't want to waste your time on it, then nevermind, and thanks anyway (:

—

Avatar & signature by Shimmyshimmy. ♥

September 21, 2014 - 2:02am — AlisonRobin

Don't apologize! You're

Don't apologize!

You're doing great and working with new stuff. That page is coming along nicely, I like the idea of wrapping the words around the edge.

In the javascript, wherever you see for(var i=0;i<5;i++), you'll have to change it to for(var i=0;i<6;i++). The first part of the tabs code you have says, "find the first five elements with the tabs class and hide them," but since you are using six tabs and "Ties" is the sixth tab, it doesn't get hidden. So when you have for(var i=0;i<6;i++), it should extend out to "Ties" and hide that as well.

If you wanna learn more (and you don't need to read or understand this if you don't want to), that part of the code is called a for loop. You can use them to make a piece of code repeat a bunch of time (to loop around) and affect different elements, which is what I did here.

—

September 21, 2014 - 4:41am — Freyja

Hiiii! I've been trying to

Hiiii! I've been trying to fix up one of my bios and i'm pretty happy to have gotten rid of most of my problems myself (I find this stuff really hard) but there's two things that I can't get rid of. The current page i'm talking about is here.

#1: I can't get "Add new comment" and the reads number and whatnot ontop of the comments to center despite having a code that is supposed to center them: .node .links, .comment .links{text-align:center}

#2 The biiig problem; the first two tabs in that first box flow into each other for some reason. When the page first pops up you can scroll straight into the past entries even though they should (and used to be) seperate from the newest update.....tldr anything after the "Current condition" paragraph shouldn't be visible immediately.

I'm not sure if you want me to post some code or whatnot sooo thought I'd ask

—

September 21, 2014 - 6:03am — AlisonRobin

You don't have to post the

You don't have to post the code, I just took a peek at your page's source code.

The reason that .node .links, .comment .links{text-align:center} won't center the "add new comment" is because the .links that you want to center is not inside of .node or

.comment[/comment]. In your CSS, find the part that says, "[code].links{background-color:transparent; position:relative;}

and add text-align:center; in there.

As for the tabs, I'm not 100% certain but I have a good guess. I've never been good with the CSS tabs. I did notice a [/center] that doesn't appear to belong by the "2014" info. But I think what needs to happen first and foremost is in here (taken from your page's source):

<div style="width:450px;height:400px;padding:35px;overflow:auto; background:#6B8E81; color:#0D4133;"><br />
<div style="text-align:center"> <br />
Latest Update: 9th of September<br />
<br />
IIIIII'M graduating in exactly a week. So. Yeah. That's happening.<br />
I have a couple of weeks until my HSC exams so that's obviously taking priority<br />
However once I get to late October/early November.......Frey is a free woman! Until she gets a job. And goes on schoolies.<br />
<br />
So Casti should be popping in for the rut occasionally. Not much of an update aside from that. Hella excited though. <br />
<br />
Coding is thoroughly broken on this thing now jfc.<br />
<br />
---<br />
<span style="font-style:italic">Current Condition</span> :: Getting ready for his 2nd rut, will actually be taking it seriously this time.....nah. Gonna dance the ladies away.<br />
<br />
<br />
</div><br />

There needs to be an extra </div> next to the one in that last line, because there are two divs that are open, and you only closed one. Try making that change, and we'll see if the problem goes away. All the br tags won't show up when you go to edit but I see them because I'm using my browser.

—

September 21, 2014 - 6:22am — Freyja

That fixed the centering

That fixed the centering problem....but changing the div has caused more issues xD'
Got an extra box for some reason and although the tabs are now seperate, clicking onto the 2nd one brings the whole page down and can't scroll back up
Thanks for answering

—

September 21, 2014 - 2:03pm — Laiia

Thank you for the nice

Thank you for the nice comment (: !

And thank you for the help and for the link, it will help me !

—

Avatar & signature by Shimmyshimmy. ♥

September 21, 2014 - 7:43pm — AlisonRobin

@Freyja Whoops, my bad then.

@Freyja
Whoops, my bad then. ;_; Sorry about that. You can undo that extra

.
I may need you to copy your code into pastebin so I can get at it and play with it myself, I think I can fix things from there.

@Laiia
W3 Schools is the best site, they're great for learning new things.

—

September 22, 2014 - 3:53am — Freyja

http://pastebin.com/JB9ry1uD

http://pastebin.com/JB9ry1uD
There it is! And no worries lol

—

September 22, 2014 - 5:29am — AlisonRobin

Ok, bad news and good

Ok, bad news and good news.

Bad news is I have no idea what made your CSS tabs act funny. I think it may have been a BBCode tag that was left open somewhere that threw everything off when it was converted to HTML, but I'm not certain.

Good news is I fixed the problem by replacing your CSS tabs with Javascript tabs. You'll see some Javascript in the tab links now and your different tabs are now divided with span tags that have the ids "one", "two" and "three". The only big difference will be that your page won't reload when you switch tabs, the change will just happen.

—

September 22, 2014 - 5:56am — Freyja

It's nice that they don't

It's nice that they don't have to reload! They're seperate now but I can't scroll down.....is it just my mouse or computer? Even highlighting and dragging isn't working. Idk if thats a coding thing though. And for some reason the picture on the right of the box has been pushed over a little?

Also I have no idea how javascript works but i've tried using the really tiny music players people have before....they didn't work. Will they now? I assume it's a different kind of coding but I have no idea

If not I'll just stick with those square ones.

—

September 22, 2014 - 6:30am — AlisonRobin

ahgghgh no that's my bad I

ahgghgh no that's my bad I think I know what I did wrong
I'll get this right if it's the last thing I do!
/flies away

EDIT:
/flies back
Ok, try this.
I added a div I forgot to add before so that it scrolls and fixed the padding so the images look even on the sides. I hope I didn't forget anything this time.

sorry about all that

As for the little music players, they use regular HTML to embed a .swf file without Javascript as far as I recall. I haven't used them much so don't know too much about them, but there's a lot that can go fussy with them since they need an external .mp3 file and I suspect that a lot of problems with them are cases where there's just one little hidden typo somewhere causing the fuss.

—

September 22, 2014 - 6:35am — Freyja

Oh man thanks so much! It's

Oh man thanks so much! It's perfect now

Thank youuu.
I'll bother with the music players another time I think lmao

—

September 23, 2014 - 6:18pm — AlisonRobin

ffsadff I'm glad I got that

ffsadff I'm glad I got that sorted out, just sorry that it took me so long.

I think you could probably get the music things going. Unplugged's CSS reference blog has the code you need for it, but typos happen during the time when one has to insert the link to the .mp3.

—

October 4, 2014 - 10:47pm — Chromai

Heeeeello. /slides in

Heeeeello. /slides in casually

Can you do me a favour? Please? I would like a bio for a new character I am creating. I'll make the background if you like, and I'll draw the layout plans like I did with Jezara's.

—

personal + character hub

November 10, 2014 - 10:37pm — Unplugged

Hey Alison, mind if i

Hey Alison, mind if i piggyback on this blog a bit? As far as I know this is the only "real" css help blog and I'd love to help answer a few questions as well. Or would you mind if I made a separate css question blog?

November 10, 2014 - 11:29pm — AlisonRobin

Fzzzghght Chromai I'm sorry I

Fzzzghght Chromai I'm sorry I missed your comment, I've been all over the place but my insanity is almost done. I can for sure make you a bio, got a sketch?

Unplugged--By all means, make yourself at home. There are doritos on the table and milk in the fridge, we're good to go. It is especially nice of you to volunteer because right now I've been kind of a mess.

—

November 11, 2014 - 6:31pm — Laryal

Could you please do Cheveyo's

Could you please do Cheveyo's bio for me i have tried to figure it out but can't. Here is his infro thanks.

Name • Cheveyo
Meaning • "Spirt Warrior"
Nickname • Chev
Pronounciation • CH-IY-Vah-Yow †
Pictogram •
Title • Spirt Warrior The Guardian
Gender • Male
Age • Adult
Entered the Forest • 2014-09-21
Sign • blonde monemt can not figire out how to put his sign.
Origin • The Endless Forest
Orientation •
Species • Albino deer
Size • 9ft still growing
Reference • -

Swan pelt,Red Zombie antlers,Zombie mask

He was born from the spirt's of the forest to become a spirt himself a spirt warrior to protect those who live there.

The fawn opened his eyies to a new world gazing around it seemed like he was the only one in the forest. he gathered his leggs under him and wobbling tried to stand.he felt the ground as he fell.He did not make a sound but tried again sevral times.Finaly he succeeded and stood up.His ears perked forward as he listened silently as the forest seemed to speak to him."Come my child explore this new amazing world i brought you too.Your name shall be Cheveyo meaning Spirt Warrior. You are now a spirt of the New Forest and must learn her ways my dear child go now and become who you are supose to be" the voice said to him.Cheveyo was scared for he could not see where the voice came from it was like the wind spoke.Cheveyo then with tintive stepps started off.Cheveyo found water and drank deeply then lifted his head quikly .He heard a noise far off in the distance a rumbling fallowed by more.His curiosity got the best of him as he started off to find this new noise.On still wobbly leggs he carefuly made his way to where the bellowing noises came from.He stood in aw as he came apon some creatures like himself but bigger wih what seemed like monsters growing out of their heads.Ceveyo began to get frigtened as one looked his way and he backed up bumping into anouther.He quicky turned his heart pounding as he began to run away.Chevoyo stopped after he had gone a few miles his heart pounding as he looked back to make sure no other creature fallowed."What were they and why did they start surounding me? Cheveyo thought as he trembly laid down hiding himself from who ever may be watching.Hie then drifted off into dreams as his white pelt shimmered in the moonlight.

—

Laryal

pic by EmiliaYO

November 11, 2014 - 7:20pm — AlisonRobin

Yes, I can make it. What do

Yes, I can make it.

What do you want it to look like?

—

November 12, 2014 - 4:43am — Laryal

Thank you so much Lets see

Thank you so much Lets see you could surprise me or make it look a bit spooky since he is a spirt warrior.

—

Laryal

pic by EmiliaYO

November 12, 2014 - 4:13am — sentinal

Well... I'm actually going to

Well... I'm actually going to be on now... Unfortunately I lost my sketches of the website and everything... If you are still up for doing the code I can remake it but if not that's cool... If so I wanted to ask if you would be open to doing some just real simple spiderwebs in the corners or something as I no longer have a tablet or any computer drawing software. If not totally cool I just thought I'd ask... Anywhoo, I will totally get on that if you still want to do it and I am so freakin sorry I disappeared... Yeah...

—

~He/They~

November 13, 2014 - 6:19am — AlisonRobin

It's fine, no worries. And

It's fine, no worries.

And Sentinel it is easier if you draw a picture of what you want, otherwise I'll just come up with something.

I'll get around to these--but for the time being I'm swamped with classwork and studying for tests so I'll be working slow.

—

November 16, 2014 - 3:49am — Laryal

Giving this a friendly bump

—

Laryal

pic by EmiliaYO

November 16, 2014 - 1:47pm — Tavra

Thank you very much ;0;

—

November 16, 2014 - 7:16pm — Chromai

@Alison S'okay! I've been

@Alison
S'okay! I've been rather busy, and I'm desperately trying to find a good colour scheme. I'll get a sketch done ASAP!

—

personal + character hub

December 29, 2014 - 11:46am — Dreamthief

Hello Alison, can you do CSS

Hello Alison, can you do CSS for my newest deer-character? I have an idea how the page would look (and pictures too). I've already tried to compose css page, but it was too hard for me. I think that look isn't too complicated (I like simple designs) so if you have time, I'll be glad for your help.
Thank you, Soul

December 30, 2014 - 3:09am — Sannosuke

(^_^)/ Hallow~! My name is

(^_^)/
Hallow~!
My name is Sanno ^^ I've been getting a bit more active on the forums recently and spending a tremendous amount more time in the forest and have been encouraged by a few people to make a bio page for Sanno.
I've been looking through some of the other players' pages and they are just wonderful ^^ but I honestly don't know where even to start in building one myself.
I came across this post and I was wondering if you might be willing to help me get started? I've been inspired by many of the other bios out there and have some ideas about the page.
If you're willing and able I would be so thankful and indebted to you~
Either way, nice to meet you and I think that you offering up your talents like this is very kind and generous!

—

I welcome you with open arms to stay away from me