Webgardens Tutorial

So, how does this work?

To create your greenhouse:
  1. A greenhouse is a page on your site to add your pots. A pot is a 250x250 pixel box that contains a sliver of someone else's website.
  2. Now you have two options, depending on who you want to add to your greenhouse:
    1. Go to the greenhouse generator and type in the user's Neocities username. If they are hosting their plant in the way detailed below, the generator will create the code to add their pot to your website.
    2. Copy the code below for each pot you want to create. Replace the "PUT A SITE'S POSTS PAGE LINK HERE!" with the link in question.

Note: you're free to use CSS to change how your pots look! Just make sure you don't change the height or width to be anything other than 250 pixels, since that messes up the formatting.

To create your posts page:
  1. Create an HTML page on your site to add your plant. A plant is the actual content of a pot. Please prioritize naming it webgarden.html so that the code generator works, but it's not strictly required if you provide your own link or embed code.
  2. Copy the template below into your webgarden.html page. Among the other necessary parts, it contains what is known as a "CSS reset" which is important for consistency.
  3. Note that your plants have many restrictions as you edit them:
    • The <div class="plant"> div SHOULD be the only content on this page. To allow the pots to be HTML5 compatible, the scrolling="no" can be removed. We don't want ugly scroll bars in our greenhouses.
    • Other than that, feel free to use almost anything! Because Webgardens is powered by iframes, any HTML and CSS you use will be visible.
    • Links in your post MUST be set to open in a new tab or the "parent" tab by default! This is because, if you don't, links will open inside the iframe by default. You can achieve the desired behavior by changing your opening <a href="linkhere"> into <a href="linkhere" target="_blank"> or <a href="linkhere" target="_top">.