Everyone Website - Community editable site!

[SiLver]

I made a page all about the Bohrok, I think I will look into adding some stuff to the other pages soon!

[thefanciestpigeon]

I had a dream about the website...

[klonpa]

someone earlier today tried to make their own wall and accidentally overwrote the entire main page! this is what it looked like



i reverted it by downloading and re-importing an earlier version of the page, but unfortunately that seems to have messed up the timeslider due to this i also lost track of who made the wall edit in the first place 

apologies everyone!!!!

this does make me wonder if it would be a good idea to have some sort of moderation tool in place for edits? at least on the main page in case of a similar situation... like limiting how much text is able to be removed? unsure whats possible to implement!! just wouldnt want this to happen again 

[Melooon]

i reverted it by downloading and re-importing an earlier version of the page, but unfortunately that seems to have messed up the timeslider

Thanks for the fix I think its just the nature of what it is, it will get messed up from time to time and that's life! (I took the opportunity to reformat the code so its nicer to read!)

I don't think there's much we can do to prevent it, though it is weird the time slider stopped working! Everyone will have to just pitch in to keep it unbroken

[bingus_baby]

Moderation such as that I feel would go against the spirit of the everyone site... Of course keeping objectionable content out wouldn't be horrible, but it IS for everyone to edit as they please, after all! Broken pages are its destiny. Griefing wouldn't be too awesome, though.

[muttthecowcat]

I updated the sestina page with another stanza of the poem!! https://everyone.melonland.net/sestina-1 

[Memory]

i turned the "rooms" list into a table with pictures of doors! everyone's room name is preserved in the "title" (text which appears when you hover over the link). i thought this would be cuter than just a regular list 

[candycanearter07]

i turned the "rooms" list into a table with pictures of doors! everyone's room name is preserved in the "title" (text which appears when you hover over the link). i thought this would be cuter than just a regular list 

Cool idea, but it makes it hard to tell who's is what..

[Memory]

Cool idea, but it makes it hard to tell who's is what..

the everyone website can be edited by everyone, so if there's something you don't like you can change it   

[larvapuppy]

Cool idea, but it makes it hard to tell who's is what..

Suggestion to differentiate between rooms and still keep the cool doors idea:

Everyone can make their own custom doors 

I made an open and closed version like so:


Then I changed the image in my cell to the open version and added a class:

Code

<td class="larvapuppydoor"><a href="larvapuppy"><img src="https://larvapuppy.neocities.org/miscpics/lpdoor_open.png" title="Lith's Room">

And added this (the closed version) to the css:

Code

