A quick update on this lovely application I’ve been procuring. I will write more about this a little later!

I am currently developing a jQuery controlled fieldset that alters the height and width of a graphical CSS frame. Labels identify a set of dimensions that correspond with a radio button. When the gray button is clicked the selected radio button's height/width is fed into the CSS. The height and width of the frame can be altered by changing only one CSS element ".frame-container". Wire frames coming soon.

Originally I wanted the height and width to pull from a user submitted text field. Alas, I could not find any resources about using variables to change CSS in jQuery. Should look into ajax, I think. I hope I don't need server stuff.

In the future I want to insert user uploaded images into the frames! Fun. I hope I can design a few more ornate frames. This is a fun project. Eventually I will build out the completed "The Heights" homepage. Maybe I will actually supply some interesting literary articles! So much progress...

Above is a screen-shot of the complete mock-up for The Heights's index page, minus a footer. I am going to use a fixed background so the user will never scroll below the graphic, even with long articles. I could also try multiple page articles.

The layout might require a good deal of horizontal and vertical fluidity to work with different resolutions. I'm going to start cut the graphics a part and making the XHTML and CSS presentation layer, work out the bugs as I go, try to experiment with the best method to contain the page content within the background image.

The deep maroon frames will definitely be fluid. Ideally I will only have to code one and replicate it, altering the height and width CSS. Maybe I could tie some jQuery in to alter the height and widths of the boxes dynamically.

Portal with a Purpose

Ain't she a beaut? I made this Liferay theme for a Customer Service Portal program while on the Bankers Life Insurance internal information team. Some of the requirements for this projects included that it be a.) easy to look at, b.) pleasant, possibly 'pretty', c.) adhere to the same graphical template as previous, less attractive theme. The previous color theme of green and gray, the fonts were small, and architecture of information was not clearly denoted with font and graphic sizes.

Working with the team

I placed a screenshot of the old theme on the bottom layer of a Photoshop file and created new graphics on top. After the layout was approved, I cut the mock-up apart and sent back a folder of 50+ graphics for the Liferay developers to load into the new theme.

Now that I am putting a rest to the Pinwheel project and the painstaking jQuery tutorial, I am free to begin a new creative project! The client is creating a reader's guide for Emily Brontë's classic book Wuthering Heights. I already have ideas for the layout. I took some awesome grunge texture photos of a Halsted underpass. I'm going to overlay them with Victorian swirls and top it off with a gnarly moor tree, possibly Catherine and Heathcliff rambling about.