Browsing articles in "CSS & HTML"
Nov
7

Mentioned on TextDrive: sIFR as List Navigation

My sIFR 3.0 inline post was mentioned by Mark Wubben,  in the TextDrive forums for sIFR yesterday, in response to Norman’s request for sIFR 3.0 in a list format for navigational use. I had a little time this morning, so I created an example of sIFR 3.0 used in a list as navigation. You can view the example page here, or download a zip of the files. The css code is the exact same as the inline example, I just needed to set the class on the list item and set the inline style width. 🙂 Enjoy!

Nov
5

Refresh Phoenix: Blueprint CSS

Come on over to Inza Coffee House tomorrow night to join me and the crew of Refresh Phoenix as we discuss Blueprint CSS.

Blueprint is a CSS framework by Olav Bjorkoy, which “aims to cut down on your CSS development time.” Matt Heidemann & Matt Gist from Integrum Technologies will talk about their recent work with Blueprint. They’ll show examples of the framework and a project they recently used it with.

See ya there!

Oct
31

ASP .Net 2.0 Login Control Formatting

There are sometimes when I truly wonder if designers and developers have it out for me.

Take for instance, the ASP .Net 2.0 login control. The designer wants it to look one way, however the .Net login control call only gives you so many options for style and layout. What is a front end architect to do?!

Thankfully, I’ve been blessed with the knowledge of the view as template option in Visual Studio 2005. The “view as template” option allows you to expand the normal login control code to a more complete view including the table that incapslates all the labels and text boxes.

To get to this magic option, do the following:

  1. open the page with the login control you want to expand
  2. view the page in design view
  3. select the little black arrow to the right side of the control on the page
  4. select ‘view as template’ in the drop down
  5. switch back to the code view and skin to your hearts desire
Oct
26

sIFR 3.0 Inline

Recently we’ve completed four sites for Civigroup Companies. Within those sites you’ll notice several instances of sIFR (flash replacement text) inline with content. This is no easy task for sIFR text.

While trying to accomplish this feat of magic, I spent quite a bit of time researching different aspects of sIFR and how it works with CSS to understand how to make this work properly and of course, all while being cross browser compliant! So, in order to perhaps save someone else the time and hassle of trying to figure out the magic equation, I figured I’d share my experience.

Step 1: set the sIFR class on a span tag where you want the text to be.

<span class="h1inline" style="width: 325px;">Heritage. Commitment. Vision.</span>

Notice the width style attribute, this is required to make sure safari does not include extra space behind the span and before the rest of the copy.

Step 2: set the attributes in the sIFR-screen.css sheet to make it an inline block element along with the rest of your styles.

height: 25px;
display: inline-block;
overflow: hidden;

Notice the display: inline-block; this is also a safari required attribute.

Step 3: Tune height if necessary in the sifr-config.js

tuneHeight: '-5'

This will help if you plan no not only having your sIFR text inline, but also a link. I was having difficulties with the underline of the hover state being cut off by the flash doc.

 And viola you have sIFR text inline!

Oct
21

Local Lifestyle Magazines Recieve Facelift

I’m proud to announce that Terralever launched two new sites into the world wide web this week. We have just finished production on a redesign and large back-end content management system for Cities West Publishing sites, Phoenix Home and Garden and Phoenix Magazine.

I am really proud to have been part of this success. The website may seem large and elaborate, but with the use of themes, masterpages, and dynamic content the site itself is about 20 pages in total. This was the first website in which we were really able to experiment with large scale theme usage and I learned quite a bit about how to make the front end flexible enough to reskin.

Making sure css naming conventions were simple enough to reuse through out the process was a key piece of the puzzle. I used the content to determine the class and id naming instead of color or position since both of these could change dramatically. This was not only important to switch from theme to theme within the sections of the site, but also we chose to reuse quite a bit of code from one site to the next to save cost for our client. Thus, the reasoning in similar layout from one site to the other.

Making sure each piece of content knew what month and what section it appeared in was also a large undertaking in this process, thankfully our wonderful back end development team did an amazing job of coordinating how the data manipulated the themes and sections with in the site.

