2010 redesign

The loose ends

Posted in backend, coding, design, organization, research by Owen on May 15, 2010

I’ve received some feedback from users now, and made my own notes as I’ve used the system, so I have some of these below. Additionally, its a good idea to go over all the code, including CSS, and add comments while its still fresh in our minds. This shouldn’t take long, we just need to address blocks of code or lines that aren’t already commented and look like they need some explaining! Feel free to contribute anything else we need to make this live!


– Add a sitemap. ___Beth + Owen
– Add titles to all links. ___Owen
– Create class to show external link icon (like wikipedia). ___Owen
– Add search function. ___Owen
– Add CDATA to all javascript tags. ___Owen
– Switch 1000px width to 980px. ___Owen
– 301 .htaccess redirect and make new site live. ___Owen


– Emails don’t seem to be received by comcast users. Research and find out what we might change. ___Beth
– Add upload image feature to application form (to become default feature image). ___Owen
– Convert new emails and domains to lowercase. ___Brittany
– Remove trailing slash on domain names… see: ___Brittany
– Add headers again after so many members… _____Brittany
– Add language/code to encourage adding a short statement. ___Owen


– Clean-up member review page. ___Beth
– Add number of files and number of tags to list of members. ___Brittany + Braylin
– Add an “Are you sure?” page to the delete member button. ___Brittany
– Add ability to order members by date joined (add column) vs. last name. ___Brittany + Braylin
– Keep track of whether or not members pay monthly or annually. ___Brittany
– Add icon for view member profile as well as domain. ___Owen
– How can we make sidebar “site administration” links for admin work better? Add icons. ___Owen
– Add FTP link in admin dashboard See also ___Owen
– Different color for pending, approved, active, and inactive members . ___Owen


– Make an infographic for the settings page, to show how DNS, webservers, FTP works. ___Chris
– Copy functionality from tags to let users add events? ___Braylin
– Change file to gallery on member dashboard home. ___Owen
– Use first member image for feature by default. Inform member this image will be used as thumbnail too. Save new version of first image when uploaded. ___Braylin
– Member subaccount shouldn’t show plesk username/password. ___Brittany
– Research and find the best date/time selector. ___Beth
– Add FTP link in member dashboard See also ___Owen
– Add external links icon (like wikipedia) esp for pages in member dashboard. ___Owen
– For settings page, show user data as form field, click and it highlights. ___Owen
– Language should be added to encourage adding images. ___Owen
– Add feature image to home of member dashboard. ___Owen


– Make events page. ___Braylin
– Change all titles (including Support topics) to sentence case. ___Owen
– Show abbreviated statement on their page, with a jquery toggle to show all (pushes down). ___Braylin
– If statement to determine location still spits out “in ,” ___Braylin
Some images have not been carried over. Check to see if others have. ___Owen
– Clean-up and move Add This button. ___Owen


– Hook events to events table. ___Braylin
– Add jquery image sliders to feature box images. ___Owen
– Hook feature box images to db. ___Owen


– Add comments to all CSS and PHP files. ___Everyone
– Validate everything. ___Everyone
– Get browsershots of example pages. ___Beth
– Make fixes to design based on browser shots. ___Beth + Owen
– Add validation links to footer. ___Beth


– Add buttons to admin to remind pending members they have been accepted.
– Auto email members who have not added images/tags/feature image/events or have not visited in a while.
– Let them update email preferences.
– When someone creates an account with the same name (different email) for a different domain, then the new member script/admin email (confusingly) gets the user by the site url (fname-lname) which actually is their first account. Should get them by email address. ___B&B
– Add jquery email sign-up form. ___B&B
– Server/FTP account integration using Plesk API. ___B&B
– Merge events with a general feed and call it announcements. ___B&B
– Add more support articles and ways to tag/search/sort them.
– PayPayl / Google Checkout API integration. ___B&B
– Member feed / change “events” to “announcements.” ___B&B
– Plot announcements/events on map. ___Owen
– Google Map API / geocode members. ___Owen
Move to new server. ___Owen
– Integrate CMS for user websites.

Comments Off on The loose ends

CSS + Image Sizes

Posted in coding, design, organization by Lin on April 4, 2010

Here is the master list of all hexcodes and image sizes we are currently using:

CSS Hexcodes

  • 000000 black
  • FFFFFF white
  • c53232 red (links, notice)
  • aa0000 red (links, notice, form stuff, etc)
  • 5e5e5e footer gray
  • 666666 header gray (menu & subnav text)
  • dddddd dark gray (message boxes in feed, input background)
  • 999999 medium gray (visited links)
  • ebebeb light gray (input focus, img border, border-tops/bottoms)
  • aaaaaa light gray (cutetime, form border)

Image Sizes/Dimensions (in pixels)

  • 175 x 109 (header logo)
  • 100 x 63 (footer logo)
  • 618 x 360 (feature banner image)
  • 238 x 138 (feature box thumbnails)
  • 353 x 206 (feature side bar image)
  • 353 x anything (sponsors full ad size)
  • 69 x 80 (portfolio thumbnails)
  • 618 x anything (portfolio full image size)
  • 150 x 110 (community thumbnail)

