Hi, please

Tag Archives: css

Mockup Them Themes

Class notes (from last week):

  • Installing Wordpress (let’s do it together)
  • Installing a local development environment (give MAMP a shot)
  • The fundamentals of WP:
    • Posts:
      • Media / Attachments
      • Comments
      • Categories
      • Tags
    • Pages
      • Parent/Child Page hierarchy
    • Links
      • Link Categories
    • Widgets
    • Themes
      • Parent/Child Themes
    • Plugins
  • Introduction to the Thematic theme

Resources:

Over the week we will start making our themes. Starting from design, and then into HTML/CSS using Wordpress and Thematic. You’re going to have two main deadlines over the next two weeks:

By Saturday (the 24th) 4pm:

  • Design an Photoshop mocked-up mainpage for your blog (as a png file). Based on your wireframes and inspiration. Use the grid.
    Rather than using only html/css elements, try to think how background images can help you spice up your design, check CSS Zen Garden (and others) for inspiration. Use Firebugs to check how things are done behind the scenes.
  • Upload two PNGs to the blog, one clean, and the other with a transparent overlay of the grid layout
  • Comment on each of the posts left by the other 7 students in the class (if you post early you get more feedback, so start soon)
  • Let’s start playing with Wordpress and Thematic:
    1. Install Wordpress, in most cases it will only require a one click install. (we’ll go through this in class)
    2. Install the Thematic theme through the Wordpress Add New Theme interface
    3. Activate Thematic and check out the main page to see how it looks with Thematic active
    4. Copy the sample child theme from the wp-content/themes/thematic/thematicsamplechildtheme to the themes folder (so it’s on: wp-content/themes/thematicsamplechildtheme) then change its name to the name of the new child theme you’re going to build
    5. Edit the style.css folder in your new theme to give it a new name and credits
    6. play around with it a bit – change some css rules, like the background color, the font, and so on, just to see how you can modify the parent theme without messing the original files.
    7. Activate your new theme and check out the main page to see how it looks
  • Try downloading and installing other themes on your blog and look through their structure

By Tuesday next week:

  • Publish a revised mockup for your WP theme (again, two PNGs) based on the feedback you got in class.
  • Post a link to your slightly modified Thematic child theme so we can see WP live and kicking on your site
  • Read: Excerpts from The Success of Open Source – by Steven Weber
  • Write 1 (or more) other comment on new mockups posted by your friends
  • For next week Miss Kym will be Greatly Widely and Openly expanding our understanding of open source.
  • For next-next week Miss Mirna will be Greatly Widely and Openly expanding our understanding of open source even further.

Enjoy!

By Mushon 12:00, Oct 20th, 09 #2 - Wordpress brief No Comments

Brief: Tutorial#2 – HTML+Layout

Now that we have made our initial introduction to Blueprint CSS I would like you to start using the grid to build your webpage’s layout.

For next week:

  1. Read the Typography tutorial at Smashing Magazine and apply your lessons from it to your design.
  2. Based on the feedback you got in class, reiterate through the html and mockup you made for this class. Feel free to make the adjustments needed to your previous HTML file to fit your new layout.
  3. Use new HTML elements, ids and classes to style your page, use Firebug to monitor the html and css and to learn how would your tweaking of the code modify the browser’s rendering of the page.
  4. For next week, you should work only on the layout, you are yet not required to work on the typography, images and styling (though you can if you want), we will do that next week. As far as the layout goes, it does not have to be very sophisticated, but try to make sure you’re teaching yourself new things while you’re at it.
  5. Post your questions and references to the blog, we would try to work together finding ways around problems and tricks to solve them. Use the instructions on the How-To page to post code examples in your posts.

Next week we will enjoy a Great, Wide Open presentation by Madam Gwen.

Enjoy.

By Mushon 13:30, Sep 22nd, 09 #1 - Tutorial brief No Comments