A Good Portfolio > Help

Help! - Customizing


Besides uploading a logo to personalize your portfolio, you can also use our Theme System to customize your portfolio. Go to the Customize tab on your dashboard, and you'll find a link to our Theme Warehouse. Here you'll be able to pick a theme you like, preview, and install it. Professional Accounts will be able to modify themes once they've been installed, and change their own CSS. This gives you control over literally every part of the look of your portfolio.

Theme Tags


Custom themes have certain programming tags to give you access to your images and information.

Tag Description
{{ Code }} These tags hold code that's visible. Certain tags are supplied to get at the information you have saved.
{% code %} These tags hold code that's invisible. You can use these to loop through tags that hold multiple objects. See Groups for an example.

Generic Info

{{ NameOrLogo }} Displays your logo image, or your portfolio name, in that order. Both acts as a link to your homepage.
{{ Email }} Displays a link to your email address. It's automatically encrypted so that internet robots won't be able to harvest it.
{{ Phone }} Displays your phone number, if you have one saved. Automatically formatted as (xxx) xxx-xxxx.
{{ Location }} Displays your location, if you have one saved.
{{ "My Awesome Resume" | Resume }} Displays a link to your resume, using the words in quotes for the name of the link. Just {{ Resume }} outputs a link using the default name of "Resume".
{{ About }} Displays your about section, if you have one saved.

Groups

{% for thisgroup in Groups %}
{% endfor %}
The Groups tag represents a list of all your groups. This set of tags loops through each of your groups, and outputs something for each one. The next couple tags listed can get information from each group, if placed inside this loop. thisgroup refers to the current group in the loop.
{{ Group.id }}
{{ thisgroup.id }}
The id is a unique identifying number that is specific to this group, and this group only.
{{ Group.path }} The path of a group is the URL of a particular group. http:/yoursubdomain.agoodportfolio.com/group-name
{{ Group.thumb }} This displays the group's thumbnail image, sized at 175x175 pixels. This image is the first image in your group.
This will make an img tag for you.
{{ Group.title }} Displays your group's title, if there is one.
{{ Group.description }} Displays your group's description, if there is one.

Images

{{ Image.title }} Displays your image's title, if there is one.
{{ Image.id }} Displays your image's id, a number that is a unique identifier for this exact image.
{{ Image.title }} Displays the title of an image, if there is one.
{{ Image.description }} Displays the description of an image, if there is one.
{{ Image.thumb }} Displays the thumbnail image, and makes an <img> tag for you.
Sized 175x175 pixels.
{{ Image.large }} Displays the large sized image, and makes an <img> tag for you.
Sized 960x960> pixels, measured to the longest side.
{{ Image.original }} Displays the original sized image, and makes an <img> tag for you.
Sized whatever the original dimensions were.
{{ Image.path }} Displays the URL for an image page.
{{ Image.group }} By itself returns nothing useful, but used in conjunction with the properties for groups,
gives you access to all the information of an image's group.
These are the basic tags and functions. For serious, complex stuff, check out some more advanced programming features.

Custom CSS


For those of you who don't have a lot of experience with CSS, here are a few helpful hints to help you make simple changes to your portfolio to make it feel more personal.


Changing the background color of the page

The first section in the default CSS we've provided is labeled "Some General Elements," and the very first item underneath is something called body. This is the tag that references the whole page, and you'll notice the background-color: is set to white. Try changing it to one of the 16 web-safe color names, or experimenting with hexadecimal values.


Changing the font of the body text

The next item you'll see is font: 9pt/18pt Georgia, 'Times New Roman', Times, serif;. The first # is the size of the main body text, and the second # is the leading, or line-height. Then there's a list of fonts to use. Because not all computers have the same fonts installed, it's a good idea to have a list to fall back on. Read here for more information.


Changing the color of the body text

Following the same ideas as changing the color of the page, you can change the color of the body text by changing color:.


Changing the color of text links

Links are referenced with the a tag, which is the very next item in the "Some General Elements" category. You'll notice that there are two: a and a:hover. The former is for a normal, everyday link; the latter is for when your cursor hovers over one. It's one way to help people be sure that that word is a link.

More Information


We recommend either commissioning some friendly, talented professionals, or checking out all sorts of wonderful, free web sites to help you learn more.