* Image sizes account for 1px border.

Tagged with: ,

Comments Off on CSS + Image Sizes

Version Control with CodeIgniter

Posted in backend, coding, organization by Brittany on April 3, 2010

When it came to redesigning, we had a problem with the base_url() function regarding assets. Eventually we want to convert the v1 directory redirect to just a root url with the contents of the v2 directory in its place. Long story short, we found Shawn McCool’s lovely article on managing assets with CodeIgniter and followed his tutorial. All you have to do is add his path_helper file, autoload some helpers, and edit the applications/config/config.php file. Instead of using his function as asset_url(), we took it a step further by making it a version_url(). So our config looks like this:

$config[‘base_url’] = “”;

$config[‘version_path’] = ‘v2/’;

So now, whenever we call version_url(), we generate the base_url with the version_path. Below is an example of how we are linking an asset (replace parenthesis with correct php format):

<script type="text/javascript" src="(?php echo version_url(); ?)assets/js/validation.js">

Tagged with: , ,

Comments Off on Version Control with CodeIgniter

The Difference Between Dashes and Underlines in SEF URLs

Posted in coding, research by Owen on March 31, 2010
Tagged with: ,

Comments Off on The Difference Between Dashes and Underlines in SEF URLs

Inspirational Tags in web design – Pattern Tap

Posted in coding, design, organization by Owen on March 30, 2010
Tagged with: ,

A Collection of Useful Web Design Wireframing Resources – Speckyboy Design Magazine

Posted in coding, design, organization, research by Owen on March 22, 2010
Tagged with: ,

Comments Off on A Collection of Useful Web Design Wireframing Resources – Speckyboy Design Magazine

Code List

Posted in coding, organization, research by Lin on March 1, 2010

Here is a consolidated list of codes that will or might be used on YAH. If you have comments about these codes, please leave a comment. Otherwise, edit this post to include your codes (or strike through some codes).

Misc Codes:

  • Lightview – overlay content on website  – IE 6+, FF 2+, Safari 2+, Opera 9.5+ (requires Prototype and Scriptaculous with Javascript enabled)
  • jQuery UI (demo) – user interface – IE 6+, FF 2+, Safari 3.1+, Opera 9+, Chrome
  • AddThis – sharing tool

jQuery Plugins:

  • CuteTime (demo) – makes timestamps cute
  • Captify – rollover captions on images – IE, FF, Safari, Chrome
  • Feature List (demo) – interactive “Featured Items” widget
  • InnerFade – fade any element inside a container
  • Coda-Slider (demo) – sliding tabs – IE 6+, FF 2+, Safari, Opera 9+, Chrome
  • jQuery Cycle – transition effects for container elements
  • TextInput (demo) – tokenizing autocomplete text entry
  • Growl (demo) – simple notification system – IE 8, Firefox 3.5, Safari 4, Opera 10.2, Chrome 2
  • Twitter Login (demo) – Twitter-like drop-down login
  • loopedSlider (demo) – content slider for feature boxes

CodeIgniter Codes:

Comments Off on Code List

Stages of Functional Boxes

Posted in coding, organization by Lin on February 21, 2010

Controller Nav

  • Stage 1: Empty links or links to static pages and functional Google search bar.
  • Stage 2: Working “Login”. Include member name, “Edit”, etc.
  • Stage 3: Some drop-down menus?

Featured/Events Big Image

  • Stage 1: Different picture upon refresh with overlapping div. Div will have transparent gif as background and text based on pic?
  • Stage 2: JQuery effect, control arrow?


  • Stage 1: Each link to static page or email client?
  • Stage 2: Drop-down menu that covers other content.
  • Stage 3: Drop-down that dynamically moves other content down?


  • Stage 1: List of a couple events in sentence form, maybe pictures? “View All Events”.
  • Stage 2: Calendar view using HTML and maybe JavaScript.
  • Stage 3: JQuery calendar.

Three Boxes

  • Stage 1: Content different upon refresh?
  • Stage 2: Numbered links below boxes, pagination?
  • Stage 3: JQuery cycling or fading.


  • Stage 1: Static images with links and “View All” if necessary.
  • Stage 2: JQuery vertical carousel or some fading effect?

Site Feed

  • Stage 1: Avatar, name, maybe date, and comment in separate div with border. “View All” if necessary.
  • Stage 2:  Include site stats. Apply comment div with an image border that changes size dynamically, perhaps change color depending on membership (admin or regular)?
  • Stage 3: Include member actions (“updated profile”, “added an event”, etc). Cute date. JQuery again.

Member Page

  • Stage 1: Member info, portfolio (w/ individual pages), and feed. “Share and Follow”.
  • Stage 2: Add comments and view count to individual image/video pages.
  • Stage 3: JQuery…
Tagged with: , ,

Comments Off on Stages of Functional Boxes

The Future: Version 3.0 wish-list

Posted in backend, coding, design, organization, research by Owen on February 15, 2010

An ongoing list of improvements and additions for the next redesign…


  • Comments on feed
  • Artist groups/collaborations
  • Nice calendar
  • To be continued…