• Website Design

    Posted on July 23rd, 2009

    Written by Gustavo

    Tags

    , , , , , ,
    GustavoOlmedo.com Blog Design Version 2.0

    GustavoOlmedo.com Version 2.0 (July 2009)

    The new blog design is finally here, after weeks of work – so much measuring pixel by pixel. The design is made so that users with the current standard resolution can view the website properly – fitting all elements in  the screen (1024 X 768 pixels at the time of writing this post / releasing this design). However, for those with a wider screen, such as 1280 pixels or wider, an “easter egg” has been left for you to enjoy:  a background that completes the artwork that is represented in the website’s theme – the design of the background continues another 119 pixels to each side/margin, completing the “picture” ;-)

    The same goes for the background in the footer area, although the main part of the background can be seen already at 1024 pixels wide.

    A new navigation was added at the top of every post, with neat mouseover graphic effects – now it’s easier to browse back and forth between posts :)

    In addition to the drop-down menu that shows at the top left of every page, I also added a straight-forward visual menu in the homepage, with cool hover effects, that allow you to easily view all main categories under my Portfolio (my work) for easier browsing from the homepage. In order to accomplish this, advanced CSS was employed for absolute positioning of each image and their mouseover effect – all done in CSS+XHTML, no JavaScript involved.

    Different backgrounds were also made for the homepage and inner pages. Also, the font size showing up as headings varies in size, depending on the pages and sections/categories you are browsing.

    WordPress lovers & WP DIY’s: the different styling taking place depending on the type of pages browsed, was accomplished with some simple use of the WordPress loop with commands like “if ( is_home() )”, “if ( !is_paged()”, “if ( is_single()”, etc. – to include in certain type pages, a CSS file reference to be inserted into the bottom of the head section, in order to override the other CSS files used as default.

    screenshot_gustavoolmedo_com_july_2009_header_post_page_full_width

    Posts section

    .

    screenshot_gustavoolmedo_com_july_2009_header_post_page_full_width

    Footer section

    RSS Feed Add to Technorati Favorites Add to Del.icio.us Stumble It! Submit to Slashdot Submit to Buzz! Digg It!

    • Share/Bookmark
    This entry was posted on Thursday, July 23rd, 2009 at 4:56 PM and is filed under Website Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
  • 0 Comments

    Take a look at some of the responses we've had to this article.

  • Leave a Reply

    Let us know what you thought.

  • Name (required):

    Email (required):

    Website:

    Message:

    Spam Protection by WP-SpamFree