Webgardens Tutorial

So, how does this work?

To create your greenhouse:

  1. A pot is a 250x250 pixel box that contains a sliver of someone else's website. A greenhouse is a page on your site to add pots that you collect from other people. There are almost no restrictions on what your greenhouse can look like. Check out what others have made for inspiration!
  2. There are two different ways to get the iframe code for the pots:
    • Automatic iframe creation: Go to the greenhouse code generator and follow the instructions.
    • Manual iframe creation: Copy the code below for each pot you want to create. Replace the "PUT A SITE'S WEBGARDEN LINK HERE!" with a site's Webgarden link, which often ends with webgarden.html.

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 plant:

  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 unless you really know what you're doing. 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">.