Project 4 : Custom Theme HTML/CSS Mockup

At first I enjoyed the idea of designing and building a WordPress theme from scratch. So far, though, it’s become more difficult than it seems… Even with the aid of online guides and blogs (I’m referencing thisone by Design Mag and thisotherone by net tuts plus).

So… I’m in the process of mocking up my custom WordPress theme in HTML/CSS. I sliced and diced my Photoshop composition and made simple divs to understand the basic structure of the theme (header, “sidebar”, content, footer). You can view my sliced up versions (without the HTML/CSS crap all over it) righthere and overhere.

Now I’m adding actual content, adjusting the size, margin and alignment of the many different divs, and stylizing the text, etc. You can see the hideous progress here: Chickateeclick and Clickityclak!

Note: I totally forgot about this, but I was considering adding a thin image slider at the top of the page, between the “sidebar” and content sections, but I’m not sure how I feel about it yet. After I’ve completed the HTML/CSS mockup, I’ll try to add it in.

Published on February 27, 2011 12:20 pm.
Filed under: GRA423

No Comments

TrackBack URI

Sorry, the comment form is closed at this time.

Important Links

1. Portfolio

2. Social Issue Website

3. Custom WordPress Theme

Published on May 8, 2011 10:23 pm.
Filed under: GRA423

Campaign Site : Complete

Here’s the link to my completed campaign website.

There’s still some tweaking to do, and content to be changed/added, but I’m pretty much done.

Published on May 6, 2011 12:18 pm.
Filed under: GRA423

Campaign Site : Mockup 3

You can view mockup 3 here.

First of all, I’ve changed the Facts page so you can toggle (hide/show) the six divs that contain content about the social issue. This is my alternative to a slider, because I couldn’t figure out a simple jquery to use. Current mission: figuring out Lightbox again so visitors can view a larger version of the maps.

Secondly, I’m unable to find any kind of code to make the quiz I wanted under “Survey”. So, I replaced that page with “Videos”. If I had time, I would throw together a quick Flash quiz, but… I don’t have time.

Published on May 2, 2011 11:08 pm.
Filed under: GRA423

Side Project: Portfolio Complete

I’ve launched my new portfolio website. There is still some content I need to add but the general structure is complete.

Adding new projects will be relatively simple, except when it comes down to editing my navigation. Right now, that will have to be changed on every single page… After graduation I will look into WordPressifying this design to make it easier to add/delete new projects. This is something I have my mind set on doing.

I simply embedded my Catscapades animation from Vimeo. I will be doing the same for my social issue video series, if I choose to display them on my website….

Published on May 2, 2011 10:20 pm.
Filed under: Personal, Portfolio

Campaign Site : Mockup 2

Mockup 2 of The Human Impact website. Made changed to the layout (width of content boxes) and navigation style. Home has been built out.

Right now I’m trying to implement a JavaScript slider on the Facts page. This process is REALLY painful, but I want to make it work. I think this will be more interesting to navigate than just scrolling down a really long page.

Published on April 29, 2011 4:59 pm.
Filed under: GRA423

Campaign Site : Mockup 1

I’ve begun mocking up the website for my campaign, Brown: The Human Impact. Currently, there is only an index.html page. No trouble so far.

Published on April 25, 2011 4:45 am.
Filed under: GRA423

Project 4 : Custom Theme Development Complete

I installed a second WordPress Blog to display my custom theme.

This blog will continue to be updated with class progress, but it will display the theme I hacked at the beginning of the semester. I’m thinking of hacking a second theme, but we’ll see….

Published on March 22, 2011 3:09 pm.
Filed under: GRA423

Project 4 : Custom Theme Development – Comments.php

I’ve almost completed the development of my theme. A helpful resource I found: How to Build a WordPress Theme From Scratch on SpoonGraphics for the sections “Constructing the page and single view” and “Configuring the comments template”.

I had a lot of difficulty with the comments.php page, specifically working with styling the stupid comment form with css.

MY BIGGEST PROBLEM RIGHT NOW: If there are no comments on a post, I want the php line to say there isn’t any. I’m getting sick of sifting through my messy comments.php page, lol.

Published on March 22, 2011 3:42 am.
Filed under: GRA423

Project 4 : Custom Theme Development – Post Titles

Success of the day? Limiting the characters in post titles on the index.php page.

Resources: thislinkhere and thislinkrighthere

Published on March 16, 2011 4:00 am.
Filed under: GRA423

Side Project: Portfolio

Documenting the process for redesigning my portfolio site.

Part 1

  • Altered my original portfolio concept in Photoshop.
  • Sliced and diced.
  • Started wireframe.
  • Gagged and redid it all.

Part 2

  • Finished basic wireframe.
  • Styled with css.
  • Added navigation imagery + text.
  • Added sliding navigation code.

Part 3

  • Duplicated index.html to make my first test page: programbook.html.
  • Added easySlider, imagery, and text.
  • So far, so good.

So you can check out my progress here. The only working pages are Program Book and Class Survey. Falalalala

Published on March 15, 2011 4:22 am.
Filed under: Personal, Portfolio