Weefolio allows users to fully customize their portfolios though the use of HTML themes. NOTE: This is for those who are already familiar/comfortable with writing HTML.

Getting Started

To begin, click the "Custom HTML" button in the "Design" section. Here you'll see a text editor with your Weefolio's current theme. This is where you may edit or replace code to customize your design.

Content Tags

Weefolio themes use custom tags to output your portfolio's content.

There are two kinds of content tags. The first is a basic tag, like [username], [about], or [font-family]. These tags output simple pieces of data. For example, if your username was John, you'd call the [username] content tag to output "John" in your theme.

The second kind of content tag is a conditional. Conditionals are used to wrap code that should only output under a certain condition. These are tags like [if:portfolio-pieces] or [if:piece]. For example, with the [if:portfolio-pieces] conditional, you would wrap code that should display only if there are pieces in your portfolio.

Here is an example:

[if:portfolio-pieces]
  [if:piece]
    <h2>[piece-title]</h2>
  [end]
[end]

The Markup

Every Weefolio theme requires the [wee-script] tag in the page's <head>. This feeds in scripts essential to creating a functional theme.

Here is an example of an entire theme's markup using Weefolio's content tags:

<html>
  <head>
    <title>The Weefolio of [user-name]</title>
    
    [wee-script]
    
    <style type="text/css">
      body {
        background: [background-color];
        color: [text-color];
        font-family: [font];
        font-size: [font-size];		
      }
			
      a:link,
      a:visited {
        color: [link-color];
      }
			
      a:visited,
      a:visited:hover {
        color: [link-hover]; 
      }
			
      h1, h2, h3, h4, h5, h6 {
        color: [title-color];
      }
			
      div#header-container {
        background: [header-background];	
      }
    </style>
  </head>
	
  <body>
    <div id="header-container">
      [header-image]
    </div>
		
    <h1>[tagline]</h1>
		
    <ol id="pieces">
      [if:portfolio-pieces]
        [if:piece]
          <li class="piece">
            <h2>[piece-title]</h2>
  				
            <div class="images">					
              [piece-gallery]
            </div>
  				
            <p>[piece-about]</p>
  				
            <div class="meta">
              [piece-meta]
            </div>
          </li>
        [end]
      [end]
    </ol>
		
    <div id="about">
      <h2>About</h2>
		
      <p>[about-me]</p>
			
      <p>Subscribe to my <a href="[rss-url]">RSS</a> feed!</p>
    </div>
		
    <div id="contact">
      <h2>Contact</h2>
		
      <p>[contact-form]</p>
    </div>
  </body>
</html>

User Content Tags

[user-name]	Your username.
[tagline]	Your user "tagline".
[about]	Your "about" information.
[avatar-url]	The URL of your user avatar.
[contact-form]	A simple form for contacting the user.
[rss-url]	The URL of your Weefolio's RSS feed.
[wee-script]	Required tag for every Weefolio theme.

Portfolio Content Tags

[header]	Your Weefolio's "header" image.
[if:portfolio-pieces] ... [end]	If you have one or more portfolio pieces, output the following...
[if:piece] ... [end]	For each piece in my portfolio, output the following...
[piece-title]	The piece title.
[piece-gallery]	Outputs the piece image along with a simple list of image thumbnails. Thumbnails only display if the piece has more than one image.
[piece-about]	The piece description.
[piece-meta]	The piece's meta information, including: client name, service type, price and sale URL.

Design Content Tags

[background-color]	The page's background color.
[text-color]	The default text color.
[title-color]	The header/primary text color.
[link-color]	The hyperlink text color.
[link-hover]	The hyperlink text color upon rollover with a mouse.
[header-color]	The header container's background color.
[border-color]	The color for borders throughout the theme.
[font-family]	The user's font preference.
[font-size]	The user's font size preference.