In addition to the amazing design and development that went on to create the front end look and feel, there was an amazing effort on the back end administration system. Back behind all that wonderful content is an editorial staff that needs to input it in every month in a quick efficient manner! To help them with this, Terralever created an amazing custom content management system that allows the editorial staff to select which issue an article appears, what section, enter in the content and add supplemental photos to each story.

For each story the editorial staff has full access to create and layout articles however they please. They can add as many photos, call outs, etc to make each layout custom to the story it holds. To help them with this process, we created five templates for them to start with, allowing them to enter content quickly and then make the necessary additions with more photos, more call outs, etc.

The administration also gives the staff full access for the featured flash piece on the homepage, to create and edit user polls, add events, showcase photos in galleries and have users sign up for news and emails.

While these sites were a big project and some nights were spent eating at my desk instead of in front of the TV, it’s always worth it in the end. To go to a live URL and see something you’ve invested so much and learned from is amazing.  These sites are definitely two projects I’m proud to have been a part of. I hope you enjoy using them as much as I enjoyed building them.

Oct
10

Print Style Sheets and ASP.Net Themes

I’ve been researching printable style sheets, and came up with an issue on Terralever.com. How to make the theme stylesheets have a media type!

So I did some side research and came up with the most common answer out there: set an @media type in the css file itself. Read an article regarding @media type.

There was also an interesting article by the same author regarding how to define a particular load order.

This works GREAT for print stylesheets, but what about when we want to do IE6 specific styles? What then! If you’ll notice, when you set a theme, the stylesheet it populates at the end of the header tag, which would overwrite any specific stylesheets we would reference above it.

If we declare themes in the @ page declaration using StyleSheetTheme instead of just Theme the document is then populated with the css stylesheets at the beginning of the head declaration instead of at then end. More information regarding this and other theme and skin information. This would allow us to create javascript that would check for browser type/version and specify additional stylesheets for these versions if required.

Sep
5

Desert Code Camp

Come one, come all to Desert Code Camp! Want to learn more about a new technology or how your peice of the development puzzle fits in with another? Maybe you just want to hang out with a bunch of geeks for two days? 

When: September 15th & 16th

Where: UAT Campus

Classes are filling up now, so sign up on the Desert Code Camp website asap to reserve your seat.

Aug
1

Terralever Hiring

Terralever is always looking for new and creative people to join our forces. However we’re on the lookout for another Front End Architect. Below is the job posting for this position. You can also check out the other employment opportunities on the Terralever careers section.

Front End Architect 

Terralever is on the lookout for a passionate, creative, standards compliant front end architect. We’re not going to bore you with the regular “must know CSS, XHTML, yada, yada”.

The right candidate yearns for new learning experiences and has an exquisite passion and drive to be on the bleeding edge of technological revolutions. This candidate will have validation in life through amazing work and the W3C, a pixel-perfect attention to detail, an insatiable desire to be creative, and an ownership to their work that it’s the best. And a rockin’ iPod playlist doesn’t hurt.

Terralever is located on Mill Avenue in the heart of downtown Tempe, offering our employees a hip, creative atmosphere. We have a team centric work environment which allows our staff to interact with all aspects of a project. We have amazing award-winning work for national brands, but we pride ourselves more for the extraordinary group of people that make it possible.

If this sounds like you and a company you’d like to work for e-mail jobs@terralever.com with your resume and some sweet samples.

Mar
31

First WordPress Theme

YAAY!

Just finished my first wordpress theme. It was supa simple and pretty fun. WordPress has a sweet tutorial and informational section that lets you know all about WordPress and how to werk it!

Haven’t designed anything in a while so I just HAD to get out some color and sweet vector stuffs. So celebrating spring, I give you spring.fling!

Lemme know if ya like it, or if there’s some theming I missed! Thanks!!

What is this?

This little blog happens to be the personal ramblings of one April Holle - I'm female, outspoken, webbie, a community evangelist, and Principal of Made Better Studio. Check out the about section for more info.

What People Are Saying…