.larvapuppydoor {
    background-image:url(https://larvapuppy.neocities.org/miscpics/lpdoor.png);
    }

Now my door is more recognizable 

[candycanearter07]

i turned the "rooms" list into a table with pictures of doors! everyone's room name is preserved in the "title" (text which appears when you hover over the link). i thought this would be cuter than just a regular list 

the everyone website can be edited by everyone, so if there's something you don't like you can change it   

So, how exactly did you implement the doors table thing? I tried to change it but even making a new table didn't work for some reason..

Also, I made a room

[Memory]

So, how exactly did you implement the doors table thing? I tried to change it but even making a new table didn't work for some reason..

Also, I made a room

i can try to walk you through the css! i'm not the best at explaining things, though.

Code

table, td {
  border: 1px solid gold;
  text-align:center;
  justify-content:center;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://textures.neocities.org/textures/humans-and-technology/017C.png");
  margin:auto;
}

line-by-line:

"td" is "table data" - that is, each individual cell. so, this block affects both the "table" as a whole and each square within the table. this stuff is all aesthetic; the background and gold border make it match the div it's in, the margin centers it in its section, and the text-align centers the stuff inside the cells. all pretty straightforward i think! i'm not actually sure if the justify-content is doing anything, but i put it in there anyway just in case it did. (if it's doing something, it's also centering the contents of the table)

Code

table a {transition: 0s;
    }

this modifies links (a) within the table. links on the homepage grow big when you mouse over them, and they achieve the animated "growing" effect with a transition timer. i set the transition to 0s because i don't want a delay for the hover effect on links in the table!

Code

tr {height:60px;
}

tr stands for "table row"; each row in the table is 60 pixels tall.

Code

td {width:60px;
  background-image:url(https://files.catbox.moe/jrha1u.gif);
background-repeat:no-repeat;
background-position:center center;}

td is back! every cell is 60 pixels wide, so they are square, and has a background image of a closed door. the background image is centered and does not repeat; i just want one door picture per cell. this is the "default"; when you look at the table, you see a closed door until you hover over it.

Code

td img {opacity:0;
margin-top:8px;
margin-right:0px;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://textures.neocities.org/textures/humans-and-technology/017C.png")}

td img:hover {opacity:1;}

this affect images (img) that are inside of cells. setting the opacity to 0 means they are invisible! since they're invisible, you only see the background image of the cell.
td img:hover tells the page what to do when you move your mouse over an image inside of a cell; in this case, it turns the opacity to 1, which makes it fully visible!

the margins and background are there to make sure the image (an open door) properly covers up the background image (a closed door) when it is visible. the images have transparent backgrounds, so without an added background you can just see the closed door underneath which ruins the effect!

so all of that put together means that you can "open" the door by mousing over it, when what is happening mechanically is you are making "open door" picture visible and cover up the closed door.

Code

 <table>
  <tr>
    <td><a href="melon"><img src="https://files.catbox.moe/vzob8f.gif" title="Melon's Room!"></a></td>
    <td><a href="wygolvillage"><img src="https://files.catbox.moe/j0tcip.gif" title="Noa's Room"></a></td>
    <td><a href="arcus"><img src="https://files.catbox.moe/j0tcip.gif" title="Arcus' Room"></a></td>
    <td><a href="honowo"><img src="https://files.catbox.moe/j0tcip.gif" title="Honowo's Room ❤"></a></td>
  </tr>

a table is contained within the <table></table> html tags. this snippet from the beginning shows how the table is set up: tr is "table row", and within that row there are four "td"s - those are the individual squares, remember.
within each td, there's just a single image serving as a link to the room page. this image is an "open door" picture for three of them, and a picture of a watermelon for melon's. these images are 32x32 icons from the iconolog, many of which are used in various spots in and around melonland! they're a good size for the cells, big enough to be legible but small enough that the table doesn't take up more space than it did in list form. since they're the same size, i know they'll cover the background door properly with the background added.
the "title" attribute is what makes text appear in a tooltip when you hover over the image.

hope that helps!

[shapezncolourz]

i made a room! :3 or at least, i think i did from what i've seen of the other rooms...? not very much there at the moment, i just wanted to make a lil something :]

[candycanearter07]

i can try to walk you through the css! i'm not the best at explaining things, though.

Code

table, td {
  border: 1px solid gold;
  text-align:center;
  justify-content:center;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://textures.neocities.org/textures/humans-and-technology/017C.png");
  margin:auto;
}

line-by-line:

"td" is "table data" - that is, each individual cell. so, this block affects both the "table" as a whole and each square within the table. this stuff is all aesthetic; the background and gold border make it match the div it's in, the margin centers it in its section, and the text-align centers the stuff inside the cells. all pretty straightforward i think! i'm not actually sure if the justify-content is doing anything, but i put it in there anyway just in case it did. (if it's doing something, it's also centering the contents of the table)

Code

table a {transition: 0s;
    }

this modifies links (a) within the table. links on the homepage grow big when you mouse over them, and they achieve the animated "growing" effect with a transition timer. i set the transition to 0s because i don't want a delay for the hover effect on links in the table!

Code

tr {height:60px;
}

tr stands for "table row"; each row in the table is 60 pixels tall.

Code

td {width:60px;
  background-image:url(https://files.catbox.moe/jrha1u.gif);
background-repeat:no-repeat;
background-position:center center;}

td is back! every cell is 60 pixels wide, so they are square, and has a background image of a closed door. the background image is centered and does not repeat; i just want one door picture per cell. this is the "default"; when you look at the table, you see a closed door until you hover over it.

Code

td img {opacity:0;
margin-top:8px;
margin-right:0px;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://textures.neocities.org/textures/humans-and-technology/017C.png")}

td img:hover {opacity:1;}

this affect images (img) that are inside of cells. setting the opacity to 0 means they are invisible! since they're invisible, you only see the background image of the cell.
td img:hover tells the page what to do when you move your mouse over an image inside of a cell; in this case, it turns the opacity to 1, which makes it fully visible!

the margins and background are there to make sure the image (an open door) properly covers up the background image (a closed door) when it is visible. the images have transparent backgrounds, so without an added background you can just see the closed door underneath which ruins the effect!

so all of that put together means that you can "open" the door by mousing over it, when what is happening mechanically is you are making "open door" picture visible and cover up the closed door.

Code

 <table>
  <tr>
    <td><a href="melon"><img src="https://files.catbox.moe/vzob8f.gif" title="Melon's Room!"></a></td>
    <td><a href="wygolvillage"><img src="https://files.catbox.moe/j0tcip.gif" title="Noa's Room"></a></td>
    <td><a href="arcus"><img src="https://files.catbox.moe/j0tcip.gif" title="Arcus' Room"></a></td>
    <td><a href="honowo"><img src="https://files.catbox.moe/j0tcip.gif" title="Honowo's Room ❤"></a></td>
  </tr>

a table is contained within the <table></table> html tags. this snippet from the beginning shows how the table is set up: tr is "table row", and within that row there are four "td"s - those are the individual squares, remember.
within each td, there's just a single image serving as a link to the room page. this image is an "open door" picture for three of them, and a picture of a watermelon for melon's. these images are 32x32 icons from the iconolog, many of which are used in various spots in and around melonland! they're a good size for the cells, big enough to be legible but small enough that the table doesn't take up more space than it did in list form. since they're the same size, i know they'll cover the background door properly with the background added.
the "title" attribute is what makes text appear in a tooltip when you hover over the image.

hope that helps!

Thanks a ton! It did help, and I think the way you did the effect was pretty cool ^^ I added a thing to display the title of the room when you hover over it, which should help readability.

[night-at-the-musian]

i turned the "rooms" list into a table with pictures of doors! everyone's room name is preserved in the "title" (text which appears when you hover over the link). i thought this would be cuter than just a regular list 

I checked the Everyone page today and noticed that the door to my page, "Ian's Desk", turns into a little desk instead of an open door! That's such a cute touch, I love it.